<template>
  <el-row :gutter="15" style="width: 100%;height: 440px;margin: 0px;">
    <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px;width: 100%;">
      <el-card class="box-card" shadow="never" style="margin: -10px;border:  0px;padding: 0px;">
        <div slot="header">
          <span class="role-span">设备列表</span>
        </div>
        <el-table :data="devices" :show-header="status" highlight-current-row size="medium" max-height="390" style="width: 100%;margin: 0px;" @current-change="handleCurrentChange">
          <el-table-column prop="name" label="设备列表">
            <template slot-scope="scope">
              <div v-if="scope.row.online === '离线'"><img src="../../../../assets/off.png" height="12" width="12">&#32;{{ scope.row.name }}</div>
              <div v-if="scope.row.online === '在线'"><img src="../../../../assets/on.png" height="12" width="12">&#32;{{ scope.row.name }}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import Bus from '@/utils/Bus.js'
import { queryAllByUseridNoPage } from '@/api/sDevice'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      loading: false,
      devices: [],
      status: true,
      chart: null
    }
  },
  mounted() {
    this.queryAllByUseridNoPage()
    this.status = false
  },
  created() {
    // this.status = false
  },
  methods: {
    handleCurrentChange(val) {
      // console.log(val)
      Bus.$emit('myFun', val)
    },
    queryAllByUseridNoPage() {
      queryAllByUseridNoPage().then(response => {
        this.devices = response
        Bus.$emit('devices', this.devices)
        // this.list = response
      })
    }
  }
}
</script>
