<template>
  <div class="selectCoordinatorEdit">
    <dialog-edit :api="api" :visible.sync="dialogVisible" :editModel="editModel" :form="dataItem" :width="width" labelWidth="160px"
                 :title="$t('cyjg.regionCoordinator.regionCoordinatorList')" :formRules="formRules" :autoSave="autoSave" @onSaved="onSaved">
      <dym-form :componentList="componentList" :formValue="dataItem" @selectChanged="selectChanged"></dym-form>
      <!-- 计划管理人/再保理银行 -->
      <!--<el-row :gutter="10">
        <el-col :xs="23" :sm="23" :md="23" :lg="23">
          <el-form-item :label="$t('cyjg.regionCoordinator.planManager')" prop="enterpriseTypeId">
            <select-plan-manager v-model="dataItem.enterpriseTypeId" :placeholder="$t('common.pleaseSelect')" :queryParas="enterpriseParas" class="dymForm">
            </select-plan-manager>
          </el-form-item>
        </el-col>
      </el-row>-->
      <!-- 期数 -->
      <el-row :gutter="10" v-if="dataItem.productType === '1'">
        <el-col :xs="23" :sm="23" :md="23" :lg="23">
          <el-form-item :label="$t('cyjg.regionCoordinator.periods')" prop="periodsId">
            <select-period v-model="dataItem.specialPlanPeriodsId" :placeholder="editModel === 'C' ? $t('common.pleaseSelect') : ''" @selectChanged="periodsChanged" :disabled="periodsDis"
                           :queryParas="{projectId: dataItem.productId}" class="dymForm">
            </select-period>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 类型 -->
      <el-row :gutter="10">
        <el-col :xs="23" :sm="23" :md="23" :lg="23">
          <el-form-item :label="$t('cyjg.regionCoordinator.type')" prop="coordinatorType">
            <select-dictionary v-model="dataItem.coordinatorType" :placeholder="$t('common.pleaseSelect')" dictTypeCode="coordinator_type">
            </select-dictionary>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 统筹人 -->
      <el-row :gutter="10">
        <el-col :xs="23" :sm="23" :md="23" :lg="22">
          <el-form-item :label="$t('cyjg.regionCoordinator.regionCoordinator')" prop="coordinatorIds">
            <el-select v-model="dataItem.coordinatorIds" :multiple="multiple" @change="coordinatorChanged" popper-class="empty"
                        :collapse-tags="collapseTags" class="dymForm">
              <el-option v-for="item in dataItem.coordinators" :key="item.areaCoordinatorId"
                         :label="item.areaCoordinatorName" :value="item.areaCoordinatorId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <div class="wangyuanjing_icon">
          <i class="iconfont iconwangyuanjing" @click="showEdit"></i>
        </div>
      </el-row>
      <select-coordinator-edit :visible.sync="showDetail" :editModel="showModel" :form="item" :selectedData="selectedData" @chooseValue="chooseValue"></select-coordinator-edit>
    </dialog-edit>
  </div>
</template>
<script>
// 区域统筹人维护 编辑/新增
import { authButton, DialogEdit, dymForm, SelectDictionary } from 'newepoch-components'
import SelectCoordinator from '@/components/element/cyjg/SelectCoordinator.vue'
import regionCoordinatorApi from '@/api/cyjg/regionCoordinatorApi.js'
import BaseEdit from '@/pages/baseEditPage.js'
import SelectCoordinatorEdit from '@/pages/cyjg/regionCoordinator/selectCoordinatorEdit.vue'
import SelectPeriod from '@/components/element/cyjg/SelectPeriod.vue'
import SelectProduct from '@/components/element/cyjg/SelectProduct.vue'
import SelectProCoreEnterprise from '@/components/element/cyjg/SelectProCoreEnterprise.vue'
import SelectPlanManager from '@/components/element/cyjg/SelectPlanManager.vue'

