<template>
  <view class="device-detail-page">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <u-sticky bgColor="#fff">
      <u-tabs
        :list="list"
        :current="currentTab"
        @click="handleTabClick"
        :activeStyle="{
          fontWeight: 'bold',
          color: '#333',
        }"
        :inactiveStyle="{
          color: '#999',
        }"
        :scrollable="isScrollable"
      />
    </u-sticky>
    <view style="margin-top: 30rpx">
      <basicInfo v-show="currentTab == 0" :deviceDetail="deviceDetail" />
      <realTimeData v-show="currentTab === 1" :recordList="recordList" />
      <historyData
        v-if="currentTab === 2"
        :keys="keys"
        :yesterday="yesterday"
        :today="today"
        :timeDiff="timeDiff"
        :historyData="historyData"
        :entityId="entityId"
        :start="startTs"
        :end="endTs"
        @update="handleUpdate"
      />
      <alarmHistory v-show="currentTab === 3" :deviceId="deviceId" />
      <commondRecord v-if="currentTab === 4" :tbDeviceId="entityId" />
    </view>
  </view>
</template>

<script>
import fTabbar from "@/components/module/f-tabbar/f-tabbar";
import basicInfo from "./tabDetail/basicInfo.vue";
import realTimeData from "./tabDetail/realtimeData.vue";
import alarmHistory from "./tabDetail/alarmHistory.vue";
import historyData from "./tabDetail/historyData.vue";
import commondRecord from "./tabDetail/CommandRecord.vue";
import { getDeviceKeys, getHistoryData } from "./api/index.js";
import { formatToDate } from "@/plugins/utils.js";
import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
import moment from "moment";
import base from "@/config/baseUrl.js";

export default {
  mixins: [MescrollCompMixin],
  components: {
    fTabbar,
    basicInfo,
    realTimeData,
    alarmHistory,
    historyData,
    commondRecord,
  },
  data() {
    return {
      list: [
        {
          name: "基础信息",
        },
        {
          name: "实时数据",
        },
        {
          name: "历史数据",
        },
        {
          name: "告警记录",
        },
      ],
      currentTab: 0,
      deviceId: "",
      deviceDetail: {},
      keys: [],
      yesterday: "",
      today: "",
      timeDiff: "",
      historyData: [],
      entityId: "",
      startTs: "",
      endTs: "",
      recordList: [],
      isScrollable: false,
    };
  },
  onUnload() {
    // 页面关闭时,销毁webSocket连接,否则第二次会存在连接不到的情况
    uni.closeSocket();
  },
  async onLoad(options) {
    const { id, alarmStatus, lastOnlineTime, tbDeviceId } = options;
    this.deviceId = id;
    const res = await uni.$u.http.get(`/yt/device/${id}`);
    this.deviceDetail = {
      ...res,
      alarmStatus,
      lastOnlineTime,
    };

    // 设备类型不是网关子设备的添加一个命令记录的选项卡
    if (this.deviceDetail.deviceType !== "SENSOR") {
      this.list.push({
        name: "命令记录",
      });
    }
    this.isScrollable = this.list.length > 4;
    // 连接webSockte
    const socketTask = uni.connectSocket({
      url:
        `${base.socketPrefix}://${base.baseWebSocketUrl}/api/ws/plugins/telemetry?token=` +
        uni.getStorageSync("userInfo").isToken, //仅为示例，并非真实接口地址。
      complete: () => {},
    });
    uni.onSocketOpen((header) => {
      socketTask.send({
        data: JSON.stringify({
          attrSubCmds: [],
          tsSubCmds: [
            {
              entityType: "DEVICE",
              entityId: tbDeviceId,
              scope: "LATEST_TELEMETRY",
              cmdId: 1,
            },
          ],
          historyCmds: [],
          entityDataCmds: [],
          entityDataUnsubscribeCmds: [],
          alarmDataCmds: [],
          alarmDataUnsubscribeCmds: [],
          entityCountCmds: [],
          entityCountUnsubscribeCmds: [],
        }),
        success() {},
      });
    });
    socketTask.onMessage((msg) => {
      const { data } = JSON.parse(msg.data);
      const newArray = [];
      for (const key in data) {
        const [time, value] = data[key].flat(1);
        let obj = {
          key,
          time,
          value,
        };
        if (this.recordList.length === 0) {
          this.recordList.unshift(obj);
        } else {
          newArray.push(obj);
        }
      }
      newArray.forEach((item) => {
        let flag = false;
        this.recordList.forEach((item1) => {
          if (item1.key === item.key) {
            item1.value = item.value;
            item1.time = item.time;
            flag = true;
          }
        });
        if (!flag) {
          this.recordList.unshift(item);
        }
      });
      this.recordList = this.recordList.map((item) => {
        return {
          ...item,
          time: formatToDate(item.time, "YYYY-MM-DD HH:mm:ss"),
        };
      });
    });

    const keys = await getDeviceKeys(tbDeviceId);
    this.keys = [keys];
    // 昨天
    this.yesterday = moment().subtract(1, "days").format("YYYY-MM-DD");
    // 今天
    this.today = moment().format("YYYY-MM-DD");
    // 开始时间
    this.startTs = moment().subtract(1, "days").format("x");
    // 结束时间
    this.endTs = moment().format("x");
    this.entityId = tbDeviceId;

    const data = await getHistoryData({
      entityId: tbDeviceId,
      startTs: this.startTs,
      endTs: this.endTs,
      keys: keys[0],
      interval: 1800000,
    });
    this.timeDiff = "30分钟";
    if (!Object.keys(data).length) return;

    this.historyData = data[keys[0]].map((item) => {
      return {
        value: item.value,
        ts: formatToDate(item.ts, "YYYY-MM-DD HH:mm:ss"),
      };
    });
  },
  methods: {
    handleTabClick({ index }) {
      this.currentTab = index;
    },
    handleUpdate(data) {
      if (!Array.isArray(data)) {
        this.historyData = [];
        return;
      }
      this.historyData = data.map((item) => {
        return {
          value: item.value,
          ts: formatToDate(item.ts, "YYYY-MM-DD HH:mm:ss"),
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.device-detail-page {
  height: 100vh;
  background-color: #f8f9fa;
}
</style>