<!--
  @description: 发货订单管理-收款申请
  @author: 王俊楠
  @routerPath: /procurement/procurementOrderCollectionAdd
  @date： 2020-10-30 17:10:12
-->
<template>
  <div class="p0-16">
    <section v-if="!flowStatus" class="title title_border">
      <i class="iconfont icon-fanhui pointer" @click="back()" />
      收款申请
    </section>
    <div>
      <el-form ref="formData" :model="formData" :rules="rules" :inline-message="true">
        <p class="page-title">
          1.收款单申请信息
        </p>
        <table class="tableData mb16">
          <tr>
            <td>
              <el-form-item ref="orderCode" label="销售订单号" prop="orderCode" />
            </td>
            <td>
              <p>
                {{ formData.orderCode }}
              </p>
            </td>
            <td>
              <el-form-item ref="paymentDepartName" label="付款单位" prop="paymentDepartName" />
            </td>
            <td>
              <p>
                {{ formData.paymentDepartName }}
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="paymentType" label="付款方式" prop="paymentType" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.paymentType"
                gx-maxlength="varchar50"
              />
            </td>
            <td>
              <el-form-item ref="paymentNumber" label="付款账号" prop="paymentNumber" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.paymentNumber"
                gx-maxlength="varchar24"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="natureOfMoney" label="款项性质" prop="natureOfMoney" />
            </td>
            <td>
              <el-radio-group v-model="formData.natureOfMoney">
                <el-radio v-for="(item,index) in nature_of_moneyList" :key="index" :value="item.typecode" :label="item.typecode">
                  {{ item.typename }}
                </el-radio>
              </el-radio-group>
            </td>
            <td>
              <el-form-item ref="consigneeAmount" label="收款金额（元）" prop="consigneeAmount" />
            </td>
            <td colspan="3">
              <!--金额组件-->
              <money
                :thousands="true"
                :unit-stust="true"
                :great="true"
                :money-value="formData"
                style="display: inline-block"
                name="consigneeAmount"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="consigneeDepartName" label="收款单位" prop="consigneeDepartName" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.consigneeDepartName"
                gx-maxlength="varchar50"
              />
            </td>
            <td>
              <el-form-item ref="consigneeNumber" label="收款账号" prop="consigneeNumber" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.consigneeNumber"
                gx-maxlength="varchar24"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="consigneeBankname" label="收款账户开户行名称" prop="consigneeBankname" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.consigneeBankname"
                gx-maxlength="varchar50"
              />
            </td>
            <td>
              <el-form-item ref="consigneeBankaccount" label="开户行行号" prop="consigneeBankaccount" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.consigneeBankaccount"
                gx-maxlength="varchar35"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="consigneeUnionpayNumber" label="开户行联行号" prop="consigneeUnionpayNumber" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.consigneeUnionpayNumber"
                gx-maxlength="varchar35"
              />
            </td>
            <td>
              <el-form-item ref="consigneeLinkerName" label="联系人" prop="consigneeLinkerName" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.consigneeLinkerName"
                gx-maxlength="varchar20"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="consigneeLinkerTel" label="联系电话" prop="consigneeLinkerTel" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.consigneeLinkerTel"
                gx-maxlength="varchar20"
              />
            </td>
            <td>
              <el-form-item label="联系人邮箱" prop="consigneeLinkerEmali" />
            </td>
            <td>
              <el-input v-model="formData.consigneeLinkerEmali" placeholder="" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="收款人备注" prop="consigneeRemark" />
            </td>
            <td colspan="3">
              <el-input
                v-model="formData.consigneeRemark"
                :autosize="{ minRows: 4, maxRows: 4 }"
                style="width:90%"
                type="textarea"
                maxlength="4000"
                show-word-limit
              />
            </td>
          </tr>
        </table>
        <p class="page-title">
          2.采购方开票信息
        </p>
        <table class="tableData mb16">
          <tr>
            <td>
              <el-form-item ref="paymentInvoiceTitle" label="发票抬头" prop="paymentInvoiceTitle" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.paymentInvoiceTitle"
                gx-maxlength="varchar500"
              />
            </td>
            <td>
              <el-form-item ref="paymentTaxpayerIdentificationNumber" label="发票税号" prop="paymentTaxpayerIdentificationNumber" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.paymentTaxpayerIdentificationNumber"
                gx-maxlength="varchar20"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="paymentBankname" label="发票开户行/账号" prop="paymentBankname" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.paymentBankname"
                gx-maxlength="varchar200"
              />
            </td>
            <td>
              <el-form-item ref="paymentInvoiceRate" label="开票税率（%）" prop="paymentInvoiceRate" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.paymentInvoiceRate"
                gx-maxlength="varchar20"
                type="number"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="paymentTaxpayeraddr" label="发票地址/电话" prop="paymentTaxpayeraddr" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.paymentTaxpayeraddr"
                gx-maxlength="varchar200"
              />
            </td>
            <td>
              <el-form-item ref="paymentInvoiceMessage" label="开票内容" prop="paymentInvoiceMessage" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.paymentInvoiceMessage"
                gx-maxlength="varchar200"
              />
            </td>
          </tr>
          <!-- <tr>
            <td>
              <el-form-item ref="areaValue" label="地址" prop="areaValue" />
            </td>
            <td colspan="3">
              <cascader
                :region-text="formData.areaValue"
                style="width:220px"
                @regionData="regionData"
              />
              <gx-input
                v-model.trim="formData.address"
                style="width:calc(100% - 270px)"
                gx-placeholder="placeholderText1000"
                gx-maxlength="varchar1000"
              />
            </td>
          </tr> -->
          <!-- <td>
            <el-form-item label="备注" />
          </td>
          <td colspan="3">
            <el-input
              v-model="formData.remark"
              :autosize="{ minRows: 4, maxRows: 4 }"
              style="width:96%"
              type="textarea"
              maxlength="4000"
              show-word-limit
            />
          </td> -->
        </table>
      </el-form>
      <!--操作按钮-->
      <div class="but_footer">
        <div class="but_footer-h">
          <div class="but_footer-but">
            <el-button :loading="confirmLoading" type="primary" @click.stop="collectionFn('formData')">
              提交
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* api接口*/
import {
  // eslint-disable-next-line no-unused-vars
  saveSupplierConsigneeApplicationInfo,
  // eslint-disable-next-line no-unused-vars
  queryConsigneeApplicationEditOrDelete
} from '@/api/procurement/procurementOrder'
/* 公共方法 */
import { filterDictText } from '@/assets/js/utils' // 深拷贝
import { procurementOrderGroupMixins } from '@/views/procurement/procurementOrder/mixins/procurementOrderGroupMixins.js'
import { characters1_auto, bankCardNumber, validateInput, linkerName, email, checkMoney, checkLinktel, taxpayerIdentificationNumber } from '@/assets/js/validate'// 校验输入内容

