<template>
  <div class="run-mod-box preparePaymentDetailList">
    <EMSTableNew
      ref="preparePaymentTableDatas"
      :autoFirst="false"
      :server="server"
      action="QueryPreparePaymentTableDatas"
      :params="formSearch"
      :columnsFn="preparePaymentColumns"
      :highlight-row="true"
    >
      <Form
        ref="formSearch"
        slot="search-bar"
        :model="formSearch"
        :rules="rule"
        :label-width="120"
      >
        <Row>
          <Col span="6">
          <Form-item
            prop="ouCode"
            label="归属公司"
          >
            <Select
              ref="selectCompany"
              v-model="formSearch.ouCode"
              transfer
            >
              <Option
                v-for="item in companyList"
                :key="item.companyCode"
                :value="item.companyCode"
              >
                {{ item.ouName }}
              </Option>
            </Select>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="_creatTime"
            label="创建时间"
          >
            <Date-picker
              v-model="formSearch._creatTime"
              :editable="false"
              type="daterange"
              format="yyyy/MM/dd"
              transfer
              clearable
              @on-change="handleCreatTime"
            ></Date-picker>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="claimNo"
            label="付款申请单号"
          >
            <Input
              v-model="formSearch.claimNo"
              class=""
              type="text"
              maxlength="30"
              clearable
            ></Input>
          </Form-item>
          </Col>

          <Col
            v-show="!showMore"
            span="6"
          >
          <div class="search_btns ivu-form-item">
            <Button
              type="warning"
              class="ems-btn-medium ems-btn-type1"
              style="padding: 0 18px;"
              @click.native="search"
            >
              {{ $t("查询") }}
            </Button>
            <Button
              class="ems-btn-medium ems-btn-type3"
              style="padding: 0 18px;"
              @click.native="reset"
            >
              {{ $t("重置") }}
            </Button>
            <a @click="changeShowMore">{{ $t('查看更多') }}</a>
          </div>
          </Col>

          <Col span="6">
          <Form-item
            prop="batchNo"
            label="付款准备批号"
          >
            <Input
              v-model="formSearch.batchNo"
              class=""
              type="text"
              maxlength="30"
              clearable
            ></Input>
          </Form-item>
          </Col>

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

          <Col span="6">
          <Form-item
            prop="payStatus"
            label="付款状态"
          >
            <DataSelect
              v-model="formSearch.payStatus"
              class=""
              code="PAYMENT_STATUS"
              clearable
              @loadFinish="loadFinishPayStatus"
            ></DataSelect>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="amountRange"
            label="付款准备金额"
          >
            <NumberRangeFix
              :startAmount="formSearch.leftAmount"
              :endAmount="formSearch.rightAmount"
              :tofixed="2"
              placeholder=""
              clearable
              @inputStart="onInputStart"
              @inputEnd="onInputEnd"
            />
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="currency"
            label="币种"
          >
            <DataSelect
              v-model="formSearch.currency"
              class=""
              code="currency"
              clearable
            ></DataSelect>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="vendorType"
            label="供应商类型"
          >
            <DataSelect
              v-model="formSearch.vendorType"
              class=""
              code="vendorType"
              clearable
              @loadFinish="loadFinishVendorType"
            ></DataSelect>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="payTime"
            label="支付时间"
          >
            <Date-picker
              v-model="formSearch._payTime"
              :editable="false"
              type="daterange"
              format="yyyy/MM/dd"
              clearable
              transfer
              @on-change="handlePayTime"
            ></Date-picker>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="applyDeptName"
            label="申请人部门"
          >
            <Input
              v-model="formSearch.applyDeptName"
              class=""
              type="text"
              maxlength="30"
              clearable
            ></Input>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="vendorName"
            label="供应商"
          >
            <Input
              v-model="formSearch.vendorName"
              class=""
              type="text"
              maxlength="30"
              clearable
            ></Input>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            v-show="false"
            label="付款通道"
          >
            <DataSelect
              code="payWay"
              clearable
              @loadFinish="loadFinishPayWay"
            ></DataSelect>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item label="付款方式">
            <DataSelect
              v-model="formSearch.paymentMethod"
              code="PAYMENT_MODE"
              clearable
              @loadFinish="loadFinishApplyType"
            ></DataSelect>
          </Form-item>
          </Col>

          <Col
            v-show="showMore"
            span="18"
          >
          <div class="search_btns ivu-form-item">
            <Button
              type="warning"
              class="ems-btn-medium ems-btn-type1"
              style="padding: 0 18px;"
              @click.native="search"
            >
              {{ $t("查询") }}
            </Button>
            <Button
              class="ems-btn-medium ems-btn-type3"
              style="padding: 0 18px;"
              @click.native="reset"
            >
              {{ $t("重置") }}
            </Button>
            <a @click="changeShowMore">{{ $t('隐藏条件') }}</a>
          </div>
          </Col>
        </Row>
      </Form>
      <!-- <div
        slot="handle-bar"
        style="padding-bottom: 20px;"
      >
        <Button
          type="warning"
          icon="search"
          @click.native="search"
        >
          {{ $t('查询') }}
        </Button>
        <Button
          type="info"
          icon="loop"
          @click.native="reset"
        >
          {{ $t('重置') }}
        </Button>
      </div> -->
      <div slot="table-bar">
        <Button
          type="info"
          icon="loop"
          @click.native="exitFiles"
        >
          导出明细
        </Button>
      </div>
    </EMSTableNew>
  </div>
