<template>
  <div>
    <div class="box-header">
      <div class="box-title boldtext">
        房颤 <span style="margin-left: 14px">{{ currentDate }}</span>
      </div>
      <div>
        <el-date-picker
          size="small"
          v-model="currentDatePicker"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          @change="datePickerchange"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="afib-echarts-box">
      <div ref="afib" style="width: 100%; height: 100%"></div>
    </div>
    <div class="afib-diagnosis">
      <div class="afib-diagnosis-title">诊断结论:</div>
      <div class="afib-diagnosis-note">{{conclusion||'没有房颤数据'}}</div>
      <div class="afib-diagnosis-tips">
        注：非医疗诊断，供参考，请以医院确诊结论为准。
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {afibData} from "@/assets/test.js";
import { queryAfDate} from "@/api/watch/deviceInfo";
export default {
  props: {
      deviceId: {
        type: String || Number,
        default: "",
      },
    },
  data() {
    return {
      conclusion:'',
      currentDate: this.parseTime(new Date(), "{y}-{m}-{d}"),
      currentDatePicker: "",
      afibData,
      chart: null,
      chartOption: {
        title: {
          subtext: "散点图",
          left: 7,
          top: "0%",
        },
        xAxis: {
          type: 'value',
          splitLine: {
              lineStyle: {
                      type: 'dashed'
              }
          },
          axisLabel: {
              fontSize: 12,
              color: '#999999',
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
              lineStyle: {
                  type: 'dashed'
              }
          },
          axisLabel: {
              fontSize: 12,
              color: '#999999',
          }
        },
        series: [
          {
            symbolSize: 2,
            data:[],
            type: 'scatter',
            itemStyle: {
                color: '#4D282828'
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    datePickerchange() {
      this.currentDate = this.currentDatePicker || this.parseTime(new Date(), "{y}-{m}-{d}");
      this.getDetailsData()
    },
    initChart() {
      const chartElement = this.$refs.afib;
      if (chartElement) {
        this.chart = this.echarts.init(chartElement);
        this.seChartOptions();
      }
    },
    seChartOptions(data) {
      this.chartOption.series[0].data = data && data.length > 0 ? this.resetData(data) : []
      this.chart.setOption(this.chartOption);
    },
    resetData(list) {
      let result = [];
      list.forEach(obj => {
        // let messages = obj.message.split(',');
        result = result.concat(obj.val);
      });
      const res = [];
      for (let i = 0; i < result.length; i += 2) {
        if (result[i] >=200 &&result[i] <=2000 && result[i + 1] >=200 &result[i + 1] <= 2000) {
          res.push([result[i], result[i + 1]]);
        }
      }
      return res
    },
    // 获取房颤
    getDetailsData() {
      queryAfDate(this.currentDate, this.deviceId)
        .then((response) => {
          if (response && response.data) {
            // console.log("------------------" + JSON.stringify(response.data, null, 2))

            //更新平均最大最小心率
            
            // this.resetData(response.data.data);
            this.conclusion = response.data.mes;
            
            // 更新 chartOptions.series 数据,更新图表
            if (this.chart) {
               this.seChartOptions(response.data.data)
            }
          } else {
            console.warn("房颤数据返回为空或格式不正确:", response);
          }
        })
        .catch((error) => {
          console.error("获取房颤数据失败:", error);
        });
    },

  },
};
</script>

<style lang="scss" scoped>
@mixin u-flex($flexD, $alignI, $justifyC) {
  display: flex;
  flex-direction: $flexD;
  align-items: $alignI;
  justify-content: $justifyC;
}
.boldtext {
  font-size: 16px;
  color: #292929;
  line-height: 30px;
  font-weight: 700;
}
.box-header {
  padding: 0 15px;
  @include u-flex(row, center, space-between);
  height: 50px;
}
.box-title {
  color: #292929;
  font-size: 16px;
  font-family: PingFang SC-Medium;
  padding-left: 10px;
  border-left: 4px solid #2284ff;
  line-height: 13px;
}
.afib-echarts-box {
  width: 100%;
  min-width: 839px;
  max-width: 1223px;
  height: 400px;
}
.afib-diagnosis {
  padding: 30px;
  color: #505050;
  font-size: 14px;
  &-title {
    color: #454545;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 30px;
  }
  &-note {
    margin-bottom: 60px;
  }
  &-tips {
    color: #999;
    font-size: 12px;
    height: 50px;
  }
}
</style>