<!--  -->

<template>
  <div class="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: psyCurrent === 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">
        <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 + ')' }}%</label>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="statistics">
        <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="echart">
            <EchartBox echartId="charts" :outTitle="emoLegend.outTitle" rightRowType="in-line-block" height="200"
              width="200" :legend="emoLegend" :options="defaultOptions"></EchartBox>
          </div>
        </div>
        <div class="result">
          <div class="result-con">
            <div class="title">
              <span class="title-text">{{ surveyTitle }}</span>
              <div class="mood-list" v-if="emotionList.length > 0">
                <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>
                  </p>

                  <p>{{ item.text }}</p>
                </div>
              </div>
              <div class="mood-list-no-data" v-else>
                <div class="no-data">
                  <img :src="noDataImg" alt />
                  <p>暂无数据</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import { Signsmodel } from '@/config/models';
import EchartBox from '@/components/EchartBox';
import { getMonthsByYear, getWeeksByYear } from '@/services/utils-service';
export default {
  components: {
    NavBar, EchartBox
  },
  data() {
    return {
      count: 0,
      isPreClick: true,
      isAddClick: true,
      clickFlag: true, //左右日期按钮是否给予点击
      weekList: [],
      maxCount: '',
      currentRecord: {},
      psyCurrent: 0,
      psyList: [
        { name: 'heartrate', text: '心率', value: 0 },
        { name: 'temperature', text: '体温', value: 1 },
        { name: 'step', text: '步数', value: 2 }
      ],
      healthyType: '',
      emoName: '',
      currentEmoName: '',
      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"
        }
      ],
      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: "5", text: "无情绪倾向", color: "#179b3b" },
        { days: "4", text: "轻度情绪倾向", color: "#8dc21f" },
        { days: "3", text: "中度情绪倾向", color: "#2ea7e0" },
        { days: "2", text: "重度情绪倾向", color: "#ff5f8b" }
      ],
    }
  },
  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' }
          ]
        };
      }
    },
    // 默认折线图配置，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 ? '周报详情' : '月报详情'
    }

  },
  created() {
    this.loadParams();
    this.initEchartText();
  },
  mounted() {
    this.$nextTick(() => {
      if (this.params.dateType == 1) {
        this.getMonths();
      } else {
        this.getWeeks()
      }

    })
  },
  methods: {
    loadParams() {
      let params = this.$route.query;
      if (params) {
        this.params = params;
        this.emoName = Signsmodel[params.name].name;
        this.psyCurrent = 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];
        // 注意，周/月切换，日期不同
        let date = this.weekList.filter(item => {
          return item.count === this.count;
        })[0].name;
        if (this.count <= 0) {
          this.isAddClick = false;
        }
        console.log("当前切换的日期", date);
      } else {
        // 上一个
        if (this.count >= this.maxCount) {
          return;
        }
        this.count++;
        this.isAddClick = true;
        // 当前切换的日期
        // 注意，周/月切换，日期不同
        let date = this.weekList.filter(item => {
          return item.count === this.count;
        })[0].name;
        this.currentRecord = this.weekList.filter(item => {
          return item.count === this.count;
        })[0]
        console.log("当前切换的日期", date);
        if (this.count >= this.maxCount) {
          this.isPreClick = false;
        }
      }
    },
    onPsyTabClick(item) {
      this.healthyType = item.value;
      this.psyCurrent = 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
          };
        })
      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;
    },
    getWeeks() {
      const weeks = getWeeksByYear(1);
      console.log("week", weeks);
      this.weekList = weeks.reverse()
        .map((item, index) => {
          return {

            name: item.start + '-' + item.end,
            count: index
          };
        })
      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;
    }
  },
}
</script>

<style scoped lang="scss">
.report {
  height: 100vh;
  width: 100%;
  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;
    padding-top: 100px;
    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: 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: 35%;
        @include center();

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

      .pie-chart-right {
        height: 300px;
        width: 65%;
        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;
            }
          }
        }
      }
    }

    .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 {
      flex: 1;
      overflow: scroll;

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

        .echart {
          height: 200px;
          padding: 0 10px;
        }
      }

      .result {
        padding-bottom: 40px;

        .result-con {
          height: 100%;
          background-color: #fff;
          border-radius: 40px;
          overflow: hidden;

          &.reminder {
            padding: 0 32px 40px 32px;
          }

          .title {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
            margin-bottom: 60px;

            span {
              font-size: 36px;
              font-weight: bold;
            }

            .font-28 {
              font-weight: 400;
              font-size: 24px;
              color: #8b8b8b;
              text-align: left;
            }

            .title-no-data {
              padding: 68px 0 26px 30px;
            }

            p {
              font-size: 24px;
              color: $green;
            }

            .title-emo {
              font-size: 48px;
              padding: 28px 0 42px 0;
              text-align: left;
            }

            .no-data {
              height: 500px;
              width: 100%;
              @include center();
              flex-direction: column;

              img {
                height: 220px;
                width: 350px;
              }

              p {
                color: #999;
                font-size: 24px;
                padding: 40px 0 130px 0;
              }
            }
          }

          .title-text {
            padding: 68px 0 26px 30px;
          }

          .title-reminder {
            padding: 68px 0 0 0;
          }

          .friendly-reminder,
          .warm-reminder {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
            margin-bottom: 20px;
            background-color: #f2f2f2;
            padding: 40px 38px 38px 28px;

            p {
              font-weight: bold;
              text-align: left;
              padding-bottom: 22px;
              font-size: 30px;
            }

            span {
              text-align: left;
              font-size: 24px;
            }
          }

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

            .item {
              width: 274px;
              height: 220px;
              @include center();
              flex-direction: column;
              border-radius: 40px;

              p {
                font-size: 24px;
                padding: 0;
                color: #fff;

                .day {
                  padding: 10px;
                  font-size: 56px;
                }

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

          .mood-list-no-data {
            height: 500px;
            width: 100%;

            .no-data {
              @include center();
              flex-direction: column;

              img {
                height: 220px;
                width: 350px;
              }

              p {
                color: #999;
                font-size: 24px;
                padding: 40px 0 130px 0;
              }
            }
          }
        }
      }
    }
  }


}

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