<template>
  <div>
    <EMSTable
      ref="BankInfoTable"
      :params="searchForm"
      :server="server"
      action="queryBanks"
      :columns="columns"
      :initParams="searchForm"
      :highlight-row="true"
      :onSelectionChange="onSelectionChange"
    >
      <Form
        ref="searchForm"
        slot="search-bar"
        :model="searchForm"
        label-position="top"
        inline
      >
        <Form-item
          prop="compName"
          label="公司名称"
        >
          <Input
            v-model="searchForm.compName"
            type="text"
          ></Input>
        </Form-item>

        <Form-item
          prop="bankName"
          label="银行名称"
        >
          <Input
            v-model="searchForm.bankName"
            type="text"
          ></Input>
        </Form-item>
      </Form>
      <div slot="handle-bar">
        <!-- <Button @click.native="search" type="warning" icon="search">{{$t('查询')}}</Button> -->
        <!-- <Button @click.native="reset" type="info" icon="loop">{{$t('重置')}}</Button> -->

        <Button
          type="warning"
          icon="search"
          @click.native="search"
        >
          {{ commonSearch }}
        </Button>
        <Button
          type="info"
          icon="loop"
          @click.native="reset"
        >
          {{ commonReset }}
        </Button>
      </div>
    </EMSTable>
  </div>
</template>
<script>
import Server from './server.js';
export default {
  name: 'PaymentCompanyList',
  components: {
  },
  directives: {},
  props: {
    title: {
      type: String,
      default() {
        return '请选择银行';
      }
    },
    compCode: {
      type: String,
      default() {
        return '';
      }
    },
    paymentmode: {
      type: String,
      default() {
        return '';
      }
    },
    compName: {
      type: String,
      default() {
        return '';
      }
    },
    columns: {
      type: Array,
      default() {
        return [
          {
            type: 'selection',
            width: 55,
            // fixed: 'left',
            align: 'center'
          },
          {
            title: '公司名称',
            key: 'compName',
            width: 160,
            align: 'left',
            // sortable: "custom",
            render: (h, params) => {
              return h(
                'div',
                {
                  attrs: {
                    class: 'ivu-table-cell-ellipsis',
                    title: params.row.compName
                  }
                },
                params.row.compName
              );
            }
          },
          {
            title: '银行名称',
            key: 'bankName',
            align: 'left',
            // sortable: "custom",
            width: 140,
            render: (h, params) => {
              return h(
                'div',
                {
                  attrs: {
                    class: 'ivu-table-cell-ellipsis',
                    title: params.row.bankName
                  }
                },
                params.row.bankName
              );
            }
          },
          {
            title: '银行账户名',
            align: 'left',
            key: 'bankAccountName',
            width: 170,
            render: (h, params) => {
              return h(
                'div',
                {
                  attrs: {
                    class: 'ivu-table-cell-ellipsis',
                    title: params.row.bankAccountName
                  }
                },
                params.row.bankAccountName
              );
            }
          },
          {
            title: '银行账号',
            align: 'left',
            key: 'bankAccountNum',
            minWidth: 140,
            render: (h, params) => {
              return h(
                'div',
                {
                  attrs: {
                    class: 'ivu-table-cell-ellipsis',
                    title: params.row.bankAccountNum
                  }
                },
                params.row.bankAccountNum
              );
            }
          }
        ];
      }
    }
  },
  data() {
    return {
      commonSearch: '搜索',
      commonReset: '重置',
      server: new Server(),
      searchForm: {
        compCode: this.compCode,
        compName: this.compName,
        bankName: '',
        payMode: this.paymentmode
      }
    };
  },
  computed: {},
  watch: {},
  created: function() {
    this.$emit('SetTitle', this.title);
  },
  beforeMount: function() {},
  mounted: function() {
    this.$emit('SetPageSize', window.innerWidth * 0.5);
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    search(page = 1) {
      this.$refs.BankInfoTable.load(this.searchForm, page);
    },
    reset() {
      this.$refs.searchForm.resetFields();
      this.search(1);
    },

    // 点击数据行
    onSelectionChange(selected) {
      if (selected.length == 0) {
        return;
      }
      if (selected.length > 1) {
        this.$Message.warning({
          content: '只能选择一条数据',
          duration: 5
        });
        return;
      }
      this.$emit('Close', selected[0]);
    }
  }
};
</script>
<style lang="less" scoped>
</style>