/*  公共组件 */
import money from '@comp/common/money/money'// 金额组件
import cascader from '@comp/common/cascader'// 地区三级联动

export default {
  name: 'ProcurementOrderCollectionAdd',
  components: {
    money, // 金额组件
    cascader
  },
  mixins: [procurementOrderGroupMixins],
  data() {
    return {
      flowStatus: this.$route.query.flowStatus, // 工作流进入状态
      backPath: '', // 退回路径
      formData: {
        paymentNumber: '', // 付款账号
        paymentType: '', // 付款方式
        natureOfMoney: '', // 款项性质 00进度款 01尾款
        consigneeAmount: '', // 收款金额
        consigneeDepartName: this.$route.params.winningDepartName, // 收款单位名称
        consigneeNumber: '', // 收款单位账号
        consigneeBankname: '', // 收款账户开户行名称
        consigneeBankaccount: '', // 收款人开户行行号
        consigneeUnionpayNumber: '', // 收款人开户行联行号
        consigneeLinkerName: '', // 联系人
        consigneeLinkerTel: '', // 联系人电话
        consigneeLinkerEmali: '', // 联系人邮箱
        consigneeRemark: '', // 收款人备注
        paymentInvoiceTitle: '', // 付款方发票抬头
        paymentTaxpayerIdentificationNumber: '', // 付款方发票税号
        paymentBankname: '', // 付款方发票开户行、账号
        paymentInvoiceRate: '', // 付款人开票税率
        paymentTaxpayeraddr: '', // 付款方发票地址、电话
        paymentInvoiceMessage: '' // 开票内容
      }, // 收款页面数据
      paymentTypeList: [], // 付款方式
      feeTypeList: [], // 款项性质
      confirmLoading: false,
      // 校验输入内容
      rules: {
        paymentType: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 付款方式
        paymentNumber: [{ required: true, validator: bankCardNumber, trigger: 'blur' }], // 付款账号
        natureOfMoney: [{ required: true, validator: characters1_auto, trigger: 'change' }], // 款项性质
        consigneeAmount: [{ required: true, validator: checkMoney, trigger: 'blur' }], // 收款金额
        consigneeDepartName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 收款款单位
        consigneeNumber: [{ required: true, validator: bankCardNumber, trigger: 'blur' }], // 收款账号
        consigneeBankname: [{ required: true, validator: validateInput, trigger: 'blur' }], // 收款账户开户行名称
        consigneeBankaccount: [{ required: true, validator: bankCardNumber, trigger: 'blur' }], // 开户行行号
        consigneeUnionpayNumber: [{ required: true, validator: bankCardNumber, trigger: 'blur' }], // 开户行联行号
        consigneeLinkerName: [{ required: true, validator: linkerName, trigger: 'blur' }], // 联系人
        consigneeLinkerTel: [{ required: true, validator: checkLinktel, trigger: 'blur' }], // 联系电话
        consigneeLinkerEmali: [{ required: true, validator: email, trigger: 'blur' }], // 联系人邮箱
        consigneeRemark: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 收款人备注
        paymentInvoiceTitle: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 发票抬头
        paymentTaxpayerIdentificationNumber: [{ required: true, validator: taxpayerIdentificationNumber, trigger: 'blur' }], // 发票税号
        paymentBankname: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 发票开户行/账号
        paymentInvoiceRate: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 开票税率（%）
        paymentTaxpayeraddr: [{ required: true, validator: checkLinktel, trigger: 'blur' }], // 发票地址/电话
        paymentInvoiceMessage: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 开票内容
      }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    const data = this.$route.params
    if (data.status === '01') {
      this.formData = Object.assign(this.formData, { ...data })
    } else {
      this.loadData()
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.backPath = from.path
    })
  },
  methods: {
    filterDictText,
    // 所在区域三级联动组件使用
    regionData(regionName, location) {
      this.formData.deliveryAreaName = regionName
      this.formData.deliveryAreaCode = location.join(',')
    },
    // 返回发货待处理订单
    back() {
      // this.$router.push({
      //   path: 'procurementOrderDeliverHandleAdd'
      // })
      const pathOf = this.backPath.lastIndexOf('/') + 1
      const path = this.backPath.substr(pathOf)
      this.$router.push({
        path
      })
    },
    // 获取数据
    loadData() {
      const paramsData = this.$route.params
      queryConsigneeApplicationEditOrDelete(paramsData).then(response => {
        this.formData = response.data
      }).catch(() => {
      })
    },
    // 收款
    collectionFn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            ...this.formData
          }
          saveSupplierConsigneeApplicationInfo(params).then((res) => {
            this.back() // 跳转
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>

