<template>
  <div>
    <EMSTableNew
      ref="preparePay"
      :server="server"
      :autoFirst="true"
      action="queryPayPrepare"
      :params="preparePayForm"
      :columnsFn="preparePayColumns"
    >
      <Form
        ref="form"
        slot="search-bar"
        :model="form"
        :label-width="120"
      >
        <Row>
          <Col span="6">
          <Form-item
            prop="ouCode"
            label="归属公司"
          >
            <Select
              ref="selectCompany"
              v-model="form.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="claimNo"
            label="付款申请号"
          >
            <Input
              v-model="form.claimNo"
              type="text"
              maxlength="30"
              size="small"
              clearable
            ></Input>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="invoiceNo"
            label="发票编号"
          >
            <Input
              v-model="form.invoiceNo"
              type="text"
              maxlength="30"
              size="small"
              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="form.batchNo"
              type="text"
              maxlength="30"
              size="small"
              clearable
            ></Input>
          </Form-item>
          </Col>

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

          <Col span="6">
          <Form-item
            prop="payType"
            label="准备状态"
          >
            <DataSelect
              v-model="form.status"
              size="small"
              code="PREPARE_SHEET_STATUS"
              transfer
              clearable
            ></DataSelect>
          </Form-item>
          </Col>

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

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

          <Col span="6">
          <Form-item
            prop="paymentMethod"
            label="付款方式"
          >
            <DataSelect
              v-model="form.paymentMethod"
              size="small"
              code="PAYMENT_MODE"
              clearable
            ></DataSelect>
          </Form-item>
          </Col>
          <!-- <Form-item prop="leftAmount" label="准备付款金额">
          <Input style="width: 80px; display: inline-block;" type="text" maxlength="30" v-model="form.leftAmount" size="small"></Input>
          <Input style="width: 80px; display: inline-block;" type="text" maxlength="30" v-model="form.rightAmount" size="small"></Input>
        </Form-item> -->
          <Col span="6">
          <Form-item
            prop="amountRange"
            label="准备付款金额"
          >
            <NumberRangeFix
              :startAmount="form.leftAmount"
              :endAmount="form.rightAmount"
              :tofixed="2"
              placeholder=""
              clearable
              @inputStart="onInputStart"
              @inputEnd="onInputEnd"
            />
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="date"
            label="创建时间起止"
          >
            <Date-picker
              v-model="form.date"
              :editable="false"
              type="daterange"
              format="yyyy/MM/dd"
              size="small"
              clearable
              transfer
            ></Date-picker>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="currency"
            label="币种"
          >
            <DataSelect
              v-model="form.currency"
              size="small"
              code="currency"
              clearable
            ></DataSelect>
          </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
          size="small"
          type="warning"
          icon="search"
          @click.native="search"
        >
          付款准备批查询
        </Button>
        <Button
          size="small"
          type="info"
          icon="loop"
          @click.native="reset"
        >
          {{ $t('重置') }}
        </Button>
      </div> -->
      <Button
        slot="table-bar"
        type="warning"
        icon="plus-round"
        @click.native="addBranchNo"
      >
        新增付款准备批
      </Button>
    </EMSTableNew>
  </div>
