<!--  -->
<template>
  <div class="signs">
    <NavBar title="心率监测" @on-click-left="onNavBack" right-text="历史"> </NavBar>
    <div class="main">
      <div class="tab-bar">
        <div class="date-tab-con">
          <div class="date-tab-list">
            <div
              :class="['date-tab-item', { active: current === index, notClick: false }]"
              @click="onTabClick(item.value, index)"
              v-for="(item, index) in timeList"
              :key="index"
            >
              <img :src="tabImgUrl" alt v-if="index == 3" />
              <span>{{ item.text }}</span>
              <img class="more" :src="selectDownImg" alt v-if="index == 3" />
            </div>
            <!-- <img :src="dateImg" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="top">
        <!-- 日期选择 -->
        <!-- 标题 -->
        <div class="title">
          <div class="title-left">
            {{ titleLeft }}
          </div>
          <!-- <div class="title-right" v-show="currentDays === 0">
            <p @click="onHistory">历史监测</p>
          </div> -->
        </div>
        <!-- 日历 -->

        <van-dialog
          class="calenddar-dialog"
          v-model="calendarDialogShow"
          :show-confirm-button="false"
          :show-cancle-button="false"
          :close-on-click-overlay="true"
          ref="calenddarDialog"
        >
          <template #default>
            <div class="calendar" ref="calendarCon">
              <van-calendar
                v-model="calendarShow"
                :min-date="minDate"
                :max-date="maxDate"
                :default-date="defaultDate"
                :round="false"
                :poppable="false"
                color="#179b3b"
                :show-confirm="false"
                :show-title="false"
                :show-subtitle="false"
                :formatter="formatter"
                @select="onSelect"
              />
            </div>
          </template>
        </van-dialog>

        <!-- 监测次数 -->
        <div class="monitoring-count">
          <p>监测次数：{{ monitoringCount || '0' }}次</p>
        </div>

        <!-- 折线图-非日报 -->

        <div class="pie-chart-con">
          <div class="pie-chart-left">
            <div id="pieChart" ref="pieChart"></div>
          </div>

          <div class="pie-chart-right">
            <div class="list">
              <div class="item" v-for="(item, index) in pieRightList" :key="index">
                <div class="item-left">
                  <div class="item-circle" :style="{ backgroundColor: item.color }"></div>

                  <span class="text">{{ item.text || '--' }}</span>
                </div>

                <div class="item-right">
                  <span :style="{ color: item.color }">{{ item.count ? item.count + '次' : '0次' }}</span>
                  <label :style="{ color: item.color }">{{
                    item.percentage ? '(' + item.percentage + '%' + ')' : '(0%)'
                  }}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="week-month" v-show="true"></div>
      <div class="statistics">
        <div class="list">
          <div
            class="item"
            v-for="(item, index) in statisticsList"
            :key="index"
            :style="{ backgroundColor: item.bgColor }"
          >
            <div class="middle">
              <span :style="{ color: '#fff' }">{{ item.value || '--' }}</span>
            </div>
            <div class="top">
              <span>{{ item.label || '--' }}</span>
            </div>
            <div class="line"></div>
            <div class="bottom">
              <span>{{ item.time || '--' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="warn-tips">
        <div class="left">
          <img :src="warnImg" alt="" />
        </div>
        <div class="right">
          <p>
            <span class="orange">温馨提示: </span>检测数据仅供参考，<span class="orange"
              >不可做医疗诊断和治疗依据。</span
            >
          </p>
        </div>
      </div>

      <div class="tab-bar">
        <div class="date-tab-con">
          <div class="date-tab-list">
            <div
              :class="['date-tab-item', { active: signCurrent === index, notClick: false }]"
              @click="onTabClickSign(index)"
              v-for="(item, index) in signList"
              :key="index"
            >
              <span>{{ item.text }}</span>
            </div>
            <!-- <img :src="dateImg" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="echart-container">
        <div class="echart">
          <EchartBox
            echartId="lineChart"
            :outTitle="emoLegend.outTitle"
            height="200"
            width="200"
            :legend="emoLegend"
            :options="defaultOptions"
          ></EchartBox>
        </div>
      </div>
      <div class="bottom">
        <div class="result">
          <div class="result-con">
            <div class="title">
              <span class="title-no-data">结果解读</span>
            </div>
            <div class="status">
              <p>心率正常</p>
              <ul>
                <li class="ordinary"></li>
                <li class="excellent active"></li>
                <li class="toobad"></li>
              </ul>
            </div>
            <div class="tips">
              <span>您的心率属于正常水平值，请继续保持注意合理膳食，少吃太甜太 咸的东西，少吃高热量食物。</span>
            </div>
          </div>
        </div>
        <div class="wran-tips">
          <p class="tips-title">温馨提示：</p>
          <p>检测数据仅供参考，不可做医疗诊断和治疗依据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import { EmotionModel, PsyBaseUrl } from '@/config/models';
import axios from 'axios';
import EchartBox from '@/components/EchartBox';
import ToastService from '@/services/toast-service';
export default {
  components: {
    NavBar,
    EchartBox
  },
  data() {
    return {
      currentRateOut: 100,
      systolicRate: 50,
      monitoringCount: '', //监测次数
      circleBpm: require('@/assets/today/icons/2_33.png'),
      // 状态条
      statesList: [
        { color: '#2ea7e0', text: '偏低', state: 'low' },
        { color: '#189b3b', text: '正常', state: 'normal' },
        { color: '#ff5f8b', text: '偏高', state: 'hight' }
      ],
      // 情绪状态列表
      statisticsList: [
        /* { label: '最低心率', value: '75', time: '08:15', bgColor: '#2ea7e0' },
        { label: '最高心率', value: '148', time: '10:15', bgColor: '#189b3b' },
        { label: '平均心率', value: '50', time: '18:15', bgColor: '#ff5f8b' } */
      ],
      warnImg: require('@/assets/today/icons/2_25.png'),
      timeList: [
        { name: 'today', text: '今天', value: 0 },
        { name: 'week', text: '7天', value: 7 },
        { name: 'month', text: '30天', value: 30 }
      ],
      // 日期选择标签
      dateList: [],
      tabImgUrl: require('@/assets/today/icons/statistical_form.png'),
      selectDownImg: require('@/assets/today/icons/select_down.png'),
      dateImg: require('@/assets/today/icons/2_12.png'),
      current: 0, // 日期选择标签-当前选中的标签
      currentDays: 0, //日期选择标签-日期参数
      emotionData: [],
      xAxisData: [], //图表x轴展示的数据
      echarts: null,
      signCurrent: 0,
      calendarDialogShow: false,
      //饼状图右边数据,TODO 根据接口数据和 模块 重新封装数组
      pieRightList: [
        /* {
          text: '无情绪倾向',
          count: 12,
          percentage: '80',
          color: '#179b3b'
        },
        {
          text: '轻度情绪倾向',
          count: 2,
          percentage: '80',
          color: '#8dc21f'
        },
        {
          text: '中度情绪倾向',
          count: 1,
          percentage: '80',
          color: '#2ea7e0'
        },
        {
          text: '重度情绪倾向',
          count: 1,
          percentage: '80',
          color: '#ff5f8b'
        } */
      ],
      params: {},
      emoName: '',
      result: '',
      // 需要高亮的日期数组
      highlightDates: [],
      // 日历 默认最小可选择日期，默认为当前时间
      maxDate: new Date(this.$dayjs().hour(0).minute(0).second(0).format()),
      // 默认日历日期时间
      defaultDate: new Date(this.$dayjs().hour(0).minute(0).second(0).format()),
      // 选中的日历日期
      selectDate: '',
      uid: '',
      // 建议
      advice: '',
      // 底部天数标题
      surveyTitle: '' || '7天概览',
      // 路由中的日期
      routeDate: '',
      // 路由参数
      // 是否显示帮助
      isPopup: false,
      // 结果等级
      resultLevel: '',
      // 轻度级别颜色
      mildColor: '#8dc21f',
      // 中度级别颜色
      severeColor: '#2ea7e0',
      // 重度级别颜色
      moderateColor: '#ff5f8b',
      // 7天和30天最大数据列表
      weekAndMonData: [],
      noDataImg: require('@/assets/today/images/no_data_01.png'),
      weekList: [],
      startDate: '', //接口需要的开始时间
      endDate: '', //接口需要的结束时间
      currentEmoName: '', //当前情绪名称
      pieEcharts: null,
      emotionList: [],
      weekAndMonthSeries: null,
      emoType: '',
      pieData: []
    };
  },
  watch: {
    /* emotionData: {
      handler() {
        this.initEchart();
      },
      deep: true
    }, */
    pieData: {
      handler() {
        this.initPieEchart();
      },
      deep: true
    }
  },
  computed: {
    emoLegend() {
      return {
        title: '',
        outTitle: `${this.emoName}数据图`,
        list: [
          { name: `无${this.emoName}倾向`, color: '#179b3b' },
          { name: `轻度${this.emoName}倾向`, color: '#8dc21f' },
          { name: `中度${this.emoName}倾向`, color: '#2ea7e0' },
          { name: `重度${this.emoName}倾向`, color: '#ff5f8b' }
        ]
      };
    },
    // 饼状图配置
    pieOption() {
      return {
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 14
          },
          position: 'right'
        },
        legend: {
          top: '5%',
          left: 'center',
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '90%'],
            avoidLabelOverlap: false,
            startAngle: 270, // 设置逆时针渲染
            itemStyle: {
              borderRadius: 5,
              borderColor: '#fff',
              borderWidth: 2,
              fontSize: 16
            },
            label: {
              show: false,
              position: 'center',
              fontSize: 16
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieData
          }
        ]
      };
    },
    titleLeft() {
      //let text = this.emoName === 'depression' ? '趋势' : '';
      let today = '';
      if (this.currentDays !== 0) {
        today = '';
      } else {
        today =
          this.$dayjs(this.selectDate || this.defaultDate).format('YYYY-MM-DD') ===
          this.$dayjs(new Date()).format('YYYY-MM-DD')
            ? '今天'
            : '';
      }
      /*  return `${today}${this.emoName}倾向${text}`; */
      return `${today}心率趋势`;
    },
    signList() {
      return [
        { name: 'heartRate', text: '心率' /* value: 0 */ },
        { name: 'temperature', text: '体温' /* value: 7  */ },
        { name: 'step', text: '运动' /* value: 30 */ }
      ];
    },

    echartsTitle() {
      return '心率数据图';
    },
    defaultOptions() {
      return {
        time: {
          useUTC: false
        },
        grid: {
          show: true,
          borderWidth: 0,
          top: '3%',
          left: '1%',
          right: '3%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          textStyle: {
            fontSize: 10
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#ddd',
              width: 2
            }
          },
          nameLocation: 'center',
          axisLabel: {
            show: true,
            fontSize: 12,
            showMinLabel: true, //显示最小值
            showMaxLabel: true //显示最大值
          },
          data: this.xAxisData
        },
        dataZoom: [
          /*  {
                        type: "inside",
                        start: 0,
                        end: 100,
                    }, */
          {
            start: 0,
            end: 100,
            textStyle: {
              color: '#FFF',
              fontSize: 14
            },
            show: true,
            height: 20,
            bottom: 4,
            handleStyle: {
              borderWidth: 1,
              borderCap: 'square'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 14,
            align: 'center'
          },
          formatter: function (params) {
            return params[0].marker + params[0].name + '</br>' + params[0].value;
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          min: 0,
          interval: 20,
          splitNumber: 1,
          boundaryGap: ['5%', '5%'],
          nameTextStyle: {
            fontSize: 13
          },
          alignTicks: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 13
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#ddd',
              width: 1
            }
          }
        },
        series: [
          {
            name: `无${this.emoName}倾向`,
            type: 'line',
            padding: 5,
            smooth: true,
            data: this.emotionData,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              color: '#fff',
              borderWidth: 2
            },
            lineStyle: {
              width: 6,
              type: 'solid',
              color: '#189b3b'
            }
          },
          {
            name: `轻度${this.emoName}倾向`,
            type: 'line',
            data: ''
          },
          {
            name: `中度${this.emoName}倾向`,
            type: 'line',
            data: ''
          },
          {
            name: `重度${this.emoName}倾向`,
            type: 'line',
            data: ''
          }
        ]
      };
    }
  },
  created() {
    this.loadParams();
    this.initEchartText();
    this.getPsychologiclData();
    /* this.createList(); */
    /* this.getPieData(); */
  },
  mounted() {
    /*  this.initEchart(); */
    this.initPieEchart();
  },
  methods: {
    loadParams() {
      let params = this.$route.query;
      if (params) {
        this.emoName = EmotionModel[params.name].name;
        this.emoType = EmotionModel[params.name].type;
        this.uid = params.uid;
        this.params = params;
        this.currentEmoName = params.name;
        if (params.date) {
          this.dateList[0].text =
            this.$dayjs(params.date).format('YYYY-MM-DD') === this.$dayjs(new Date()).format('YYYY-MM-DD')
              ? '今天'
              : this.$dayjs(params.date).format('MM-DD');
          this.defaultDate = new Date(this.$dayjs(params.date).hour(0).minute(0).second(0).format());
        }
      }
    },
    // 初始化饼状图
    initPieEchart() {
      if (this.pieEcharts != null && this.pieEcharts != '' && this.pieEcharts != undefined) {
        this.pieEcharts.dispose();
      }
      this.pieEcharts = this.$echarts.init(this.$refs.pieChart);
      this.pieEcharts.setOption(this.pieOption);
    },
    // 初始化图表的文字内容
    initEchartText() {
      this.result = `无${this.emoName}倾向`;
      this.defaultSeries = [
        {
          name: ``,
          type: 'line',
          padding: 5,
          data: this.emotionData,
          symbol: 'circle',
          symbolSize: 12, // 拐点圆的大小
          areaStyle: {}
        },
        {
          name: `轻度${this.emoName}倾向`,
          type: 'line',
          padding: 10,
          data: '',
          symbol: 'circle',
          symbolSize: 12 // 拐点圆的大小
        },
        {
          name: `中度${this.emoName}倾向`,
          type: 'line',
          data: ''
        },
        {
          name: `重度${this.emoName}倾向`,
          type: 'line',
          data: ''
        }
      ];
      this.pieRightList = this.pieRightList.map(item => {
        item.text = item.text.replace('情绪', this.emoName);
        return item;
      });
    },
    // 获取饼状图数据，TODO 对接接口数据
    getPieData() {
      this.pieData = [
        { value: 12, name: '', itemStyle: { color: '#179b3b' } },
        { value: 2, name: '', itemStyle: { color: '#8dc21f' } },
        { value: 1, name: '', itemStyle: { color: '#2ea7e0' } },
        { value: 1, name: '', itemStyle: { color: '#ff5f8b' } }
      ];
    },
    // 获取情绪数据
    getPsychologiclData(date, startDate, endDate) {
      ToastService.loading({
        message: '数据加载中'
      });
      let reqDate = date
        ? this.$dayjs(date).format('YYYY-MM-DD')
        : this.routeDate || this.$dayjs(this.defaultDate).format('YYYY-MM-DD'); /* "2023-05-23" */
      let reqParams = {
        uid: this.uid,
        startDate: startDate || reqDate,
        endDate: endDate || reqDate,
        type: this.emoType
      };
      console.log('请求参数', reqParams);
      let reqUrl = `${PsyBaseUrl}/api/Data/GetHisData`;
      axios
        .get(reqUrl, {
          params: { ...reqParams },
          headers: { AccessToken: this.$store.getters.ssjlToken }
        })
        .then(res => {
          if (res.data) {
            let data = res.data.response;
            // 监测次数
            this.monitoringCount = data.Count;
            this.pieRightList = [];
            this.statisticsList = [];
            this.emotionList = [];
            let None = {
              count: data.None,
              percentage: this.calcPercentage(data.None, data.Count),
              text: `无${this.emoName}倾向`,
              color: '#179b3b'
            };
            let Mild = {
              count: data.Mild,
              percentage: this.calcPercentage(data.Mild, data.Count),
              text: `轻度${this.emoName}倾向`,
              color: '#8dc21f'
            };
            let Moderate = {
              count: data.Moderate,
              percentage: this.calcPercentage(data.Moderate, data.Count),
              text: `中度${this.emoName}倾向`,
              color: '#2ea7e0'
            };
            let Severe = {
              count: data.Severe,
              percentage: this.calcPercentage(data.Severe, data.Count),
              text: `重度${this.emoName}倾向`,
              color: '#ff5f8b'
            };
            // 饼状图右边数据
            this.pieRightList.push(None);
            this.pieRightList.push(Mild);
            this.pieRightList.push(Moderate);
            this.pieRightList.push(Severe);
            this.pieData = this.pieRightList.map(item => {
              item.value = item.count;
              item.itemStyle = {
                color: item.color
              };
              return item;
            });
            // 最大，最小和最近值
            let Max = {
              label: '最大值',
              value: data.Max,
              time: data.MaxDesc
                ? this.currentDays === 0
                  ? this.$dayjs(data.MaxDesc).format('HH:mm')
                  : this.$dayjs(data.MaxDesc).format('MM/DD HH:mm')
                : '',
              bgColor: '#ff5f8b'
            };
            let Min = {
              label: '最小值',
              value: data.Min,
              time: data.MinDesc
                ? this.currentDays === 0
                  ? this.$dayjs(data.MinDesc).format('HH:mm')
                  : this.$dayjs(data.MinDesc).format('MM/DD HH:mm')
                : '',
              bgColor: '#189b3b'
            };
            /* let Avg = {
              label: '平均值',
              value: data.Avg,
              time: data.AvgDesc
                ? this.currentDays === 0
                  ? this.$dayjs(data.AvgDesc).format('HH:mm')
                  : this.$dayjs(data.AvgDesc).format('MM/DD HH:mm')
                : ''
            }; */
            let Current = {
              label: '最近值',
              value: data.Current,
              time: data.CurrentDesc
                ? this.currentDays === 0
                  ? this.$dayjs(data.CurrentDesc).format('HH:mm')
                  : this.$dayjs(data.CurrentDesc).format('MM/DD HH:mm')
                : '',
              bgColor: '#2ea7e0'
            };
            this.statisticsList.push(Max);
            this.statisticsList.push(Min);
            /* this.statisticsList.push(Avg); */
            this.statisticsList.push(Current);
            // 周报月报底部显示数据
            let NoneDay = {
              days: data.NoneDay,
              text: `无${this.emoName}倾向`,
              color: '#179b3b'
            };
            let MildDay = {
              days: data.MildDay,
              text: `轻度${this.emoName}倾向`,
              color: '#8dc21f'
            };
            let ModerateDay = {
              days: data.ModerateDay,
              text: `中度${this.emoName}倾向`,
              color: '#2ea7e0'
            };
            let SevereDay = {
              days: data.SevereDay,
              text: `重度${this.emoName}倾向`,
              color: '#ff5f8b'
            };
            this.emotionList.push(NoneDay);
            this.emotionList.push(MildDay);
            this.emotionList.push(ModerateDay);
            this.emotionList.push(SevereDay);
            // 图表数据
            this.emotionData = data.ChartDatas.map(item => {
              return {
                value: item.Value,
                itemStyle: {
                  borderColor: this.calcResultColor(item.Level)
                }
              };
            });
            // 7天 和 30天柱形图显示
            this.weekAndMonData = data.ChartDatas.map((item, index) => {
              return {
                value: [index, item.MinValue, item.MaxValue]
              };
            });
            // x轴显示数据
            if (this.currentDays === 0) {
              // 显示今天数据
              this.xAxisData = data.ChartDatas.map(item => {
                return this.$dayjs(item.Key.replace(/-/g, '/')).format('HH:mm');
              });
            } else {
              this.xAxisData = data.ChartDatas.map(item => {
                return this.$dayjs(item.Key.replace(/-/g, '/')).format('MM/DD');
              });
              let that = this;
              // 7天和30天变成柱状图
              this.weekAndMonthSeries = [
                {
                  name: '平均值',
                  type: 'scatter',
                  symbolSize: 14,
                  data: this.emotionData
                },
                {
                  name: '',
                  type: 'custom',
                  data: this.weekAndMonData,
                  renderItem: function (params, api) {
                    let categoryIndex = api.value(0);
                    let end = api.coord([categoryIndex, api.value(1)]);
                    let start = api.coord([categoryIndex, api.value(2)]);
                    let width = 16;
                    let rectShape = that.$echarts.graphic.clipRectByRect(
                      {
                        x: start[0] - width / 2,
                        y: start[1],
                        width: 16,
                        height: end[1] - start[1]
                      },
                      {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                      }
                    );
                    if (rectShape) {
                      rectShape.r = [10];
                    }
                    return (
                      rectShape && {
                        type: 'rect',
                        shape: rectShape,
                        style: api.style()
                      }
                    );
                  },
                  itemStyle: {
                    opacity: 0.8
                  },
                  encode: {
                    y: [1, 2],
                    x: 0
                  }
                },
                {
                  name: `轻度${this.emoName}倾向`,
                  type: 'scatter',
                  symbolSize: 12,
                  data: ''
                },
                {
                  name: `中度${this.emoName}倾向`,
                  type: 'scatter',
                  symbolSize: 12,
                  data: ''
                },
                {
                  name: `重度${this.emoName}倾向`,
                  type: 'scatter',
                  symbolSize: 12,
                  data: ''
                },
                {
                  name: `无${this.emoName}倾向`,
                  type: 'scatter',
                  symbolSize: 12,
                  data: ''
                }
              ];
              // 点击提示此时为空
              this.defaultOptions.tooltip = {
                trigger: 'axis',
                formatter: function (params) {
                  return (
                    params[0].marker +
                    '平均值:' +
                    params[0].name +
                    '--' +
                    params[0].value +
                    '</br>' +
                    params[1].marker +
                    '最大值:' +
                    params[1].name +
                    '--' +
                    params[1].value[2] +
                    '</br>' +
                    params[1].marker +
                    '最小值:' +
                    params[1].name +
                    '--' +
                    params[1].value[1]
                  );
                }
              };
              this.defaultOptions.series = this.weekAndMonthSeries;
            }
            // 结果解读
            this.result = data.Result;
            this.resultLevel = data.ResultLevel;
            this.advice = data.Advice;
            ToastService.success({
              message: '数据加载完成'
            });
          }
        })
        .catch(error => {
          console.log(error);
        })
        .finally(() => {});
    },
    // 计算结果采用哪种颜色
    calcResultColor(value, isCallBackClass) {
      let color = '';
      let className = '';
      switch (Number(value)) {
        case 0:
          color = '#179b3b';
          className = 'none';
          break;
        case 1:
          color = '#8dc21f';
          className = 'mild';
          break;
        case 2:
          color = '#2ea7e0';
          className = 'moderate';
          break;
        case 3:
          color = '#ff5f8b';
          className = 'severe';
          break;
      }
      return isCallBackClass ? className : color;
    },
    // 计算百分比
    calcPercentage(value, total) {
      if (typeof value !== 'number' || typeof total !== 'number' || total === 0) {
        return 0;
      }
      let milValue = value * 1000;
      let milTotal = total * 1000;
      return Math.round((milValue / milTotal) * 100);
    },
    onNavBack() {
      this.$router.push({
        name: 'Today'
      });
    },
    onTabClick(value, index) {
      this.current = index;
      this.currentDays = value;
      this.$store.commit('tabClick', index);
      let currentDate = new Date();
      this.surveyTitle = value === 7 ? '7天概览' : '30天概览';
      if (value === 7) {
        let dateList = this.getPostDate(currentDate, 6, true);
        this.getPsychologiclData('', dateList[0] /* '2023-11-15' */, dateList[1] /* '2023-11-21' */);
        this.startDate = dateList[0] /* '2023-11-15' */;
        this.endDate = dateList[1] /* '2023-11-21' */;
      } else if (value === 0) {
        // 今天
        this.defaultOptions.xAxis.data = this.xAxisData;
        this.defaultOptions.series = this.defaultSeries;
        this.defaultOptions.series[0].data = this.emotionData;
        this.getPsychologiclData(
          this.selectDate ? this.selectDate : this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */
        );
        this.startDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */;
        this.endDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */;
      } else if (value === 30) {
        // 30天
        this.defaultOptions.xAxis.data = this.xAxisData;
        this.defaultOptions.series = this.defaultSeries;
        this.defaultOptions.series[0].data = this.emotionData;
        let dateList = this.getPostDate(currentDate, 30, true);
        this.getPsychologiclData('', dateList[0] /* '2023-11-21' */, dateList[1] /* '2023-12-21' */);
        this.startDate = dateList[0] /* '2023-11-21' */;
        this.endDate = dateList[1] /* '2023-12-21' */;
      }
    },
    onTabClickSign(index) {
      this.signCurrent = index;
    },
    createList() {
      // 模拟数据
      this.emotionData = [];
      const colors = ['#189b3b', '#2ea7e0', '#ff5f8b'];
      for (let i = 0; i < 10; i++) {
        let value = Math.floor(Math.random() * 60) + 80;
        let color = colors[Math.floor(Math.random() * colors.length)];
        this.emotionData.push({
          value,
          itemStyle: {
            borderColor: color
          }
        });
      }
    },
    initEchart() {
      if (this.echarts != null && this.echarts != '' && this.echarts != undefined) {
        this.echarts.dispose();
      }
      this.echarts = this.$echarts.init(this.$refs.lineChart);
      this.echarts.setOption(this.defaultOptions);
    }
  }
};
</script>
<style scoped lang="scss">
@import './scss//signs-details.scss';
/* @import url(); 引入css类 */
</style>
