<template>
  <div class="deviceStatistics card">
    <div class="card-head">
      <div class="title">当前设备历史数据</div>
      <el-radio-group v-model="radio" @change="change">
        <el-radio-button label="心率" value="1" />
        <el-radio-button label="血氧" value="2" />
        <el-radio-button label="体表温度" value="3" />
      </el-radio-group>
    </div>
    <div ref="chartRef" class="card-chart"></div>
  </div>
</template>
<script setup lang="ts">
import { debounce, format } from "@/utils";
import { onMounted, onUnmounted, ref } from "vue";
import * as echarts from "echarts";

const radio = ref("1");
const chartRef = ref(null);
let myChart: any = null;
const emit = defineEmits(["change"]);
const options = {
  tooltip: {
    trigger: "axis",
    formatter: function (params) {
      let unit = { 心率: "次/分", 血氧: "%", 体表温度: "℃" };
      var res = format(Number(params[0].name)) + "<br/>";
      res += params
        .map(function (param, index) {
          return param.marker + param.seriesName + "：" + param.value + unit[param.seriesName] + "<br/>";
        })
        .join("");
      return res;
    },
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
      formatter: function (item) {
        return format(Number(item), "HH:mm:ss");
      },
    },
  },
  yAxis: {
    type: "value",
  },
  grid: {
    left: "5%",
    right: "4%",
    bottom: "20%",
  },
  dataZoom: [
    {
      type: "slider", //slider表示有滑动块的，inside表示内置的
      start: 90, // 左边在 10% 的位置。
      end: 100, // 右边在 60% 的位置。
      show: true,
      xAxisIndex: [0],
      handleSize: 0, //滑动条的 左右2个滑动条的大小
      height: 12, //组件高度
      bottom: -2, //右边的距离
      borderColor: "#eee",
      fillerColor: "#E7E7E7",
      backgroundColor: "#eee", //两边未选中的滑动条区域的颜色
      showDataShadow: false, //是否显示数据阴影 默认auto
      showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
      realtime: true, //是否实时更新
      filterMode: "filter",
      handleStyle: {
        borderRadius: "20",
      },
    },
  ],
  series: {
    name: "",
    data: [],
    type: "line",
    showSymbol: false,
    itemStyle: {
      color: "#ff4567", // 设置线条颜色
    },
    smooth: true,
  },
};

const getOptionsData = (list: { time: string; value: number }[], name: string, color: string) => {
  options.xAxis.data = [];
  options.series.data = [];

  if (list && list.length) {
    list.forEach((item) => {
      options.xAxis.data.push(item.time);
      options.series.data.push(item.value);
    });
    options.series.name = name;
    options.series.itemStyle.color = color;
  }
  myChart.setOption(options);
};

const handleResize = debounce(() => {
  myChart.resize();
}, 200);

defineExpose({ radio, getOptionsData });

onMounted(() => {
  myChart = echarts.init(chartRef.value);
  window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
const change = (e) => {
  emit("change", e);
};
</script>
<style scoped lang="less">
.card {
  min-height: 385px;
  flex-shrink: 0;
  background: #ffffff;
  padding: 16px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .card-head {
    color: #061451;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateX(-10px);
    .title {
      &::before {
        display: inline-block;
        margin-right: 10px;
        content: "";
        width: 2px;
        height: 14px;
        border-radius: 20px;
        background: #061451;
      }
    }
    .search {
      display: flex;
      align-items: center;
    }
  }
  .card-chart {
    flex: 1;
    margin-top: 20px;
  }
}
</style>
