<template>
  <div class="energy-savig content-box pheight" id="page">
    <!--我动的节能-->
    <div class="energy-top clearfix" id="energy">
      <div class="top-item fl" @click="goDeail">
        <p>我的节能</p>
        <p>{{ energyData.totalPoints || energyData.totalPoints == 0 ? energyData.totalPoints : '--' }}</p>
      </div>
      <div class="top-item pt fr" @click="goRank">
        <span>排名</span>
        <div class="top-num">
          <span>{{ energyData.level || energyData.level == 0 ? energyData.level : '--' }}</span>
          <van-icon class="arrow" name="arrow"/>
        </div>
      </div>
      <div class="top-item pt pr fr" @click="goDeail('today')">
        <span>今天新增</span>
        <div class="top-num">
          <span>+ {{ energyData.intergral || energyData.intergral == 0 ? energyData.intergral : '--' }}</span>
          <van-icon class="arrow" name="arrow"/>
        </div>
      </div>
    </div>
    <!--温度次数统计-->
    <template v-if="portait.airConditioner">
      <div class="card" id="air">
        <div class="card-top">
          <div class="record-title">温度调节统计</div>
          <div class="record-btn" @click="goRecord('temp')">
            <span>调节记录</span>
            <van-icon class="arrow" name="arrow"/>
          </div>
        </div>
        <div class="card-box">
          <div class="temprature-item">
            <span>累计调节</span>
            <span>{{ (tempTotal.adjustTotalNum || tempTotal.adjustTotalNum == 0) ? tempTotal.adjustTotalNum : '--' }}
            <sup>次</sup>
          </span>
          </div>
          <div class="temprature-item">
            <span>累计调高</span>
            <span>{{ (tempTotal.adjustUpNum || tempTotal.adjustUpNum == 0) ? tempTotal.adjustUpNum : '--' }}
            <sup>次</sup>
          </span>
          </div>
          <div class="temprature-item">
            <span>累计调低</span>
            <span>{{ (tempTotal.adjustDownNum || tempTotal.adjustDownNum == 0) ? tempTotal.adjustDownNum : '--' }}
            <sup>次</sup>
          </span>
          </div>
          <div class="temprature-item" @click="triggerDailog">
          <span>空调节能
          <van-icon class="question" name="question-o"/>
          </span>
            <span>{{ (tempTotal.economizeEnergy || tempTotal.economizeEnergy == 0) ? tempTotal.economizeEnergy : '--' }}
            <sup>kW·h</sup>
          </span>
          </div>
        </div>
      </div>
      <!--温度统计图-->
      <div class="chart-content">
        <!--        <div class="chart-legned">-->
        <!--          <span></span>-->
        <!--          <span style="font-size: 12px">舒适温度</span>-->
        <!--        </div>-->
        <div class="chart-btn">
          <span :class="seasonType == 'Cooling'?'active':''" @click="triggerSeason('Cooling')">供冷季</span>
          <span :class="seasonType == 'Warm'?'active':''" @click="triggerSeason('Warm')">供暖季</span>
        </div>
        <com-chart
          :options="options1"
          v-if="options1"
          id="chart1"
          height="100%"
          width="100%"
        />
        <div
          v-else
          class="no-data"
          height="100%"
          width="100%"
        >
          <img
            :src="parseImgUrl('page-officehome','empty.png')" alt=""
          >
          <span>暂无数据</span>
        </div>
      </div>
      <!--调节 记录-->
      <div class="tip-box zero" v-if="comfortType=='zero'||comfortType=='little'">
        <div class="tip-title">您的调节记录</div>
        <div class="tip-num">
          <span>{{ adjustNum }}</span>
        </div>
        <div class="tip-desc">
          <p>温度关键词无动于衷</p>
        </div>
        <img class="tip-img" :src="comfortTextObj.img" alt="">
      </div>
      <div class="tip-box" v-else :class="{'good':comfortType=='good','heat':comfortType=='heat'}">
        <div class="tip-title">您的舒适温度</div>
        <div class="tip-num">
          <span v-if="lowComfortTemp">{{ lowComfortTemp }}℃</span>
          <span v-if="lowComfortTemp && highComfortTemp">-</span>
          <span v-if="highComfortTemp">{{ highComfortTemp }}℃</span>
        </div>
        <div class="tip-desc">
          <p>{{ comfortTextObj.firstLine }}</p>
          <p>{{ comfortTextObj.secondLine }}</p>
        </div>
        <img class="tip-img" :src="comfortTextObj.img" alt="">
      </div>
    </template>
    <template v-if="portait.light">
      <!--照明统计次数-->
      <div class="card lamp-card mt30" id="lamp">
        <div class="card-top">
          <div class="record-title">开关照明统计</div>
          <div class="record-btn" @click="goRecord('light')">
            <span>调节记录</span>
            <van-icon class="arrow" name="arrow"/>
          </div>
        </div>
        <div class="card-box">
          <div class="temprature-item">
            <span>累计开启</span>
            <span>{{ (lightTotal.openNum || lightTotal.openNum == 0) ? lightTotal.openNum : '--' }}
            <sup>次</sup>
          </span>
          </div>
          <div class="temprature-item">
            <span>累计关闭</span>
            <span>{{ (lightTotal.closeNum || lightTotal.closeNum == 0) ? lightTotal.closeNum : '--' }}
            <sup>次</sup>
          </span>
          </div>
          <!--          <div class="temprature-item">-->
          <!--            <span>照明节能</span>-->
          <!--            <span>{{ lightTotal.totalNum ? lightTotal.totalNum : '&#45;&#45;' }}-->
          <!--            <sup>kW·h</sup>-->
          <!--            </span> -->
          <!--          </div>-->
        </div>
      </div>
      <div class="chart-content mt30">
        <com-chart
          :options="options2"
          v-if="options2"
          id="chart2"
          height="100%"
          width="100%"
        />
      </div>
    </template>
    <!--空调节能-->
    <van-dialog
      confirm-button-text="我知道了"
      confirm-button-color="#000"
      v-model:show="showDialog"
    >
      <div class="dailog-content">
        <div class="title">空调节能</div>
        <p>夏季设定值调高一度，冬季调低两度；</p>
        <p>相当于省电20%；</p>
        <p>如果夏季空调温度都设定在26℃以上；</p>
        <p>如果冬季空调温度都设定在20℃以下；</p>
        <p>节省的电力是相当可观的</p>
      </div>
    </van-dialog>
  </div>
