<template>
  <div>
    <hive-table
      :columns="columns"
      :data="data">
    </hive-table>
  </div>
</template>

<script>
  export default {
    data() {
      const columns = [
        {
          title: '设备编号',
          key: 'no',
          expand(item) {
            return (<div style=" padding: 16px 18px ">{item.name}</div>);
          },
        },
        {
          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 < 10; i++) {
        data.push({
          id: i.toString(),
          no: `${i + 1}-GZ-HXY-G6-M0201-MDC-A`,
          model: `${Math.floor(Math.random() * 100 + 1)}-ABBOTM400EACBD220C`,
          name: `${Math.floor(Math.random() * 100 + 1)}-交流塑壳断路器`,
          building: `${i + 1}-广州华新园G6`,
          system: `${i + 1}-MDCDGF系统`,
        });
      }
      return {
        columns,
        data,
      };
    },
  };
</script>
