<!--
  @description: 标书费退款申请新增
  @Modifier: sunxinman/haofengxian
  @routerPath: /fee/tenderFeeApplyRefundAdd
  @date: 2020/03/23-10:50
-->
<template>
  <div>
    <section class="title p0-16 clearfix">
      <!-- 返回 -->
      <div class="title-back pointer" @click="back()">
        <i class="iconfont icon-fanhui mr10" />标书费退款申请
      </div>
    </section>
    <!-- 表单部分 -->
    <div class="p0-16">
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        :inline-message="true"
      >
        <table class="from_table">
          <tr>
            <td>
              <el-form-item ref="backNo" label="表单编号" prop="backNo" />
            </td>
            <td>
              {{ formData.backNo }}
            </td>
            <td>
              <el-form-item ref="backName" label="表单名称" prop="backName" />
            </td>
            <td>
              {{ formData.backName }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="payeeDepart" label="收款单位" prop="payeeDepart" />
            </td>
            <td>
              {{ formData.payeeDepart }}
            </td>
            <td>
              <el-form-item ref="bankname" label="开户银行" prop="bankname" />
            </td>
            <td>
              <el-input v-model="formData.bankname" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="bankaccount" label="银行账号" prop="bankaccount" />
            </td>
            <td>
              <el-input v-model="formData.bankaccount" />
            </td>
            <td>
              <el-form-item ref="uniteCode" label="联行号" prop="uniteCode" />
            </td>
            <td>
              <el-input v-model="formData.uniteCode" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                ref="isLocalAccounts"
                prop="isLocalAccounts"
                label="是否同城转账"
              >
                <label slot="label">
                  <span>是否同城转账</span>
                  <el-popover
                    placement="top-start"
                    popper-class="hint"
                    trigger="hover"
                    content="提示：收款单位开户行在石家庄市则为同城，收款单位开户行非中信银行则为跨行"
                  >
                    <el-button slot="reference" class="prompt">
                      <i class="iconfont icon-qm" />
                    </el-button>
                  </el-popover>
                </label>
              </el-form-item>
            </td>
            <td>
              <el-radio-group v-model="formData.isLocalAccounts">
                <el-radio v-for="(item,index) in cityTransferList" :key="index" :label="item.typecode">
                  {{ item.typename }}
                </el-radio>
              </el-radio-group>
            </td>
            <td>
              <el-form-item ref="isInterBankAccounts" label="是否跨行转账" prop="isInterBankAccounts" />
            </td>
            <td>
              <el-radio-group v-model="formData.isInterBankAccounts">
                <el-radio v-for="(item,index) in interbankTransferList" :key="index" :label="item.typecode">
                  {{ item.typename }}
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="backPrice" label="金额（元）" prop="backPrice" />
            </td>
            <td colspan="3">
              {{ formData.backPrice }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="payMode" label="支付方式" prop="payMode" />
            </td>
            <td>
              <el-select v-model="formData.payMode" placeholder="请选择">
                <el-option v-for="(item,index) in paymentMethodList" :key="index" :label="item.typename" :value="item.typecode" />
              </el-select>
            </td>
            <td>
              <el-form-item ref="useFeeMode" label="用款方式" prop="useFeeMode" />
            </td>
            <td>电汇</td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="useFeeDepart" label="用款部门" prop="useFeeDepart" />
            </td>
            <td colspan="3">
              {{ formData.useFeeDepart }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="reason" label="用途" prop="reason" />
            </td>
            <td colspan="3">
              <el-input
                v-model="formData.reason"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                maxlength="4000"
                show-word-limit
                style="width: 100%"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="digest" label="摘要" prop="digest" />
            </td>
            <td colspan="3">
              <el-input
                v-model="formData.digest"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                maxlength="4000"
                show-word-limit
                style="width: 100%"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="remark" label="备注" prop="remark" />
            </td>
            <td colspan="3">
              <el-input
                v-model="formData.remark"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                maxlength="4000"
                show-word-limit
                style="width: 100%"
              />
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <!--操作按钮-->
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button :loading="confirmLoading" @click="saveApplyInfo('form')">
            保存
          </el-button>
          <el-button :loading="confirmLoading" type="primary" @click="submitAudit('form')">
            提交审批
          </el-button>
          <el-button @click="back">
            关闭
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* 接口*/
import { applyBackPrice, saveOrUpdateBackApplyInfo, submitBackApply } from '@api/fee/docfee'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
import { TenderFeeGroupMixin } from '../mixins/tenderFeeGroupMixin'
/* 公用方法*/
import { characters1_auto, bankCardNumber } from '@/assets/js/validate'// 校验输入内容

export default {
  name: 'TenderFeeApplyRefundAdd',
  mixins: [ListMixin, TenderFeeGroupMixin],
  data() {
    return {
      confirmLoading: false, // 防止按钮重复点击
      feeDocId: this.$route.params.feeDocId, // 标书费id
      formData: {
        backName: '', // 退款名称
        backNo: '', // 退款编号（YKSQ+年（4）+月（2）+业务部门编码（2）+流水号（3））
        backPrice: 0, // 退款金额
        backStatus: '', // 接口实际退款状态 :00,未发起请求，01，退款成功,02 退款失败, 03 退款申请中
        bankaccount: '', // 银行账号
        bankname: '', // 开户银行
        digest: '', // 摘要
        isInterBankAccounts: '00', // 是否跨行转账(00否 01是)
        isLocalAccounts: '00', // 是否同城转账(00否 01是)
        outMoneyId: '', // 退费主表id
        payMode: '', // 支付方式：01对公支付 02现金支付 03卡付
        payeeDepart: '', // 收款单位
        reason: '', // 用途
        remark: '', // 备注
        supplierId: '', // 供应商id
        supplierName: '', // 供应商名称
        uniteCode: '', // 联行号
        useFeeDepart: '', // 用款部门
        useFeeMode: '00' // 用款方式 00 电汇
      },
      // 校验输入内容
      rules: {
        bankaccount: [{ required: true, validator: bankCardNumber, trigger: 'blur' }], // 银行账号
        bankname: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 开户银行
        isInterBankAccounts: [{ required: true, message: '请选择', trigger: 'change' }], //  是否跨行转账(00否 01是)
        isLocalAccounts: [{ required: true, message: '请选择', trigger: 'change' }], //  是否同城转账(00否 01是)
        payMode: [{ required: true, message: '请选择', trigger: 'change' }], //  支付方式
        reason: [{ required: true, message: '请选择', trigger: 'change' }] // 用途
      }
    }
  },
  created() {
    this.getApplyBackPriceInfo()
  },
  methods: {
    // 获取发起退款申请详情信息
    getApplyBackPriceInfo() {
      applyBackPrice(this.feeDocId).then(res => {
        this.formData = res.data
        if (!this.formData.isInterBankAccounts) this.formData.isInterBankAccounts = '00'
        if (!this.formData.isLocalAccounts) this.formData.isLocalAccounts = '00'
        if (!this.formData.payMode) this.formData.payMode = ''
      }).catch(() => {
      })
    },
    // 保存提交数据
    saveSubmitData() {
      const data = {
        ...this.formData,
        feeDocId: this.feeDocId, // 标书费id
        id: this.formData.outMoneyId
      }
      return data
    },
    // 保存
    saveApplyInfo(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid) => {
        if (valid) { // 校验通过
          const params = this.saveSubmitData()
          this.confirmLoading = true
          saveOrUpdateBackApplyInfo(params).then(res => {
            this.formData.outMoneyId = res.data // 退费主表id
            this.$message({
              message: res.header.msg,
              type: 'success'
            })
            this.confirmLoading = false
          }).catch(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    // 提交审批
    submitAudit(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.$confirm('是否确认提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            const params = this.saveSubmitData()
            submitBackApply(params).then(res => {
              this.$message({
                message: res.header.msg,
                type: 'success'
              })
              this.back()
            }).catch(() => {
            })
          }).catch(() => {
          })
        }
      })
    },
    // 返回
    back() {
      const dataPath = {
        ...this.$route.params
      }
      delete dataPath.feeDocId
      this.$router.push({
        path: '/fee/docPurchaseRecord',
        name: 'DocPurchaseRecordList',
        params: {
          ...dataPath
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
