<template>
  <dialog-edit :visible.sync="dialogVisible" :editModel="''" :form="{}"  :footerBtnShow="false" :title="$t('common.history')" :width="'80%'"  :close-on-click-modal="false" center>
    <data-table :menuFlag="false"  :handleFlag.sync="handleFlag" :loadPage="loadPage"
                :queryParas="{creditorId: this.creditor}" :sourceData.sync="formTableData.sourceData" :border="true" :stripe="true"
                :loadCount.sync="loadCount" :columns="columns" :operateBtnLayout="operateBtnLayout" v-bind="elHeightObj"
                operatWidth="0px">
    </data-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="button" size="medium" @click="dialogVisible = false">{{$t('traceMgr.pageClose')}}</el-button>
    </div>
  </dialog-edit>
</template>
<script>
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'
import { DataTable, authButton, DialogEdit } from 'newepoch-components'
import tracemgrApi from '@/api/tracemgrApi'
export default {
  extends: new BasePage(),
  name: 'personModifyHistoryDialog',
  mixins: [mixin],
  components: {
    DataTable,
    authButton,
    DialogEdit
  },
  props: {
    visible: {
      type: Boolean
    },
    form: {
      type: Object
    },
    creditor: {
      type: String
    }
  },
  mounted () {
    this.handleFilter()
  },
  data: function () {
    return {
      // 履历弹框是否显示
      isShowHistory: false,
      isManager: false,
      isLoading: false,
      styles: '',
      buttonDisable: false,
      needComplete: true,
      currentTotal: 0,
      loadPage: 'getLogList',
      loadCount: 0,
      operateBtnLayout: '',
      employeeNum: '10',
      formTableData: {
        sourceData: []
      },
      queryParas: {
        creditorId: this.creditor
      },
      item: {},
      showOperation: true,
      handleFlag: true,
      columns: [
        {
          prop: 'operateField',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.updateProject,
          showOverflowTooltip: true
        },
        {
          prop: 'operateBefore',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.modifyingValue,
          showOverflowTooltip: true
        },
        {
          prop: 'operateAfter',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.oldModifyingValue,
          showOverflowTooltip: true
        },
        {
          prop: 'operateUserName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.operator,
          showOverflowTooltip: true
        },
        {
          prop: 'modifyTime',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.operatorTime,
          showOverflowTooltip: true,
          format: function (row) {
            let date = new Date(row.modifyTime)
            let y = date.getFullYear()
            let MM = date.getMonth() + 1
            MM = MM < 10 ? ('0' + MM) : MM
            let d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            let h = date.getHours()
            h = h < 10 ? ('0' + h) : h
            let m = date.getMinutes()
            m = m < 10 ? ('0' + m) : m
            let s = date.getSeconds()
            s = s < 10 ? ('0' + s) : s
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
          }
        }
      ]
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
  },
  methods: {
    searchData (val) {
      this.queryParas.creditorId = val
      console.log(this.queryParas)
      this.isLoading = true
      return tracemgrApi['personApiList'].getLogList(this.queryParas).then(res => {
        this.formTableData.sourceData = res.data
        console.log(res.data)
        this.isLoading = false
      }, res => {
        this.isLoading = false
      })
    }

  }
}
</script>
