<!--  -->

<template>
  <div class="pageContent report ">
    <NavBar :title="navTitle" @on-click-left="onNavBack" right-text=""> </NavBar>
    <!-- 日期切换 -->
    <div class="periodSwitch">
      <div class="arrow arrowLeft">
        <van-icon name="arrow-left" :color="isPreClick ? '' : '#e6e6e6'" @click="dateClick"></van-icon>
      </div>
      <div class="timearea">{{ currentRecord.name }}</div>
      <div class="arrow arrowRight">
        <van-icon name="arrow" :color="isAddClick ? '' : '#e6e6e6'" @click="dateClick('add')"></van-icon>
      </div>
    </div>

    <!-- 情绪切换 -->

    <div class="psy-tab-bar">
      <div class="psy-tab-con">
        <div class="psy-tab-list">
          <div :class="['psy-tab-item', { active: signActive === index, notClick: false }]"
            @click="onPsyTabClick(item, index)" v-for="(item, index) in psyList" :key="index">
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="pie-chart-con" v-show="signActive !== 2">
        <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="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 class="status">
                <img :src="item.compare != 0 ? item.compare > 0 ? upImg : downImg : ''" alt="" />
                <span :style="{ color: item.compare > 0 ? item.color : '' }">{{
      item.compare != 0
        ? Math.abs(item.compare * 10) + '%'
        : '持平'
    }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="statistics" v-show="signActive !== 2">
        <div class="list">
          <div class="item" v-for="(item, index) in statisticsList" :key="index"
            :style="{ backgroundColor: item.bgColor }">
            <div class="top">
              <span>{{ item.label || '--' }}</span>
            </div>

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

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

      <div class="bottom">

        <div class="echart-container">

          <div class="title-out">
            <span>{{ signsChartTitle }}</span>
          </div>
          <div class="ChatBox" :class="{ hiddenChart: signActive == 2 }">
            <div class=" legendBox minLegendBox">
              <div class="legend">
                <div class="legendItem" :class="item.type" v-for="( item, index ) in  signGrid " :key="index">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>

            <div class="Chat signChart" id="signChart"></div>
          </div>
          <div class="ChatBox minChartBox" :class="{ hiddenChart: signActive != 2 }">

            <div class="Chat stepChart" id="stepChart"></div>
            <div class="result">
              <div class="wrapBox">
                <div class="text">
                  <div class="left">
                    <p>总步数：{{ stepsData.stepTotal.total || '--' }}</p>
                  </div>
                  <div class="right">
                    <img :src="stepsData.stepTotal.compare > 0 ? upImg : downImg" alt="" />
                    <span>{{ Math.abs(stepsData.stepTotal.compare) || '--' }}</span>
                  </div>
                </div>
                <div class="text">
                  <div class="left">
                    <p>平均步数：{{ stepsData.stepAvg.avg || '--' }}</p>
                  </div>
                  <div class="right">
                    <img :src="stepsData.stepAvg.compare > 0 ? upImg : downImg" alt="" />
                    <span>{{ Math.abs(stepsData.stepAvg.compare) || '--' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="advice" v-show="signActive == 2">
            <div class="content">
              <p class="title">健康建议</p>
              <p>{{ advice || '--' }}</p>
            </div>
          </div>
          <div class="title-out" v-show="signActive == 2">
            <span>热量消耗</span>
          </div>
          <div class="ChatBox minChartBox" :class="{ hiddenChart: signActive != 2 }">
            <div class="Chat calorieChart" id="calorieChart"></div>
            <div class="result">
              <div class="wrapBox">
                <div class="text">
                  <div class="left">
                    <p>总消耗：{{ calorieData.calorieTotal.total || '--' }}</p>
                  </div>
                  <div class="right">
                    <img :src="calorieData.calorieTotal.compare > 0 ? upImg : downImg" alt="" />
                    <span>{{ Math.abs(calorieData.calorieTotal.compare) || '--' }}</span>
                  </div>
                </div>
                <div class="text">
                  <div class="left">
                    <p>平均消耗：{{ calorieData.calorieAvg.avg || '--' }}</p>
                  </div>
                  <div class="right">
                    <img :src="calorieData.calorieAvg.compare > 0 ? upImg : downImg" alt="" />
                    <span>{{ Math.abs(calorieData.calorieAvg.compare) || '--' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="advice" v-show="signActive == 2">
            <div class="content">
              <p class="title">健康建议</p>
              <p>{{ adviceOfCalor || '--' }}</p>
            </div>
          </div>
        </div>
        <!-- 建议 -->
        <!-- <div class="advice" v-show="signActive !== 2">
          <div class="content">
            <p class="title">健康建议</p>
            <p>{{ advice || '--' }}</p>
          </div>
        </div> -->
        <div class="overview" v-show="signActive !== 2">
          <div class="content">
            <div class="title">
              <span class="title-text">{{ surveyTitle }}</span>
              <div class="mood-list">
                <div class="item" v-for="( item, index ) in emotionList" :key="index"
                  :style="{ backgroundColor: item.color }">
                  <p>
                    <span class="day">{{ item.days }}</span>
                    <span class="day-text">天</span>
                    <img :src="calcWeekImg(item.days, item.lastDay)" alt="" />
                    <span class="day-text status">{{ calcWeekImg(item.days, item.lastDay, true) }}</span>
                  </p>
                  <p>{{ item.text }}</p>
                </div>
              </div>
              <!-- <div class="mood-list-no-data" v-else>
                            <div class="no-data">
                                <img src="../../../../assets/img/no_data_01.png" alt />
                                <p>暂无数据</p>
                            </div>
                        </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import { Signsmodel } from '@/config/models';
import { getMonthsByYear, getWeeksByYear, isNotNull } from '@/services/utils-service';
import APIHealthUser from '@/api/health-user';
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      count: 0,
      isPreClick: true,
      isAddClick: true,
      clickFlag: true, //左右日期按钮是否给予点击
      weekList: [],
      maxCount: '',
      currentRecord: {},
      signActive: 0,
      upImg: require('@/assets/today/icons/up.png'),
      downImg: require('@/assets/today/icons/down.png'),
      signList: [
        {
          grid: 'heartRateList',
          name: '心率',
          label: 'heartrate'
        },
        {
          grid: 'temperatureList',
          name: '体温',
          label: 'temperature'
        },
        {
          grid: null,
          name: '运动',
          label: 'step'
        }
      ],
      psyList: [
        { name: 'heartrate', text: '心率', value: 0 },
        { name: 'temperature', text: '体温', value: 1 },
        { name: 'step', text: '运动', value: 2 }
      ],
      healthyType: '',
      emoName: '',
      currentEmoName: '',
      pieRightList: [
        {
          text: "心率偏低",
          count: 1,
          percentage: "80",
          color: "#2ea7e0"
        },
        {
          text: "心率正常",
          count: 12,
          percentage: "80",
          color: "#179b3b"
        },

        {
          text: "心率偏高",
          count: 1,
          percentage: "80",
          color: "#ff5f8b"
        }
      ],
      pieEcharts: null,
      pieData: [], //饼状图数据
      statisticsList: [
        /* { label: '最大值', value: '75', time: '08:15', bgColor: '#ff5f8b' },
        { label: '最小值', value: '40', time: '10:15', bgColor: '#189b3b' },
        { label: '最近值', value: '50', time: '18:15', bgColor: '#2ea7e0' } */
      ],
      emotionList: [
        /* { days: "4", text: "心率偏低", color: "#2ea7e0" },
        { days: "5", text: "心率正常", color: "#179b3b" },


        { days: "2", text: "心率偏高", color: "#ff5f8b" } */
      ],
      noDataImg: require('@/assets/today/images/no_data_01.png'),
      stepsData: {
        stepTotal: {
          compare: '',
          lastTotal: '',
          total: ''
        },
        stepAvg: {
          compare: '',
          lastAvg: '',
          avg: ''
        }
      },
      calorieData: {
        calorieTotal: {
          compare: '',
          lastTotal: '',
          total: ''
        },
        calorieAvg: {
          compare: '',
          lastAvg: '',
          avg: ''
        }
      },

      signChart: null,
      stepChart: null,
      calorieChart: null,
      advice: '',
      adviceOfCalor: '',
      signData: '',
      chartSeries: []
    }
  },
  computed: {

    pieOption() {
      return {
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 16
          },
          position: 'right'
        },
        legend: {
          top: '5%',
          left: 'center',
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '90%'],
            avoidLabelOverlap: false,
            startAngle: 270, // 设置逆时针渲染
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 4,
              fontSize: 16
            },
            label: {
              show: false,
              position: 'center',
              fontSize: 16
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieData
          }
        ]
      };
    },
    emoLegend() {
      if (this.healthyType === 0) {
        return {
          title: '',
          outTitle: `${this.emoName}数据图`,
          list: [
            { name: `${this.emoName}偏低`, color: '#2ea7e0' },
            { name: `${this.emoName}正常`, color: '#179b3b' },
            { name: `${this.emoName}偏高`, color: '#ff5f8b' }
          ]
        };
      } else if (this.healthyType === 1) {
        return {
          title: '',
          outTitle: `${this.emoName}数据图`,
          list: [
            { name: `${this.emoName}正常`, color: '#179b3b' },
            { name: `${this.emoName}偏高`, color: '#ff5f8b' }
          ]
        };
      } else {
        return {
          title: '',
          outTitle: `${this.emoName}数据图`,
          list: [
            { name: `${this.emoName}偏低`, color: '#2ea7e0' },
            { name: `${this.emoName}正常`, color: '#179b3b' },
            { name: `${this.emoName}偏高`, color: '#ff5f8b' }
          ]
        };
      }
    },
    signsChartTitle() {
      return this.signActive != 2 ? `${this.emoName}数据图` : '运动步数'
    },
    signGrid() {
      let list = [];
      if (this.signList[this.signActive].grid) {
        let temp = this[`${this.signList[this.signActive].grid}`];
        if (temp) {
          list = temp;
        }
      }
      return list;
    },
    // 默认折线图配置，echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title
    defaultOptions() {
      return {
        time: {
          useUTC: false
        },
        grid: {
          show: true,
          borderWidth: 0,
          top: '10%',
          left: '5%',
          right: '10%',
          bottom: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          textStyle: {
            fontSize: 10
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#ddd',
              width: 4
            }
          },
          nameLocation: 'center',
          axisLabel: {
            show: true,
            fontSize: 12,
            showMinLabel: true, //显示最小值
            showMaxLabel: true, //显示最大值
            marginBottom: 10 // 调整标签与轴线的距离
          },
          data: this.xAxisData
        },
        dataZoom: [
          {
            start: 0,
            end: 100,
            textStyle: {
              color: '#FFF',
              fontSize: 14
            },
            show: true,
            height: 20,
            bottom: 8,
            handleStyle: {
              borderWidth: 4,
              borderCap: 'square'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 16,
            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: 10,
            smooth: true,
            data: this.emotionData,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              color: '#fff',
              borderWidth: 4
            },
            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: ''
          }
        ]
      };
    },
    surveyTitle() {
      return this.params.dateType == 0 ? '本周概览' : '本月概览'
    },
    navTitle() {
      return this.params.dateType == 0 ? '周报详情' : '月报详情'
    }

  },
  watch: {
    pieData: {
      handler() {
        this.$nextTick(() => {
          this.initPieEchart();
        });
      },
      deep: true
    },
    signActive: {
      handler(val) {
        console.log(val);
        this.$nextTick(() => {
          this.initData();
        });
      },
      deep: true
    }
  },
  created() {
    this.loadParams();
  },
  mounted() {
    this.$nextTick(() => {
      if (this.params.dateType == 1) {
        this.getMonths();
      } else {
        this.getWeeks();
      }
      this.initData();
    })

  },
  methods: {
    initData() {
      //初始化图表
      if (!this.signChart) {
        this.signChart = this.$echarts.init(document.getElementById('signChart'));
      }
      if (!this.stepChart) {
        this.stepChart = this.$echarts.init(document.getElementById('stepChart'));
      }
      if (!this.calorieChart) {
        this.calorieChart = this.$echarts.init(document.getElementById('calorieChart'));
      }
      //渲染图表
      this.initSignChart();
      console.log("初始化图表");
    },
    async initSignChart() {
      let option = this.getOption();
      console.log("option111", option);
      let data = await this.getReportData('', this.date.start, this.date.end);
      /* this.signData = data; */
      this.advice = data.advice;
      if (this.signActive == 0) {
        //测试
        this.formateHeartRateData(option, data.days);
        this.signChart.setOption(option);
        console.log('心率');
      } else if (this.signActive == 1) {
        //测试
        this.formateTemperatureData(option, data.days);
        this.signChart.setOption(option);
        console.log('体温');
      } else if (this.signActive == 2) {
        option = this.getOption(false);
        let option2 = this.getOption(false);
        let data2 = await this.getReportData(3, this.date.start, this.date.end);
        if (data.stepAvg || data2.calorieAvg) {
          this.stepsData = { ...data };
          this.calorieData = { ...data2 };
          this.adviceOfCalor = data2.advice || '--';
        }
        this.formateStepData(option, data.days);
        this.formateCalorieData(option2, data2.days);

        this.stepChart.setOption(option);
        this.calorieChart.setOption(option2);
        console.log("this.calorieChart", option, "this.stepChart", option2);
        console.log('步数');
      }
    },
    formateHeartRateData(option, data) {
      let xdata = [];
      let ydata = [];
      let fill = [];
      let max = 0;
      data.forEach(item => {
        if (item.value > max) {
          max = item.value || '--';
        }
      });
      data.forEach(item => {
        xdata.push(item.key);

        ydata.push({
          value: item.value || '--',
          label: {
            show: false
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: this.calcColorByEvaluate(item.evaluate)
          }
        });
      });
      fill = data.map((item, index) => {
        return {
          value: [index, item.valueMin || '--', item.valueMax || '--']
        };
      })
      option.xAxis.data = xdata;
      option.series[0].data = ydata;
      option.series[1].data = fill;
      option[0] =
        option.tooltip = {
          trigger: 'axis',
          textStyle: {
            fontSize: 16
          },
          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]
            );
          }
        };
      /* option.series[1].data = fill; */
      // 规定最小值
      option.yAxis.min = 40;
      // 规定最大值
      option.yAxis.max = 150;
      //设置高压标线
      option.series[0].markLine = {
        data: [
          {
            symbol: 'pin',
            silent: true,
            yAxis: 120,
            lineStyle: {
              color: '#C1272D'
            },
            label: {
              color: '#C1272D'
            }
          }
        ]
      };
    },
    formateHeartRateColor(value) {
      if (value > 120) {
        return this.heartRateMap.get('偏高');
      } else if (value >= 60) {
        return this.heartRateMap.get('正常');
      } else {
        return this.heartRateMap.get('偏低');
      }
    },
    formateTemperatureData(option, data) {
      let xdata = [];
      let ydata = [];
      let fill = [];
      let max = 0;
      data.forEach(item => {
        if (item.value > max) {
          max = item.value || '--';
        }
      });
      data.forEach(item => {
        xdata.push(item.key);
        /* fill.push({
          value: max - item.value || '--',
          label: {
            show: false
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: this.calcColorByEvaluate(item.evaluate)
          }
        }); */
        ydata.push({
          value: item.value || '--',
          label: {
            show: false
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: this.calcColorByEvaluate(item.evaluate)
          }
        });
      });
      fill = data.map((item, index) => {
        return {
          value: [index, item.valueMin || '--', item.valueMax || '--']
        };
      })
      option.xAxis.data = xdata;
      option.series[0].data = ydata;
      option.series[1].data = fill;
      option.series[0].markLine = {
        data: [
          {
            type: "average",
            name: "体温",
            yAxis: 37.2,
            label: {
              fontSize: 14,
              position: "end",
            },
            lineStyle: {
              type: "dashed",
              width: 2,
              color: "red",
            },
          },
        ],
      }
      option[0] =
        option.tooltip = {
          trigger: 'axis',
          textStyle: {
            fontSize: 16
          },
          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]
            );
          }
        };
      /* option.series[1].data = fill; */
      // 规定最小值
      option.yAxis.min = 34.5;
      // 规定最大值
      option.yAxis.max = 42.5;
    },
    formateTemperatureColor(value) {
      if (value > 38) {
        return this.temperatureMap.get('发烧');
      } else {
        return this.temperatureMap.get('正常');
      }
    },
    formateStepData(option, data) {
      let xdata = [];
      let ydata = [];
      data.forEach(item => {
        xdata.push(item.key);
        ydata.push({
          value: item.value || '--',
          label: {
            show: true
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: this.calcColorByEvaluate(item.evaluate)
          }
        });
      });
      option.xAxis.data = xdata;
      option.series[0].data = ydata;
      // 隐藏y轴
      option.yAxis.show = false;
    },
    formateCalorieData(option, data) {
      let xdata = [];
      let ydata = [];
      data.forEach(item => {
        xdata.push(item.key);
        ydata.push({
          value: item.value == null ? 0 : item.value || '--',
          label: {
            show: true
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: this.calcColorByEvaluate(item.evaluate)
          }
        });
      });
      option.xAxis.data = xdata;
      option.series[0].data = ydata;
      // 隐藏y轴
      option.yAxis.show = false;
    },
    getOption(/* point = true */) {
      let that = this;
      this.chartSeries = [];
      if (this.signActive == 0 || this.signActive == 1) {
        this.chartSeries = [
          {
            name: '平均值',
            type: 'scatter',
            symbolSize: 14,
          },
          {
            name: '',
            type: 'custom',
            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 = [20];
              }
              return (
                rectShape && {
                  type: 'rect',
                  shape: rectShape,
                  style: api.style()
                }
              );
            },
            itemStyle: {
              opacity: 0.8
            },
            encode: {
              y: [1, 2],
              x: 0
            }
          },
        ]
      } else {
        this.chartSeries = [
          {
            type: 'line',
            padding: 10,
            smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              color: '#fff',
              borderWidth: 4
            },
            lineStyle: {
              width: 6,
              type: 'solid',
              color: '#189b3b'
            }
          },
        ]
      }
      let option = {
        grid: {
          show: true,
          borderWidth: 0,
          top: '10%',
          left: '15%',
          right: '10%',
          bottom: '20%'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#ddd',
              width: 4
            }
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            showMinLabel: true, //显示最小值
            showMaxLabel: true, //显示最大值
            marginBottom: 10 // 调整标签与轴线的距离
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: ['5%', '5%'],
          nameTextStyle: {
            fontSize: 13
          },
          alignTicks: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 13
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#ddd',
              width: 1
            }
          }
        },
        dataZoom: [
          {
            start: 0,
            end: 100,
            textStyle: {
              color: '#FFF',
              fontSize: 14
            },
            show: true,
            height: 20,
            bottom: 8,
            handleStyle: {
              borderWidth: 4,
              borderCap: 'square'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 16,
            align: 'center'
          },
          formatter: function (params) {
            return params[0].marker + params[0].name + '</br>' + params[0].value;
          }
        },
        series: this.chartSeries
      };
      /* if (!point) {
        option.series = [
          {
            type: 'bar',
            barMaxWidth: 15,
            label: {
              show: true,
              color: '#000',
              position: 'outside'
            },
            itemStyle: {
              borderRadius: 12
            }
          }
        ];
      } */
      return option;
    },
    calcColorByEvaluate(value) {
      let color = '';
      const intValue = Number(value);
      switch (intValue) {
        case 1:
          // 偏高
          color = '#ff5f8b';
          break;
        case 2:
          // 正常
          color = '#189b3b';
          break;
        case 3:
          // 偏低
          color = '#2ea7e0';
          break;
        default:
          color = '#189b3b';
          break;
      }
      return color;
    },
    loadParams() {
      let params = this.$route.query;
      if (params) {
        this.params = params;
        this.emoName = Signsmodel[params.name].name;
        this.signActive = this.calcPsyTabindex(Signsmodel[params.name].type);
        this.currentEmoName = params.name;
      }
    },
    // 初始化图表的文字内容
    initEchartText() {
      this.defaultSeries = [
        {
          name: ``,
          type: 'line',
          padding: 10,
          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;
      }); */
    },
    onNavBack() {
      this.$router.back();
    },
    dateClick(type) {
      if (type == 'add') {
        if (this.count <= 0) {
          return;
        }
        this.count--;
        this.isPreClick = true;

        this.currentRecord = this.weekList.filter(item => {
          return item.count === this.count;
        })[0];
        // 注意，周/月切换，日期不同
        this.date = this.weekList.filter(item => {
          return item.count === this.count;
        })[0]

        if (this.count <= 0) {
          this.isAddClick = false;
        }
        this.initData();
        console.log("当前切换的日期", this.date);
      } else {
        // 上一个
        if (this.count >= this.maxCount) {
          return;
        }
        this.count++;
        this.isAddClick = true;
        // 当前切换的日期
        // 注意，周/月切换，日期不同
        this.date = this.weekList.filter(item => {
          return item.count === this.count;
        })[0];
        this.currentRecord = this.weekList.filter(item => {
          return item.count === this.count;
        })[0]
        console.log("当前切换的日期", this.date);
        if (this.count >= this.maxCount) {
          this.isPreClick = false;
        };
        this.initData();
      }
    },
    onPsyTabClick(item) {
      this.healthyType = item.value;
      this.signActive = this.calcPsyTabindex(Signsmodel[item.name].type);
      this.emoName = Signsmodel[item.name].name;
      this.currentEmoName = item.name;
    },
    calcPsyTabindex(type) {
      let psyIndex = '';
      switch (type) {
        case 0:
          psyIndex = 0;
          break;
        case 1:
          psyIndex = 1;
          break;
        case 2:
          psyIndex = 2;
          break;
        default:
          break;
      }
      return psyIndex;
    },
    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);
    },
    getMonths() {
      const months = getMonthsByYear(2);
      console.log("months", months);
      this.weekList = months.reverse()
        .map((item, index) => {
          return {
            name: item.curYear + '-' + item.curMonth,
            count: index,
            start: item.start,
            end: item.end
          };
        })
      this.currentRecord = this.weekList.filter(item => {
        return item.count === this.count;
      })[0];
      this.count = 0;
      this.maxCount = months.length - 1;
      this.isAddClick = this.maxCount - this.count < this.maxCount;
      this.isPreClick = this.maxCount - this.count > 0;
      this.date = {
        start: months[0].start,
        end: months[0].end
      }
      //this.getReportData('', months[0].start, months[0].end,);
    },
    getWeeks() {
      const weeks = getWeeksByYear(1);
      console.log("week", weeks);
      this.weekList = weeks.reverse()
        .map((item, index) => {
          return {

            name: item.start + '-' + item.end,
            count: index,
            start: item.start,
            end: item.end
          };
        })
      this.currentRecord = this.weekList.filter(item => {
        return item.count === this.count;
      })[0];
      this.count = 0;
      this.maxCount = weeks.length - 1;
      this.isAddClick = this.maxCount - this.count < this.maxCount;
      this.isPreClick = this.maxCount - this.count > 0;
      this.date = {
        start: weeks[0].start,
        end: weeks[0].end
      }
      //this.getReportData('', weeks[0].start, weeks[0].end,);
    },
    // 获取体征历史数据
    getReportData(value, startDate, endDate) {
      let reqDate = this.date;
      let reqBody = {
        personId: this.$store.getters.personId,
        dateType: 1,
        healthyType: value || this.signActive,
        startTime: startDate || reqDate.start,
        endTime: endDate || reqDate.end
      };
      return new Promise(resolve => {
        APIHealthUser.getReportData(reqBody).then(res => {
          console.log("情绪数据", res.data);
          if (res.data.data.days) {
            res.data.data.days = res.data.data.days.map(item => {
              item.key = this.$dayjs(item.key).format('MM-DD');
              return item;
            });
          }
          this.pieRightList = [];
          this.statisticsList = [];
          this.emotionList = [];
          this.emotionData = [];
          this.xAxisData = [];
          const re = res.data;
          const data = re.data;
          if (re.stateCode === 1) {
            // 有数据
            if (this.signActive == 2) {
              resolve(data);
              console.log("步数数据", data);
              return
            }

            // 填充饼状图
            let None = {
              count: data.normalTimes.normalTimes,
              percentage: data.normalTimes.normalPercent,
              text: `${this.emoName}正常`,
              color: '#179b3b',
              lastPercentage: data.normalTimes.lastNormalPercent,
              compare: data.normalTimes.compare
            };
            let Moderate = {
              count: data.lowTimes.lowTimes,
              percentage: data.lowTimes.lastLowPercent,
              text: `${this.emoName}偏低`,
              color: '#2ea7e0',
              lastPercentage: data.lowTimes.lastNormalPercent,
              compare: data.lowTimes.compare
            };
            let Severe = {
              count: data.highTimes.highTimes,
              percentage: data.highTimes.highPercent,
              text: `${this.emoName}偏高`,
              color: '#ff5f8b',
              lastPercentage: data.highTimes.lastNormalPercent,
              compare: data.highTimes.compare
            };
            if (this.healthyType !== 1) {
              this.pieRightList.push(None);
              this.pieRightList.push(Moderate);
              this.pieRightList.push(Severe);
            } else {
              this.pieRightList.push(None);
              this.pieRightList.push(Severe);
            }
            this.pieData = this.pieRightList.map(item => {
              return {
                value: item.count,
                itemStyle: {
                  color: item.color
                }
              };
            });

            // 中间正方形图
            let Max = {
              label: '最大值',
              value: Number(data.max.value) || '--',
              time: data.max.date
                ? this.$dayjs(data.max.date).format('MM/DD HH:mm')
                : '',
              bgColor: this.calcResultColor(1)
            };
            let Min = {
              label: '最小值',
              value: Number(data.min.value) || '--',
              time: data.min.value
                ? this.$dayjs(data.min.date).format('MM/DD HH:mm')
                : '',
              bgColor: this.calcResultColor(1)
            };
            let Avg = {
              label: '平均值',
              value: Number(data.avg.value) || '--',
              time: data.avg.date
                ? this.$dayjs(data.avg.date).format('MM/DD HH:mm')
                : '',
              bgColor: this.calcResultColor(1)
            };
            this.statisticsList.push(Max);
            this.statisticsList.push(Min);
            this.statisticsList.push(Avg);

            // 周报月报底部显示数据

            let NoneDay = {
              days: data.normalDay.normalDay,
              text: `${this.emoName}正常`,
              color: '#179b3b',
              lastDay: data.normalDay.lastNormalDay,
            };
            let ModerateDay = {
              days: data.lowDay.lowDay,
              text: `${this.emoName}偏低`,
              color: '#2ea7e0',
              lastDay: data.lowDay.lastLowDay,
            };
            let SevereDay = {
              days: data.highDay.highDay,
              text: `${this.emoName}偏高`,
              color: '#ff5f8b',
              lastDay: data.highDay.lastHighDay,
            };
            // 体温不显示偏低
            if (this.healthyType !== 1) {
              this.emotionList.push(NoneDay);
              this.emotionList.push(ModerateDay);
              this.emotionList.push(SevereDay);
            } else {
              this.emotionList.push(NoneDay);
              this.emotionList.push(SevereDay);
            }
            resolve(data)

            // 
            /* resolve(data) */
            /* if (!data.days) {
              return;
            } */
          } else {
            // 置空
          }

        });
      })

    },
    calcResultColor(value, isCallBackClass) {
      let color = '';
      let className = '';
      switch (Number(value)) {
        case 0:
          color = '#2ea7e0';
          className = 'moderate';
          break;
        case 1:
          color = '#179b3b';
          className = 'none';
          break;
        case 2:
          color = '#ff5f8b';
          className = 'severe';
          break;
        case 3:
          color = '#ff5f8b';
          className = 'severe';
          break;
        default:
          color = '#179b3b';
          className = 'none';
          break;
      }
      return isCallBackClass ? className : color;
    },
    // 计算显示是上升or下降的图片
    /**
     *
     * @param { 本周情绪比例} current
     * @param { 上周情绪比例 } last
     * @param { 是否返回对比比例 } isCallBackCompare
     */
    calcImg(current, last, isCallBackCompare) {
      let imgUrl = '';
      let compare = '';
      if (isNotNull(current) && isNotNull(last)) {
        compare = Number(current) - Number(last);
        imgUrl = compare > 0 ? this.upImg : compare == 0 ? '' : this.downImg;
      }
      if (isCallBackCompare) {
        console.log("compare", compare);
        return compare;
      } else {
        return imgUrl;
      }
    },
    calcWeekImg(cur, last, callBackText) {
      let imgurl = '';
      let text = '';
      if (isNotNull(cur) && isNotNull(last)) {
        let curNumber = Number(cur);
        let latNumber = Number(last);
        if (curNumber - latNumber == 0) {
          text = '持平';
        } else {
          imgurl = curNumber < latNumber ? this.downImg : this.upImg;
          text = Math.abs(curNumber - latNumber) + '天';
        }
        if (callBackText) {
          return text;
        } else {
          return imgurl;
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
@import './include.scss';

.report {
  height: 100vh;
  overflow: hidden;
  background-color: #f5f5f5;
  font-family: Source Han Sans CN;

  .periodSwitch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*  padding: 20px 40px; */
    padding-bottom: 10px;
    left: 0;

    .timearea {
      font-size: 28px;
      justify-self: center;
      color: gray;
    }

    .arrow {
      font-size: 45px;
    }
  }

  .psy-tab-bar {
    height: 60px;
    position: relative;
    margin: 20px 0 0 0;
    /*  padding: 0 20px; */

    .psy-tab-con {
      background-color: #eeeeee;
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
      border-bottom-left-radius: 40px;
      border-bottom-right-radius: 40px;

      .psy-tab-list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        height: 50px;
        width: 100%;

        .psy-tab-item {
          position: relative;
          padding: 0 20px;
          color: #6d6d6d;
          height: 100%;
          width: 100%;
          font-size: 28px;
          border-radius: 40px;
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: center;

          &.active {
            color: #fff;
            background-color: $green;
          }
        }
      }
    }
  }

  .main {
    height: calc(100vh - 150px);
    overflow: scroll;
    background-color: #fff;
    padding-bottom: 150px;
    /* padding: 0 20px; */

    .pie-chart-con {
      flex: 1;
      padding: 10px 0 20px 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .pie-chart-left {
        position: relative;
        height: 300px;
        /* padding-left: 30px; */
        width: 30%;
        @include center();

        #pieChart {
          height: 212px;
          width: 212px;
        }
      }

      .pie-chart-right {
        height: 300px;
        width: 70%;
        padding-right: 40px;
        @include center();

        .list {
          flex-direction: column;

          .item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24px;
            padding: 18px 0;

            .item-left {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding-right: 20px;

              .circle {
                height: 24px;
                width: 24px;
                margin: 0 8px;
              }

              span {
                font-size: 24px;
              }

              .text {
                color: #000;
                font-size: 24px;
              }
            }

            .item-right {
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .status {
              padding: 0 10px;
              @include center();

              img {
                height: 30px;
                width: 30px;
                padding: 0 6px;
                object-fit: contain;
              }
            }
          }
        }
      }
    }

    .statistics {

      /* padding: 40px 40px; */
      .list {
        padding: 40px 40px;
        display: grid;
        grid-template-columns: repeat(3, 1fr); //定义了一个 3x3 的网格布
        /* grid-template-rows: repeat(3, 1fr); */
        gap: 40px;
        font-size: 32px;

        .item {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          padding: 30px;
          /* height: px2rem(136); */
          flex-direction: column;
          border: 1px solid $border_color;
          border-radius: 40px;
          color: #fff;

          .top {
            font-size: 24px;
          }

          .middle {
            font-size: 48px;
          }

          .bottom {
            font-size: 18px;
          }
        }
      }
    }

    .bottom {


      .echart-container {
        flex: 1;
        position: relative;
        min-height: 600px;
        background-color: #fff;
        padding: 0 10px;

        .title-out {
          font-size: 36px;
          font-weight: bold;
          padding: 60px 20px 20px 20px;
        }

        .ChatBox {
          overflow: hidden;
          height: 650px;

          border: 2px solid #cdf348;
          border-radius: 30px;
          margin-top: 30px;

          h4 {
            padding: 40px 0 10px 60px;
          }

          .legendBox {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 30px;

            .legend {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-end;
              align-items: center;
              font-size: 20px;

              .legendItem {
                position: relative;
                width: 205px;
                margin-top: 10px;
                margin-right: 20px;

                &:nth-child(2n) {
                  margin-right: 0;
                }
              }

              .not {
                .number {
                  color: #179b3b;
                }

                &::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: -20px;
                  width: 15px;
                  height: 15px;
                  background: #179b3b;
                  border-radius: 50%;
                  margin: auto;
                }
              }

              .mild {
                .number {
                  color: #2ea7e0;
                }

                &::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: -20px;
                  width: 15px;
                  height: 15px;
                  background: #2ea7e0;
                  border-radius: 50%;
                  margin: auto;
                }
              }

              .moderate {
                .number {
                  color: #8dc21f;
                }

                &::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: -20px;
                  width: 15px;
                  height: 15px;
                  background: #8dc21f;
                  border-radius: 50%;
                  margin: auto;
                }
              }

              .severe {
                .number {
                  color: #ff5f8b;
                }

                &::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: -20px;
                  width: 15px;
                  height: 15px;
                  background: #ff5f8b;
                  border-radius: 50%;
                  margin: auto;
                }
              }
            }
          }

          .minLegendBox {
            width: 100%;

            .legend {
              .legendItem {
                width: auto;
                margin-right: 50px;

                &:nth-child(2n) {
                  margin-right: 50px;
                }

                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }

          .Chat {
            width: calc(100vw - 80px);
            height: 500px;
          }

          .result {
            height: 140px;
            padding: 0 30px;
            border-radius: 70px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;

            .wrapBox {
              padding: 10px 120px 10px 60px;
              width: 100%;
              background-color: #e6e6e6;
              border-radius: 30px;
            }

            .text {
              display: flex;
              justify-content: flex-start;
              align-items: center;

              .right {

                @include center();
                padding-left: px2rem(20);

                img {
                  height: 30px;
                  width: 30px;
                  object-fit: contain;
                  margin: 0 5px;
                }
              }
            }
          }
        }

        .minChartBox {
          height: 760px;
        }

        .hiddenChart {
          width: 0;
          height: 0;
        }


      }

      .advice {
        padding: 52px 20px 60px 20px;

        .content {
          background: #f2f6ff;
          border-radius: 20px;
          padding: 0px 10px;
          text-align: left;

          p {
            font-size: 24px;
            color: #707070;
            line-height: 46px;
            padding: 10px 0;
          }

          .title {
            font-size: 36px;
            font-weight: bold;
            color: #2ea7e0;
            line-height: 36px;
          }
        }
      }

      .overview {
        padding: 0 30px 32px 30px;

        .content {
          .title {
            text-align: left;

            .title-text {
              font-size: 36px;
              font-weight: bold;
              color: #282828;
              line-height: 36px;
            }

            .mood-list {
              display: grid;
              grid-template-columns: repeat(2, 1fr); //定义了一个 2x2 的网格布
              grid-template-rows: repeat(2, 1fr);
              gap: 42px;
              padding: 42px 42px 44px 40px;

              .item {
                /* width: 214px; */
                height: 250px;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-direction: column;
                padding-left: 60px;
                color: #fff;
                border: 1px solid #cdf348;
                border-radius: 40px;

                p {
                  font-size: 28px;
                  padding: 0;
                  @include center();

                  .day {
                    /* padding: 5px; */
                    font-size: 56px;
                  }

                  .day-text {
                    font-size: 24px;
                    padding: 0 10px;
                  }

                  img {
                    height: 30px;
                    width: 30px;
                    object-fit: contain;
                  }
                }
              }
            }
          }
        }
      }






    }
  }


}

/* @import url(); 引入css类 */
</style>