</template>

<script lang="ts">
import ComChart from '@/components/charts/ComChart.vue'
import { defineComponent, reactive, toRefs, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { EChartsOption } from 'echarts'
import { Dialog } from 'vant'
import { formatDate, getPreMonth, parseImgUrl, setQueryConfig } from '@/utils'
import {
  queryPortraitTempUserTotal,
  queryTotalIntegral,
  queryPortraitTempUserDetail,
  getSeasonBySeasonDate, queryTotalPortraitLight, queryPortraitLightUser
} from '@/apis/portrait'
import { store } from '@/store'

export default defineComponent({
  components: {
    [Dialog.Component.name]: Dialog.Component,
    ComChart
  },
  setup() {
    let options1: any = null
    let options2: any = null
    let route = useRoute()
    let id: any = route.query.type
    let energyData: any = {}
    let tempTotal: any = {}
    let comfortTextObj: any = {}
    let highComfortTemp: any = ''
    let lowComfortTemp: any = 0
    let adjustNum: any = ''
    let comfortType: any = ''
    let lightTotal: any = ''
    let router = useRouter()
    const proxyData = reactive({
      user: store.state.user,
      portait: store.state.portait,
      parseImgUrl: parseImgUrl,
      options1: options1,
      highComfortTemp: highComfortTemp,
      lowComfortTemp: lowComfortTemp,
      options2: options2,
      adjustNum: adjustNum,
      comfortType: comfortType,
      comfortTextObj: comfortTextObj,
      id: id,
      showNum: 0,
      seasonType: '',
      tempTotal: tempTotal,
      lightTotal: lightTotal,
      energyData: energyData,
      showDialog: false,
      /**
       * 节能分数
       */
      queryTotalIntegral() {
        let today = formatDate('')
        let lastMonth = getPreMonth()
        let params: any = {
          date: today,
          month: lastMonth
        }
        let query: string = setQueryConfig(params)
        queryTotalIntegral(query).then(function(res) {
          const resData: any = res
          if (res.result === 'success') {
            proxyData.energyData = resData
          }
          // console.log(proxyData.energyData)
        })
      },
      /**
       * 空调使用统计
       */
      queryPortraitTempUserTotal() {
        queryPortraitTempUserTotal().then(res => {
          const resData: any = res
          if (resData.result === 'success') {
            const data: any = resData?.data ?? {}
            proxyData.tempTotal = data
          }
        })
      },
      /**
       *  照明使用统计
       */
      queryTotalPortraitLight() {
        queryTotalPortraitLight().then(res => {
          const resData: any = res
          if (resData.result === 'success') {
            const data: any = resData?.data ?? {}
            proxyData.lightTotal = data
          }
        })
      },
      /**
       * 设置图表高亮颜色
       * @param chartList
       */
      setChartData(chartList: any) {
        let colorArr: any = []
        let data1: any = [0]
        let data2: any = [0]
        let temperatureArr: any = [0]
        chartList.map((item: any) => {
          if (item.type === 'up') {
            data1.push(item.num)
            temperatureArr.push(item.temperature)
          } else {
            data2.push(item.num)
          }
        })
        temperatureArr.map((item: any) => {
          if (item !== 0 && (item === proxyData.highComfortTemp || item === proxyData.lowComfortTemp)) {
            colorArr.push('#00DC23')
          } else {
            colorArr.push('transparent')
          }
        })
        return {
          colorArr: colorArr,
          temperatureArr: temperatureArr,
          data1: data1,
          data2: data2
        }
      },
      /**
       * 切换季节类型
       * @param type
       */
      triggerSeason(type: any) {
        proxyData.seasonType = type
        //  空调统计图表
        proxyData.queryPortraitTempUserDetail()
      },
      /**
       * 获取季节类型
       */
      getSeasonBySeasonDate() {
        let param: any = {
          projectId: proxyData.user.projectId,
          dateTime: formatDate('')
        }

        let paramStr: string = setQueryConfig(param)
        getSeasonBySeasonDate(paramStr).then(res => {
          let resData: any = res
          let type = (resData.content[0] || {}).type
          if (type == 1 || type == 3) {
            proxyData.seasonType = 'Cooling'
          } else {
            proxyData.seasonType = 'Warm'
          }
          //  空调统计
          proxyData.queryPortraitTempUserDetail()
        })
      },
      /**
       * 空调调节统计接口
       */
      queryPortraitTempUserDetail() {
        const param: any = {
          criteria: {
            'seasonType': proxyData.seasonType,
            'userId': proxyData.user.userId,
            'projectId': proxyData.user.projectId
          }
        }
        queryPortraitTempUserDetail(param).then(res => {
          const resData: any = res.data || {}
          const adjustDetails = resData.adjustDetails || []
          let adjustNum = 0
          let chartList: any = []
          // 标记处的值
          proxyData.highComfortTemp = resData.highComfortTemp ? resData.highComfortTemp : 0
          proxyData.lowComfortTemp = resData.lowComfortTemp ? resData.lowComfortTemp : 0
          proxyData.lowComfortTemp = (proxyData.lowComfortTemp == proxyData.highComfortTemp) ? 0 : proxyData.lowComfortTemp

          let comfortTemp: any = null

          if (proxyData.highComfortTemp && proxyData.lowComfortTemp) {
            comfortTemp = (proxyData.highComfortTemp + proxyData.lowComfortTemp) / 2
          } else if (proxyData.highComfortTemp && !proxyData.lowComfortTemp) {
            comfortTemp = proxyData.highComfortTemp
          } else if (!proxyData.highComfortTemp && proxyData.lowComfortTemp) {
            comfortTemp = lowComfortTemp
          }
          adjustDetails.forEach(function(item: any) {
            const baseData: any = [
              {
                temperature: item.temperature || 0,
                num: item.adjustUpNum,
                type: 'up'
              },
              {
                temperature: item.temperature || 0,
                num: -item.adjustDownNum,
                type: 'down'
              }]
            adjustNum = adjustNum + item.adjustUpNum + item.adjustDownNum
            chartList.push(...baseData)
          })
          // 设置图表的颜色
          let colorArr: any = proxyData.setChartData(chartList)
          proxyData.formateOptions1(colorArr)

          let comfortType = ''
          let comfortTextObj = {}
          if (adjustNum == 0) {
            proxyData.showNum = 0
            comfortType = 'zero'
            comfortTextObj = {
              firstLine: '温度关键词 无动于衷',
              img: parseImgUrl('page-portrait', 'zero.png')
            }
          } else if (adjustNum > 0 && !comfortTemp) {//不存在舒适温度
            proxyData.showNum = adjustNum
            comfortType = 'little'
            comfortTextObj = {
              firstLine: '温度关键词 随遇而安',
              img: parseImgUrl('page-portrait', 'littleBest.png')
            }

          } else {//获取舒适程度
            if (this.seasonType == 'Warm') {//冬天
              if (comfortTemp <= 18) {//说明耐冻
                comfortType = 'hardy'
                comfortTextObj = {
                  firstLine: '耐寒能力堪比 北极熊',
                  secondLine: '「落雪的日子，吃支雪糕去去火」',
                  img: parseImgUrl('page-portrait', 'bear.svg')
                }

              } else if (comfortTemp > 18 && comfortTemp < 24) {
                comfortType = 'good'
                comfortTextObj = {
                  firstLine: '温度适宜，享受当下',
                  secondLine: '「唯独工作可以带来快乐」',
                  img: parseImgUrl('page-portrait', 'duck.svg')
                }
              } else if (comfortTemp >= 24) {//说明耐热
                comfortType = 'heat'
                comfortTextObj = {
                  firstLine: '耐高温能力堪比双驼峰',
                  secondLine: '「阳光海滩，喝杯奶茶添点甜」',
                  img: parseImgUrl('page-portrait', 'camel.svg')
                }
              }
            } else {//夏天
              if (comfortTemp <= 23) {//说明耐冻
                comfortType = 'hardy'
                comfortTextObj = {
                  firstLine: '耐寒能力堪比 北极熊',
                  secondLine: '「落雪的日子，吃支雪糕去去火」',
                  img: parseImgUrl('page-portrait', 'bear.svg')
                  // img: this.h5StaticPath + '/page-portrait/bear.svg'
                }
              } else if (comfortTemp > 23 && comfortTemp < 27) {
                comfortType = 'good'
                comfortTextObj = {
                  firstLine: '温度适宜，享受当下',
                  secondLine: '「唯独工作可以带来快乐」',
                  img: parseImgUrl('page-portrait', 'duck.svg')
                }
              } else if (comfortTemp >= 27) {//说明耐热
                comfortType = 'heat'
                comfortTextObj = {
                  firstLine: '耐高温能力堪比双驼峰',
                  secondLine: '「阳光海滩，喝杯奶茶添点甜」',
                  img: parseImgUrl('page-portrait', 'camel.svg')
                }
              }
            }
          }
          proxyData.adjustNum = adjustNum
          proxyData.comfortType = comfortType
          proxyData.comfortTextObj = comfortTextObj
        })
      },
      /**
       * 照明统计echarts数据
       */
      queryPortraitLightUser() {
        const params = {
          criteria: {
            userId: proxyData.user.userId
          }
        }
        queryPortraitLightUser(params).then(res => {
          const resData: any = res
          const resList: any = resData.content || []
          let xData: any = []
          let data1: any = []
          let data2: any = []
          let data3: any = []
          resList.sort(function(a: any, b: any) {
            return a.hour - b.hour
          })
          resList.forEach(function(item: any, index: any) {
            item.hour = item.hour < 10 ? ('0' + item.hour + ':00') : (item.hour + ':00')
            xData.push(item.hour)
            data1.push(item.openNum)
            data2.push(item.closeNum)
            data3.push(item.closeOthersNum)
          })
          proxyData.formateOptions2(xData, data1, data2, data3)

        })
      },
      formateOptions1(chartArr: any) {
        let options1 = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 10,
            align: 'left',
            left: 0,
            itemWidth: 15,
            itemHeight: 6,
            data: [
              {
                icon: 'roundRect',
                name: '调高'
              },
              {
                icon: 'roundRect',
                name: '调低'
              },
              {
                icon: 'roundRect',
                name: '舒适度'
              }
            ],
            textStyle: {
              fontSize: 12,
              color: '#C4C4C4'
            }
          },
          grid: {
            top: 50,
            left: 5,
            right: 10,
            bottom: 10,
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: 'rgba(196, 196, 196, 0.6)'
              }
            },
            axisLabel: {
              fontSize: 12,
              color: '#4D5262'
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: chartArr.colorArr
              }
            },
            data: chartArr.temperatureArr
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(196, 196, 196, 0.6)'
              }
            },
            axisLabel: {
              fontSize: 12,
              color: '#4D5262'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(196, 196, 196, 0.6)'
              }
            }
          }],
          series: [
            {
              name: '调高',
              smooth: true,
              symbol: 'circle',
              type: 'bar',
              stack: 'x',
              barWidth: 8,
              symbolSize: 5,
              showSymbol: false,
              itemStyle: {
                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [15, 15, 0, 0],
                  color: 'rgba(229, 87, 79, 1)'
                }
              },
              data: chartArr.data1
            },
            {
              name: '调低',
              smooth: true,
              symbol: 'circle',
              type: 'bar',
              stack: 'x',
              barWidth: 8,
              symbolSize: 5,
              showSymbol: false,
              itemStyle: {
                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [0, 0, 15, 15],
                  color: 'rgba(94, 139, 207, 1)'
                }
              },
              data: chartArr.data2
            },
            {
              name: '舒适度',
              smooth: true,
              symbol: 'circle',
              type: 'line',
              barWidth: 8,
              itemStyle: {
                normal: {
                  color: '#00DC23'
                }
              },
              symbolSize: 5,
              showSymbol: false,
              data: []
            }
          ]

        } as EChartsOption
        if (chartArr.temperatureArr && chartArr.temperatureArr.length) {
          proxyData.options1 = options1
        } else {
          proxyData.options1 = null
        }

      },
      /**
       *
       *  照明统计图
       * @param xData
       * @param data1 开灯
       * @param data2 关灯
       * @param data3  关闭其它的
       */
      formateOptions2(xData: any, data1: any, data2: any, data3: any) {
        let options2 = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 0,
            align: 'left',
            left: 0,
            itemWidth: 15,
            itemHeight: 6,
            data: [
              {
                icon: 'roundRect',
                name: '开灯'
              },
              {
                icon: 'roundRect',
                name: '关灯'
              },
              {
                icon: 'roundRect',
                name: '关闭其他'
              }
            ],
            textStyle: {
              fontSize: 12,
              color: '#C4C4C4'
            }
          },
          grid: {
            top: 60,
            left: 10,
            right: 5,
            bottom: 10,
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                color: 'rgba(196, 196, 196, 0.6)'
              }
            },
            axisLabel: {
              fontSize: 12,
              color: '#4D5262'
            },
            data: xData
          }],
          yAxis: [{
            type: 'value',
            name: '单位（次）',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(196, 196, 196, 0.6)'
              }
            },
            axisLabel: {
              fontSize: 12,
              color: '#4D5262'
              // formatter:'{value}(次)'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(196, 196, 196, 0.6)'
              }
            }
          }],
          series: [
            {
              name: '开灯',
              smooth: true,
              symbol: 'circle',
              type: 'bar',
              barWidth: 8,
              symbolSize: 5,
              showSymbol: false,
              itemStyle: {
                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                normal: {
                  color: 'rgba(229, 87, 79, 1)'
                }
              },
              data: data1
            },
            {
              name: '关灯',
              smooth: true,
              symbol: 'circle',
              type: 'bar',
              barWidth: 6,
              symbolSize: 5,
              showSymbol: false,
              itemStyle: {
                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                normal: {
                  color: 'rgba(94, 139, 207, 1)'
                }
              },
              data: data2
            },
            {
              name: '关闭其他',
              smooth: true,
              symbol: 'circle',
              type: 'bar',
              barWidth: 6,
              symbolSize: 5,
              showSymbol: false,
              itemStyle: {
                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                normal: {
                  color: '#E89E32'
                }
              },
              data: data3
            }
          ]

        } as EChartsOption
        if (xData && xData.length) {
          proxyData.options2 = options2
        } else {
          proxyData.options2 = null
        }
      },
      /**
       * 节能详情&今日新增节能
       */
      goDeail(type: any = 'history') {
        if (type === 'today') {
          router.push({
            path: '/today-energy-detail',
            query: {
              totalPoints: proxyData.energyData.totalPoints,
              type: type
            }
          })
        } else {
          router.push({
            path: '/energy-detail',
            query: {
              totalPoints: proxyData.energyData.totalPoints,
              type: type
            }
          })
        }
      },
      /**
       * 排行榜
       */
      goRank() {
        router.push({ path: '/energy-rank' })
      },
      /**
       *
       * 调节记录
       */
      goRecord(type: any = '') {
        router.push({
          path: '/record',
          query: { type: type }
        })
      },
      /**
       *
       *空调节能详情
       */
      triggerDailog() {
        proxyData.showDialog = true
      }
    })
    nextTick(() => {
      if (proxyData.id && proxyData.id !== 'energy') {
        const document: any = window.document
        // console.log(document.getElementById(proxyData.id))
        let top = document.getElementById(proxyData.id).offsetTop - 20
        let pageEle = document.getElementById('page')
        pageEle.scrollTop = top
      }
    })
    onMounted(() => {
      // 节能评分
      proxyData.queryTotalIntegral()
      // 获取季节类型及温度统计图表
      proxyData.getSeasonBySeasonDate()
      // 空调使用统计
      proxyData.queryPortraitTempUserTotal()
      // 照明统计卡片
      proxyData.queryTotalPortraitLight()
      // 照明统计图表
      proxyData.queryPortraitLightUser()

    })
    return {
      ...toRefs(proxyData)
    }
  }
})
</script>
<style lang="scss" scoped>
@import "common/index.scss";

