 <!--
   @Author: husanfeng
   @qq:1136014061
   @Date: 2018-09-21
   @Last Modified by: husanfeng
   @Last Modified time: 2018-09-21
 -->
<template>
  <!-- <div class="page-selectAccounting"> -->
  <EMSTable
    ref="fsmTable"
    :server="server"
    action="query"
    :params="searchForm"
    :columnsFn="codeColumns"
    :highlight-row="true"
    :onSelectionChange="onSelectRow"
  >
    <Form
      ref="searchForm"
      slot="search-bar"
      :model="searchForm"
      :rules="rule"
      label-position="top"
      class="ivu-form-no-margin-bottom"
      inline
    >
      <Form-item
        prop="vendorCode"
        label="供应商编码"
      >
        <Input
          v-model="searchForm.vendorCode"
          type="text"
          maxlength="30"
          placeholder=""
          clearable
        ></Input>
      </Form-item>
      <Form-item
        prop="vendorName"
        label="供应商名称"
      >
        <Input
          v-model="searchForm.vendorName"
          type="text"
          maxlength="30"
          placeholder=""
          clearable
        ></Input>
      </Form-item>
    </Form>
    <div slot="handle-bar">
      <Button
        type="warning"
        icon="search"
        @click.native="search()"
      >
        搜索
      </Button>
      <Button
        type="info"
        icon="loop"
        @click.native="reset"
      >
        重置
      </Button>
    </div>
  </EMSTable>
  <!-- </div> -->
</template>
<script>
import Server from './server.js';
const server = new Server();
export default {
  name: 'SelectCustomerEdit',
  props: {
    title: {
      type: String,
      default: '供应商查询'
    }
  },
  data() {
    return {
      server: server,
      // 搜索表单的属性
      searchForm: {
        vendorCode: '',
        vendorName: '',
        buCode: '',
        vendorType: '',
        companyName: ''
      }
    };
  },
  created() {
    this.$emit('SetTitle', this.title);
    // this.$emit("SetPageSize", 1000);
  },
  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);
    },
    codeColumns() {
      return [
        {
          type: 'selection',
          align: 'center',
          width: 60,
          fixed: 'left'
        },
        {
          title: '所属BU编码',
          align: 'left',
          key: 'buCode',
          minWidth: 100,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.buCode
                }
              },
              params.row.buCode
            );
          }
        },
        {
          title: '所属BU名称',
          align: 'left',
          key: 'buCode',
          minWidth: 100,
          render: (h, params) => {
            const title = this.dataSet.buName[params.row.buCode];
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: title
                }
              },
              title
            );
          }
        },
        {
          title: '供应商编码',
          align: 'left',
          minWidth: 100,
          key: 'vendorCode',
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.vendorCode
                }
              },
              params.row.vendorCode
            );
          }
        },

        {
          title: '供应商名称',
          minWidth: 220,
          align: 'left',
          key: 'vendorName',
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.vendorName
                }
              },
              params.row.vendorName
            );
          }
        },
        {
          title: '供应商类型',
          align: 'left',
          minWidth: 100,
          key: 'vendorType',
          render: (h, params) => {
            const self = this;
            const title = self.dataSet.orgType[params.row.vendorType];
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: title
                }
              },
              title
            );
          }
        },
        {
          title: '失效日期',
          align: 'left',
          minWidth: 110,
          key: 'expiryDateStr',
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.expiryDateStr
                }
              },
              params.row.expiryDateStr
            );
          }
        },
        // {
        //   title: "生效日期",
        //   align: "left",
        //   minWidth:110,
        //   key: "createTime",
        //   render: (h, params) => {
        //     return h(
        //       "div",
        //       {
        //         attrs: {
        //           class: "ivu-table-cell-ellipsis",
        //           title: params.row.createTime
        //         }
        //       },
        //       params.row.createTime
        //     );
        //   }
        // },
        {
          title: '有效性',
          align: 'left',
          width: 100,
          key: 'isValidity',
          render: (h, params) => {
            let val = params.row.isValidity || '';
            val = val.toUpperCase();
            if (!val) return;
            return h(
              'Tag',
              {
                props: {
                  type: 'dot',
                  color: val == 'Y' ? 'blue' : 'red'
                }
              },
              val == 'Y' ? '启用' : '禁用'
            );
          }
        },
        {
          title: '归属公司',
          align: 'left',
          minWidth: 250,
          key: 'companyName',
          render: (h, params) => {
            // this.dataSet.companyName
            // let title = this.dataSet.companyName[params.row.companyCode] || '';
            const title = params.row.companyName || '';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: title
                }
              },
              title
            );
          }
        },
        {
          title: '供应商地点名称',
          width: 160,
          align: 'left',
          key: 'vendorSiteName',
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.vendorSiteName
                }
              },
              params.row.vendorSiteName
            );
          }
        },
        {
          title: '银行户名',
          minWidth: 250,
          align: 'left',
          key: 'vendorAccountName',
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.vendorAccountName
                }
              },
              params.row.vendorAccountName
            );
          }
        },
        {
          title: '银行账号',
          minWidth: 200,
          align: 'left',
          key: 'vendorAccountNo',
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.vendorAccountNo
                }
              },
              params.row.vendorAccountNo
            );
          }
        },
        {
          title: '开户行',
          width: 160,
          align: 'left',
          key: 'bankName',
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.bankName
                }
              },
              params.row.bankName
            );
          }
        },
        {
          title: '负债科目',
          minWidth: 280,
          align: 'left',
          key: 'liabilityAccount',
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.liabilityAccount
                }
              },
              params.row.liabilityAccount
            );
          }
        },
        {
          title: '预付款科目',
          minWidth: 280,
          align: 'left',
          key: 'advancePaymentAccount',
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.advancePaymentAccount
                }
              },
              params.row.advancePaymentAccount
            );
          }
        }
      ];
    }
  }
};
</script>
<style>
.page-selectAccounting .ivu-form-item-content {
  display: block;
}
</style>
