<template>
  <div class="app-container iot-project-detail-all-device">
    <el-table v-loading="loading" :data="list" :default-sort="{prop: 'createTime', order: 'descending'}">
      <el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"></el-table-column>
      <el-table-column label="设备名称" align="left" prop="deviceName" />
      <el-table-column label="所属型号" align="left" prop="modelName" />
      <el-table-column label="设备key" align="left" prop="deviceKey" />
      <el-table-column label="设备类型" align="left" width="150" prop="deviceTypeName" />
      <el-table-column label="设备状态" align="center" width="150" prop="deviceState">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.deviceState === 'ONLINE'">在线</el-tag>
          <el-tag type="danger" v-else-if="scope.row.deviceState === 'OFFLINE'">离线</el-tag>
          <el-tag type="danger" v-else-if="scope.row.deviceState === 'OUTLINE'">脱线</el-tag>
          <el-tag type="info" v-else-if="scope.row.deviceState === 'UNACTIVE'">未激活</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" sortable align="center" width="200" prop="createTime" />
    </el-table>
  </div>
</template>
<script>
import { listDeviceByProjectId } from "@/api/iot/project";
export default {
  name: "ProjectDeviceList",
  props: ["sourceId"],
  data() {
    return {
      list: [],
      loading: false,
      queryParams: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    indexFormatter(val) {
      return val + 1;
    },
    /** 查询空间设备列表 */
    getList() {
      this.loading = true;
      listDeviceByProjectId(this.sourceId).then(response => {
        this.list = response.data;
        this.loading = false;
      });
    }
  }
};
</script>
