<template>
    <div class="page-selectAccounting"> 
       <EMSTable action="query" :server="server" :stripe="false" ref="configTable" :columns="propsColumns" :params = "searchForm"  :highlight-row="true" :onSelectionChange="onSelectRow">
          <Form :model="searchForm" ref="searchForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom">
              <Form-item prop="customerNumber" label="客户编码">
                  <Input type="text" v-model="searchForm.customerNumber" clearable/>
              </Form-item>
              <Form-item prop="customerName" label="客户名称">
                  <Input type="text" v-model="searchForm.customerName" clearable />
              </Form-item>
          </Form> 
          <div slot="handle-bar">
              <Button @click.native="search()" type="warning" icon="search">查询</Button>
              <Button @click.native="reset" type="info" icon="loop">重置</Button>
          </div>
      </EMSTable>
    </div>
</template>
<script>
import { EMSTable } from "ems-components";
import Server from "./server.js";
const server = new Server();
export default {
  name: "SelectCustomerEdit",
  components: {
    EMSTable
  },
  props: {
    title: {
      type: String,
      default: "客户查询"
    },
    customerName: {
      type: String,
      default: ""
    },
    compCode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      server: server,
      //搜索表单的属性
      searchForm: {
        customerNumber: "",
        customerName: this.customerName,
        compCode: this.compCode
      },
      propsColumns: [
        {
          type: "selection",
          align: "center",
          width: 40,
          fixed: "left"
        },
        {
          title: "客户名称",
          align: "center",
          key: "customerName",
          minWidth: 100,
          render: (h, params) => {
            let val = params.row.customerName;
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: "客户编码",
          align: "center",
          key: "customerNumber",
          width: 100,
          render: (h, params) => {
            let val = params.row.customerNumber;
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: "地点",
          align: "center",
          key: "partySiteName",
          minWidth: 200,
          render: (h, params) => {
            let val = params.row.partySiteName;
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: "银行账号",
          align: "center",
          key: "bankAccount",
          minWidth: 100,
          render: (h, params) => {
            let val = params.row.bankAccount;
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: "公司名称",
          align: "center",
          key: "orgName",
          minWidth: 100,
          render: (h, params) => {
            let val = params.row.orgName;
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: val
                }
              },
              val
            );
          }
        }
      ]
    };
  },
  created() {
    this.$emit("SetTitle", this.title);
  },
  mounted() {},
  methods: {
    //点击表格行 触发该事件
    onSelectRow(selected) {
      if (selected.length == 0) {
        return;
      }
      if (selected.length > 1) {
        this.$Message.warning({
          content: `只能选择一条数据`,
          duration: 5
        });
        return;
      }
      this.$emit("Close", selected[0]);
    },
    search(page = 1) {
      //搜索数据
      this.$refs["configTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["searchForm"].resetFields();
      this.search(1);
    }
  }
};
</script>
<style>
.page-selectAccounting .ivu-form-item-content {
  display: block;
}
</style>