<template>
  <div>
    <hive-button @click="updataLoading">
      {{ loading ? '关闭加载' : '开启加载' }}
    </hive-button>
    <br>
    <br>
    <hive-table
      :columns="columns"
      :data="data"
      :pagination="false"
      :loading="loading"
    />
  </div>
</template>

<script>
export default {
  data() {
    const columns = [
      {
        title: '编号',
        key: 'no',
        width: 200
      },
      {
        title: '设备SN',
        key: 'model',
        width: 100
      },
      {
        title: '设备类型',
        key: 'name'
      },
      {
        title: '机房',
        key: 'building',
        width: 200
      },
      {
        title: '单元',
        key: 'system'
      },
      {
        title: '操作',
        width: 150,
        render: (h, params) => {
          return (
            <span>
              <a>编辑</a>
              <a style=" marginLeft: 10px ">删除</a>
            </span>
          );
        }
      }
    ];
    const data = [];
    for (let i = 0; i < 5; i++) {
      data.push({
        id: i.toString(),
        no: `${i + 1}-GZ-HXY-G6-M0201-MDC-A`,
        model: `${Math.floor(Math.random() * 100 + 1)}-ABC`,
        name: `${Math.floor(Math.random() * 100 + 1)}-交流塑壳断路器`,
        building: `${i + 1}-广州华新园G6广州华新园G6广州华新园G6广州华新园G6`,
        system: `${i + 1}-MDCDGF系统`
      });
    }
    return {
      columns,
      data,
      loading: true
    };
  },
  methods: {
    updataLoading() {
      this.loading = !this.loading;
    }
  }
};
</script>
