<!--日志列表-->
<template>
  <el-main class="bg_white wrap_box lcpg ">
    <!-- 搜索栏-->
    <lcSearch class="lcS" ref="theSearch" @searchhandle="searchhandle" @resethandel='resethandel'
      @logexportbt="logexportbt" type="log">
    </lcSearch>
    <!-- 表格-->
    <div>
      <vxe-table id='wlbjtable' @checkbox-change="selectionChange" @checkbox-all="selectionChange" max-height="620"
        :custom-config="{ storage: true }" border show-overflow :data="data.prlistTtable" keep-source
        :column-config="{ resizable: true }"
        :edit-config="{ trigger: 'click', mode: 'cell', showUpdateStatus: true, showInsertStatus: true }" class="ggdycss">
        <vxe-column field="id" title="序号" width="80" align="center"> </vxe-column>
        <vxe-column field="project_code" title="项目编码" width="80" align="center"> </vxe-column>
        <vxe-column field="project_name" title="项目名称" width="130" align="center"></vxe-column>
        <vxe-column field="user_name" title="变更人" width="130" align="center"></vxe-column>
        <vxe-column field="module" title="变更对象" width="130" align="center"> </vxe-column>
        <vxe-column field="type_text" title="变更类型" width="130" align="center"> </vxe-column>
        <vxe-column field="createtime" title="变更时间" width="170" align="center"> </vxe-column>
        <vxe-column field="content" title="变更内容" align="left">
          <template #default="{ row }">
            <span @click="openInfo(row.content)" style="cursor: pointer;">{{ row.content }}</span>
          </template>
        </vxe-column>
      </vxe-table>
      <!-- 分页-->
      <div class="block">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="data.page" :page-sizes="[50, 100, 150]" :page-size="formdata.size"
          layout="total, sizes, prev, pager, next, jumper" :total="data.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="变更内容" v-model="data.dialogVisible" width="50%" :before-close="handleClose" style="height: 600px;">
      <div v-html="data.content" style="white-space: pre-line;max-height: 500px;overflow: auto;"></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="data.dialogVisible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-main>
</template>
<script setup name="projectMange">
import { reactive, getCurrentInstance, ref, onMounted, onUnmounted } from 'vue';
import { projectLogSearch_data } from '../../../utils/lc_data'
import { exportlistlog } from "../../../utils/lc";
import { useRouter, useRoute } from 'vue-router';
/* 数据层 */
let route = useRoute()
// 基本信息组件值
const { proxy } = getCurrentInstance()
let formdata = reactive(JSON.parse(JSON.stringify(projectLogSearch_data)))
const data = reactive({
  prlistTtable: [],
  xtshow: false,
  selRow: [],
  total: 0,
  projectId: '',
  page: 1,
  content: '',
  dialogVisible: false
})
/* 初始化 */
const theSearch = ref()
const keyDown = (e) => {
  if (e.keyCode == 13 || e.keyCode == 100) {
    searchhandle(JSON.parse(JSON.stringify(theSearch.value.theformdata)))
  }
}
onMounted(() => {
  if (window.sessionStorage.getItem("projectLogSearchdata")) {
    formdata = theSearch.value.theformdata
  }
  if (route.query && route.query.projectName) {
    theSearch.value.theformdata.keywords = route.query.projectName
  }
  getlist()
  //绑定监听事件
  window.addEventListener('keydown', keyDown)
})
onUnmounted(() => {
  //销毁事件
  window.removeEventListener('keydown', keyDown, false)
})
/* 方法层 */
//获取列表数据
// 点击弹框显示变更内容
function openInfo (content) {
  data.content = content
  data.dialogVisible = true
}
function getlist () {
  let sudata = JSON.parse(JSON.stringify(formdata))
  sudata.start_time = sudata.thetime && sudata.thetime.length > 0 ? sudata.thetime[0] : ''
  sudata.end_time = sudata.thetime && sudata.thetime.length > 0 ? sudata.thetime[1] : ''
  // sudata.project_id = route.query && route.query.project_id ? route.query.project_id : ''
  proxy.$http.showLoading(false).get('project/log/list', sudata).then(res => {
    if (res.errno == 200) {
      data.prlistTtable = res.data.data
      data.total = res.data.total
    }
  })
}
function logexportbt () {
  let sudata = {}
  let thedata = JSON.parse(JSON.stringify(formdata))
  sudata.start_time = thedata.thetime && thedata.thetime.length > 0 ? thedata.thetime[0] : ''
  sudata.end_time = thedata.thetime && thedata.thetime.length > 0 ? thedata.thetime[1] : ''
  sudata.keywords = thedata.keywords
  sudata.user_name = thedata.user_name
  sudata.type = thedata.type
  sudata.module = thedata.module
  // sudata.task_id = route.query && route.query.task_id ? route.query.task_id : ''
  // sudata.project_id = route.query && route.query.project_id ? route.query.project_id : ''
  exportlistlog(sudata, '项目流程管理日志')
}
// 搜索
function searchhandle (value) {
  if (value) {
    formdata = value
  }
  data.page = 1
  formdata.page = 1
  getlist()
  console.log('搜索', value)
}
// 重置
function resethandel () {
  formdata = JSON.parse(JSON.stringify(projectLogSearch_data))
  data.page = 1
  formdata.page = 1
  getlist()
}
//分页条数
function handleSizeChange (val) {
  formdata.size = val
  data.page = 1
  formdata.page = 1
  getlist()
}

//分页数
function handleCurrentChange (val) {
  formdata.page = val
  data.page = val
  getlist()
}
</script>
<style scoped lang="scss">
@import '../../../assets/style/lc.scss';

::v-deep(.span_color_drag) {
  padding: 7px 16px !important;
  font-size: 12px !important;
}

.logboxmessge {
  max-height: 620px !important;
  width: 700px !important;
  overflow: auto;
}
</style>