<template>
    <dialog-edit :appendToBody="true" :autoClose="true" @close="closeContactor" :form="form" :title="$t('traceMgr.needMaintainContactsTable')" :visible.sync="visible" class="el-dialog--center" :close-on-click-modal="false" :editModel="editModel">
        <el-row>
            <el-tabs>
                <el-tab-pane :label="$t('traceMgr.contactsInfoTable')"></el-tab-pane>
            </el-tabs>
        </el-row>
        <data-table :handleFlag.sync="handleFlag" :showSelection="true" :toolMenuFlag="false" :loadCount="loadCount"
                    :sourceData.sync="formTableData.sourceData" :menuFlag="true" operateBtnLayout="false" :api="api" ref="child"
                    :columns="columns" :border="true" :stripe="true" :queryParas="queryParas">
            <el-table-column align="center" :label="tableLabel">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="$t('common.view')" placement="top" v-if="scope.row.status === '1'">
                  <el-button circle size="mini" class="iconfont iconzuopintoupiao" @click="doSupplierAction(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="$t('common.edit')" placement="top" v-else>
                  <el-button circle size="mini" class="iconfont iconbianji" @click="doSupplierAction(scope.row)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
        </data-table>
    </dialog-edit>
</template>

<script>
import { DataTable, authButton, DialogEdit, btnBatchDownload, btnDownload } from 'newepoch-components'
import mixin from '@/pages/mixin'
import BasePage from '@/pages/basePage'
import tracemgrApi from '@/api/tracemgrApi'
import * as format from '@/filters/index'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    DataTable,
    authButton,
    DialogEdit,
    btnBatchDownload,
    btnDownload,
    tracemgrApi
  },
  data () {
    return {
      loadCount: 0,
      queryParas: {
        pageSize: 10,
        pageIndex: 1,
        enterpriseId: ''
      },
      formTableData: {
        sourceData: []
      },
      handleFlag: true,
      editModel: 'V',
      columns: [
        {
          prop: 'employeeName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.contactsName,
          showOverflowTooltip: true
        },
        {
          prop: 'telephone',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.contactsPhone,
          showOverflowTooltip: true
        },
        {
          prop: 'enterpriseName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.supplierName,
          showOverflowTooltip: true
        },
        {
          prop: 'status',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.status,
          showOverflowTooltip: true,
          format: function (row) {
            return format.formatDict(row.status + '', 'tracemgr_supplier_maintenance_task_status')
          }
        },
        {
          prop: 'startDate',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.taskInitiationTime,
          showOverflowTooltip: true
        },
        {
          prop: 'endDate',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.taskEndTime,
          showOverflowTooltip: true
        },
        {
          prop: 'taskSpendTime',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.taskSpendTime,
          showOverflowTooltip: true,
          format: function (row) {
            if (row.status === '1') {
              return '——'
            } else {
              var startDate = new Date(row.startDate)
              var endDate = new Date(row.endDate)
              var startTime = startDate.getTime()
              var endTime = endDate.getTime()
              var total = (endTime - startTime) / 1000
              var day = parseInt(total / (24 * 60 * 60))// 计算整数天数
              var afterDay = total - day * 24 * 60 * 60// 取得算出天数后剩余的秒数
              var hour = parseInt(afterDay / (60 * 60))// 计算整数小时数
              var afterHour = total - day * 24 * 60 * 60 - hour * 60 * 60// 取得算出小时数后剩余的秒数
              var min = parseInt(afterHour / 60)// 计算整数分
              var residueTime = (day === 0 ? '' : (day + row.day)) + (hour === 0 ? '' : (hour + row.hour)) + (min === 0 ? '' : (min + row.min))
              return residueTime
            }
          }
        }
      ],
      tableLabel: this.$i18n.messages[this.$i18n.locale].common.operate
    }
  },
  props: {
    visible: {
      type: Boolean
    },
    form: {
      type: Object
    },
    closeContactor: {
      type: Function
    }
  },
  methods: {

  },
  watch: {
    visible: {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.queryParas.enterpriseId = this.form.enterpriseId
          setTimeout(() => {
            this.$refs.child.loadTableData()
          }, 10)
        }
      }
    }
  },
  computed: {
    api () {
      return tracemgrApi['contactor']
    }
  }
}
</script>
