<!-- 业务操作信息 -->
<template>
  <div>
    <search-form :componentList="searchList" :formValue.sync="searchForm"
                 @handleFilter="handleFilter" @clearParam="clearParam" @selectChanged="selectChanged" slot="query"></search-form>
    <data-table :api="api" :headTitle="$t('enterpriseInfoManage.supplierInfoManage.contactHeadTitle')"
                  :queryParas="searchForm" :sourceData.sync="sourceData" :showSelection="false" :operateBtnLayout="operateBtnLayout"
                  :menuFlag="menuFlag" @selectRowChange="selectRowChange" :columns="columns" :selectTable="selectTable"
                  :row-style="rowForbidden" ref="dataTableLocal">
        <!-- 区域 -->
<!--        <template slot="plateAreaRelDtoList" slot-scope="scope">-->
<!--          <expand-collapse :sourceData="sourceData" :colProp="'plateAreaRelDtoList'"-->
<!--                           :valueProp="'coreEnterpriseAreaName'" :rowIndex="scope.data.$index"></expand-collapse>-->
<!--          &lt;!&ndash;<div :class="scope.data.row.moreFlag ? 'base_columns' : 'base_columns_more'">&ndash;&gt;-->
<!--          &lt;!&ndash;<el-row v-for="(item, index) in scope.data.row.plateAreaRelDtoList" :key="index">&ndash;&gt;-->
<!--          &lt;!&ndash;<span>{{item.coreEnterpriseAreaName}}</span>&ndash;&gt;-->
<!--          &lt;!&ndash;</el-row>&ndash;&gt;-->
<!--          &lt;!&ndash;</div>&ndash;&gt;-->
<!--        </template>-->
        <!-- 合同名称 -->
      <template slot="plateContractRelDtoList" slot-scope="scope">
        <expand-collapse :sourceData="sourceData" :colProp="'projectPlateContractRelDTOList'"
                         :valueProp="'contractName'" :rowIndex="scope.data.$index"></expand-collapse>
      </template>
<!--        <template slot="plateContractRelDtoList" slot-scope="scope">-->
<!--          <expand-collapse :sourceData="sourceData" :colProp="'plateContractRelDtoList'"-->
<!--                           :valueProp="'contractName'" :rowIndex="scope.data.$index"></expand-collapse>-->
<!--          &lt;!&ndash;<div :class="scope.data.row.moreFlag ? 'base_columns' : 'base_columns_more'">&ndash;&gt;-->
<!--          &lt;!&ndash;<el-row v-for="(item, index) in scope.data.row.plateContractRelDtoList" :key="index">&ndash;&gt;-->
<!--          &lt;!&ndash;<span>{{item.contractName}}</span>&ndash;&gt;-->
<!--          &lt;!&ndash;</el-row>&ndash;&gt;-->
<!--          &lt;!&ndash;</div>&ndash;&gt;-->
<!--        </template>-->
        <!-- 联系人 -->
        <template slot="employeeDtoList" slot-scope="scope">
          <expand-collapse :sourceData="sourceData" :colProp="'employeeDtoList'"
                           :valueProp="'employeeName'" :rowIndex="scope.data.$index"></expand-collapse>
          <!--<div :class="scope.data.row.moreFlag ? 'base_columns' : 'base_columns_more'">-->
          <!--<el-row v-for="(item, index) in scope.data.row.employeeDtoList" :key="index">-->
          <!--<span>{{item.employeeName}}</span>-->
          <!--</el-row>-->
          <!--</div>-->
        </template>
        <!-- 手机号码 -->
        <template slot="employeeDtoListmobilePhone" slot-scope="scope">
          <expand-collapse :sourceData="sourceData" :colProp="'employeeDtoList'"
                           :valueProp="'telephone'" :rowIndex="scope.data.$index"></expand-collapse>
          <!--<div :class="scope.data.row.moreFlag ? 'base_columns' : 'base_columns_more'">-->
          <!--<el-row v-for="(item, index) in scope.data.row.employeeDtoList" :key="index">-->
          <!--<span>{{item.telephone}}</span>-->
          <!--</el-row>-->
          <!--</div>-->
        </template>
      </data-table>
  </div>
