<template>
  <!-- 补出账信息管理新增 -->
  <div>
    <dialog-edit width="95%"
      :visible.sync="dialogVisible"
      :form="submitForm"
      :autoSave="autoSave"
      :saveLabel="$t('common.assign')"
      :closeLabel="$t('common.cancel')"
      :formRules="submitRule"
      :editModel="editModel"
      :api="api"
      :appendToBody="appendToBody"
      :title="$t('supplementInfo.addTitle')"
      @onSaved="handleSubmit"
    >
      <div class="assetpkgmgr-box">
        <!-- 搜索栏 -->
        <search-form
          :formValue.sync="queryParas"
          searchPerms="search"
          @handleFilter="handleFilter"
          @clearParam="clearParam"
          resetPerms="reset"
          :componentList="componentList"
          @selectChanged="selectChanged"
          :isShowFoldBtn="false"
        ></search-form>
        <!-- 表格列表 -->
        <data-table
          :api="api"
          :operateBtnLayout="operateBtnLayout"
          v-bind="{maxHeight:300}"
          selectable="false"
          :showSelection="true"
          :queryParas="queryParas"
          :sourceData="modifyData"
          :toolMenuFlag="toolMenuFlag"
          :columns="modifyColumns"
          :showPage="showPage"
          :loadCount.sync="loadCount"
          :menuFlag="menuFlag"
          :headTitle="$t('supplementInfo.addTitle')"
          :loadingFlag="loadingFlag"
          :selectedRows.sync="selectRows"
        ></data-table>
        <!-- 补出账原因表单 -->
        <div style="margin-top:10px">
          <el-form-item
            :label="$t('supplementInfo.supplementReason')"
            prop="supplementReason"
            label-width="100px"
          >
            <el-input
              type="textarea"
              v-model.trim="submitForm.supplementReason"
              :placeholder="this.$t('common.pleaseInput')"
            ></el-input>
          </el-form-item>
        </div>
      </div>
    </dialog-edit>
  </div>
</template>

