<!-- （编辑/查看）付款准备明细 -->
<template>
  <div>
    <Form
      ref="detailForm"
      :model="detailDatas"
      :rules="rules"
      :label-width="130"
    >
      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="payWay"
          label="付款方式"
        >
          <DataSelect
            v-model="detailDatas.payWay"
            :value="detailDatas.payWay"
            code="PAYMENT_MODE"
            style="min-width:100px"
          >
          </DataSelect>
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="companyName"
          label="实际付款公司"
        >
          <SelectRealPaymentCompany
            :value="detailDatas.companyName"
            @handleSelect="selectRealPaymentCompany"
          >
          </SelectRealPaymentCompany>
        </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="accountName"
          label="银行账户名称"
        >
          <Input v-model="detailDatas.accountName" />
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="accountNo"
          label="银行账号"
        >
          <Input v-model="detailDatas.accountNo" />
        </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="documentConfigFile"
          label="单据处理配置文件"
        >
          <DataSelect
            v-model="detailDatas.documentConfigFile"
            :value="detailDatas.documentConfigFile"
            code="configFileCode"
            style="min-width:100px"
          >
          </DataSelect>
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="payDocument"
          label="付款单据"
        >
          <DataSelect
            v-model="detailDatas.payDocument"
            :value="detailDatas.payDocument"
            code="payTp"
            style="min-width:100px"
          >
          </DataSelect>
        </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="documentType"
          label="单据类型"
        >
          <DataSelect
            v-model="detailDatas.documentType"
            :value="detailDatas.documentType"
            code="tpCode"
            style="min-width:100px"
          >
          </DataSelect>
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="settlementMethod"
          label="结算方式"
        >
          <DataSelect
            v-model="detailDatas.settlementMethod"
            :value="detailDatas.settlementMethod"
            code="settleType"
            style="min-width:100px"
          >
          </DataSelect>
        </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="remittanceSpeed"
          label="汇款速度"
        >
          <DataSelect
            v-model="detailDatas.remittanceSpeed"
            :value="detailDatas.remittanceSpeed"
            code="remittanceSpeed"
            style="min-width:100px"
          >
          </DataSelect>
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="payType"
          label="转账类型"
        >
          <DataSelect
            v-model="detailDatas.payType"
            :value="detailDatas.payType"
            code="transfersType"
            style="min-width:100px"
          >
          </DataSelect>
        </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="fundPlan"
          label="资金计划"
        >
          <DataSelect
            v-model="detailDatas.fundPlan"
            :value="detailDatas.fundPlan"
            code="capitalPlan"
            style="min-width:100px"
          >
          </DataSelect>
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="payTime"
          label="支付时间"
        >
          <DatePicker
            type="datetime"
            :value="detailDatas.payTime"
            format="yyyy-MM-dd HH:mm:ss"
            @on-change="payTimeChange"
          >
          </DatePicker>
        </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="vendorAccountNo"
          label="收款方账号"
        >
          <SelectVendorBankInfo
            :value="detailDatas.vendorAccountNo"
            @handleSelect="vendorAccountNoHandle"
          />
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="payRequestCompanyName"
          label="收款方户名"
        >
          <Input v-model="detailDatas.payRequestCompanyName" />
        </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="vendorCode"
          label="供应商编码"
        >
          <Input v-model="detailDatas.vendorCode" />
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="vendorName"
          label="供应商名称"
        >
          <Input v-model="detailDatas.vendorName" />
        </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="vendorBankId"
          label="银行编码"
        >
          <Input v-model="detailDatas.vendorBankId" />
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="vendorSite"
          label="收款方地点"
        >
          <Input v-model="detailDatas.vendorSite" />
        </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="invoiceNo"
          label="结算号"
        >
          <Input v-model="detailDatas.invoiceNo" />
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="cbankCode"
          label="人行行号"
        >
          <Input v-model="detailDatas.cbankCode" />
        </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="vendorAreaCode"
          label="收款方区域"
        >
          <Input v-model="detailDatas.vendorAreaCode" />
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="isEntrustmentPayment"
          label="是否启用委托付款"
        >
          <!-- todo: code 和 接口给的不一样，改成统一的值集 -->
          <DataSelect
            v-model="detailDatas.isEntrustmentPayment"
            code="YES_NO"
          />
        </Form-item>
        </Col>
      </Row>

      <Row>
        <Col span="24">
        <Form-item
          prop="summary"
          label="摘要"
        >
          <Input v-model="detailDatas.summary" />
          <Alert type="warning">
            长度尽量在7个字以内
          </Alert>
        </Form-item>
        </Col>
      </Row>

      <Row>
        <Col span="24">
        <Form-item
          prop="purpose"
          label="用途"
        >
          <Input v-model="detailDatas.purpose" />
          <Alert type="warning">
            长度尽量在7个字以内
          </Alert>
        </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import {
  SelectRealPaymentCompany,
  SelectVendorBankInfo
} from '@paymentPlatformComps/index.js';
import Server from './server';
const server = new Server();

