<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig">
        <el-tag slot="table-body-head" style="margin:5px" type="success">当前在线设备总计：{{tableData.onlineCount}}个</el-tag>

        <el-tag slot="table-body-head" style="margin:5px" type="danger">当前离线设备总计：{{tableData.offlineCount}}个</el-tag>
        


         <el-tag   v-for='($label, $value) in tableData.offlineDeviceType'
            :key='$value'
            :label="$value" slot="table-body-head" style="margin:5px" type="danger">{{$value}}离线设备：{{$label}}个</el-tag>
        
    </LayoutTable>

    <dialog-show ref="dialogform" @ok="getData" />
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table";
export default {
  name: "Device",
  components: { dialogShow },
  mixins: [table],
  created() {
    // let _this = this;
    // const getsocketData = (e) => {
    //   // 创建接收消息函数
    //   const data = e && e.detail.data;

    //   let obj = JSON.parse(data);
    //   if (obj.type == "SEND_TO_ALL_REQUEST") {
    //     let msg = "";
    //     let content = JSON.parse(obj.body.content);
    //     if (content.deviceOnlineStatus == 1) {
    //         console.log(_this.tableData.dict)
    //       msg = _this.tableData.dict.deviceType[content.deviceType]+ "设备:" + content.deviceCode + " 上线！";
    //     } else {
    //       msg = _this.tableData.dict.deviceType[content.deviceType]+"设备:" + content.deviceCode + " 离线！";
    //     }

    //     _this.$notify({
    //       title: "警告",
    //       message: msg,
    //       type: "warning",
    //       duration: 8000,
    //     });

    //     _this.getData();
    //   }

    //   console.log(data);
    // };

    // this.getsocketData = getsocketData;
    // // 注册监听事件
    // window.addEventListener("onmessageWS", getsocketData,false);
  },
  methods: {
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.dialogform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.dialogform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
        this.$refs.dialogform.view(row);
    },
  },
  data() {
    return {
      config: {
        getsocketData: null,
        search: [
                 {
            name: 'deviceNum',
            type: 'text',
            label: '设备编号',
          },
          {
            name: 'deviceOnlineStatus',
            type: 'select',
            label: '在线状态',
          },

           {
            name: 'deviceType',
            type: 'select',
            label: '设备类型',
          },
        ],
        columns: [
          { type: "selection", width: 60 },

        //   { label: "设备名称", prop: "deviceName" },

          { label: "设备编码", prop: "deviceCode" },

          { label: "设备类型", prop: "deviceType", formatter: this.formatter },

          {
            label: "在线状态 ",
            prop: "deviceOnlineStatus",
            formatter: this.formatterYES,
          },

          {
            label: "最近上线时间",
            prop: "onlineTime",
            formatter: this.formatterDate,
          },
          {
            label: "操作",
            width: 240,
            formatter: (row) => {
              return (
                <table-buttons
                  noAdd
                  row={row}
                  onEdit={this.toEdit}
                  onView={this.toView}
                  onDel={this.toDel}
                />
              );
            },
          },
        ],
      },
    };
  },
};
</script>