<template>
  <div>
    <dialog-edit ref="dialog" :visible.sync="dialogVisible" :title="$t('ladingManageList.batchUpload')" width="600px"
                 :loading="saveLoading" :menuCode="menuCode" savePerms="batchUploadConfirm" :openPerms="true"
                 :api="api" :form="batchUploadEditform" :editModel="editModel" :formRules="formRules" :autoSave="false" @onSaved="onSaved">
      <dym-form :formValue.sync="batchUploadEditform" :componentList="componentList" @selectChanged="batchUploadEditselectChanged"></dym-form>
      <el-form-item :label="$t('ladingManageList.annex')" :prop="'fileName'" label-width="170px">
        <el-input v-model="batchUploadEditform.fileName" size="medium" :disabled="true" class="inputCss"></el-input>
        <btn-batch-upload :uploadApi="batchUploadApi" :btnDisplay="true"
                          btnSize="medium"
                          :menuCode="menuCode" perms="batchUpload" :openPerms="true"
                          :batchUploadName="$t('common.upload')" @uploadSuccess="uploadSuccess"></btn-batch-upload>
      </el-form-item>
    </dialog-edit>
  </div>
</template>

<script>
import { DialogEdit, dymForm, authButton, btnBatchUpload,
  SelectProductName, SelectCoreEnterpriseCascade, SelectFinancialInstitutionsCascade, SelectPeriodsCascade } from 'newepoch-components'
