<!-- leixiaoyan 修改履历-->
<template>
    <dialog-edit
      :visible.sync="dialogVisible"
      :form="dialogForm"
      :api="api"
      :autoClose="false"
      :editModel="editModel"
      :title="$t('common.editHistory')"
      :footerVisible="footerVisible"
      width="1480px">
      <data-table ref="dataTable"
                  :sourceData.sync="sourceData"
                  :columns="columns"
                  :api="api"
                  :queryParas="queryParas"
                  :pageAll="true"
                  operateBtnLayout=""
                  :showPage="true"
                  loadPage="operateHistory"
                  max-height="400px"
                  :loadCount.sync="loadCount">
        <!-- 文字超多 出折叠收起功能 -->
        <template slot="modifyItem" slot-scope="scope">
          <span-plus :text="scope.data.row.modifyItem"></span-plus>
        </template>
        <!-- 文字超多 出折叠收起功能 -->
        <template slot="modifyBefore" slot-scope="scope">
          <span-plus :text="scope.data.row.modifyBefore"></span-plus>
        </template>
        <!-- 文字超多 出折叠收起功能 -->
        <template slot="modifyAfter" slot-scope="scope">
          <span-plus :text="scope.data.row.modifyAfter"></span-plus>
        </template>
      </data-table>
      <!-- 解决弹窗抖动问题 -->
      <div style="height:1px"></div>
    </dialog-edit>
</template>

<script>
import { DialogEdit, DataTable, SpanPlus } from 'newepoch-components'
import BaseEditPage from '@/pages/baseEditPage'
import * as format from '@/filters/index'
import knowledgeBaseApi from '@/api/assetaudit/knowledgeBaseApi'
export default {
  extends: new BaseEditPage(),
  props: {
    keyId: {
      type: [String],
      required: true
    },
    editModel: {
      type: [String],
      default: 'V'
    }
  },
  components: { DialogEdit, DataTable, format, SpanPlus },
  data () {
    return {
      dialogForm: {},
      footerVisible: true,
      sourceData: [],
      headTitleFlag: true,
      queryParas: {
        pageIndex: 1,
        pageSize: 10,
        knowledgeBaseId: ''
      },
      columns: [
        // 修改内容
        {
          prop: 'modifyItem',
          align: 'left',
          label: this.$t('knowledgeBaseIndex.modifyItem'),
          width: '150px',
          slot: true
        },
        // 原信息
        {
          prop: 'modifyBefore',
          align: 'left',
          label: this.$t('knowledgeBaseIndex.modifyBefore'),
          width: '200px',
          slot: true
        },
        // 修改后
        {
          prop: 'modifyAfter',
          align: 'left',
          label: this.$t('knowledgeBaseIndex.modifyAfter'),
          width: '200px',
          slot: true
        },
        // 操作时间
        {
          prop: 'modifyDate',
          align: 'center',
          label: this.$t('knowledgeBaseIndex.modifyDate'),
          width: '90px',
          format: (row) => {
            return format.formatDateNull(row.modifyDate, 'yyyy-MM-dd hh:mm:ss')
          }
        },
        // 操作人
        {
          prop: 'modifyPerson',
          align: 'center',
          label: this.$t('knowledgeBaseIndex.modifyPerson'),
          width: '60px'
        }
      ],
      loadCount: 0
    }
  },
  mounted () {
    // 一览数据加载
    this.$nextTick(() => {
      this.queryParas.knowledgeBaseId = this.keyId
      this.handleFilter()
    })
  },
  computed: {
    // 查询传入API接口
    api () {
      return knowledgeBaseApi.knowledgeBaseList
    }
  }
}
</script>