<script>
import BaseEdit from '@/pages/baseEditPage'
import * as format from '@/filters/index.js'
import {
  DialogEdit,
  DataTable,
  SelectProductName,
  searchForm
} from 'newepoch-components'
import external from '@/api/assetpkgmgr/externalApi.js' // api接口
export default {
  extends: new BaseEdit(),
  name: 'supplementAddPop',
  components: {
    DialogEdit,
    DataTable,
    searchForm
  },
  props: {
    autoSave: {
      type: [Boolean],
      default: true
    },
    currentList: {
      type: [Array],
      default () {
        return []
      }
    }
  },
  data () {
    return {
      showPage: true, // 是否分页
      appendToBody: true,
      toolMenuFlag: false,
      loadCount: 0,
      menuFlag: false,
      operateBtnLayout: '',
      // 补出账原因表单校验
      submitRule: {
        supplementReason: [
          {
            required: true,
            message: this.$t('supplementInfo.resultText'),
            trigger: 'blur'
          }
        ]
      },
      // 补出账原因表单
      submitForm: {
        supplementReason: ''
      },
      loadingFlag: false, // 加载动画控件
      queryParas: {
        pageIndex: 1,
        pageSize: 10
      },
      selectRows: [], // 选中项
      modifyData: [], // 列表
      contactData: [],
      forms: {},
      componentList: [
        {
          // 产品名称
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .projectName,
          disabled: false,
          value: 'productId',
          labelWidth: '120px',
          clearable: true,
          name: 'productName',
          componentName: SelectProductName
        },
        {
          // 期数
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .specialPlanPeriods,
          placeholder: this.$i18n.messages[this.$i18n.locale].common
            .pleaseInput,
          disabled: true,
          value: 'specialPlanPeriods',
          labelWidth: '120px',
          clearable: true,
          componentName: 'el-input'
        },
        {
          // 付款确认书编号
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .assetCode,
          disabled: false,
          value: 'assetCode',
          placeholder: this.$i18n.messages[this.$i18n.locale].common
            .pleaseInput,
          labelWidth: '120px',
          clearable: true,
          componentName: 'el-input'
        },
        {
          // 收款人账户号
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .receiverName,
          disabled: false,
          value: 'receiverName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common
            .pleaseInput,
          labelWidth: '120px',
          clearable: true,
          componentName: 'el-input'
        }
      ],
      modifyColumns: [
        {
          // 产品名称
          prop: 'projectName',
          align: 'left',
          headerAlign: 'center',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .projectName
        },
        {
          // 付款确认书编号
          prop: 'assetCode',
          align: 'center',
          width: '250px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo.assetCode
        },
        {
          // 供应商名称
          prop: 'creditor',
          align: 'left',
          headerAlign: 'center',
          width: '230px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo.creditor
        },
        {
          // 资产对应客服信息
          prop: 'customerAccountName',
          align: 'left',
          headerAlign: 'center',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .customerAccountName
        },
        {
          // 收款账户名
          prop: 'receiverName',
          align: 'left',
          headerAlign: 'center',
          width: '170px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .receiverName
        },
        {
          // 收款账号
          prop: 'receiverBankAccount',
          headerAlign: 'center',
          align: 'left',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .receiverBankAccount
        },
        {
          // 开户行
          prop: 'receiverBank',
          headerAlign: 'center',
          align: 'left',
          width: '171px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .receiverBank
        },
        {
          // 保理金额
          prop: 'factoringMoney',
          headerAlign: 'center',
          align: 'right',
          width: '115px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .factoringMoney,
          format: row => {
            return format.thousandFilter(row.factoringMoney)
          }
        },
        {
          // 放款金额
          prop: 'loanAmountFactoring',
          headerAlign: 'center',
          align: 'right',
          width: '115px',
          label: this.$i18n.messages[this.$i18n.locale].supplementInfo
            .loanAmountFactoring,
          format: row => {
            return format.thousandFilter(row.loanAmountFactoring)
          }
        }
      ],
      isABS: false // 产品是否为ABS
    }
  },
  computed: {
    api () {
      return external.supplementReg
    }
  },
  methods: {
    // 选中产品名称回调
    selectChanged (a, b, c) {
      if (a.productNameInfo) {
        let params = {
          projectIdArray: [a.productNameInfo.keyId]
        }
        // 请求产品分类
        external.productClassify.getList(params).then(res => {
          if (res.success) {
            // 产品是否为ABS
            let isABS = res.data[0].productType === '1'
            this.isABS = isABS
            // 重置期数
            if (!isABS) {
              this.$set(this.queryParas, 'specialPlanPeriods', '')
            }
            // 更新期数编辑状态
            this.componentList[1].disabled = !isABS
          }
        })
      }
    },
    // 搜索列表
    handleFilter () {
      let queryParas = this.queryParas
      // 校验表单必填项
      if (this.UtilJs.isEmpty(queryParas.productId)) {
        if (this.UtilJs.isEmpty(queryParas.assetCode)) {
          this.warning(
            this.$t('common.pleaseSelect') +
              this.$t('supplementInfo.projectName')
          )
          return false
        }
      } else {
        // 是否为abs
        if (this.isABS) {
          if (this.UtilJs.isEmpty(queryParas.specialPlanPeriods)) {
            this.warning(
              this.$t('common.pleaseInput') +
                this.$t('supplementInfo.specialPlanPeriods')
            )
            return false
          }
        }
      }
      this.loadCount++
    },
    // 提交回调
    handleSubmit (e) {
      if (this.selectRows.length > 0) {
        e = this.selectRows.map(item => {
          return Object.assign(item, {
            assetCode: item.assetCode,
            assetInfoId: item.assetInfoId,
            assetPoolId: item.assetPoolId,
            supplementReason: this.submitForm.supplementReason
          })
        })
        this.$emit('onSaved', e)
      } else {
        this.warning(this.$t('common.selectOperateTip'))
      }
    },
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10
      }
      this.componentList[1].disabled = true
    }
  },
  watch: {
    visible (val) {
      if (val) {
        let $this = this
        // 重置页面
        $this.clearParam()
        $this.submitForm = {}
        $this.modifyData = []
      }
    }
  }
}
</script>

<style scoped>
@import "~@/styles/assetpkgmgr/common.scss";
</style>
