<template>
  <div>
    <EMSTable
      ref="paymentApplyInfoTable"
      :server="server"
      action="queryEditTable"
      :initParam="applyParams"
      :columnsFn="accounGroupColumns"
      :autoFill="true"
    >
      <Form
        ref="form"
        slot="search-bar"
        :model="applyParams"
        label-position="top"
        class="ivu-applyParams-no-margin-bottom"
        inline
      >
        <Form-item
          prop="payRequestCompanyCode"
          label="归属公司"
        >
          <Select
            ref="selectCompany"
            v-model="applyParams.payRequestCompanyCode"
            filterable
            transfer
            clearable
          >
            <Option
              v-for="item in companyList"
              :key="item.companyCode"
              :value="item.companyCode"
            >
              {{ item.ouName }}
            </Option>
          </Select>
        </Form-item>

        <Form-item
          prop="claimNo"
          label="付款申请号"
        >
          <Input
            v-model="applyParams.claimNo"
            type="text"
            maxlength="30"
            size="small"
            clearable
          ></Input>
        </Form-item>

        <Form-item
          prop="invoiceNo"
          label="发票编号"
        >
          <Input
            v-model="applyParams.invoiceNo"
            type="text"
            maxlength="30"
            size="small"
            clearable
          ></Input>
        </Form-item>

        <Form-item
          prop="invoiceClaimNo"
          label="关联报账单号"
        >
          <Input
            v-model="applyParams.invoiceClaimNo"
            type="text"
            maxlength="30"
            clearable
          ></Input>
        </Form-item>

        <Form-item
          prop="vendorType"
          label="供应商类型"
        >
          <DataSelect
            v-model="applyParams.vendorType"
            size="small"
            code="vendorType"
            clearable
            transfer
          ></DataSelect>
        </Form-item>

        <Form-item
          prop="vendorName"
          label="供应商名称"
        >
          <Input
            v-model="applyParams.vendorName"
            type="text"
            maxlength="30"
            size="small"
            clearable
          ></Input>
        </Form-item>

        <Form-item
          prop="paymentMode"
          label="付款方式"
        >
          <DataSelect
            v-model="applyParams.paymentMode"
            size="small"
            code="PAYMENT_MODE"
            clearable
          ></DataSelect>
        </Form-item>
        <Form-item
          prop="amountRange"
          label="准备付款金额"
        >
          <NumberRangeFix
            :startAmount="formSearch.preparePayAmountFrom"
            :endAmount="formSearch.preparePayAmountTo"
            :tofixed="2"
            placeholder=""
            size="small"
            clearable
            @inputStart="onInputStart"
            @inputEnd="onInputEnd"
          />
        </Form-item>
        <Form-item
          prop="date"
          label="创建时间起止"
        >
          <Date-picker
            v-model="applyParams.date"
            :editable="false"
            type="daterange"
            format="yyyy/MM/dd"
            size="small"
            clearable
            transfer
          ></Date-picker>
        </Form-item>

        <!-- <Form-item prop="projectCode" label="项目编码">
          <SelectProject size="small" @handleSelect="handleSelect" v-model="applyParams.projectName" :value="applyParams.projectName"  isValidity="" isPost="Y" clearable></SelectProject>
        </Form-item> -->

        <Form-item
          prop="currency"
          label="币种"
        >
          <DataSelect
            v-model="applyParams.currency"
            size="small"
            code="currency"
            clearable
          ></DataSelect>
        </Form-item>
      </Form>
      <div slot="handle-bar">
        <Button
          size="small"
          type="warning"
          icon="search"
          @click.native="search"
        >
          付款申请明细查询
        </Button>
        <Button
          size="small"
          type="info"
          icon="loop"
          @click.native="reset"
        >
          {{ $t('重置') }}
        </Button>
      </div>
    </EMSTable>
  </div>