.energy-savig {
  padding-top: 5px;
  padding-bottom: 150px;
}


.energy-top {
  margin-bottom: 20px;
}

/**
  温度调节统计/照明统计 start
 */
.card {
  padding: 18px 15px 34px 15px;
  background: #fff;

  &:nth-child(1) {
    margin-top: 20px;
  }
}

.card-top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 27px;

  .record-title {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 24px;
    color: #000000;
  }

  .record-btn {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 24px;
    display: flex;
    color: #4D5262;
    cursor: pointer;
  }

  .arrow {
    margin-left: 5px;
    color: #4D5262;
    line-height: 24px;
    font-size: 10px;
  }
}

.lamp-card {
  text-align: center;
}

.card-box {
  display: flex;

  .temprature-item {
    flex: 1;
    font-family: PingFang SC;
    font-size: 9px;
    line-height: 15px;
    color: #C4C4C4;

    sup {
      font-size: 8px;
      line-height: 11px;
    }

    span {
      display: block;

      &:nth-child(1) {
        margin-bottom: 10px;
      }

      &:nth-child(2) {
        font-family: Montserrat;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 21px;
        color: #000000;
      }
    }
  }
}

/**
  温度调节统计 end
 */
/*
  统计图表
 */
.chart-content {
  margin-top: 10px;
  position: relative;
  width: 100%;
  height: 260px;

  .chart-legned {
    position: absolute;
    left: 115px;
    top: 16px;

    span {
      display: inline-block;
      vertical-align: middle;
      color: #C4C4C4;

      &:nth-child(1) {
        width: 15px;
        height: 6px;
        background: #00DC23;
        border-radius: 2px;
        margin-right: 6px;
      }
    }

  }

  .chart-btn {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    width: 131px;
    height: 36px;
    background: rgba(196, 196, 196, 0.2);
    border-radius: 18px;
    z-index: 333;

    span {
      flex: 1;
      height: 36px;
      font-size: 13px;
      text-align: center;
      color: #9FB7CD;
      line-height: 36px;
    }

    .active {
      background: #FFFFFF;
      border: 1px solid #C4C4C4;
      color: #000;
      box-sizing: border-box;
      box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.07);
      border-radius: 18px;
    }
  }
}

