<template>
  <div>
    <dialog-edit v-if="dialogVisible" :appendToBody="true" :autoClose="true" @close="close" :form="form" :title="$t('traceMgr.needMaintainContactsTable')" :visible.sync="dialogVisible" 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" fixed="right">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="$t('common.view')" placement="top" v-if="scope.row.status === '0'">
              <el-button circle size="mini" class="iconfont iconzuopintoupiao" @click="doAction(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="doAction(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </data-table>
    </dialog-edit>
    <contact-info-edit :visible.sync="showEditContactEdit" :menuId="menuId" :form="contactorForm" @createSuccess="success" :editModel="contactModel" :regMsg="regMsg"></contact-info-edit>
    <edit-contact-edit :visible.sync="showEditContact" :menuId="menuId" :regMsg="regMsg" :form="contactItem" :editModel="contactModel" @createSuccess="createSuccess"></edit-contact-edit>
  </div>
</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'
import contactInfoEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/contactInfoEdit/contactInfoEdit'
import EditContactEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/editContactEdit'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    EditContactEdit,
    DataTable,
    authButton,
    DialogEdit,
    btnBatchDownload,
    btnDownload,
    contactInfoEdit,
    tracemgrApi
  },
  data () {
    return {
      saveObject: {
        keyId: '',
        status: '1'
      },
      contactModel: '',
      contactItem: {},
      contactorForm: {},
      showEditContact: false,
      showEditContactEdit: false,
      loadCount: 0,
      queryParas: {
        pageSize: 10,
        pageIndex: 1,
        enterpriseId: '',
        type: ''
      },
      formTableData: {
        sourceData: []
      },
      handleFlag: true,
      columns: [
        {
          prop: 'accountName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.contactAccount,
          showOverflowTooltip: true,
          width: 100
        },
        {
          prop: 'employeeName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.contactsName,
          showOverflowTooltip: true,
          width: 100,
          format: function (row) {
            if (row.employeeName.indexOf(',') >= 0) {
              let teArr = row.employeeName.split(',')
              let tempStr = ''
              for (let i = 0; i < teArr.length; i++) {
                tempStr += teArr[i] + '\n'
              }
              return tempStr
            } else {
              return row.employeeName
            }
          }
        },
        {
          prop: 'telephone',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.contactsPhone,
          width: 115,
          format: function (row) {
            if (row.telephone.indexOf(',') >= 0) {
              let teArr = row.telephone.split(',')
              let tempStr = ''
              for (let i = 0; i < teArr.length; i++) {
                tempStr += teArr[i] + '\n'
              }
              return tempStr
            } else {
              return row.telephone
            }
          }
        },
        {
          prop: 'enterpriseName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.supplierName,
          showOverflowTooltip: true,
          width: 200
        },
        {
          prop: 'status',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.status,
          showOverflowTooltip: true,
          format: function (row) {
            if (parseInt(row.status) >= 1) {
              return format.formatDict('0', 'tracemgr_supplier_maintenance_task_status')
            }
            if (row.status === '0') {
              return format.formatDict('1', 'tracemgr_supplier_maintenance_task_status')
            }
          },
          width: 100
        },
        {
          prop: 'startDate',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.taskInitiationTime,
          showOverflowTooltip: true,
          width: 200,
          format: function (row) {
            if (row.startDate === '1900-01-01 00:00:00') {
              return ''
            } else {
              return row.startDate
            }
          }
        },
        {
          prop: 'endDate',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.taskEndTime,
          showOverflowTooltip: true,
          width: 200,
          format: function (row) {
            if (row.endDate === '1900-01-01 00:00:00') {
              return ''
            } else {
              return row.endDate
            }
          }
        },
        {
          prop: 'taskSpendTime',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.taskSpendTime,
          showOverflowTooltip: true,
          format: function (row) {
            if (row.status === '0') {
              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
            }
          },
          width: 200
        }
      ],
      tableLabel: this.$i18n.messages[this.$i18n.locale].common.operate
    }
  },
  props: {
    visible: {
      type: Boolean
    },
    form: {
      type: Object
    },
    closeContactor: {
      type: Function
    }
  },
  methods: {
    // 保存成功查询
    createSuccess () {
      this.handleFilter()
    },
    close () {
      this.dialogVisible = false
      this.closeContactor()
    },
    doAction (row) {
      if (row.status === '0') {
        this.contactModel = 'V'
      } else {
        this.contactModel = 'E'
      }
      if (this.form.accountId === '0') {
        this.contactItem.enterpriseId = row.enterpriseId
        this.contactItem.tagCode = this.form.type
        this.showEditContact = true
        return
      }
      this.contactorForm.keyId = this.form.accountId
      this.contactorForm.enterpriseId = row.enterpriseId
      this.contactorForm.tagCode = this.form.type
      this.saveObject.keyId = row.keyId
      this.showEditContactEdit = true
    },
    success () {
      // 保存完成 更新此联系人账号的所有联系人为已完成
      tracemgrApi['contactor'].updateContact(this.saveObject).then(res => {
        if (res.data) {
          this.$refs.child.loadTableData()
        }
      })
    }
  },
  watch: {
    visible: {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.queryParas.enterpriseId = this.form.enterpriseId
          this.queryParas.type = this.form.type
          setTimeout(() => {
            this.$refs.child.loadTableData()
          }, 20)
        } else {
          this.formTableData.sourceData = []
        }
      }
    }
  },
  computed: {
    api () {
      return tracemgrApi['contactor']
    },
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    }
  }
}
</script>
<style lang="scss">
  @import './src/styles/dataAudit/assetInfo/contanor.scss';
</style>