</template>
<script>
import util from '@paymentPlatformSrc/tools/util.js';
import miment from 'miment';
import { mapMutations } from 'vuex';
import Server from './server.js';
import accounting from 'accounting';
import {
  // SelectProject,
  PayInfoForm,
  NumberRangeFix,
  PaymentInfoRead
} from '@paymentPlatformComps/index.js';
let vm;
const server = new Server();
export default {
  components: {
    // SelectProject,
    NumberRangeFix
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    companyList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    vm = this;
    return {
      // 因为表格数据改变的时候回重新渲染表格
      // 所以用另外一个数据来修改值  达到不重新渲染表格的目的
      tableData: [],
      server: server,
      showAmount: true,
      codeValues: {},
      applyParams: {
        payRequestCompanyCode: '',
        claimNo: '',
        invoiceNo: '',
        invoiceClaimNo: '',
        vendorType: '',
        vendorName: '',
        paymentMode: '',
        amountRange: '',
        preparePayAmountFrom: '',
        preparePayAmountTo: '',
        date: '',
        createdTimeFrom: '',
        createdTimeTo: '',
        projectCode: '',
        projectName: '',
        currency: ''
      }
    };
  },
  computed: {
  },
  created: function() {
    this.$emit('SetTitle', this.title);
    this.$emit('SetPageSize', window.innerWidth * 0.9);
    vm = this;
  },
  beforeMount: function() {},
  mounted: function() {
    window.bb = this;
    const self = this;
    // 查询付款准备状态值集
    self.queryAndSetcodeValues('PAY_MENT_STATUS');
    // 查询优先级值集
    self.queryAndSetcodeValues('PRIORITY');
    // 查询币种值集
    self.queryAndSetcodeValues('currency');
    // 查询付款方式值集
    self.queryAndSetcodeValues('PAYMENT_MODE');
    // 查询资金计划值集
    self.queryAndSetcodeValues('capitalPlan');
    // 转账类型
    self.queryAndSetcodeValues('transfersType');
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    ...mapMutations('createPaymentPreparation', []),
    init() {
      const page = 1;
      this.$refs.paymentApplyInfoTable.load({}, page);
    },
    onInputStart(startVal) {
      this.applyParams.preparePayAmountFrom = startVal;
    },
    onInputEnd(endVal) {
      this.applyParams.preparePayAmountTo = endVal;
    },
    accounGroupColumns() {
      return [
        {
          title: '状态',
          align: 'left',
          width: 80,
          key: 'prepareStatus',
          sortable: 'custom',
          render: (h, params) => {
            let text = '';
            if (vm.codeValues.PAY_MENT_STATUS) {
              for (
                let i = 0;
                i < vm.codeValues.PAY_MENT_STATUS.length;
                i++
              ) {
                if (
                  vm.codeValues.PAY_MENT_STATUS[i].value ==
                  params.row.prepareStatus
                ) {
                  text = vm.codeValues.PAY_MENT_STATUS[i].label;
                }
              }
            }

            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '付款信息',
          align: 'left',
          width: 80,
          sortable: 'custom',
          render: (h, params) => {
            return (
              <PaymentInfoRead
                trigger="hover"
                placement="right-start"
                width="650"
                payLineId={params.row.payLineId}
                payMentModeData={{ valueList: vm.codeValues.PAYMENT_MODE }}
                capitalPlanData={{ valueList: vm.codeValues.capitalPlan }}
                transfersTypeData={{
                  valueList: vm.codeValues.transfersType
                }}
              >
                <a
                  href="javascript:;"
                  onClick={e => {
                    vm.openPaymentInfo(params.row);
                  }}
                >
                  编辑
                </a>
              </PaymentInfoRead>
            );
          }
        },
        {
          title: '付款申请单',
          align: 'left',
          key: 'claimNo',
          sortable: 'custom',
          width: 160,
          render: (h, params) => {
            // return h('RowTools', {
            //   props: {
            //     data: [
            //       {
            //         text: params.row.claimNo,
            //         handle: () => {
            //           // 打开新页面查看明细
            //           vm.openPayBatch(params.row);
            //         }
            //       }
            //     ]
            //   }
            // });
            return h(
              'span',
              {
                attrs: {
                  title: params.row.claimNo
                }
              },
              params.row.claimNo
            );
          }
        },
        {
          title: '行号',
          align: 'left',
          sortable: 'custom',
          key: 'payRequestLineId',
          width: 100
        },
        {
          title: '申请类型',
          align: 'left',
          key: 'categoryName',
          sortable: 'custom',
          minWidth: 140
        },
        {
          title: '归属公司',
          align: 'left',
          sortable: 'custom',
          key: 'payRequestCompanyName',
          width: 170
        },
        {
          title: '供应商',
          align: 'left',
          key: 'vendorName',
          sortable: 'custom',
          width: 180
        },
        {
          title: '地点',
          align: 'left',
          sortable: 'custom',
          key: 'vendorSite',
          width: 80
        },
        {
          title: '供应商类型',
          align: 'left',
          sortable: 'custom',
          key: 'vendorType',
          width: 100,
          render: (h, params) => {
            let text = '';
            if (params.row.vendorType == 'EMPLOYEE') {
              text = '对私';
            } else {
              if (params.row.vendorType) {
                text = '对公';
              }
            }
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '申请金额',
          align: 'right',
          sortable: 'custom',
          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: 'right',
          sortable: 'custom',
          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: 'right',
          sortable: 'custom',
          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',
          sortable: 'custom',
          key: 'currency',
          render: (h, params) => {
            const val = params.row.currency;
            const list = vm.codeValues.currency || [];
            let text = '';
            list.forEach(function(item) {
              if (item.value == val) {
                text = item.label;
                return false;
              }
            });
            return h('div', {}, text);
          }
        },
        {
          title: '收款方户名',
          width: 180,
          sortable: 'custom',
          align: 'left',
          key: 'accountName'
        },
        {
          title: '收款账户',
          width: 180,
          sortable: 'custom',
          align: 'left',
          key: 'bankAccount'
        },
        {
          title: '优先级',
          width: 80,
          sortable: 'custom',
          align: 'left',
          key: 'priority',
          render: (h, params) => {
            let text = '';
            if (vm.codeValues.PRIORITY) {
              for (let i = 0; i < vm.codeValues.PRIORITY.length; i++) {
                if (vm.codeValues.PRIORITY[i].value == params.row.priority) {
                  text = vm.codeValues.PRIORITY[i].label;
                }
              }
            }
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: text
                }
              },
              text
            );
          }
        },
        {
          title: '申请人',
          width: 80,
          sortable: 'custom',
          align: 'left',
          key: 'applyEmpName'
        },
        {
          title: '创建日期',
          width: 180,
          align: 'left',
          sortable: 'custom',
          key: 'createdTime'
        }
        // {
        //   title: "项目编码",
        //   width: 100,
        //   sortable: "custom",
        //   align: "left",
        //   key: "projectCode"
        // },
        // {
        //   title: "项目名称",
        //   width: 180,
        //   align: "left",
        //   sortable: "custom",
        //   key: "projectName"
        // }
      ];
    },
    queryAndSetcodeValues(code) {
      if (!code) {
        return;
      }
      const self = this;
      self.server.QueryValueSetByCode({ code: code }).then(response => {
        vm.codeValues[code] = response;
      });
    },
    // 搜索
    search(page = 1) {
      const createdTimeFrom = this.applyParams.date[0];
      const createdTimeTo = this.applyParams.date[1];
      if (createdTimeFrom != '') {
        this.applyParams.createdTimeFrom = miment(createdTimeFrom).format('YYYY-MM-DD');
      }
      if (createdTimeTo != '') {
        this.applyParams.createdTimeTo = miment(createdTimeTo)
          .add(1, 'DD')
          .format('YYYY-MM-DD');
      }
      this.$refs.paymentApplyInfoTable.load(this.applyParams, page);
    },
    // 重置
    reset() {
      const applyParams = this.applyParams;
      Object.keys(applyParams).map(key => {
        applyParams[key] = '';
      });
      this.$refs.form.resetFields();
      this.search(1);
    },
    // 查看行明细 打开新页面
    openPayBatch(data) {
      const newWindow = window.open();
      data.openFromPayPlatform = true;
      const params = {
        claimId: data.claimId,
        claimNo: data.claimNo,
        openFromPayPlatform: data.openFromPayPlatform,
        newWindow: newWindow
      };
      util.openByClaimIdAndClaimNo(params);
    },
    openPaymentInfo(data) {
      new this.$pageModal(PayInfoForm, {
        props: {
          payLineId: data.payLineId,
          showAmount: this.showAmount,
          applyAmount: data.applyPayAmount,
          categoryCode: data.categoryCode,
          companyCode: data.payRequestCompanyCode,
          checkFlag: false,
          paymentEdit: true
        },
        on: {
          save: () => {
            this.search(1);
          }
        }
      });
    },
    handleSelect(data) {
      this.applyParams.projectCode = data.projectCode;
    }
  },
  watch: {
    // 'applyParams.amountRange': {
    //   handler() {
    //     const range = this.applyParams.amountRange;
    //     this.applyParams.preparePayAmountFrom = range.start;
    //     this.applyParams.preparePayAmountTo = range.end;
    //   },
    //   deep: true
    // },
    'applyParams.date': {
      handler() {
        const date = this.applyParams.date;
        this.applyParams.createdTimeFrom = date[0];
        this.applyParams.createdTimeTo = date[1];
      },
      deep: true
    },
    'applyParams.projectName': {
      handler() {
        const projectName = this.applyParams.projectName;
        if (projectName == '') {
          this.applyParams.projectCode = '';
        }
      },
      deep: true
    }
  },
  directives: {}
};
</script>
<style scoped>
.ivu-table-sort i.on{
  color:#bbbec4;
}
</style>