export default {
  name: 'PreparePayDetail',
  components: {
    SelectRealPaymentCompany,
    SelectVendorBankInfo
  },
  props: {
    payLineDetailId: {
      type: String,
      required: true
    },
    showSave: { // 是否显示保存按钮  YES / NO
      type: String,
      default: ''
    }
  },

  data() {
    return {
      detailDatas: {},
      rules: {
        payWay: { required: true },
        companyName: { required: true },
        accountName: { required: true },
        accountNo: { required: true },
        documentConfigFile: { required: true },
        payDocument: { required: true },
        documentType: { required: true },
        settlementMethod: { required: true },
        remittanceSpeed: { required: true },
        payType: { required: true },
        fundPlan: { required: true },
        payTime: { required: true },
        vendorAccountNo: { required: true },
        payRequestCompanyName: { required: true },
        vendorCode: { required: true },
        vendorName: { required: true },
        vendorBankId: { required: true },
        vendorSite: { required: true },
        vendorAreaCode: { required: true }
      }
    };
  },

  computed: {
    canSave() {
      if (this.showSave === 'NO') {
        return false;
      } else if (this.showSave === 'YES') {
        return true;
      }
    }
  },

  watch: {},

  created() {
    Object.keys(this.rules).map(item => {
      this.rules[item].message = '此字段必填';
    });

    this.getPreparePayDetail();

    if (this.showSave === 'YES') {
      this.$emit('SetTitle', '编辑付款准备明细');
    } else {
      this.$emit('SetTitle', '付款准备明细');
    }

    this.$emit('SetPageSize', 750);

    const buttons = [];
    if (this.showSave === 'YES') {
      buttons.push(
        {
          text: '保存',
          theme: 'primary',
          handle: () => {
            this.save();
          }
        }
      );
    }
    buttons.push(
      {
        text: '关闭',
        theme: 'primary',
        handle: () => {
          this.$emit('Close');
        }
      }
    );
    this.$emit('SetPageActions', buttons);
  },

  mounted() {},

  methods: {
    getPreparePayDetail() {
      server.getPreparePayDetail({ payLineDetailId: this.payLineDetailId })
        .then(response => {
          const res = response.data;
          if (res.statusCode !== '-1') {
            this.detailDatas = res;
          } else {
            this.$Message.error(res.msg);
          }
        })
        .catch(err => {});
    },

    save() {
      this.$refs.detailForm.validate(valid => {
        if (valid) {
          server.updatePayLineDetailBankInfo(this.detailDatas)
            .then(response => {
              if (response.statusCode !== '-1') {
                this.$Message.success('保存成功！');
                this.$emit('Close');
              } else {
                this.$Message.error(response.msg);
              }
            })
            .catch(err => {});
        } else {
          this.$Message.error({
            content: '未通过验证',
            duration: 3
          });
        }
      });
    },

    // 实际付款公司
    selectRealPaymentCompany(data) {
      this.detailDatas.companyName = data.compName;
    },

    // 收款方账号
    vendorAccountNoHandle(data) {
      this.detailDatas.vendorAccountNo = data.vendorAccountNo;
      this.detailDatas.payRequestCompanyName = data.vendorAccountName;
    },

    payTimeChange(data) {
      this.detailDatas.payTime = data;
    }
  }
};
</script>

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