<template>
  <div>
    <!-- 资产信息 -->
    <dialog-edit :visible.sync="dialogVisible" :form="form" :autoSave="autoSave"
      :editModel="editModel" :title="$t('feedBackMain.assetInfo')" :footerBtnShow="true">
      <div v-for="(item,index) in list" :key="index">
        <external-transition :isCollapse="true" :title="item.name">
          <template #transition>
            <dym-form :formValue.sync="forms" :componentList="item.componentList"></dym-form>
          </template>
        </external-transition>
      </div>
    </dialog-edit>
  </div>
</template>

<script>
import BaseEdit from '@/pages/baseEditPage'
import externalTransition from '@/components/element/assetoutfeedback/externalTransition'
import {
  DialogEdit,
  dymForm
} from 'newepoch-components'
import feedBackMain from '@/api/assetoutfeedback/feedBackMain/feedBackMain.js'
import * as format from '@/filters/index.js'

export default {
  extends: new BaseEdit(),
  name: 'assetInfoPop',
  components: {
    DialogEdit,
    dymForm,
    externalTransition
  },
  props: {
    autoSave: {
      type: [Boolean],
      default: false
    }
  },
  data () {
    return {
      // 表单
      forms: {},
      // 表单列表
      list: [
        {
          name: this.$i18n.messages[this.$i18n.locale].feedBackMain.baseInfo,
          componentList: [
            {
              // 产品名称
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.projectName,
              disabled: true,
              value: 'projectName',
              prop: 'projectName',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 期数
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.periods,
              disabled: true,
              value: 'specialPlanPeriods',
              prop: 'specialPlanPeriods',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 签约主体
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.initialOwnersName,
              disabled: true,
              value: 'initialOwnersName',
              prop: 'initialOwnersName',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 付款确认书编号
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.assetCode,
              disabled: true,
              value: 'assetCode',
              prop: 'assetCode',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 供应商名称
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.creditor,
              disabled: true,
              value: 'creditor',
              prop: 'creditor',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 项目公司名称
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.debtor,
              disabled: true,
              value: 'debtor',
              prop: 'debtor',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 保理金额
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.accountsReceivable,
              disabled: true,
              value: 'factoringMoney',
              prop: 'factoringMoney',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 基础合同名称
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.basicContractNames,
              disabled: true,
              value: 'basicContractName',
              prop: 'basicContractName',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 基础合同编号
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.basicContractCodes,
              disabled: true,
              value: 'basicContractCode',
              prop: 'basicContractCode',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 发票编号
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.invoiceNumber,
              disabled: true,
              value: 'invoiceNumber',
              prop: 'invoiceNumber',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 发票总金额
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.invoiceCountAmount,
              disabled: true,
              value: 'invoiceCountAmount',
              prop: 'invoiceCountAmount',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 导入合同编号
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.bussContractCode,
              disabled: true,
              value: 'bussContractCode',
              prop: 'bussContractCode',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 应收账款到期日
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.accountsReceivableEndTime,
              disabled: true,
              value: 'dueDate',
              prop: 'dueDate',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-date-picker'
            }
          ]
        },
        {
          name: this.$i18n.messages[this.$i18n.locale].feedBackMain.sample,
          componentList: [
            {
              // 是否关联企业
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.ifsConnectCompany,
              disabled: true,
              value: 'relationEnterpiseFlag',
              prop: 'relationEnterpiseFlag',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 合同类型
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.contractTypes,
              disabled: true,
              value: 'contractType',
              prop: 'contractType',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 拟入池清单合同类型
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.nrcContractType,
              disabled: true,
              value: 'nrcContractType',
              prop: 'nrcContractType',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 大区域
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.fourArea,
              disabled: true,
              value: 'bigAreaName',
              prop: 'bigAreaName',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 小区域
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.area,
              disabled: true,
              value: 'coreAreaName',
              prop: 'coreAreaName',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            }
          ]
        },
        {
          name: this.$i18n.messages[this.$i18n.locale].feedBackMain.accountorInfo,
          componentList: [
            {
              // 收款人名称
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.receiverName,
              disabled: true,
              value: 'receiverName',
              prop: 'receiverName',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 收款人开户行
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.receiverBank,
              disabled: true,
              value: 'receiverBank',
              prop: 'receiverBank',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 收款人银行账号
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.receiverBankAccount,
              disabled: true,
              value: 'receiverBankAccount',
              prop: 'receiverBankAccount',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            }
          ]
        },
        {
          name: this.$i18n.messages[this.$i18n.locale].feedBackMain.statusInfo,
          componentList: [
            {
              // 急单标志
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.ifsUrgent,
              disabled: true,
              value: 'ifsUrgent',
              prop: 'ifsUrgent',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            },
            {
              // 保理进度
              label: this.$i18n.messages[this.$i18n.locale].feedBackMain.absState,
              disabled: true,
              value: 'businessProcessStatus',
              prop: 'businessProcessStatus',
              placeholder: '',
              labelWidth: '140px',
              cols: [12, 12, 12, 8],
              componentName: 'el-input'
            }
          ]
        }
      ]
    }
  },
  watch: {
    visible (val) {
      if (val) {
        let $this = this
        // 初始化
        $this.$nextTick(() => {
          this.forms = {}
          feedBackMain.baseinfo.getDefault({ keyId: this.form.keyId }).then(res => {
            if (res.success && res.data) {
              let item = res.data
              // 格式化表单
              // 急单
              item.ifsUrgent = item.ifsUrgent === '1'
                ? $this.$t('common.yes')
                : $this.$t('common.no')
                // 是否关联企业
              item.relationEnterpiseFlag = item.relationEnterpiseFlag === '1'
                ? $this.$t('common.yes')
                : $this.$t('common.no')
              // 合同类型
              item.contractType = format.formatDict(item.contractType, 'ZD0107')
              // 拟入池清单合同类型
              item.nrcContractType = format.formatDict(item.nrcContractType, 'ZD0107')
              // 保理进度
              item.businessProcessStatus = format.formatDict(item.businessProcessStatus, 'SCRS0110')
              // 保理金额
              item.factoringMoney = format.thousandFilter(item.factoringMoney)
              this.forms = item
            }
          })
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~@/styles/assetoutfeedback/common.scss'
</style>
