<!-- （编辑/查看）付款信息 -->
<template>
  <div>
    <Form
      ref="detailForm"
      :model="detailDatas"
      :rules="rules"
      :label-width="130"
    >
      <Row :gutter="10">
        <Col span="12">
        <Form-item
          prop="paymentMode"
          label="付款方式"
        >
          <DataSelect
            v-model="detailDatas.paymentMode"
            :value="detailDatas.paymentMode"
            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
        v-if="isShow"
        :gutter="10"
      >
        <Col span="12">
        <Form-item
          prop="configFileCode"
          label="单据处理配置文件"
        >
          <DataSelect
            v-model="detailDatas.configFileCode"
            :value="detailDatas.configFileCode"
            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
        v-if="isShow"
        :gutter="10"
      >
        <Col span="12">
        <Form-item
          prop="paymentType"
          label="单据类型"
        >
          <DataSelect
            v-model="detailDatas.paymentType"
            :value="detailDatas.paymentType"
            code="tpCode"
            style="min-width:100px"
          >
          </DataSelect>
        </Form-item>
        </Col>
        <Col span="12">
        <Form-item
          prop="settleType"
          label="结算方式"
        >
          <DataSelect
            v-model="detailDatas.settleType"
            :value="detailDatas.settleType"
            code="settleType"
            style="min-width:100px"
          >
          </DataSelect>
        </Form-item>
        </Col>
      </Row>

      <Row
        v-if="isShow"
        :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="transferType"
          label="转账类型"
        >
          <DataSelect
            v-model="detailDatas.transferType"
            :value="detailDatas.transferType"
            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>
      </Row>
      <Row>
        <Col span="24">
        <Form-item
          prop="summary"
          label="摘要"
        >
          <Input
            v-model="detailDatas.summary"
            type="textarea"
            :rows="1"
            maxlength="100"
            style="width:75%"
          />
          <span style="color: red;">长度尽量在7个字以内</span>
        </Form-item>
        </Col>
      </Row>
      <Row>
        <Col span="24">
        <Form-item
          prop="purpose"
          label="用途"
        >
          <Input
            v-model="detailDatas.purpose"
            type="textarea"
            :rows="1"
            maxlength="100"
            style="width:75%"
          />
          <span style="color: red;">长度尽量在7个字以内</span>
        </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

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

  components: {
    SelectRealPaymentCompany
  },

  props: {
    payLineIds: {
      type: Array,
      default() {
        return [];
      }
    }
  },

  data() {
    return {
      isShow: true,
      formData: {
        paymentMode: ''
      },
      detailDatas: {
        paymentMode: '1', // 付款方式
        companyName: '', // 实际付款公司
        accountName: '', // 银行账户名称
        accountNo: '', // 银行账号
        configFileCode: '', // 单据处理配置文件
        payDocument: '', // 付款单据
        paymentType: '', // 单据类型
        settleType: '', // 结算方式
        remittanceSpeed: '', // 汇款速度
        transferType: '', // 转账类型
        fundPlan: '', // 资金计划
        summary: '', // 摘要
        purpose: '' // 用途
        //  payLineIds: this.payLineIds
      },
      rules: {
        paymentMode: { required: true },
        companyName: { required: true },
        accountName: { required: true },
        accountNo: { required: true },
        configFileCode: { required: true },
        payDocument: { required: true },
        paymentType: { required: true },
        settleType: { required: true },
        remittanceSpeed: { required: true },
        transferType: { required: true },
        fundPlan: { required: true }
      }
    };
  },

  computed: {},

  watch: {
    'detailDatas.paymentMode': {
      handler() {
        this.detailDatas.paymentMode != '1' &&
        this.detailDatas.paymentMode != '' &&
        this.detailDatas.paymentMode != null
          ? (this.isShow = false)
          : (this.isShow = true);
        this.changePaymentMode(this.detailDatas.paymentMode);
      }
    }
  },

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

    this.getPaymentDetail();

    this.$emit('SetTitle', '付款信息');
    this.$emit('SetPageSize', 850);

    const buttons = [];
    buttons.push({
      text: '保存',
      theme: 'primary',
      handle: () => {
        this.save();
      }
    });

    buttons.push({
      text: '关闭',
      theme: 'primary',
      handle: () => {
        this.$emit('Close');
      }
    });
    this.$emit('SetPageActions', buttons);
  },

  mounted() {},

  methods: {
    getPaymentDetail() {
      server
        .QueryPaymentDetail({ payLineIds: this.payLineIds })
        .then(response => {
          const res = response.data;
          if (res.statusCode !== '-1') {
            this.detailDatas = {
              paymentMode: res.paymentMode === null ? '1' : res.paymentMode, // 付款方式
              companyName: res.companyName, // 实际付款公司
              accountName: res.accountName, // 银行账户名称
              accountNo: res.accountNo, // 银行账号
              configFileCode: res.configFileCode, // 单据处理配置文件
              payDocument: res.payDocument, // 付款单据
              paymentType: res.paymentType, // 单据类型
              settleType: res.settleType, // 结算方式
              remittanceSpeed: res.remittanceSpeed, // 汇款速度
              transferType: res.transferType, // 转账类型
              fundPlan: res.fundPlan, // 资金计划
              summary: res.summary, // 摘要
              purpose: res.purpose // 用途
            };
          } else {
            this.$Message.error(res.msg);
          }
        })
        .catch(err => {});
    },

    changePaymentMode(paymentMode) {
      server
        .ChangePaymentMode({
          payLineId: this.payLineIds[0],
          paymentMode: paymentMode
        })
        .then(response => {
          const res = response.data;
          if (res.statusCode !== '-1') {
            this.detailDatas = {
              // paymentMode: res.paymentMode === null ? "1" : res.paymentMode, // 付款方式
              paymentMode: paymentMode, // 付款方式
              companyName: res.companyName, // 实际付款公司
              accountName: res.accountName, // 银行账户名称
              accountNo: res.accountNo, // 银行账号
              configFileCode: res.configFileCode, // 单据处理配置文件
              payDocument: res.payDocument, // 付款单据
              paymentType: res.paymentType, // 单据类型
              settleType: res.settleType, // 结算方式
              remittanceSpeed: res.remittanceSpeed, // 汇款速度
              transferType: res.transferType, // 转账类型
              fundPlan: res.fundPlan, // 资金计划
              summary: res.summary, // 摘要
              purpose: res.purpose // 用途
            };
          } else {
            this.$Message.error(res.msg);
          }
        })
        .catch(err => {});
    },
    save() {
      this.$refs.detailForm.validate(valid => {
        if (valid) {
          const formSearch = JSON.parse(JSON.stringify(this.detailDatas));
          if (this.detailDatas.paymentMode != '1') {
            delete formSearch.configFileCode; // 单据处理配置文件
            delete formSearch.payDocument; // 付款单据
            delete formSearch.paymentType; // 单据类型
            delete formSearch.settleType; // 结算方式
            delete formSearch.remittanceSpeed; // 汇款速度
            delete formSearch.transferType; // 转账类型
          }
          formSearch.payLineIds = this.payLineIds;
          server
            .UpdatePaymentDetail(formSearch)
            .then(response => {
              if (response.statusCode != '-1') {
                this.$emit('Close');
                this.$Message.success('保存成功');
              } else {
                this.$Message.error(response.msg);
              }
            })
            .catch(err => {});
        } else {
          this.$Message.error({
            content: '未通过验证',
            duration: 3
          });
        }
      });
    },
    // 实际付款公司
    selectRealPaymentCompany(data) {
      this.detailDatas.companyName = data.compName;
      this.detailDatas.accountName = data.bankAccountName;
      this.detailDatas.accountNo = data.bankAccountNum;
    }
  }
};
</script>

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