<template>
    <div element-loading-spinner="el-icon-loading">
        <up-down-layout :handleFlag.sync="handleFlag"  id="customerInfoMainteTaskListUpDownLayout" :bottomHeight="21" ref="taskListUpDownLayout">
            <!--客户信息维护页面-->
            <search-form :componentList="searchList" :formValue.sync="queryParas" v-model="queryParas" searchPerms="search" resetPerms="reset"
                         @handleFilter="handleFilter" @clearParam="clearParam" slot="query">
            </search-form>
            <template slot="table">
                <!--表格头部信息-->
                <el-row>
                    <el-col :span="3">
                        <span>{{$t('traceMgr.unmaintainedQuantity')}}：</span>
                        <span>{{noMaintenanceNum}}</span>
                    </el-col>
                    <el-col :span="3">
                        <span>{{$t('traceMgr.unmaintainedArea')}}：</span>
                        <span>{{noMaintenanceAreaNum}}</span>
                    </el-col>
                    <el-col :span="18">
                        <span>{{$t('traceMgr.numberOfUnmaintainedProjectCompanies')}}：</span>
                        <span>{{noMaintenanceCompanyNum}}</span>
                    </el-col>
                </el-row>
                <el-form :model="formTableData" ref="formTableData" :show-message="false">
                    <data-table :sourceData.sync="formTableData.sourceData" id="CustomerInfo"
                                :api="api" v-bind="elHeightObj"
                                :loadCount.sync="loadCount"
                                :columns="columns"
                                :border="true"
                                :stripe="true"
                                :loadPage="loadPage"
                                operateBtnLayout=""
                                :queryParas="queryParas" :menuFlag="true">
                        <el-table-column align="center"
                                         min-width="80px"
                                         :label="$t('common.operate')"
                                         fixed="right">
                            <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="handle(scope.row)"></el-button>
                              </el-tooltip>
                              <el-tooltip class="item" effect="dark" :content="$t('approval.columnName')" placement="top" v-else>
                                <el-button circle size="mini" class="iconfont iconbanli-active" @click="handle(scope.row)"></el-button>
                              </el-tooltip>
                            </template>
                        </el-table-column>
                    </data-table>
                </el-form>
            </template>
        </up-down-layout>
        <contact-info-edit :visible.sync="showContact" :menuId="menuId" :form="contactItem" @createSuccess="success" :editModel="contactModel" :regMsg="regMsg"></contact-info-edit>
        <contactor-maintain :visible="contactorVisible" :form="contactorForm" :closeContactor="closeContactor" :editModel="maintainModel"></contactor-maintain>
        <edit-contact-edit :visible.sync="showEditContact" :menuId="menuId" :regMsg="regMsg" :form="contactItem" :editModel="contactModel" @createSuccess="createSuccess"></edit-contact-edit>
    </div>
</template>
<script>
import {
  DialogEdit,
  searchForm,
  speechCraftInput,
  btnBatchDownload,
  DataTable,
  BaseSelect,
  SelectDictionary,
  SelectAreaCommissioner,
  SelectCoreEnterprise,
  btnDownload,
  upDownLayout,
  SelectSmallArea,
  SelectFinancialInstitutionsCascade,
  authButton } from 'newepoch-components'