/**
  舒适温度
 */
.tip-box {
  position: relative;
  margin-top: 16px;
  padding-top: 17px;
  padding-left: 24px;
  width: 100%;
  height: 136px;
  background: #22459D;
  border-radius: 8px;

  &.good {
    background: #5bcaea;
  }

  &.heat {
    background: #c0c0a4;
  }

  .tip-title {
    padding-bottom: 5px;
    font-family: PingFang SC;
    font-size: 11px;
    line-height: 15px;
    color: #FFFFFF;
  }

  .tip-num {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    color: #FFFFFF;

    span {
      font-size: 24px;
      line-height: 29px;
      display: inline-block;
      vertical-align: middle;

      &:nth-child(2) {
        padding-left: 5px;
        padding-right: 5px;
      }
    }
  }

  .tip-desc {
    padding-top: 17px;

    p {
      font-family: PingFang SC;
      font-size: 12px;
      line-height: 17px;
      color: #FFFFFF;

      &:nth-child(2) {
        padding-top: 5px;
      }
    }
  }

  .tip-img {
    position: absolute;
    right: 0;
    top: 0;
    width: 147px;
  }
}

.zero {
  background: #9fb7cd;

  .tip-img {
    position: absolute;
    top: 5px !important;
    right: 17px !important;
    width: 96px !important;
    height: 115px !important;
  }
}

.mt30 {
  margin-top: 30px;
}

.mt20 {
  margin-top: 20px;
}

.dailog-content {
  padding: 30px 24px 16px 24px;

  .title {
    text-align: center;
    font-family: 'PingFang SC';
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
  }

  p {
    font-family: 'PingFang SC';
    font-size: 14px;
    line-height: 14px;
    color: rgba(0, 0, 0, 0.5);
    margin: 16px 0px;
  }
}

</style>
<style lang="scss">
.energy-savig {
  .dailog-content {
    .van-button__text {
      font-size: 15px;
      line-height: 24px;
      text-align: center;
      color: #000;
      letter-spacing: 1px;
      padding: 15px 0;
    }
  }
}
</style>
