<!--
  @description: 申请退款-变更信息
  @Modifier: sunxinman/haofengxian
  @routerPath:
  @date: 2020/03/31-15:10
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="visibleDialog"
    :close-on-click-modal="false"
    title="变更信息"
    width="50%"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <!-- 表格部分 -->
    <el-form ref="changeInfoForm" :model="formData" :rules="rules">
      <table class="from_table">
        <tr>
          <td>投标单位</td>
          <td>{{ formData.supplierName }}</td>
          <td>退款账户名称</td>
          <td>{{ formData.oriName }}</td>
        </tr>
        <tr>
          <td>退款开户行</td>
          <td>{{ formData.oriBankName }}</td>
          <td>退款账号</td>
          <td>{{ formData.oriNo }}</td>
        </tr>

        <tr>
          <td>退款联行号</td>
          <td>{{ formData.oriBankNo }}</td>
          <td><span class="red-star">*</span>变更后的联行号</td>
          <td>
            <el-form-item ref="desBankNo" label="" prop="desBankNo">
              <el-input v-model.trim="formData.desBankNo" />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td style="white-space: nowrap">
            <span class="red-star">*</span>变更后的退款账号名称
          </td>
          <td>
            <el-form-item ref="desName" label="" prop="desName">
              <el-input v-model.trim="formData.desName" />
            </el-form-item>
          </td>
          <td><span class="red-star">*</span>变更后退款账号</td>
          <td>
            <el-form-item ref="desNo" label="" prop="desNo">
              <el-input v-model.trim="formData.desNo" />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td><span class="red-star">*</span>变更后退款开户行</td>
          <td>
            <el-form-item ref="desBankName" label="" prop="desBankName">
              <el-input v-model.trim="formData.desBankName" />
            </el-form-item>
          </td>
          <td><span class="red-star">*</span>证明文件</td>
          <td>
            <upload
              ref="upload"
              :data="refundChangeData"
              :auto-delete="true"
              :auto-upload="true"
              :limit="10"
              title=""
              file-ref="fileRef"
            />
          </td>
        </tr>
      </table>
    </el-form>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button :loading="confirmLoading" type="primary" @click="ensure('changeInfoForm')">提 交</el-button>
      <el-button :loading="confirmLoading" @click="visibleDialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { changeDepositRefundDetail } from '@api/fee/bailfee'
/* 混合开发方法-参数字段*/
import { cashDepositMixin } from '../../mixins/cashDepositMixin'
/* 组件*/
import upload from '@comp/common/updownload/upload'// 文件上传
/* 公用方法*/
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
import { randomData, cloneObject } from '@/assets/js/utils'
export default {
  name: 'ChangeInfoDialog',
  components: {
    upload
  },
  mixins: [cashDepositMixin],
  data() {
    return {
      confirmLoading: false, // 控制按钮重复点击Loding
      visibleDialog: false, // 弹框是否打开
      formData: {
        desBankName: '', // 退款银行名称
        desBankNo: '', // 退款银行编号
        desName: '', // 退款账户名称
        desNo: '', // 退款账户
        oriBankName: '', // 变更前退款银行名称
        oriBankNo: '', // 变更前退款银行编号
        oriName: '', // 变更前退款账户名称
        oriNo: '', // 变更前退款账户
        refundDetailChangeId: '', // 退款明细变更ID
        refundDetailId: '' // 退款明细ID
      },
      changeInfoIndex: '', // 父组件触发变更信息索引
      rules: {
        desBankName: [{ required: true, validator: characters1_auto, trigger: 'blur' }],
        desBankNo: [{ required: true, validator: characters1_auto, trigger: 'blur' }],
        desName: [{ required: true, validator: characters1_auto, trigger: 'blur' }],
        desNo: [{ required: true, validator: characters1_auto, trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 父组件触发 打开弹框获取数据
    openDialogGetDetail(row, index) {
      this.visibleDialog = true
      this.formData.refundDetailChangeId = randomData()// 随机生成退款明细变更ID
      this.refundChangeData.bizId = this.formData.refundDetailChangeId // 上传附件id
      this.changeInfoIndex = index // 父组件触发变更信息索引
      this.handleChangeInfo(row)
    },
    // 处理接收父组件传值
    handleChangeInfo(row) {
      this.formData.supplierName = row.supplierName // 投标单位名称
      this.formData.refundDetailId = row.refundDetailId // 退款明细ID
      this.formData.oriBankName = row.payerBankName // 变更前退款银行名称
      this.formData.oriBankNo = row.payerBankNo // 变更前退款银行编号
      this.formData.oriName = row.payerName // 变更前退款账户名称
      this.formData.oriNo = row.payerNo // 变更前退款账户
    },
    // 提交
    ensure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          changeDepositRefundDetail(this.formData).then(response => {
            this.confirmLoading = false
            this.$message({
              type: 'success',
              message: response.header.msg
            })
            this.visibleDialog = false // 关闭弹框
            this.formData.changeStatus = '01'
            const data = cloneObject(this.formData)// 深层拷贝
            this.$emit('childrenChangeInfo', data, this.changeInfoIndex)
          }).catch(() => {
            this.confirmLoading = false
          })
        } else {
          this.$message({
            type: 'warning',
            message: '请填写变更信息'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  /deep/.file-list {
    .fileBtn,
    li {
      margin-bottom: 0 !important;
    }
    .name {
      margin-right: 0 !important;
    }
  }
</style>
