<!--相关人员tab子组件-->
<template>
  <div style="margin-top:20px">
      <el-form>
        <dym-form :componentList="componentList" :formValue="userForm"></dym-form>
      </el-form>
    <data-table :api="getTraceListApi"
                loadPage="getList"
                :loadCount.sync="loadCount"
                :queryParas="queryParas"
                @handleFilter="handleFilter"
                :columns="columns"
                :showPage="false"
                max-height="250"
                ref="dataTable">
            <!-- 跟进人管理 -->
            <template slot="headButton">
                <div align="right">
                  <auth-button type="primary" size="medium" :label="$t('coordManageMain.addTrace')" class="iconfont icontianjiagenjinren" @click="showTraceUserSetup('C')"></auth-button>
                </div>
            </template>
            <template slot="busyMemo" slot-scope="scope">
              <span-plus :index="scope.data.$index" :text="scope.data.row.busyMemo"></span-plus>
            </template>
            <template slot="operation" slot-scope="scope">
                <auth-button :title="$t('common.edit')" class="iconCircle marginLeft" icon="iconfont iconbianji" @click="showTraceUserSetup('E',scope.data.row)"></auth-button>
                <auth-button :title="$t('common.delete')" class="iconCircle marginLeft" icon="iconfont iconshanchu1" @click="deleteData(scope.data.row)"></auth-button>
            </template>
    </data-table>
    <trace-user-setup-sub :editModel="editModel" v-if="dialogVisible" :visible.sync="dialogVisible" :form="projectForm" @traceInfoUpdate="traceInfoUpdate"></trace-user-setup-sub>
  </div>