export default {
  extends: new BaseEdit(),
  name: 'regionCoordinatorEdit',
  components: {
    dymForm,
    DialogEdit,
    authButton,
    SelectCoordinator,
    SelectCoordinatorEdit,
    SelectDictionary,
    SelectPeriod,
    SelectPlanManager,
    SelectProCoreEnterprise
  },
  data () {
    return {
      periodsDis: false,
      width: '650px',
      showDetail: false,
      autoSave: false,
      loadApi: false,
      showModel: 'C',
      item: {},
      selectedData: [],
      multiple: true,
      collapseTags: true,
      enterpriseParas: {
        productId: '',
        flag: '2'
      },
      periodsParas: {
        productId: ''
      },
      dataItem: {
        coreFlag: '60',
        planFlag: '110',
        productType: '',
        productId: '',
        productName: '',
        companyId: '',
        companyName: '',
        enterpriseTypeId: '',
        enterpriseTypeName: '',
        specialPlanPeriodsId: '',
        periods: 0,
        coordinatorType: '',
        coordinatorOldType: '',
        coordinatorIds: [],
        coordinators: []
      },
      componentList: [
        // 产品类型
        {
          value: 'productType',
          disabled: false,
          componentName: 'SelectDictionary',
          dictTypeCode: 'ZD0087',
          name: 'productType',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.regionCoordinator.productType,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [23, 23, 23, 23],
          prop: 'productType'
        },
        // 产品名称
        {
          value: 'productId',
          disabled: false,
          componentName: SelectProduct,
          name: 'product',
          queryName: 'productType',
          queryValue: 'productType',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.regionCoordinator.productName,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [23, 23, 23, 23],
          prop: 'productId'
        },
        // 核心企业
        {
          value: 'companyId',
          disabled: false,
          componentName: SelectProCoreEnterprise,
          queryName: ['projectId', 'enterpriseType'],
          queryValue: ['productId', 'coreFlag'],
          name: 'coreEnterprise',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.coreEnterprise,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [23, 23, 23, 23],
          prop: 'companyId'
        },
        // 计划管理人/再保理银行
        {
          value: 'enterpriseTypeId',
          disabled: false,
          componentName: SelectPlanManager,
          queryName: ['projectId', 'enterpriseType'],
          queryValue: ['productId', 'planFlag'],
          name: 'planManager',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.regionCoordinator.planManager,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [23, 23, 23, 23],
          prop: 'planManagerId'
        }
      ],
      formRules: {
        productType: [{ required: true, message: this.regMsg.regionCoordinator.productType, trigger: 'change' }],
        productId: [{ required: true, message: this.regMsg.regionCoordinator.productId, trigger: 'change' }],
        companyId: [{ required: true, message: this.regMsg.regionCoordinator.coreCompanyId, trigger: 'change' }],
        coordinatorType: [{ required: true, message: this.regMsg.regionCoordinator.type, trigger: 'change' }],
        coordinatorIds: [{ required: true, message: this.regMsg.regionCoordinator.coordinatorId, trigger: 'change' }]
      }
    }
  },
  computed: {
    api () {
      return regionCoordinatorApi.regionCoordinator
    }
  },
  methods: {
    periodsChanged (val, name, data, index) {
      if (!this.UtilJs.isEmpty(val)) {
        this.dataItem.periods = data.specialPlanPeriods
      }
    },
    selectChanged (obj) {
      let $this = this
      if (!$this.UtilJs.isEmpty(obj.productInfo)) {
        $this.enterpriseParas.productId = obj.productInfo.productId
        $this.periodsParas.productId = obj.productInfo.productId
        $this.dataItem.productName = obj.productInfo.projectName
      }
      if (!$this.UtilJs.isEmpty(obj.coreEnterpriseInfo)) {
        $this.dataItem.companyName = obj.coreEnterpriseInfo.enterpriseName
      }
      if (!$this.UtilJs.isEmpty(obj.planManagerInfo)) {
        $this.dataItem.enterpriseTypeName = obj.planManagerInfo.enterpriseName
      }
    },
    coordinatorChanged (val) {
      let $this = this
      let data = $this.dataItem.coordinators
      if (val.length > 0) {
        $this.dataItem.coordinators = []
        for (let i = 0; i < val.length; i++) {
          for (let j = 0; j < data.length; j++) {
            if (val[i] === data[j].areaCoordinatorId) {
              let p = { areaCoordinatorId: '', areaCoordinatorName: '' }
              p.areaCoordinatorId = data[j].areaCoordinatorId
              p.areaCoordinatorName = data[j].areaCoordinatorName
              $this.dataItem.coordinators.push(p)
            }
          }
        }
      } else {
        $this.dataItem.coordinators = []
      }
    },
    showEdit () {
      let $this = this
      $this.showDetail = true
      $this.selectedData = $this.dataItem.coordinators
    },
    onSaved () {
      if (this.editModel === 'E') {
        this.api.coordinatorUpdate(this.dataItem).then(res => {
          if (res && res.data) {
            this.success(this.$i18n.messages[this.$i18n.locale].cyjg.regionCoordinator.updateRegionCoordinatorSuccess)
            this.$emit('saveSuccess')
            this.dialogVisible = false
          } else {
            this.error(this.$i18n.messages[this.$i18n.locale].cyjg.regionCoordinator.updateRegionCoordinatorFailed)
          }
        })
      } else if (this.editModel === 'C') {
        this.api.create(this.dataItem).then(res => {
          if (res && res.data) {
            this.success(this.$i18n.messages[this.$i18n.locale].cyjg.regionCoordinator.addRegionCoordinatorSuccess)
            this.$emit('saveSuccess')
            this.dialogVisible = false
          } else {
            this.error(this.$i18n.messages[this.$i18n.locale].cyjg.regionCoordinator.addRegionCoordinatorFailed)
          }
        })
      }
    },
    chooseValue (val) {
      let $this = this
      $this.dataItem.coordinatorIds = []
      $this.dataItem.coordinators = []
      val.forEach(it => {
        let p = { areaCoordinatorId: '', areaCoordinatorName: '' }
        p.areaCoordinatorId = it.areaCoordinatorId
        p.areaCoordinatorName = it.areaCoordinatorName
        $this.dataItem.coordinatorIds.push(it.areaCoordinatorId)
        $this.dataItem.coordinators.push(p)
      })
    }
  },
  watch: {
    visible (val) {
      let $this = this
      if (val) {
        $this.$nextTick(() => {
          let arr = document.getElementsByClassName('el-input__icon el-icon-arrow-up')
          document.getElementsByClassName('el-input__icon el-icon-arrow-up')[arr.length - 1].style.display = 'none'
        })
        $this.dataItem = Object.assign($this.dataItem, $this.form)
        if ($this.editModel === 'E') {
          $this.dataItem.coordinatorOldType = $this.form.coordinatorType
          if ($this.dataItem.specialPlanPeriodsId === '0') {
            $this.dataItem.specialPlanPeriodsId = ''
            if ($this.dataItem.productType !== '1') {
              $this.dataItem.periods = 0
            }
          }
          if ($this.dataItem.enterpriseTypeId === '0') {
            $this.dataItem.enterpriseTypeId = ''
          }
          $this.periodsDis = true
          $this.componentList.forEach(it => {
            $this.$set(it, 'disabled', true)
            $this.$set(it, 'placeholder', '')
          })
        } else {
          $this.periodsDis = false
          $this.componentList.forEach(it => {
            $this.$set(it, 'disabled', false)
            $this.$set(it, 'placeholder', $this.$i18n.messages[this.$i18n.locale].common.pleaseSelect)
          })
        }
      } else {
        $this.dataItem = {
          coreFlag: '60',
          planFlag: '110',
          productType: '',
          productId: '',
          productName: '',
          companyId: '',
          companyName: '',
          enterpriseTypeId: '',
          enterpriseTypeName: '',
          specialPlanPeriodsId: '',
          periods: '',
          coordinatorType: '',
          coordinatorOldType: '',
          coordinatorIds: [],
          coordinators: []
        }
      }
    },
    'dataItem.productType' (now, old) {
      if (now !== old && old !== '' && this.visible) {
        this.dataItem.productId = ''
        this.dataItem.companyId = ''
        this.dataItem.enterpriseTypeId = ''
        this.dataItem.enterpriseTypeName = ''
        this.dataItem.specialPlanPeriodsId = ''
      }
    },
    'dataItem.productId' (now, old) {
      if (now !== old && old !== '' && this.visible) {
        this.dataItem.companyId = ''
        this.dataItem.enterpriseTypeId = ''
        this.dataItem.enterpriseTypeName = ''
        this.dataItem.specialPlanPeriodsId = ''
      }
    },
    'dataItem.coordinatorIds' (now, old) {
      if (now.length > 0) {
        if (this.$children[0].$refs['editForm']) {
          this.$children[0].$refs['editForm'].clearValidate('coordinatorIds')
        }
      }
    }
  }
}
</script>
<style scoped lang="scss" src="@/styles/cyjg/regionCoordinatorList/selectCoordinatorEdit.scss">
</style>
