<template>
  <dialog-edit
    :visible.sync="dialogVisible"
    :editModel="'V'"
    :form="form"
    :footerBtnShow="false"
    :title="$t('traceMgr.supplierAllocationDetails')"
    :width="'80%'"
    :close-on-click-modal="false"
    center >

    <el-row>
      <el-col :span="24">
            <span>
              <div style="margin-bottom:-10px"><span style="color: #0F78EE" class="el-dialog__title">{{$t('traceMgr.responsibleCondition')}}</span></div>
              <el-divider></el-divider>
            </span>
      </el-col>
    </el-row>

    <supplier-factoring-commissioner-history-list style="margin-top: -10px; margin-bottom: 20px" ref="historyDialog" :creditorId="this.creditorId"></supplier-factoring-commissioner-history-list>

    <el-row>
      <el-col :span="24">
            <span>
              <div style="margin-bottom:-10px"><span style="color: #0F78EE" class="el-dialog__title">{{$t('traceMgr.supplierResponsibleRecord')}}</span></div>
              <el-divider></el-divider>
            </span>
      </el-col>
    </el-row>

    <supplier-modify-history-list ref="modifyDialog" style="margin-top: -10px" :creditorId="this.creditorId"></supplier-modify-history-list>

    <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 supplierFactoringCommissionerHistoryList from '@/components/tracemgr/supplierDistribution/supplierFactoringCommissionerHistoryList'
import supplierModifyHistoryList from '@/components/tracemgr/supplierDistribution/supplierModifyHistoryList'
export default {
  extends: new BasePage(),
  name: 'supplierDistributionHistoryDialog',
  mixins: [mixin],
  components: {
    DataTable,
    authButton,
    supplierFactoringCommissionerHistoryList,
    supplierModifyHistoryList,
    DialogEdit
  },
  props: {
    visible: {
      type: Boolean
    },
    creditorId: {
      type: String
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data: function () {
    return {
      form: {},
      // 履历弹框是否显示
      isShowHistory: false,
      isManager: false,
      styles: '',
      buttonDisable: false,
      needComplete: true,
      currentTotal: 0,
      loadPage: 'getPage',
      loadCount: 0,
      operateBtnLayout: '',
      formTableData: {
        sourceData: [
          {
            updateProject: '一组',
            modifyingValue: '123',
            oldModifyingValue: '管理员',
            operator: '经理',
            operatorTime: '2019-01-04'
          }
        ]
      },
      item: {},
      showOperation: true,
      handleFlag: true,
      columns: [
        {
          prop: 'updateProject',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.updateProject,
          showOverflowTooltip: true
        },
        {
          prop: 'modifyingValue',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.modifyingValue,
          showOverflowTooltip: true
        },
        {
          prop: 'oldModifyingValue',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.oldModifyingValue,
          showOverflowTooltip: true
        },
        {
          prop: 'operator',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.operator,
          showOverflowTooltip: true
        },
        {
          prop: 'operatorTime',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.operatorTime,
          showOverflowTooltip: true
        }
      ]
    }
  },
  methods: {
    setData (val, creditorName, addTime) {
      let creditorId1 = ''
      if (val !== 'undefined') {
        creditorId1 = val
      } else {
        creditorId1 = '0'
      }
      // this.refs.historyDialog.searchData
      this.$nextTick(() => {
        this.$refs.historyDialog.searchData(creditorId1, creditorName, addTime)
      })
      this.$nextTick(() => {
        this.$refs.modifyDialog.searchData(creditorId1)
      })
    }
  }
}
</script>
