<template>
  <div class="run-mod-box">
    <EMSTableNew
      ref="preparePaymentTableDatas"
      :server="server"
      action="QueryPreparePaymentTableDatas"
      :params="formSearch"
      :columnsFn="preparePaymentColumns"
      :highlight-row="true"
    >
      <Form
        ref="formSearch"
        slot="search-bar"
        :model="formSearch"
        :label-width="120"
      >
        <Row>
          <Col span="6">
          <Form-item
            prop="ouCode"
            label="归属公司"
          >
            <Select
              ref="selectCompany"
              v-model="formSearch.ouCode"
              filterable
              transfer
              clearable
            >
              <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>

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

          <Col span="6">
          <Form-item
            prop="payStatus"
            label="付款状态"
          >
            <DataSelect
              v-model="formSearch.payStatus"
              class=""
              transfer
              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>
          <!-- 项目编码作为查询条件的时候是否有效查全部，是否允许过账查允许过账， -->
          <!-- <Form-item prop="projectCode" label="项目编码">
                    <SelectProject class=""  @handleSelect="handleSelect" v-model="formSearch.projectCode" isValidity="" isPost="Y" clearable></SelectProject>
                </Form-item> -->

          <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
              @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
            v-show="false"
            label="付款方式"
          >
            <DataSelect
              code="PAYMENT_MODE"
              clearable
              @loadFinish="loadFinishApplyType"
            ></DataSelect>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="handle"
            label="本地出纳是否已办"
          >
            <Select
              v-model="formSearch.handle"
              placeholder="请选择本地出纳是否已办"
              transfer
              clearable
              @on-change="handleChange"
            >
              <Option value="1">
                是
              </Option>
              <Option value="0">
                否
              </Option>
            </Select>
          </Form-item>
          </Col>

          <Col
            v-show="showMore"
            span="24"
          >
          <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">
        <Button
          type="warning"
          icon="search"
          @click.native="search"
        >
          {{ $t('查询') }}
        </Button>
        <Button
          type="info"
          icon="loop"
          @click.native="reset"
        >
          {{ $t('重置') }}
        </Button>
      </div> -->
    </EMSTableNew>
  </div>
</template>
<script>
import {
  NumberRangeFix
} from '@paymentPlatformComps/index.js';
import accounting from 'accounting';
import Server from './server.js';
import miment from 'miment';
import util from '@paymentPlatformSrc/tools/util.js';
const server = new Server();
let vm;
export default {
  components: {
    NumberRangeFix
    // NumberRange
  },
  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): 申请人部门 ,
      // companyCode (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: '', // 支付时间
        batchNo: '', // 付款准备/付款准备批号 ,
        claimNo: '', // 付款申请号
        currency: '', // 币种
        startDate: '', // 创建起始时间
        endDate: '', // 创建截止时间
        // invoiceNo: "", //发票编号
        leftAmount: '', // 付款准备金额左值
        rightAmount: '', // 付款准备金额右值
        leftPayDate: '', // 支付时间左值
        rightPayDate: '', // 支付时间右值
        applyDeptName: '', // 申请人部门
        ouCode: '', // 归属公司
        payStatus: '', // 付款状态
        projectCode: '', // 项目编码
        vendorName: '', // 供应商/供应商名称
        vendorType: '', // 供应商类型
        amountRange: '',
        flag: '1',
        handle: '0'
      },
      showMore: false
    };
  },
  created: function() { vm = this; },
  updated: function() {},
  beforeMount: function() {},
  mounted: function() {
    // 查询归属公司
    const self = this;
    this.server.queryCompanySelect().then(response => {
      if (response.statusCode == '-1') {
        self.$Message.error(response.msg);
      } else {
        self.companyList = response;
      }
    });
  },
  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;
      }
    },
    handleChange() {
      this.$refs.preparePaymentTableDatas.load(this.formSearch, 1);
    },
    // 表头字段定义
    preparePaymentColumns() {
      return [
        {
          title: '付款准备批号',
          align: 'left',
          key: 'batchNo',
          sortable: 'custom',
          width: 180,
          resizable: true,
          render: (h, params) => {
            if (this.formSearch.handle === '0') {
              return h('RowTools', {
                props: {
                  data: [
                    {
                      text: params.row.batchNo,
                      handle: () => {
                        vm.openPayBatch(params.row);
                      }
                    }
                  ]
                }
              });
            } else {
              return h(
                'div',
                {
                  attrs: {
                    class: 'ivu-table-cell-ellipsis',
                    title: params.row.batchNo
                  }
                },
                params.row.batchNo
              );
            }
          }
        },
        {
          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: 'right',
          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: '付款申请单号',
          width: 160,
          resizable: true,
          align: 'left',
          key: 'claimNo',
          // sortable: "custom",
          render: (h, params) => {
            return h('RowTools', {
              props: {
                data: [
                  {
                    text: params.row.claimNo,
                    handle: () => {
                      this.openFormPage(params.row);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: '收款方户名',
          width: 160,
          resizable: true,
          align: 'left',
          key: 'receiVendorName',
          // sortable: "custom",
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.receiVendorName
                }
              },
              params.row.receiVendorName
            );
          }
        },
        {
          title: '供应商',
          align: 'left',
          key: 'vendorName',
          // sortable: "custom",
          width: 160,
          resizable: true,
          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: '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) {
      this.$refs.preparePaymentTableDatas.load(this.formSearch, page);
    },
    // 重置
    reset() {
      const formSearch = this.formSearch;
      Object.keys(formSearch).map(key => {
        formSearch[key] = '';
      });
      this.formSearch.flag = '1';
      this.$refs.formSearch.resetFields();
      this.search(1);
    },
    // 查看行明细 打开新页面
    openPayBatch(param) {
      // 增加open是查看附件是可以上传、否则否能上传
      const isView = false;
      const handle = this.formSearch.handle;
      const paystatus = param.payStatus;
      util.openCreatePayment(isView, param.batchId, param.batchNo, 'open', handle, paystatus);
    },
    openFormPage(rowData) {
      util.openByClaimIdAndClaimNo(rowData);
    }
  }
};
</script>