</template>

<script>
import * as format from '@/filters/index.js'
import { upDownLayout, searchForm, dymForm, DataTable, authButton, ExpandCollapse } from 'newepoch-components'
import SelectArea from '@/components/element/enterpriseInfoManage/SelectArea.vue'
import SelectContract from '@/components/element/enterpriseInfoManage/SelectContract.vue'
import supplierInfoManageApi from '@/api/enterpriseInfoManage/supplierInfoManageApi.js'
import BasePage from '@/pages/basePage'
import CreateContactEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/createContactEdit.vue'
import ContactInfoEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/contactInfoEdit.vue'
import ContactRecordEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/contactRecordEdit.vue'
import DelHintEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/delHintEdit.vue'
import ContactMaintainEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/contactMaintainEdit.vue'
import editContactEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/editContactEdit.vue'
import storage from '@/utils/storage'
export default {
  extends: new BasePage(),
  name: 'businessOperateInfo',
  components: {
    upDownLayout,
    searchForm,
    dymForm,
    DataTable,
    authButton,
    SelectArea,
    SelectContract,
    CreateContactEdit,
    ContactInfoEdit,
    ContactRecordEdit,
    DelHintEdit,
    ContactMaintainEdit,
    editContactEdit,
    ExpandCollapse
  },
  props: {
    enterpriseType: {
      type: String,
      default: function () {
        return null
      }
    }
  },
  data () {
    return {
      pa: '',
      menuFlag: true,
      showSelection: true,
      showContact: false,
      // 编辑属性
      showEditContact: false,
      showRecord: false,
      showDelInfo: false,
      reloadContract: false,
      contactModel: '',
      recordModel: '',
      contactItem: {},
      operateBtnLayout: '',
      // 当前企业ID
      currentId: '',
      searchForm: {
        pageIndex: 1,
        pageSize: 10,
        employeeName: '',
        regionCode: '',
        account: '',
        employeeAccountType: '',
        businessStatus: '',
        contractId: '',
        bizMode: ''
      },
      sourceData: [],
      searchList: [
        // 联系人
        {
          value: 'employeeName',
          disabled: false,
          clearable: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.contact,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '130px'
        },
        // 区域
        {
          value: 'regionCodeTemp',
          disabled: false,
          clearable: true,
          componentName: SelectArea,
          name: 'regionCode',
          multiple: false,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.area,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '130px'
        },
        // 登录账号
        {
          value: 'account',
          disabled: false,
          clearable: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.loginAccount,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '130px'
        },
        // 账号类型
        {
          value: 'employeeAccountType',
          disabled: false,
          clearable: true,
          componentName: 'SelectDictionary',
          dictTypeCode: 'create_account_type',
          store: this.$store,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.accountType,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '130px'
        },
        // 是否做业务
        {
          value: 'businessStatus',
          disabled: false,
          clearable: true,
          componentName: 'SelectDictionary',
          dictTypeCode: 'ZD0003',
          store: this.$store,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.doBusiness,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '130px'
        },
        // 合同名称
        {
          value: 'contractId',
          disabled: false,
          clearable: true,
          componentName: SelectContract,
          queryName: 'enterpriseId',
          queryValue: 'enterpriseId',
          reload: this.reloadContract,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.contractName,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '130px'
        },
        // 业务模式
        {
          value: 'bizMode',
          disabled: false,
          clearable: true,
          componentName: 'SelectDictionary',
          dictTypeCode: 'biz_mode',
          store: this.$store,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.businessModel,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '130px'
        }
      ],
      columns: [
        // 账号类型
        {
          prop: 'employeeAccountType',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.accountType,
          width: '50px',
          format: (row) => {
            return format.formatDict(row.employeeAccountType, 'create_account_type')
          }
        },
        // 是否做业务
        {
          prop: 'businessStatus',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.doBusiness,
          width: '40px',
          format: (row) => { return format.formatDict(row.businessStatus, 'ZD0003') }
        },
        // // 区域
        // {
        //   prop: 'plateAreaRelDtoList',
        //   align: 'left',
        //   label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.area,
        //   width: '80px',
        //   slot: true
        // },
        // 合同名称
        {
          prop: 'plateContractRelDtoList',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.contractName,
          width: '120px',
          slot: true
        },
        // 登录账号
        {
          prop: 'account',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.loginAccount,
          width: '40px'
        },
        // 联系人
        {
          prop: 'employeeDtoList',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.contact,
          width: '50px',
          slot: true
        },
        // 手机号码
        {
          prop: 'employeeDtoListmobilePhone',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.mobilePhone,
          width: '',
          slot: true
        }
      ]
    }
  },
  computed: {
    menuId () {
      return storage.getLocal('params').menuId
    },
    api () {
      return supplierInfoManageApi.busnisssApi
    }
  },
  activated () {
    let pa = storage.getLocal('params')
    if (this.currentId !== pa.enterpriseId.toString()) {
      this.sourceData = []
    }
    this.currentId = pa.enterpriseId.toString()
    this.$set(this.searchForm, 'enterpriseId', pa.enterpriseId.toString())
    this.$set(this.searchForm, 'tagCode', pa.tagCode.toString())
    this.reloadContract = !this.reloadContract
  },
  mounted () {
    this.$nextTick(() => {
      this.$el.getElementsByClassName('el-checkbox')[7].style.display = 'none'
      let pa = storage.getLocal('params')
      if (this.currentId !== pa.enterpriseId.toString()) {
        this.sourceData = []
      }
      this.$set(this.searchForm, 'enterpriseId', pa.enterpriseId.toString())
      this.$set(this.searchForm, 'tagCode', pa.tagCode.toString())
      this.reloadContract = !this.reloadContract
    })
  },
  methods: {
    // 接收到创建成功刷新
    createSuccess () {
      this.handleFilter()
    },
    // 区域
    selectChanged (selectObj) {
      if (selectObj['regionCodeInfo'] && selectObj['regionCodeInfo'].length >= 1) {
        this.searchForm.regionCode = selectObj['regionCodeInfo'][0].areaId
      } else {
        this.searchForm.regionCode = ''
      }
    },
    handleFilter () {
      this.$set(this.searchForm, 'enterpriseId', this.pa.enterpriseId.toString())
      this.$set(this.searchForm, 'tagCode', this.pa.tagCode.toString())
      this.getList(this.searchForm)
    },
    // 查询
    getList (parmas) {
      let that = this
      let keys = Object.keys(parmas)
      keys.forEach(it => {
        if (parmas[it] === '' || parmas[it].length === 0) {
          delete parmas[it]
        }
      })
      that.$refs['dataTableLocal'].vLoading = true
      supplierInfoManageApi.invoiceListApi.getbussList(parmas).then(res => {
        res.data.datas.forEach(it => {
          // it.businessInfo = day
          // if (it.employeeDtoList.length > 3 || it.plateAreaRelDtoList.length > 3 || it.plateContractRelDtoList.length > 3) {
          //   this.$set(it, 'moreFlag', true)
          //   this.$set(it, 'btnFlag', true)
          // } else {
          //   this.$set(it, 'moreFlag', false)
          //   this.$set(it, 'btnFlag', false)
          // }
        })
        that.$refs['dataTableLocal'].buildTableData(res.data.datas, res.data.totalRow)
      }).finally(() => {
        that.$refs['dataTableLocal'].vLoading = false
      })
    },
    // 复选框勾选数据
    selectRowChange (val) {
      this.selectedRows = val
    },
    batchDel () {
      if (this.selectedRows.length > 0) {
        let employeeIds = []
        let keyIds = []
        let accountIds = []
        this.selectedRows.forEach(it => {
          keyIds.push(it.keyId)
          accountIds.push(it.accountId)
          it.employeeDtoList.forEach(it1 => {
            employeeIds.push(it1.keyId)
          })
        })
        this.editModel = 'D'
        this.item = Object.assign({ employeeIds: employeeIds, keyIds: keyIds, enterpriseId: this.searchForm.enterpriseId, tagCode: this.searchForm.tagCode, accountIds: accountIds })
        this.showDelInfo = true
      } else {
        this.warning('请先勾选数据')
      }
    },
    // 新增
    showCreate () {
      this.editModel = 'C'
      // 供应商名称
      this.item = { tagCode: this.searchForm.tagCode, enterpriseId: this.searchForm.enterpriseId }
      this.showDetail = true
    },
    // 编辑
    showEdit (data) {
      this.contactModel = 'E'
      if (data.employeeAccountType && data.account) {
        this.contactItem = Object.assign({ tagCode: this.searchForm.tagCode }, data)
        this.showContact = true
      } else {
        this.showEditContact = true
        if (data.employeeInfoDto && data.employeeInfoDto.enterpriseDeptId === '0') {
          data.employeeInfoDto.enterpriseDeptId = ''
        }
        if (data.factoringResponsibility === '-1') {
          data.factoringResponsibility = ''
        }
        this.contactItem = Object.assign({
          employeeType: this.searchForm.tagCode,
          enterpriseId: this.searchForm.enterpriseId,
          enterpriseName: storage.getLocal('params').enterpriseName,
          deptId: data.employeeInfoDto.enterpriseDeptId,
          position: data.employeeInfoDto.position,
          factoringResponsibility: data.factoringResponsibility,
          cenerateType: '0' }, data.employeeDtoList[0])
      }
    },
    // 联系人履历
    showRecordEdit (data) {
      this.recordModel = 'V'
      this.item = Object.assign({}, data)
      this.showRecord = true
    },
    // 重置密码
    reset (rowData) {
      let $this = this
      $this.$confirm(this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.restPassward, this.$i18n.messages[this.$i18n.locale].common.tip, {
        confirmButtonText: this.$i18n.messages[this.$i18n.locale].common.assign,
        cancelButtonText: this.$i18n.messages[this.$i18n.locale].common.cancel,
        type: 'warning'
      }).then(() => {
        supplierInfoManageApi.accountApi.resetPassword(rowData.keyId).then(res => {
          if (res.data) {
            $this.success($this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.midifyPassWordsu)
          } else {
            $this.error($this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.midifyPassWordfa)
          }
        })
      })
    },
    // 恢复账号
    restoreAccount (rowData) {
      let $this = this
      $this.$confirm(this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.recoveryAccount, this.$i18n.messages[this.$i18n.locale].common.tip, {
        confirmButtonText: this.$i18n.messages[this.$i18n.locale].common.assign,
        cancelButtonText: this.$i18n.messages[this.$i18n.locale].common.cancel,
        type: 'warning'
      }).then(() => {
        supplierInfoManageApi.accountApi.setAccountStatus(rowData).then(res => {
          if (res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.midifyTextSues)
            $this.handleFilter()
          } else {
            $this.error(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.midifyTextfail)
          }
        })
      })
    },
    // 账号禁用
    rowForbidden ({ row, index }) {
      if (row.delStatus === '1') {
        return 'color: #cccbcb'
      } else {
        return 'color: #606266;'
      }
    },
    // 勾选框禁用
    selectTable (row) {
      if (row.delStatus === '1' || row.delStatus === null) {
        return false
      } else {
        return true
      }
    },
    // 展开收起
    changeRow (index, data) {
      // this.sourceData[index].moreFlag = !data.moreFlag
      let $this = this
      $this.$set($this.sourceData[index], 'moreFlag', !data.moreFlag)
    },
    // 重置
    clearParam () {
      this.searchForm = {
        pageIndex: 1,
        pageSize: 10,
        // employeeName: '',
        // regionCode: '',
        // account: '',
        enterpriseId: this.searchForm.enterpriseId,
        tagCode: this.searchForm.tagCode
        // employeeAccountType: '',
        // businessStatus: '',
        // contractId: '',
        // bizMode: ''
      }
    }
  },
  watch: {
    showDelInfo (val) {
      if (!val) {
        this.handleFilter()
      }
    },
    'searchForm.employeeAccountType' (val) {
      if (val) {
        if (val === '1') {
          // this.searchForm.bizMode = '1'
          this.$set(this.searchForm, 'bizMode', '1')
        }
      } else {
        this.$set(this.searchForm, 'bizMode', '')
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import '~@/styles/enterpriseInfoManage/supplierInfoManage/businessOperateInfo.scss';
</style>