</template>
<script>
import { dymForm, DataTable, authButton, SpanPlus } from 'newepoch-components'
import traceUserSetupSub from '@/pages/assetoutfeedback/coordManage/traceUserSetupSub'
import coordManageApi from '@/api/assetoutfeedback/coordManage/coordManageApi'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'
// import * as format from '@/filters/index'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'coordFeedBackSub',
  components: {
    dymForm,
    DataTable,
    authButton,
    SpanPlus,
    traceUserSetupSub
  },
  props: {
    projectInfo: {
      type: [Object],
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      editModel: 'V',
      componentList: [
        {
          // 客服负责人
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.kffzr,
          disabled: true,
          value: 'customerPrincipal',
          prop: 'customerPrincipal',
          labelWidth: '130px',
          cols: [8, 8, 8],
          componentName: 'el-input'
        },
        {
          // 区域负责人
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.qyfzr,
          disabled: true,
          value: 'regionalHead',
          prop: 'regionalHead',
          labelWidth: '130px',
          cols: [8, 8, 8],
          componentName: 'el-input'
        },
        {
          // 业务负责人
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.ywfzr,
          disabled: true,
          value: 'businessLeader',
          prop: 'businessLeader',
          labelWidth: '130px',
          cols: [8, 8, 8],
          componentName: 'el-input'
        },
        {
          // 项目单证负责人
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.xmdzfzr,
          disabled: true,
          value: 'projectDocLeader',
          prop: 'projectDocLeader',
          labelWidth: '130px',
          cols: [8, 8, 8],
          componentName: 'el-input'
        },
        {
          // 金融部负责人
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.jrbfzr,
          disabled: true,
          value: 'financialLeader',
          prop: 'financialLeader',
          labelWidth: '130px',
          cols: [8, 8, 8],
          componentName: 'el-input'
        },
        {
          // 律所负责人
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.lsfzr,
          disabled: true,
          value: 'lawFirmLeader',
          prop: 'lawFirmLeader',
          labelWidth: '130px',
          cols: [8, 8, 8],
          componentName: 'el-input'
        }
      ],
      userForm: {
        'customerPrincipal': '',
        'regionalHead': '',
        'businessLeader': '',
        'projectDocLeader': '',
        'financialLeader': '',
        'lawFirmLeader': ''
      },
      columns: [
        {
          // 姓名
          prop: 'traceUserName',
          align: 'left',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.userName
        },
        {
          // 未解决资产情况
          prop: 'assetInfoCount',
          align: 'center',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.assetInfoCount
        },
        {
          // 闲忙备注
          prop: 'busyMemo',
          align: 'left',
          width: '150px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.busyMemo
        },
        {
          // 是否复核
          prop: 'reviewFlag',
          align: 'center',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.reviewFlag,
          format: (row) => {
            return row.reviewFlag === '2' ? '是' : '否'
          }
        },
        {
          // 是否发送抽查清单人员
          prop: 'sendListFlag',
          align: 'center',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.sendListFlag,
          format: (row) => {
            return row.sendListFlag === '2' ? '是' : '否'
          }
        },
        {
          // 操作
          prop: 'operation',
          align: 'center',
          fixed: 'right',
          slot: true,
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].common.operate
        }
      ],
      sourceData: [],
      delAlertMsg: '确认删除该条数据？',
      traceForm: {},
      form: {}
    }
  },
  computed: {
    getTraceListApi () {
      return coordManageApi.getTraceList
    },
    deleteApi () {
      return coordManageApi.deleteTrace
    },
    relatedUserApi () {
      return coordManageApi.dzName
    }
  },
  watch: {
    projectInfo: function (newValue, old) {
      this.getRelatedUser()
      this.getData()
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getData()
      this.getRelatedUser()
    },
    // 获取相关人员
    getRelatedUser () {
      let params = {
        productId: this.projectInfo.projectId
      }
      this.relatedUserApi.getList(params).then(res => {
        this.userForm = {
          businessLeader: '',
          customerPrincipal: '',
          financialLeader: '',
          lawFirmLeader: '',
          projectDocLeader: '',
          regionalHead: ''
        }
        if (res.success && res.data && res.data.coordinators) {
          if (res.data.coordinators.length > 0) {
            res.data.coordinators.forEach(item => {
              if (item.coordinatorType === '1') {
                this.userForm.regionalHead = this.userForm.regionalHead
                  ? this.userForm.regionalHead + ',' + item.areaCoordinatorName
                  : item.areaCoordinatorName
              }
              if (item.coordinatorType === '7') {
                this.userForm.financialLeader = this.userForm.financialLeader
                  ? this.userForm.financialLeader + ',' + item.areaCoordinatorName
                  : item.areaCoordinatorName
              }
              if (item.coordinatorType === '3') {
                this.userForm.lawFirmLeader = this.userForm.lawFirmLeader
                  ? this.userForm.lawFirmLeader + ',' + item.areaCoordinatorName
                  : item.areaCoordinatorName
              }
              if (item.coordinatorType === '4') {
                this.userForm.projectDocLeader = this.userForm.projectDocLeader
                  ? this.userForm.projectDocLeader + ',' + item.areaCoordinatorName
                  : item.areaCoordinatorName
              }
              if (item.coordinatorType === '5') {
                this.userForm.customerPrincipal = this.userForm.customerPrincipal
                  ? this.userForm.customerPrincipal + ',' + item.areaCoordinatorName
                  : item.areaCoordinatorName
              }
              if (item.coordinatorType === '6') {
                this.userForm.businessLeader = this.userForm.businessLeader
                  ? this.userForm.businessLeader + ',' + item.areaCoordinatorName
                  : item.areaCoordinatorName
              }
            })
          }
        }
        console.log(this.userForm)
      })
    },
    getData () {
      Object.assign(this.queryParas, this.projectInfo)
      if (JSON.stringify(this.projectInfo) !== '{}') {
        this.handleFilter()
      }
    },
    traceInfoUpdate (data) {
      if (data) {
        this.$nextTick(() => {
          this.getData()
        })
      }
    },
    // 删除
    deleteData (data) {
      this.$confirm(this.delAlertMsg, '提示', {
        type: 'warning'
      }).then(() => {
        this.deleteApi.putData({ keyId: data.mgrKeyId, modifyTime: data.modifyTime }).then(res => {
          if (res.data) {
            this.success('删除成功')
            this.$nextTick(() => {
              this.getData()
            })
          } else {
            this.error('删除失败')
          }
        })
      })
    },
    showTraceUserSetup (editModel, data) {
      if (editModel === 'E') {
        this.projectForm = {
          keyId: data.infoKeyId,
          periods: this.projectInfo.periods,
          projectId: this.projectInfo.projectId,
          projectName: this.projectInfo.projectName,
          traceUserId: data.traceUserId
        }
      } else {
        this.projectForm = this.projectInfo
      }
      this.editModel = editModel
      this.dialogVisible = true
    }
  }
}
</script>