import * as format from '@/filters/index'
import mixin from '@/pages/mixin'
import FileDownloadDialog from '@/components/tracemgr/common/businessFileDownloadDialog.vue'
import SelectKernelEnterprise from '@/components/element/SelectKernelEnterprise'
import BasePage from '@/pages/basePage'
import tracemgrApi from '@/api/tracemgrApi'
import contactInfoEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/contactInfoEdit/contactInfoEdit'
import contactorMaintain from '@/components/tracemgr/regionalCommissioner/TaskTable/customerInfoMainte/contactorMaintain'
import EditContactEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/editContactEdit'
export default {
  extends: new BasePage(),
  name: 'taskDialog',
  mixins: [mixin],
  components: {
    EditContactEdit,
    DialogEdit,
    SelectKernelEnterprise,
    tracemgrApi,
    format,
    authButton,
    searchForm,
    SelectDictionary,
    FileDownloadDialog,
    btnDownload,
    SelectAreaCommissioner,
    SelectCoreEnterprise,
    BaseSelect,
    upDownLayout,
    SelectSmallArea,
    btnBatchDownload,
    speechCraftInput,
    SelectFinancialInstitutionsCascade,
    contactInfoEdit,
    contactorMaintain,
    DataTable
  },
  mounted () {
    this.handleFilter()
    this.getStatistics()
  },
  data () {
    return {
      elOtherHeight: 150,
      tableId: 'CustomerInfo',
      contactorForm: {},
      contactorVisible: false,
      showEditContact: false,
      noMaintenanceNum: '',
      noMaintenanceCompanyNum: '',
      noMaintenanceAreaNum: '',
      contactModel: '',
      maintainModel: 'B',
      contactItem: {},
      showContact: false,
      handleFlag: true,
      viewFileDown: false,
      loadPage: 'getPage',
      loadCount: 0,
      formTableData: {
        sourceData: []
      },
      queryParas: {
        pageIndex: 1,
        pageSize: 10,
        coreEnterprise: '',
        district: '',
        nameOfCompany: '',
        status: '',
        theRegionalCommissioner: []
      },
      searchList: [
        // 核心企业（下拉）
        {
          label: this.$i18n.messages[this.$i18n.locale].common.coreEnterprise,
          value: 'coreEnterprise',
          componentName: SelectKernelEnterprise,
          store: this.$store,
          labelWidth: '70px',
          multiple: true
        },
        //   区域
        {
          value: 'district',
          disabled: false,
          componentName: SelectSmallArea,
          name: 'productType',
          label: this.$i18n.messages[this.$i18n.locale].common.district,
          cols: [24, 24, 24, 24],
          prop: 'productType',
          labelWidth: '120px',
          multiple: true
        },
        //   项目公司名称
        {
          value: 'nameOfCompany',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.input,
          disabled: false,
          componentName: 'el-input',
          dictTypeCode: 'ZD0087',
          name: 'NameOfProjectCompany',
          label: this.$i18n.messages[this.$i18n.locale].common.nameOfProjectCompany,
          cols: [24, 24, 24, 24],
          prop: 'productType',
          labelWidth: '120px'
        },
        //   状态
        {
          value: 'status',
          disabled: false,
          componentName: SelectDictionary,
          dictTypeCode: 'tracemgr_task_status',
          name: 'status',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.status,
          cols: [24, 24, 24, 24],
          prop: 'productType',
          labelWidth: '70px'
        },
        //   区域专员
        {
          value: 'theRegionalCommissioner',
          disabled: false,
          componentName: SelectAreaCommissioner,
          name: 'TheRegionalCommissioner',
          label: this.$i18n.messages[this.$i18n.locale].common.theRegionalCommissioner,
          cols: [24, 24, 24, 24],
          prop: 'TheRegionalCommissioner',
          multiple: true,
          labelWidth: '120px'
        }
      ],
      columns: [
        {
          prop: 'coreEnterpriseName',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.coreEnterprise,
          align: 'left',
          width: 120
        },
        {
          prop: 'areaName',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.district,
          align: 'left',
          width: 80
        },
        {
          prop: 'enterpriseName',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.nameOfProjectCompany,
          align: 'left',
          width: 120
        },
        {
          prop: 'modifyTime',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.updateTime,
          align: 'left',
          width: 80,
          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
          }
        },
        {
          prop: 'status',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.status,
          align: 'left',
          width: 50,
          format: (row) => { return format.formatDict(row.status + '', 'tracemgr_task_status') }
        }
      ]
    }
  },
  computed: {
    api () {
      return tracemgrApi['customerInfoMainteDialog']
    }
  },
  methods: {
    // 保存成功查询
    createSuccess () {
      this.handleFilter()
    },
    initLayout: function () {
      this.initStyle()
    },
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10
      }
    },
    success () {
      this.handleFilter()
    },
    // 办理
    handle (row) {
      if (row.accountNum === 1) {
        // 登录账号数量为1时，直接跳转办理页面
        if (row.status === '0') {
          this.contactModel = 'V'
        } else {
          this.contactModel = 'E'
        }
        this.contactItem.enterpriseId = row.enterpriseId
        this.contactItem.tagCode = row.type
        if (row.accountId === '0') {
          this.contactModel = 'E'
          this.showEditContact = true
          return
        }
        this.contactItem.keyId = row.accountId
        this.showContact = true
      } else if (row.accountNum > 1) {
        // 登录账号数量大于1时，跳转需要维护的联系人列表
        this.contactorForm = Object.assign({}, row)
        this.contactorForm.pageType = 1
        this.contactorForm.type = row.type
        this.contactorVisible = !this.contactorVisible
      }
    },
    getStatistics () {
      tracemgrApi['customerInfoMainteDialog'].getStatistics().then(res => {
        if (res.code === '0') {
          this.noMaintenanceAreaNum = res.data.noMaintenanceAreaNum
          this.noMaintenanceNum = res.data.noMaintenanceNum
          this.noMaintenanceCompanyNum = res.data.noMaintenanceCompanyNum
        }
      })
    },
    closeContactor () {
      this.contactorVisible = !this.contactorVisible
    }
  }
}
</script>

<style lang="scss" scoped>
  @import './src/styles/tracemgr/regionalCommissioner/taskTable/customerInfo.scss';
</style>
