<template>
  <div class="page-selectAccounting">
    <EMSTable
      ref="configTable"
      action="query"
      :server="server"
      :stripe="false"
      :columns="propsColumns"
      :params="searchForm"
      :highlight-row="true"
      :rowClickHandle="onSelectRow"
    >
      <Form
        ref="searchForm"
        slot="search-bar"
        :model="searchForm"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item
          prop="compName"
          label="收款单位名称"
        >
          <Input
            v-model="searchForm.compName"
            type="text"
            clearable
          />
        </Form-item>
        <Form-item
          prop="bankAccountName"
          label="银行帐户名"
        >
          <Input
            v-model="searchForm.bankAccountName"
            type="text"
            clearable
          />
        </Form-item>
        <Form-item
          prop="bankAccountNum"
          label="银行帐号"
        >
          <Input
            v-model="searchForm.bankAccountNum"
            type="text"
            clearable
          />
        </Form-item>
        <Form-item
          prop="bankCurrencyCode"
          label="币种"
        >
          <Input
            v-model="searchForm.bankCurrencyCode"
            type="text"
            clearable
          />
        </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: 'SelectCompCodeList',
  props: {
    title: {
      type: String,
      default: '公司查询'
    }
  },
  data() {
    return {
      server: server,
      // 搜索表单的属性
      searchForm: {
        bankAccountName: '',
        bankAccountNum: '',
        compName: '',
        bankCurrencyCode: ''
      },
      propsColumns: [
        {
          title: '收款单位名称',
          key: 'compName',
          align: 'left',
          minWidth: 100,
          render: (h, params) => {
            const val = params.row.compName;
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '银行帐户名',
          align: 'left',
          key: 'bankAccountName',
          minWidth: 280,
          render: (h, params) => {
            const val = params.row.bankAccountName;
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '银行帐号',
          align: 'left',
          key: 'bankAccountNum',
          minWidth: 200,
          render: (h, params) => {
            const val = params.row.bankAccountNum;
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '币种',
          align: 'left',
          key: 'bankCurrencyCode',
          minWidth: 200,
          render: (h, params) => {
            const val = params.row.bankCurrencyCode;
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        }
        // 2018/10/09 16:55 取消银行名称显示
        // ,{
        //   title: "银行名称",
        //   align: "left",
        //   key:"bankName",
        //   minWidth:200,
        // }
      ]
    };
  },
  created() {
    this.$emit('SetTitle', this.title);
    // this.$emit('SetPageSize',800);
  },
  mounted() {},
  methods: {
    // 点击表格行 触发该事件
    onSelectRow(row) {
      if (row.length == 0) {
        return;
      }
      if (row._blank) {
        this.$Message.warning({
          content: '请选择有内容的一行'
        });
        return;
      }
      this.$emit('Close', row);
    },
    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>
