/*
 * @Author: Anmin 
 * @Email:changanmin1@crc.com.hk 
 * @Date: 2018-12-10 10:56:03 
 * @Last Modified by: Anmin
 * @Last Modified time: 2018-12-17 16:50:55
 * @description:  收款工作台--组件：单据信息
 */
<template>
  <div class="page-table run-mod-box">
    <EMSTable
      ref="listTable"
      :server="server"
      action="queryDocumentInfo"
      :columnsFn="getColumnsFun"
      :params="searchForm"
      @on-selection-change="handle_table_row_select"
      :loadCallback="handle_data_cb"
    >
      <div slot="search-bar">
        <Form
          :model="searchForm"
          label-position="right"
          ref="searchForm"
          class="ivu-form-no-margin-bottom"
          inline
        >
          <Form-item prop="claimNo" label="单号">
            <Input type="text" placeholder="请输入单号" v-model="searchForm.claimNo" clearable/>
          </Form-item>
          <Form-item prop="ouCode" label="归属公司">
            <!-- <SelectCompCode placeholder="请选择归属公司" title="请选择归属公司" v-model="searchForm.ouCode"></SelectCompCode> -->
            <SelectCompany
              :flag="true"
              label-in-value
              transfer
              v-model="searchForm.ouCode"
              size="small"
              filterable
              clearable
            ></SelectCompany>
          </Form-item>
          <Form-item prop="categoryName" label="业务类型">
            <Input
              placeholder="请输入业务类型"
              title="请输入业务类型"
              v-model="searchForm.categoryName"
              clearable
            />
          </Form-item>
          <Form-item prop="remark" label="报账事由">
            <Input placeholder="请输入报账事由" title="请输入报账事由" v-model="searchForm.remark" clearable></Input>
          </Form-item>
          <Form-item prop="_applDate" label="申请日期">
            <DatePicker
              transfer
              clearable
              :editable="false"
              :options="options.datePickerOptions"
              format="yyyy-MM-dd"
              v-model="searchForm._applDate"
              @on-change="input_date"
              placeholder="请选择申请日期"
              title="请选择申请日期"
              type="daterange"
            ></DatePicker>
          </Form-item>
        </Form>
      </div>
      <div slot="handle-bar">
        <Button @click.native="search()" type="warning" icon="search">查询</Button>
        <Button @click.native="reset" type="info" icon="loop">重置</Button>
      </div>
      <!-- <div slot="table-bar">
        <Button type="warning" @click.native="exportResult">查询结果导出</Button>
      </div>-->
    </EMSTable>
  </div>
</template>

<script>
import util from "@/tools/util.js";
import { EMSTable, SelectCompany } from "ems-components";
import Server from "../server.js";
const server = new Server();
export default {
  props: {
    title: {
      type: String,
      default: "选择单据信息"
    },
    categoryCode: {
      type: String,
      default: "",
      required: true,
      validator: function(value) {
        return value != "";
      }
    }
  },
  name: "DocumentInfoTable",
  components: {
    EMSTable,
    SelectCompany
  },
  data() {
    return {
      options: {
        datePickerOptions: {
          disabledDate(date) {
            return date && date.valueOf() > new Date().valueOf();
          }
        }
      },
      server,
      searchForm: {
        claimNo: "",
        ouCode: "",
        categoryName: "",
        categoryCode: this.categoryCode,
        remark: "",
        _applDate: "",
        applStartDate: "",
        applEndDate: "",
        // processState: 2  // 这个参数去掉 ems3-ys-209 【收款工作台】收款池认领票据到期托收款时，关联工单里搜不到对应的工单
      }
    };
  },
  created() {
    this.$emit("SetTitle", this.title);
  },
  methods: {
    search(page = 1) {
      this.$refs["listTable"].load(this.searchForm, page);
    },
    input_date(val, type) {
      this.searchForm.applStartDate = val[0];
      this.searchForm.applEndDate = val[1];
    },
    handle_data_cb(data) {
      //格式化data
      data.forEach(element => {
        if (element.claimNo === this.val) {
          element["_checked"] = true;
        }
      });
    },
    reset() {
      this.$refs["searchForm"].resetFields();
      this.search();
    },
    handle_table_row_select(selection) {
      if (selection && selection.length > 0) {
        this.$emit("Close", selection[0].claimNo);
      }
    },
    getColumnsFun() {
      return [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "单号",
          align: "center",
          key: "claimNo",
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    text: params.row.claimNo,
                    handle: () => {
                      util.openRelateClaim(params.row.claimNo)
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: "归属公司",
          align: "center",
          key: "ouName",
          render: (h, params) => {
            let val = params.row.ouName;
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: "业务类型",
          align: "center",
          key: "categoryName",
          render: (h, params) => {
            let val = params.row.categoryName;
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: "报账事由",
          align: "center",
          key: "remark",
          render: (h, params) => {
            let val = params.row.remark;
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: "申请时间",
          align: "center",
          key: "applDate",
          render: (h, params) => {
            let val = params.row.applDate;
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: "关联次数",
          align: "center",
          key: "claimNoCount",
          render: (h, params) => {
            let val = params.row.claimNoCount;
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: val
                }
              },
              val
            );
          }
        }
      ];
    }
  }
};
</script>

<style>
</style>