<template>
  <div>
    <ShrinkBox>
      <span slot="title">付款申请明细</span>

      <Form
        ref="reimDetTableForm"
        :model="tableData"
      >
        <EMSTable
          ref="paymentApplyInfoTable"
          :rowClickExpand="clickExpand"
          :server="server"
          action="queryAuditTable"
          :initParam="applyParams"
          :params="applyParams"
          :columnsFn="accounGroupColumns"
          :autoFill="false"
          @on-selection-change="getSelections"
        >
          <!-- <div slot="table-bar"> -->
          <!-- <Button :loading="preparePayLoad" type="info" size="large" @click="payPreparetion()" :disabled="preparationStatus">准备付款</Button> -->
          <!-- <Button :loading="autoPreparePayLoad" type="info" size="large" @click="autoPayPrepation()" :disabled="preparationStatus">创建付款准备</Button>
            <Button :loading="releaseLoad" type="info" size="large" @click="releasePayMentPrepation()" :disabled="disabled">释放明细行</Button> -->
          <!-- <Button :loading="submitLoading"  size="large" type="info" @click="cancelProcess">作废该准备批</Button> -->
          <!-- </div> -->
        </EMSTable>
      </Form>
    </ShrinkBox>
  </div>
</template>
<script>
import accounting from 'accounting';
import util from '@paymentPlatformSrc/tools/util.js';
import { mapState, mapMutations } from 'vuex';
import Server from '../server.js';
import { PayInfoForm, PaymentInfoRead } from '@paymentPlatformComps/index.js';
let vm;
const server = new Server();
export default {
  components: {
  },
  props: {
    applyParams: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    vm = this;
    return {
      // 因为表格数据改变的时候回重新渲染表格
      // 所以用另外一个数据来修改值  达到不重新渲染表格的目的
      tableData: [],
      disabled: false,
      server: server,
      showAmount: true,
      applyPayExpandList: [],
      submitLoading: false,
      preparePayLoad: false,
      autoPreparePayLoad: false,
      releaseLoad: false,
      expandColumns: [
        {
          type: 'index',
          width: 60,
          title: '序号',
          align: 'left'
        },
        {
          title: '付款方式',
          align: 'left',
          width: 140,
          key: 'paymentMode',
          render: (h, params) => {
            let text = '';
            for (let i = 0; i < vm.valueSet.PAYMENT_MODE.length; i++) {
              if (
                vm.valueSet.PAYMENT_MODE[i].value == params.row.paymentMode
              ) {
                text = vm.valueSet.PAYMENT_MODE[i].label;
              }
            }
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '实际付款公司',
          align: 'left',
          width: 140,
          key: 'ouName',
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    title: params.row.ouName
                  }

                },
                params.row.ouName
              )
            ]);
          }
        },
        {
          title: '银行账户名称',
          align: 'left',
          width: 140,
          key: 'accountName',
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    title: params.row.accountName
                  }

                },
                params.row.accountName
              )
            ]);
          }
        },
        {
          title: '银行账号',
          align: 'left',
          width: 150,
          key: 'accountNo',
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    title: params.row.accountNo
                  }

                },
                params.row.accountNo
              )
            ]);
          }
        },
        {
          title: '金额',
          align: 'right',
          width: 300,
          key: 'amount',
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    title: accounting.formatNumber(params.row.amount, 2)
                  }

                },
                accounting.formatNumber(params.row.amount, 2)
              )
            ]);
          }
        },
        {
          title: '资金计划',
          align: 'left',
          width: 240,
          key: 'fundPlan',
          render: (h, params) => {
            let text = '';
            for (let i = 0; i < vm.valueSet.capitalPlan.length; i++) {
              if (vm.valueSet.capitalPlan[i].value == params.row.fundPlan) {
                text = vm.valueSet.capitalPlan[i].label;
              }
            }
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '汇款速度',
          align: 'left',
          width: 300,
          key: 'remittanceSpeed',
          render: (h, params) => {
            let text = '';
            for (let i = 0; i < vm.valueSet.remittanceSpeed.length; i++) {
              if (
                vm.valueSet.remittanceSpeed[i].value ==
                params.row.remittanceSpeed
              ) {
                text = vm.valueSet.remittanceSpeed[i].label;
              }
            }
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '摘要',
          align: 'left',
          width: 300,
          key: 'summary',
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    title: params.row.summary
                  }

                },
                params.row.summary
              )
            ]);
          }
        }
        // {
        //   title: "用途",
        //   align: "left",
        //   width: 300,
        //   key: "purpose"
        // }
      ],
      selections: [],
      payRequestLineIds: [],
      payLineIds: [],
      payWayInfo: {
        payRequestLineId: '',
        applyAmount: 0,
        companyCode: '',
        disabledFlag: false,
        showAmount: ''
      },
      params: {}
    };
  },
  computed: {
    ...mapState('createPaymentPreparation', {
      batchId: state => state.batchId,
      valueSet: state => state.valueSet,
      applyList: state => state.paymentApplyInfo.applyList,
      basicInfoComponent: state => state.basicInfoComponent,
      paymentApplyInfoComponent: state => state.paymentApplyInfoComponent,
      paymentPreparationInfoComponent: state =>
        state.paymentPreparationInfoComponent,
      payLineDetailInfoComponent: state =>
        state.payLineDetailInfoComponent
    }),
    // 准备付款按钮按钮
    preparationStatus() {
      if (this.selections.length > 0) {
        if (this.selections[0].prepareStatus != '5') {
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    }
  },
  created: function() {
    vm = this;
  },
  beforeMount: function() {},
  mounted: function() {
    window.bb = this;
    this.applyParams.bacthId = this.batchId;
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    ...mapMutations('createPaymentPreparation', []),
    init() {
      const page = 1;
      this.$refs.paymentApplyInfoTable.load({}, page);
    },

    accounGroupColumns() {
      return [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        // {
        //   type: "expand",
        //   width: 30,
        //   align: "left",
        //   render: (h, params) => {
        //     return h(expandRow, {
        //       props: {
        //         row: params.row,
        //         applyPayExpandList: this.$refs["paymentApplyInfoTable"]
        //           .tableData[params.index].applyPayExpandList,
        //         columns: this.expandColumns,
        //         index: params.index
        //       }
        //     });
        //   }
        // },
        {
          title: '状态',
          align: 'left',
          width: 80,
          key: 'prepareStatus',
          render: (h, params) => {
            let text = '';
            if (vm.valueSet.PAY_MENT_STATUS) {
              for (let i = 0; i < vm.valueSet.PAY_MENT_STATUS.length; i++) {
                if (
                  vm.valueSet.PAY_MENT_STATUS[i].value ==
                  params.row.prepareStatus
                ) {
                  text = vm.valueSet.PAY_MENT_STATUS[i].label;
                }
              }
            }

            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '付款信息',
          align: 'left',
          width: 80,
          render: (h, params) => {
            if (params.row.prepareStatus == '5') {
              return (
                <PaymentInfoRead
                  trigger="hover"
                  placement="right-start"
                  width="650"
                  payLineId={params.row.payLineId}
                  payMentModeData={{ valueList: vm.valueSet.PAYMENT_MODE }}
                  capitalPlanData={{ valueList: vm.valueSet.capitalPlan }}
                  transfersTypeData={{ valueList: vm.valueSet.transfersType }}
                >
                  <a
                    href="javascript:;"
                    onClick={e => {
                      vm.openPaymentInfo(params.row, true, false);
                    }}
                  >
                    查看
                  </a>
                </PaymentInfoRead>
              );
            } else {
              return (
                <PaymentInfoRead
                  trigger="hover"
                  placement="right-start"
                  width="650"
                  payLineId={params.row.payLineId}
                  payMentModeData={{ valueList: vm.valueSet.PAYMENT_MODE }}
                  capitalPlanData={{ valueList: vm.valueSet.capitalPlan }}
                  transfersTypeData={{ valueList: vm.valueSet.transfersType }}
                >
                  <a
                    href="javascript:;"
                    onClick={e => {
                      vm.openPaymentInfo(params.row, true, true);
                    }}
                  >
                    编辑
                  </a>
                </PaymentInfoRead>
              );
            //   return h("RowTools", {
            //   props: {
            //     data: [
            //       {
            //         text: "编辑",
            //         handle: () => {
            //           this.openPaymentInfo(params.row);
            //         }
            //       }
            //     ]
            //   }
            // });
            }
          }
        },

        {
          title: '付款申请单',
          align: 'left',
          key: 'claimNo',
          width: 160,
          render: (h, params) => {
            return h(
              'span',
              {
                attrs: {
                  title: params.row.claimNo
                }
              },
              params.row.claimNo
            );
            // return h('RowTools', {
            //   props: {
            //     data: [
            //       {
            //         text: params.row.claimNo,
            //         handle: () => {
            //           // 打开新页面查看明细
            //           vm.openPayBatch(params.row);
            //         }
            //       }
            //     ]
            //   }
            // });
          }
        },
        {
          title: '行号',
          align: 'left',
          key: 'lineNumber',
          width: 100
        },
        {
          title: '申请类型',
          align: 'left',
          key: 'categoryName',
          width: 140,
          render: (h, params) => {
            return h(
              'span',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.categoryName
                }

              },
              params.row.categoryName
            );
          }
        },
        {
          title: '归属公司',
          align: 'left',
          key: 'ouName',
          width: 170
        },
        {
          title: '供应商',
          align: 'left',
          key: 'vendorName',
          width: 180,
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    class: 'ivu-table-cell-ellipsis',
                    title: params.row.vendorName
                  }

                },
                params.row.vendorName
              )
            ]);
          }
        },
        {
          title: '地点',
          align: 'left',
          // key: "vendorSite",
          key: 'receiVendorSite',
          width: 80,
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    class: 'ivu-table-cell-ellipsis',
                    title: params.row.receiVendorSite
                  }

                },
                params.row.receiVendorSite
              )
            ]);
          }
        },
        {
          title: '供应商类型',
          align: 'left',
          key: 'vendorType',
          width: 100,
          render: (h, params) => {
            let text = '';
            if (params.row.vendorAccountType == '1') {
              text = '对私';
            } else if (params.row.vendorAccountType == '0') {
              text = '对公';
            }
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '申请金额',
          align: 'right',
          key: 'applyPayAmount',
          width: 80,
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    title: accounting.formatNumber(params.row.applyPayAmount, 2)
                  }

                },
                accounting.formatNumber(params.row.applyPayAmount, 2)
              )
            ]);
          }
        },
        {
          title: '未付金额',
          align: 'left',
          key: 'unPayAmount',
          width: 80,
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    title: accounting.formatNumber(params.row.unPayAmount, 2)
                  }

                },
                accounting.formatNumber(params.row.unPayAmount, 2)
              )
            ]);
          }
        },
        {
          title: '未准备金额',
          align: 'left',
          key: 'unpreparedAmount',
          width: 80,
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    title: accounting.formatNumber(params.row.unpreparedAmount, 2)
                  }

                },
                accounting.formatNumber(params.row.unpreparedAmount, 2)
              )
            ]);
          }
        },
        {
          title: '币种',
          width: 80,
          align: 'left',
          key: 'currency',
          render: (h, params) => {
            const val = params.row.currency;
            const list = vm.valueSet.currency || [];
            let text = '';
            list.forEach(function(item) {
              if (item.value == val) {
                text = item.label;
                return false;
              }
            });
            return h('div', {}, text);
          }
        },
        {
          title: '收款方户名',
          width: 180,
          align: 'left',
          // key: "vendorAccountName",
          key: 'receiVendorName',
          render: (h, params) => {
            return h(
              'span',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.receiVendorName
                }

              },
              params.row.receiVendorName
            );
          }
        },
        {
          title: '收款账户',
          width: 180,
          align: 'left',
          // key: "vendorAccountNo",
          key: 'receiVendorAccountNo',
          render: (h, params) => {
            return h('div', [
              h(
                'span',
                {
                  attrs: {
                    title: `${params.row.receiVendorAccountNo}-${params.row.vendorAreaCode}-${params.row.vendorCbankCode}-${params.row.vendorBankId}`
                  }
                },
                params.row.receiVendorAccountNo
              )
            ]);
          }
        },
        {
          title: '优先级',
          width: 80,
          align: 'left',
          key: 'priority',
          render: (h, params) => {
            let text = '';
            if (vm.valueSet.PRIORITY) {
              for (let i = 0; i < vm.valueSet.PRIORITY.length; i++) {
                if (vm.valueSet.PRIORITY[i].value == params.row.priority) {
                  text = vm.valueSet.PRIORITY[i].label;
                }
              }
            }
            return h(
              'span',
              {},
              text
            );
          }
        },
        {
          title: '申请人',
          width: 80,
          align: 'left',
          key: 'applyEmpName'
        },
        {
          title: '创建日期',
          width: 180,
          align: 'left',
          key: 'createdTime'
        }
        // {
        //   title: "项目编码",
        //   width: 100,
        //   align: "left",
        //   key: "projectCode"
        // },
        // {
        //   title: "项目名称",
        //   width: 180,
        //   align: "left",
        //   key: "projectName"
        // }
      ];
    },
    // 付款准备
    // payPreparetion() {
    //   let self = this;
    //   if (self.selections.length > 0) {
    //     new $confirm(`你确定要准备付款吗？`, this).then(() => {
    //       this.showModal(
    //         self.selections[0].payLineId,
    //         self.selections[0].applyPayAmount,
    //         self.selections[0].payRequestCompanyCode
    //       );
    //     });
    //   } else {
    //     self.$Message.info("至少选择一条付款准备明细行");
    //   }
    // },
    showModal(payLineId, applyAmount, payRequestCompanyCode) {
      new this.$pageModal(PayInfoForm, {
        props: {
          payLineId: payLineId,
          showAmount: this.showAmount,
          applyAmount: applyAmount,
          companyCode: payRequestCompanyCode
        },
        on: {
          save: () => {
            this.$emit('save');
            vm.basicInfoComponent.init();
            vm.paymentApplyInfoComponent.init();
            vm.payLineDetailInfoComponent.init();
            vm.selections = [];
          },
          delete: () => {
            this.$emit('delete');
            vm.basicInfoComponent.init();
            vm.paymentApplyInfoComponent.init();
            vm.payLineDetailInfoComponent.init();
            vm.selections = [];
          }
        }
      });
    },
    // 自动付款准备
    autoPayPrepation() {
      const self = this;
      const applyInfoData = this.selections;
      const payLineIds = [];
      if (applyInfoData.length > 0) {
        for (let i = 0; i < applyInfoData.length; i++) {
          if (applyInfoData[i].payLineId) {
            payLineIds.push(applyInfoData[i].payLineId);
          }
        }
        new $confirm('你确定要自动付款吗？', this).then(() => {
          this.autoPreparePayLoad = true;
          vm.server.autoPreparePayment(payLineIds).then(response => {
            this.autoPreparePayLoad = false;
            if (response.code == '0') {
              self.$Message.error({
                content: response.msg || '操作失败',
                duration: 5
              });
            } else {
              self.$Message.success(
                {
                  content: response.msg || '操作成功',
                  duration: 5
                });
              vm.basicInfoComponent.init();
              vm.paymentApplyInfoComponent.init();
              vm.payLineDetailInfoComponent.init();
            }
          });
        });
      } else {
        self.$Message.info('至少存在一条付款准备明细行');
      }
    },
    // 释放准备申请明细行
    releasePayMentPrepation() {
      const self = this;
      if (self.selections.length > 0) {
        new $confirm('你确定要释放准备明细行吗？', self).then(() => {
          self.releaseLoad = true;
          vm.server
            .releasePaymentApply({
              payBatchId: self.batchId,
              payLineIds: self.payLineIds
            })
            .then(response => {
              self.releaseLoad = false;
              if (response.code == '0') {
                self.$Message.info(response.msg);
              } else {
                vm.basicInfoComponent.init();
                vm.paymentApplyInfoComponent.init();
                vm.payLineDetailInfoComponent.init();
                self.$Message.success('操作成功');
              }
            });
        });
      } else {
        self.$Message.info('至少选择一条付款准备明细行');
      }
    },
    // 点击展开
    clickExpand(row, state) {
      if (state) {
      }
    },
    // 获取选中数
    getSelections(data) {
      const self = this;
      self.payLineIds = [];
      this.payRequestLineIds = [];
      this.selections = data;
      for (let i = 0; i < self.selections.length; i++) {
        self.payLineIds.push(self.selections[i].payLineId);
        self.payRequestLineIds.push(self.selections[i].payRequestLineId);
      }
    },
    dataSelectComponents(code, params, value) {
      return (
        <DataSelect code={code} disabled style="width:120px" value={value} />
      );
    },
    // 作废
    cancelProcess() {
      const self = this;
      new $confirm('你确定要作废当前付款准备吗？', this).then(() => {
        this.submitLoading = true;
        vm.server
          .cancelPaymentPreparation({ payBatchId: self.batchId })
          .then(response => {
            this.submitLoading = false;
            if (response.data.code == '0') {
              self.$Message.info(response.data.msg);
            } else {
              self.$Message.success('操作成功');
              window.close();
            }
          });
      });
    },
    // 查看行明细 打开新页面
    openPayBatch(data) {
      const newWindow = window.open();
      data.openFromPayPlatform = true;
      const params = {
        claimId: data.claimId,
        claimNo: data.claimNo,
        categoryName: data.categoryName,
        createdTime: data.createdTime,
        updateTime: data.updateTime,
        openFromPayPlatform: data.openFromPayPlatform,
        newWindow: newWindow
      };
      util.openByClaimIdAndClaimNo(params);
    },
    openPaymentInfo(data, flag, isPaymentCreate) {
      new this.$pageModal(PayInfoForm, {
        props: {
          payLineId: data.payLineId,
          showAmount: this.showAmount,
          applyAmount: data.applyPayAmount,
          companyCode: data.ouCode,
          compName: data.ouName,
          checkFlag: flag || false,
          isPaymentCreate: isPaymentCreate
        },
        on: {
          save: () => {
            this.$emit('save');
            vm.basicInfoComponent.init();
            vm.paymentApplyInfoComponent.init();
            vm.payLineDetailInfoComponent.init();
            vm.selections = [];
          }
        }
      });
    }
  },
  watch: {},
  directives: {}
};
</script>