import BaseEditPage from '@/pages/baseEditPage'
import ladingManageApi from '@/api/ladingManageApi'
import { BATCH_UPLOAD_API } from '@/constant'
import componentsApi from '@/api/componentsApi'
export default {
  extends: new BaseEditPage(''),
  components: {
    DialogEdit,
    dymForm,
    authButton,
    btnBatchUpload
  },
  props: {
    menuCode: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      saveLoading: false,
      batchUploadEditform: {},
      formRules: {
        projectId: [
          {
            required: true,
            message: this.$i18n.messages[this.$i18n.locale].ladingNoticeManage.selectproductName,
            trigger: 'change'
          }
        ],
        coreEnterpriseId: [
          {
            required: true,
            message: this.$i18n.messages[this.$i18n.locale].ladingNoticeManage.selectcoreEnterprise,
            trigger: 'change'
          }
        ],
        planningManagerId: [
          {
            required: true,
            message: this.$i18n.messages[this.$i18n.locale].ladingNoticeManage.selectplanningManagerName,
            trigger: 'change'
          }
        ],
        batchDate: [
          {
            required: true,
            message: this.$i18n.messages[this.$i18n.locale].ladingManageList.ladingManageList,
            trigger: 'change'
          }
        ],
        specialPlanId: [
          {
            required: false,
            message: this.$i18n.messages[this.$i18n.locale].ladingNoticeManage.selectspecialPlanPeriods,
            trigger: 'blur'
          }
        ],
        fileName: [
          {
            required: true,
            message: this.$i18n.messages[this.$i18n.locale].ladingNoticeManage.validBatchUpload,
            trigger: 'blur'
          }
        ]
      },
      batchUploadApi: BATCH_UPLOAD_API,
      componentList: [
        // 产品名称
        {
          label: this.$i18n.messages[this.$i18n.locale].common.productName,
          value: 'projectId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [24, 24, 24, 24],
          componentName: SelectProductName,
          prop: 'projectId',
          labelWidth: '170px',
          name: 'product'
        },
        // 核心企业
        {
          label: this.$i18n.messages[this.$i18n.locale].common.coreEnterprises,
          value: 'coreEnterpriseId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [24, 24, 24, 24],
          queryName: 'projectId',
          queryValue: 'projectId',
          componentName: SelectCoreEnterpriseCascade,
          prop: 'coreEnterpriseId',
          labelWidth: '170px'
        },
        // 计划管理人/再保理银行
        {
          label: this.$i18n.messages[this.$i18n.locale].common.refactorBank,
          value: 'planningManagerId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [24, 24, 24, 24],
          queryName: 'projectId',
          queryValue: 'projectId',
          componentName: SelectFinancialInstitutionsCascade,
          prop: 'planningManagerId',
          labelWidth: '170px'
        },
        // 批次日期
        {
          label: this.$i18n.messages[this.$i18n.locale].ladingManageList.batchDate,
          value: 'batchDate',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [24, 24, 24, 24],
          componentName: 'el-date-picker',
          prop: 'batchDate',
          labelWidth: '170px'
        }
      ],
      // 期数
      specialPlanId: {
        label: this.$i18n.messages[this.$i18n.locale].common.periodsNum,
        value: 'specialPlanId',
        placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
        cols: [24, 24, 24, 24],
        componentName: SelectPeriodsCascade,
        queryName: 'projectId',
        queryValue: 'projectId',
        prop: 'specialPlanId',
        labelWidth: '170px'
      },
      // 批次日期
      batchDate: {
        label: this.$i18n.messages[this.$i18n.locale].ladingManageList.batchDate,
        value: 'batchDate',
        placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
        cols: [24, 24, 24, 24],
        componentName: 'el-date-picker',
        prop: 'batchDate',
        labelWidth: '170px'
      }
    }
  },
  computed: {
    api: function () {
      return ladingManageApi.batchUploadEdit
    }
  },
  methods: {
    onSaved (data) {
      this.saveLoading = true
      this.api.update(data).then(res => {
        if (res.success) {
          this.success(this.$i18n.messages[this.$i18n.locale].ladingNoticeManage.piSuess)
          this.dialogVisible = false
          this.$emit('close')
        } else {
          this.saveLoading = false
        }
      }).catch(res => {
        this.saveLoading = false
      })
    },
    // 这是添加bankid，后端实现
    // beforeSaved (data) {
    //   if (data.isAbs !== '1') {
    //     this.form.bankId = data.planningManagerId
    //     delete this.form.planningManagerId
    //   }
    // },
    // 根据ID获取产品类别
    getTypeById () {
      componentsApi.productenterprise.getclassify({ projectId: this.batchUploadEditform.projectId }).then(res => {
        if (!res.data) res.data = { productType: '2' }
        if (res.data && res.data.productType) {
          this.batchUploadEditform.isAbs = res.data.productType
          if (res.data.productType === '1') {
            if (this.componentList[3].prop === 'batchDate') {
              this.$set(this.componentList, 3, this.specialPlanId)
              this.formRules.batchDate[0].required = false
              this.formRules.specialPlanId[0].required = true
              this.batchUploadEditform.batchDate = ''
            }
          } else {
            if (this.componentList[3].prop === 'specialPlanId') {
              this.$set(this.componentList, 3, this.batchDate)
              this.formRules.batchDate[0].required = true
              this.formRules.specialPlanId[0].required = false
              this.batchUploadEditform.specialPlanId = ''
            }
          }
        }
      })
    },
    uploadSuccess (returnData) {
      this.success(this.$i18n.messages[this.$i18n.locale].ladingNoticeManage.uploadSuccess)
      this.$set(this.batchUploadEditform, 'fileName', returnData.fileName)
      returnData.fileList.forEach(it => {
        it.fileId = it.keyId
      })
      this.batchUploadEditform.fileList = returnData.fileList
    },
    batchUploadEditselectChanged (obj) {
      if (Object.keys(obj).some(it => it === 'productInfo')) {
        this.clearInfoList()
        if (this.batchUploadEditform.projectId) {
          this.getTypeById(this.batchUploadEditform.projectId)
        } else {
          this.formRules.specialPlanId[0].required = true
          this.componentList[1].disabled = false
        }
      }
    },
    clearInfoList () {
      delete this.batchUploadEditform.specialPlanId
      delete this.batchUploadEditform.coreEnterpriseId
      delete this.batchUploadEditform.planningManagerId
      this.$nextTick(() => {
        if (this.$refs.dialog && this.$refs.dialog.$refs.editForm) {
          this.$refs.dialog.$refs.editForm.clearValidate()
        }
      })
    }
  },
  watch: {
    dialogVisible (newVal) {
      if (newVal) {
        this.saveLoading = false
        this.batchUploadEditform = Object.assign({}, this.form)
      } else {
        if (this.componentList[3].prop === 'specialPlanId') {
          this.$set(this.componentList, 3, this.batchDate)
          this.formRules.batchDate[0].required = true
          this.formRules.specialPlanId[0].required = false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/styles/shouji/ladingManage/batchUploadEdit.scss';
</style>
