<template>
  <div>
    <hive-button @click="onSelect">
      选择1-10
    </hive-button>
    <hive-button @click="onRemoveSelect">
      取消选择
    </hive-button>
    <br>
    <br>
    <hive-table
      :columns="columns"
      :data="data"
      :selector="state"
      @onChange="onChangeHandler"
    />
  </div>
</template>

<script>
export default {
  data() {
    const columns = [
      {
        title: '设备编号',
        key: 'no'
      },
      {
        title: '设备型号',
        key: 'model'
      },
      {
        title: '设备类型名称',
        key: 'name'
      },
      {
        title: '所属楼宇',
        key: 'building'
      },
      {
        title: '所属系统',
        key: 'system'
      },
      {
        title: '操作',
        style: {
          fontWeight: 'bold'
        },
        render: (h, params) => {
          return (
            <span>
              <a>编辑</a>
              <a style=" marginLeft: 10px ">删除</a>
            </span>
          );
        }
      }
    ];
    const data = [];
    for (let i = 0; i < 50; i++) {
      data.push({
        id: i.toString(),
        no: `${i + 1}-GZ-HXY-G6-M0201-MDC-A`,
        model: `${i + 1}-ABBOTM400EACBD220C`,
        name: `${i + 1}-交流塑壳断路器`,
        building: `${i + 1}-广州华新园G6`,
        system: `${i + 1}-MDCDGF系统`
      });
    }
    return {
      columns,
      data,
      state: []
    };
  },
  methods: {
    onSelect() {
      const keys = [];
      for (let i = 0; i < 10; i++) {
        keys.push(i);
      }
      this.state = keys.concat();
    },
    onRemoveSelect() {
      this.state = [];
    },
    onChangeHandler(keys) {
      console.log(keys);
      this.state = keys.concat();
    }
  }
};
</script>