</template>
<script>
import {
  // SelectProject,
  NumberRangeFix
} from '@paymentPlatformComps/index.js';
import accounting from 'accounting';
import util from '@paymentPlatformSrc/tools/util.js';
import Server from './server.js';
import miment from 'miment';
const server = new Server();
let vm;
export default {
  components: {
    // SelectProject,
    NumberRangeFix
  },
  directives: {},
  data() {
    return {
      companyList: [],
      payLineDetailId: '',
      companyMap: {},
      vendorTypeMap: {},
      payStatusMap: {},
      payWayMap: {},
      applyTypeMap: {},
      server: server,
      // branchNo (string, optional): 付款准备/付款准备批号 ,
      // claimNo (string, optional): 付款申请号 ,
      // currency (string, optional): 币种 ,
      // endDate (string, optional): 创建截止时间 ,
      // invoiceNo (string, optional): 发票编号 ,
      // leftAmount (string, optional): 付款准备金额左值 ,
      // leftPayDate (string, optional): 支付时间左值 ,
      // apply (string, optional): 申请人部门 ,
      // ouCode (string, optional): 归属公司 ,
      // payStatus (string, optional): 付款状态 ,
      // payWay (string, optional): 付款通道 ,
      // projectCode (string, optional): 项目编码 ,
      // rightAmount (string, optional): 付款准备金额右值 ,
      // rightPayDate (string, optional): 支付时间右值 ,
      // startDate (string, optional): 创建起始时间 ,
      // status (string, optional): 准备单状态 ,
      // vendorName (string, optional): 供应商/供应商名称 ,
      // vendorType (string, optional): 供应商类型
      formSearch: {
        _creatTime: '', // 创建时间
        _payTime: '', // 支付时间
        // flag: "Y",
        batchNo: '', // 付款准备/付款准备批号 ,
        claimNo: '', // 付款申请号
        currency: '', // 币种
        startDate: '', // 创建起始时间
        endDate: '', // 创建截止时间
        // invoiceNo: "", //发票编号
        leftAmount: '', // 付款准备金额左值
        rightAmount: '', // 付款准备金额右值
        leftPayDate: '', // 支付时间左值
        rightPayDate: '', // 支付时间右值
        applyDeptName: '', // 申请人部门
        ouCode: '', // 归属公司
        payStatus: '', // 付款状态
        paymentMethod: '', // 付款方式
        projectCode: '', // 项目编码
        vendorName: '', // 供应商/供应商名称
        vendorType: '', // 供应商类型
        amountRange: '',
        invoiceClaimNo: '',
        flag: '0'
      },
      rule: {
        ouCode: [
          {
            required: true,
            message: '请选择归属公司'
          }
        ]
      },
      showMore: false
    };
  },
  created: function() {
    vm = this;
  },
  updated: function() {},
  beforeMount: function() {},
  mounted: function() {
    // 查询归属公司
    const self = this;
    self.server.queryCompanySelect().then(response => {
      if (response.statusCode == '-1') {
        self.$Message.error(response.msg);
      } else {
        self.companyList = response;
        // self.formSearch.ouCode = response[0].companyCode;
      }
    });
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    changeShowMore() {
      this.showMore = !this.showMore;
      this.$refs.preparePaymentTableDatas.showMore();
    },
    onInputStart(startVal) {
      this.formSearch.leftAmount = startVal;
    },
    onInputEnd(endVal) {
      this.formSearch.rightAmount = endVal;
    },
    handleCreatTime([s = '', e = ''] = []) {
      this.formSearch.startDate = s ? miment(s).format('YYYY-MM-DD hh:mm:ss') : '';
      this.formSearch.endDate = e ? miment(e).format('YYYY-MM-DD hh:mm:ss') : '';
    },
    handlePayTime([s = '', e = ''] = []) {
      this.formSearch.leftPayDate = s ? miment(s).format('YYYY-MM-DD hh:mm:ss') : '';
      this.formSearch.rightPayDate = e ? miment(e).format('YYYY-MM-DD hh:mm:ss') : '';
    },
    handleSelect(data) {
      this.formSearch.projectCode = data.projectCode;
    },
    loadFinishPayStatus(data) {
      if (data != null) {
        this.payStatusMap = data.valueMap;
      }
    },
    loadFinishVendorType(data) {
      if (data != null) {
        this.vendorTypeMap = data.valueMap;
      }
    },
    loadFinishPayWay(data) {
      if (data != null) {
        this.payWayMap = data.valueMap;
      }
    },
    loadFinishApplyType(data) {
      if (data != null) {
        this.applyTypeMap = data.valueMap;
      }
    },
    // 表头字段定义
    preparePaymentColumns() {
      return [
        {
          title: '付款准备批号',
          align: 'left',
          key: 'batchNo',
          sortable: 'custom',
          width: 160,
          resizable: true,
          render: (h, params) => {
            return h('RowTools', {
              props: {
                data: [
                  {
                    text: params.row.batchNo,
                    handle: () => {
                      vm.openPayBatch(params.row);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: '付款通道',
          align: 'left',
          key: 'payWay',
          // sortable: "custom",
          width: 150,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: vm.payWayMap[params.row.payWay]
                }
              },
              vm.payWayMap[params.row.payWay]
            );
          }
        },
        {
          title: '付款公司',
          align: 'left',
          key: 'ouName',
          // sortable: "custom",
          width: 140,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.ouName
                }
              },
              params.row.ouName
            );
          }
        },
        {
          title: '银行账户名称',
          // sortable: "custom",
          align: 'left',
          key: 'payAccountName',
          width: 140,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.payAccountName
                }
              },
              params.row.payAccountName
            );
          }
        },
        {
          title: '付款状态',
          // sortable: "custom",
          align: 'left',
          key: 'payStatus',
          width: 140,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: vm.payStatusMap[
                    params.row.payStatus
                  ]
                }
              },
              vm.payStatusMap[params.row.payStatus]
            );
          }
        },

        {
          title: '付款账号',
          align: 'left',
          key: 'payAccountNo',
          // sortable: "custom",
          width: 200,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.payAccountNo
                }
              },
              params.row.payAccountNo
            );
          }
        },
        {
          title: '准备付款金额',
          align: 'left',
          key: 'payAmount',
          // sortable: "custom",
          width: 120,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: accounting.formatNumber(
                    params.row.payAmount,
                    2
                  )
                }
              },
              accounting.formatNumber(
                params.row.payAmount,
                2
              )
            );
          }
        },
        {
          title: '付款申请单号',
          align: 'left',
          key: 'claimNo',
          // sortable: "custom",
          width: 180,
          resizable: true,
          render: (h, params) => {
            return h(
              'span',
              {
                attrs: {
                  title: params.row.claimNo
                }
              },
              params.row.claimNo
            );
          }
        },
        {
          title: '供应商',
          align: 'left',
          key: 'vendorName',
          resizable: true,
          // sortable: "custom",
          width: 160,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.vendorName
                }
              },
              params.row.vendorName
            );
          }
        },
        {
          title: '供应商类型',
          align: 'left',
          key: 'vendorType',
          // sortable: "custom",
          width: 100,
          resizable: true,
          render: (h, params) => {
            const valueSets = {
              EMPLOYEE: '对私'
            };
            let val = '';
            if (params.row.vendorType) {
              val = valueSets[params.row.vendorType] ? valueSets[params.row.vendorType] : '对公';
            }
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '初审会计',
          align: 'left',
          key: 'accountEmpName',
          // sortable: "custom",
          width: 120,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.accountEmpName
                }
              },
              params.row.accountEmpName
            );
          }
        },
        {
          title: '付款方式',
          align: 'left',
          key: 'paymentMethod',
          // sortable: "custom",
          width: 120,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: vm.applyTypeMap[params.row.paymentMethod]
                }
              },
              vm.applyTypeMap[params.row.paymentMethod]
            );
          }
        },
        {
          title: '创建人',
          align: 'left',
          key: 'createdByName',
          // sortable: "custom",
          width: 140,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.createdByName
                }
              },
              params.row.createdByName
            );
          }
        },
        {
          title: '创建日期',
          align: 'left',
          key: 'createdTime',
          sortable: 'custom',
          width: 150,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.createdTime
                }
              },
              params.row.createdTime
            );
          }
        },
        {
          title: '收款方户名',
          align: 'left',
          key: 'vendorAccountName',
          sortable: 'custom',
          width: 150,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.vendorAccountName
                }
              },
              params.row.vendorAccountName
            );
          }
        },
        {
          title: '收款账号',
          align: 'left',
          key: 'receiVendorAccountNo',
          sortable: 'custom',
          width: 150,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.receiVendorAccountNo
                }
              },
              params.row.receiVendorAccountNo
            );
          }
        },
        {
          title: '支付时间',
          align: 'left',
          key: 'payTime',
          // sortable: "custom",
          width: 150,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.payTime
                }
              },
              params.row.payTime
            );
          }
        },
        {
          title: '申请部门',
          align: 'left',
          key: 'applyDeptName',
          // sortable: "custom",
          width: 200,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.applyDeptName
                }
              },
              params.row.applyDeptName
            );
          }
        }
      ];
    },
    // 搜索
    search(page) {
      if (!this.formSearch.ouCode) {
        this.$Message.warning('请选择归属公司');
        return;
      }
      this.$refs.preparePaymentTableDatas.load(this.formSearch, page);
    },
    // 重置
    reset() {
      const formSearch = this.formSearch;
      Object.keys(formSearch).map(key => {
        formSearch[key] = '';
      });
      this.formSearch.flag = '3';
      // this.formSearch.ouCodeList = this.companyList[0] ? this.companyList[0].companyCode : '';
      // this.search(1);
    },
    // 查看行明细 打开新页面
    openPayBatch(param) {
      const isView = false;
      util.openCreatePayment(isView, param.batchId, param.batchNo);
    },
    // 查看行明细 打开新页面
    openPayBatchPage(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);
    },
    // 导出明细
    exitFiles() {
      const dealParams = {
        page: {
          currentPage: 1,
          pageSize: 1000
        },
        params: this.formSearch,
        sortDTO: {
          fieldName: '',
          orderBy: ''
        }
      };
      const params = {
        url: '/ems-payment/payLineDetailQuery/exportPayDetailInfo',
        method: 'post',
        data: {
          params: dealParams
          // sheetName: this.detailTypeByRowData,
          // fileName: this.detailTypeByRowData
        }
      };
      this.$DownloadFile(params);
    }
  }
};
</script>
<style lang="less" scoped>
  /deep/ .ivu-form-item-required {
    .ivu-form-item-label {
      height:32px;
    }
  }
    .preparePaymentDetailList{
        .ivu-form-no-margin-bottom .ivu-form-item .ivu-form-item-content{
            white-space: normal;
        }
        .emstable-wrap .handle-bar{
            z-index: 1;
        }
        .ivu-select-selection{
            z-index: 2;
        }
    }
</style>
