<template>
  <div class="container">
    <div class="el-row-left">
      <DeviceInfo :deviceInfo="deviceInfo" :paging="devicePaging" :list="deviceData" :handelMode="handelMode" :load="handelLoad" @click="handelClickDevice" />
    </div>
    <div class="el-row-right scrollbar">
      <MonitoringTop :funcList="funcList" />
      <div class="el-row-right-content" v-if="deviceInfo?.mode == 0 || deviceInfo?.mode == 2">
        <DeviceLocationMap :device-id="deviceInfo.deviceId" />
        <el-row class="box" :gutter="20">
          <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="24" :xl="12" style="margin-bottom: 20px">
            <DeviceHistory @change="handelRadio" ref="devHisRef" />
          </el-col>
          <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
            <DeviceRecord :deviceInfo="deviceInfo" />
          </el-col>
        </el-row>
      </div>
      <div class="el-row-right-content" v-else>
        <el-row :gutter="20">
          <el-col :span="24" style="margin-bottom: 20px">
            <DeviceHistory @change="handelRadio" ref="devHisRef" />
          </el-col>
          <el-col :span="24">
            <DeviceRecord :deviceInfo="deviceInfo" />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import DeviceInfo from "./deviceInfo.vue";
import MonitoringTop from "./monitoringTop.vue";
import DeviceHistory from "./deviceHistory.vue";
import DeviceRecord from "./deviceRecord.vue";
import DeviceLocationMap from "./deviceLocationMap.vue";
import { deviceList, healthLatestData } from "@/api/index";
import { TDevice, THealthLatestData } from "@/api/index.d";
import { onMounted, ref, reactive, onUnmounted } from "vue";
import { format } from "@/utils";
import heart from "@/assets/img/heart.png";
import temperature from "@/assets/img/temperature.png";
import blood from "@/assets/img/blood.png";

const devHisRef = ref(null);
const loadFlag = ref(false);
let Interval = null;
let funcList = ref([
  { title: "当前心率", en: "DANGQIANXINLV", icon: heart, unit: "次/分", num: 0, color: "#FF0303" },
  { title: "当前血氧", en: "DANGQIANXUEYANG", icon: blood, unit: "%", num: 0, color: "#8B51FD" },
  { title: "当前体表温度", en: "DANGQIANTIBIAOWENDU", icon: temperature, unit: "℃", num: 0, color: "#FF6905" },
]);

const options = {
  tooltip: {
    trigger: "axis",
    formatter: function (params) {
      let unit = { 心率: "次/分", 血氧: "%", 体表温度: "℃" };
      var res = format(options.times[params[0].dataIndex]) + "<br/>";
      res += params
        .map(function (param, index) {
          return param.marker + param.seriesName + "：" + param.value + unit[param.seriesName] + "<br/>";
        })
        .join("");
      return res;
    },
  },
  times: [],
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
  },
  grid: {
    left: "5%",
    right: "4%",
    bottom: "20%",
  },
  dataZoom: [
    {
      show: true, // 是否显示
      start: 0, // 开始位置，百分比
      end: 10, // 结束位置，百分比
      bottom: "10px",
      height: 25,
    },
    {
      type: "inside",
      start: 0,
      end: 100,
    },
  ],
  series: {
    name: "",
    data: [],
    type: "line",
    showSymbol: false,
    itemStyle: {
      color: "#ff4567", // 设置线条颜色
    },
    smooth: true,
  },
};

const devicePaging = reactive({
  page: 1,
  size: 10,
  mode: undefined,
  useStatus: 1,
  status: 1,
});
const HealthData = ref<THealthLatestData.TRes>();
const deviceInfo = ref<TDevice.IListRes>();
const deviceData = ref<TDevice.IListRes[]>([]);

const getdeviceList = async () => {
  const res = await deviceList(devicePaging);
  deviceData.value = [...deviceData.value, ...res.records];
  if (deviceData.value.length >= res.total) {
    loadFlag.value = true;
  }
  if (res.records.length > 0) {
    deviceInfo.value = res.records[0];
    getHealthLatestData();
    IntervalFn();
  }
};

const getHealthLatestData = () => {
  healthLatestData({ deviceId: deviceInfo.value.deviceId }).then((res) => {
    HealthData.value = res;
    funcList.value[0].num = res.hr;
    funcList.value[1].num = res.bo;
    funcList.value[2].num = res.temp;

    handelRadio(devHisRef.value.radio);
  });
};
const handelRadio = (val: number) => {
  if (val == 1) {
    devHisRef.value?.getOptionsData(HealthData.value.hrArr, "心率", "#FF0303");
  } else if (val == 2) {
    devHisRef.value?.getOptionsData(HealthData.value.boArr, "血氧", "#983AFC");
  } else if (val == 3) {
    devHisRef.value?.getOptionsData(HealthData.value.tempArr, "体表温度", "#FFA91F");
  }
};

const IntervalFn = () => {
  Interval = setInterval(() => {
    getHealthLatestData();
  }, 60000);
};
const handelMode = (e) => {
  devicePaging.mode = e;
  devicePaging.page = 1;
  deviceData.value = [];
  getdeviceList();
};
const handelLoad = () => {
  if (loadFlag.value) return;
  devicePaging.page += 1;
  getdeviceList();
};
const handelClickDevice = (val: TDevice.IListRes) => {
  devHisRef.value.radio = "1";
  deviceInfo.value = val;
  getHealthLatestData();
};

onMounted(() => {
  getdeviceList();
});
onUnmounted(() => {
  clearInterval(Interval);
});
</script>
<style scoped lang="less">
.container {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  .el-row-left {
    width: 335px;
    // height: 100%;
    display: flex;
    overflow: hidden;
    flex-shrink: 0;
  }
  .el-row-right {
    width: 100%;
    overflow: auto;
    margin-left: 20px;

    .el-row-right-content {
      overflow: hidden;
      // height: 100%;
      .box {
        height: 100%;
        flex-shrink: 0;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .el-col {
          height: 100%;
        }
      }
    }
  }
}
</style>