</template>
<script>
import AddBranchNo from './components/addBranchNo/Index.vue';
import miment from 'miment';
import util from '@paymentPlatformSrc/tools/util.js';
import accounting from 'accounting';
import {
  // SelectProject,
  NumberRangeFix
} from '@paymentPlatformComps/index.js';
import Server from './server.js';
const server = new Server();
let vm;
export default {
  components: {
    // SelectProject,
    NumberRangeFix
  },
  directives: {},
  data() {
    return {
      server: server,
      statusList: [
        { label: '0', value: '已创建' },
        { label: '1', value: '处理中' },
        { label: '2', value: '已处理' }
      ],
      companyList: [],
      form: {
        ouCode: '',
        invoiceClaimNo: '',
        claimNo: '',
        ouName: '',
        batchNo: '',
        invoiceNo: '',
        status: '',
        vendorType: '',
        vendorName: '',
        paymentMethod: '',
        leftAmount: '',
        rightAmount: '',
        date: [],
        startDate: '',
        endDate: '',
        projectCode: '',
        currency: '',
        amountRange: '' // 准备付款金额 辅助
      },
      preparePayForm: {},
      showMore: false
    };
  },
  computed: {},
  watch: {
    // 'form.amountRange': {
    //   handler() {
    //     const range = this.form.amountRange;
    //     this.form.leftAmount = range.start;
    //     this.form.rightAmount = range.end;
    //   },
    //   deep: true
    // },
    'form.date': {
      handler() {
        const date = this.form.date;
        this.form.startDate = date[0];
        this.form.endDate = date[1];
      },
      deep: true
    }
  },
  created: function() { vm = this; },
  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.preparePay.showMore();
    },
    handleSelect(data) {
      this.form.projectCode = data.projectCode;
    },
    onInputStart(startVal) {
      this.form.leftAmount = startVal;
    },
    onInputEnd(endVal) {
      this.form.rightAmount = endVal;
    },
    // 表头字段定义
    preparePayColumns() {
      return [
        {
          title: '付款准备批号',
          align: 'left',
          key: 'batchNo',
          sortable: 'custom',
          width: 260,
          resizable: true,
          render: (h, params) => {
            return h('RowTools', {
              props: {
                data: [
                  {
                    text: params.row.batchNo,
                    handle: () => {
                      vm.openPayBatch(params.row);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: '归属公司',
          align: 'left',
          key: 'ouCode',
          resizable: true,
          // sortable: "custom",
          width: 280
        },
        {
          title: '归属公司名称',
          align: 'left',
          key: 'ouName',
          resizable: true,
          // sortable: "custom",
          width: 260
        },
        {
          title: '创建人',
          align: 'left',
          key: 'applyEmpName',
          resizable: true,
          // sortable: "custom",
          width: 200
        },
        {
          title: '申请金额',
          align: 'right',
          key: 'applyPayAmount',
          // sortable: "custom",
          width: 200,
          resizable: true,
          render: (h, params) => {
            return h(
              'span',
              accounting.formatNumber(params.row.applyPayAmount, 2)
            );
          }
        },
        {
          title: '未匹配金额',
          align: 'right',
          // sortable: "custom",
          key: 'unpreparedAmount',
          width: 200,
          resizable: true,
          render: (h, params) => {
            return h(
              'span',
              accounting.formatNumber(params.row.unpreparedAmount, 2)
            );
          }
        },
        {
          title: '匹配金额',
          align: 'right',
          // sortable: "custom",
          key: 'preparedAmount',
          width: 200,
          resizable: true,
          render: (h, params) => {
            return h(
              'span',
              accounting.formatNumber(params.row.preparedAmount, 2)
            );
          }
        },
        {
          title: '创建日期',
          // width: 140,
          align: 'left',
          key: 'createdTime',
          sortable: 'custom',
          resizable: true,
          width: 300,
          render: (h, params) => {
            return h(
              'span',
              miment(params.row.createdTime).format('YYYY-MM-DD')
            );
          }
        }
      ];
    },

    // 搜索
    search(page = 1) {
      const startDate = this.form.date[0];
      const endDate = this.form.date[1];
      if (startDate != '') {
        this.form.startDate = miment(startDate).format('YYYY-MM-DD hh:mm:ss');
      }
      if (endDate != '') {
        this.form.endDate = miment(endDate)
          .add(1, 'DD')
          .add(-1, 'ss')
          .format('YYYY-MM-DD hh:mm:ss');
      }
      // if (this.form.leftAmount > this.form.rightAmount) {
      //   this.$Message.warning("准备付款金额最小值不能大于最大值！");
      //   return;
      // }
      this.$refs.preparePay.load(this.form, page);
    },
    // 重置
    reset() {
      const form = this.form;
      Object.keys(form).map(key => {
        form[key] = '';
      });
      this.$refs.form.resetFields();
      this.search(1);
    },
    // 查看行明细 打开新页面
    openPayBatch(param) {
      const isView = false;
      util.openCreatePayment(isView, param.id, param.batchNo);
    },
    // 新增付款准备批
    addBranchNo() {
      new this.$pageModal(
        AddBranchNo,
        {
          props: {
            ouCodeList: this.companyList
          }
        }, (data) => {
          if (data) {
            this.search(1);
          }
        }
      );
    }
  }
};
</script>

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