<!--
  @description: 服务费退款申请
  @Modifier: sunxinman/haofengxian
  @routerPath: /fee/serviceRefundApplyAdd
  @date: 2020/04/07-14:57
-->
<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="main">
      <el-form
        ref="fromData"
        :rules="rules"
        :model="formData"
        :inline-message="true"
      >
        <table class="from_table">
          <tr>
            <td>
              <el-form-item label="表单编号" />
            </td>
            <td>保存后自动生成</td>
            <td>
              <el-form-item label="表单名称" />
            </td>
            <td>{{ formData.outApplyName }}</td>
          </tr>
          <tr>
            <td>
              <el-form-item label="收款单位" prop="supplierName" />
            </td>
            <td>{{ formData.supplierName }}</td>
            <td>
              <el-form-item label="开户银行" prop="bankName" />
            </td>
            <td>
              <el-input v-model.trim="formData.bankName" placeholder="请输入开户银行" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="银行账号" prop="supplierAccount" />
            </td>
            <td>
              <el-input v-model.trim="formData.supplierAccount" placeholder="请输入银行账号" />
            </td>
            <td>
              <el-form-item label="联行号" prop="bankNo" />
            </td>
            <td>
              <el-input v-model.trim="formData.bankNo" placeholder="请输入联行号" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="是否同城转账" prop="sameCity">
                <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>
              </el-form-item>
            </td>
            <td>
              <el-radio-group v-model="formData.sameCity">
                <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 label="是否跨行转账" prop="sameBank" />
            </td>
            <td>
              <el-radio-group v-model="formData.sameBank">
                <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 label="金额（元）" />
            </td>
            <td>
              {{ formData.returnAmount }}
            </td>
            <td>
              <el-form-item label="用款方式" />
            </td>
            <td>电汇</td>
          </tr>
          <tr>
            <td>
              <el-form-item label="用款部门" />
            </td>
            <td colspan="3">
              {{ formData.tenderDepart }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="用途" prop="purpose" />
            </td>
            <td colspan="3">
              <el-input
                v-model="formData.purpose"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                maxlength="4000"
                show-word-limit
                style="width: 100%"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="摘要" prop="summary" />
            </td>
            <td colspan="3">
              <el-input
                v-model="formData.summary"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                maxlength="4000"
                show-word-limit
                style="width: 100%"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item 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" type="primary" @click="submitApproval('fromData')">
          提交审批
        </el-button>
        <el-button @click="back">
          关闭
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* 接口*/
import { saveTenderFeeWinServiceOut } from '@/api/fee/servicefee'
/* 混入公共方法 */
import { ServiceGroupMixin } from '../../mixins/serviceFeeGroupMixin'
/* 常用公共方法*/
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
export default {
  name: 'ServiceRefundApplyAdd',
  mixins: [ServiceGroupMixin],
  data() {
    return {
      confirmLoading: false, // 提交审批Loding
      formData: {
        auditStatus: '', // 审批状态
        bankName: '', // 开户银行
        bankNo: '', // 联行号
        djbh: '', // 单据编号
        outApplyName: '国信招标有限公司用款申请单', // 表单名称
        outId: '', // 服务费退款信息ID
        purpose: '', // 用途
        remark: '', // 备注
        returnAmount: 0, // 退款金额（元）
        returnMethod: '', // 用款方式
        sameBank: '', // 是否跨行
        sameCity: '', // 是否同城
        sendTime: '', // 审批发送时间
        summary: '', // 摘要
        supplierAccount: '', // 收款单位银行账号
        supplierId: '', // 收款单位id
        supplierName: '', // 收款单位名称
        tenderDepart: '', // 业务部门
        tenderDepartId: '', // 业务部门ID
        useStatus: '', // 使用状态
        winServiceId: this.$route.query.winServiceId // 中标服务费ID
      },
      // 校验
      rules: {
        bankName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 开户银行
        supplierAccount: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 收款单位银行账号
        bankNo: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 联行号
        sameCity: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 是否同城
        sameBank: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 是否跨行
        purpose: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 用途
      }
    }
  },
  methods: {
    // 提交审批
    submitApproval(formName) {
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.confirmLoading = true
          saveTenderFeeWinServiceOut(this.formData).then(res => {
            this.confirmLoading = false
            this.back()
          }).catch(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    // 返回
    back() {
      this.$router.push({
        path: '/fee/serviceInvoiceRecords',
        query: {
          ...this.$route.query
        }
      })
    }

  }
}
</script>

<style scoped lang="less">

</style>
