<template>
  <div class="enter-main">
    <div class="top-box">
      <div class="left">
        <!-- <img class="logo" :src="parseImgUrl('pac', 'logo.svg')" /> -->
        <img
          class="weather-icon"
          v-show="outWeather.imgname"
          :src="parseImgUrl('pac', 'weather/' + outWeather.imgname)"
        />
        <div class="wether-info">
          <div class="temp">{{ outWeather.temperature }} ℃</div>
          <div class="text">{{ outWeather.text }}</div>
        </div>
        <div class="line"></div>
        <div class="wether-pm">
          <div class="value-box">
            <span>PM 2.5</span>
            <span>{{ outWeather.pm25 ? outWeather.pm25 : '--' }}</span>
          </div>
          <div class="value-des">
            <span>室外空气质量</span>
            <span>{{ outWeather.quality ? outWeather.quality : '--' }}</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="env-box">
          <div class="title-box">
            <img class="icon" style="margin-bottom: 2px;" :src="parseImgUrl('pac', 'calendar.svg')" />
            <div class="title calendar-title">
              <span>{{ dateObj.month }}</span>
              <span>/</span>
              <span>{{ dateObj.day }}</span>
            </div>
          </div>
          <div class="index-box calendar-time">
            <span>{{ dateObj.hours }}</span>
            <span>:</span>
            <span>{{ dateObj.minute }}</span>
          </div>
        </div>
        <div
          class="env-box"
          :key="index + 'env'"
          v-for="(item, index) in envlist"
        >
          <div class="title-box">
            <img class="icon" :src="item.img" />
            <div class="title">{{ item.name }}</div>
          </div>
          <div class="index-box">
            <div class="num">{{ item.num }}</div>
            <div class="text" :class="index > 1 ? 'temp-text' : ''">
              {{ item.levelTxt }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  onBeforeUnmount,
} from 'vue'
import { parseImgUrl, setQueryConfig, formatDate, getRelNowTime } from '@/utils'
import { getWeatherNew, getPacSpaceInfo } from '@/apis/envmonitor'
import { setInterval, clearInterval } from 'timers'
export default defineComponent({
  components: {},
  setup(props) {
    const envlist = [
      {
        id: 1,
        name: 'PM 2.5',
        unit: 'ug/m³',
        funcid: 'PM2d5',
        levelTxt: '',
        value: 10,
        img: parseImgUrl('pac', 'pm2.5.svg'),
        showNowData: 0, // 0:loading 1:暂无数据 2：暂无服务定制时间
      },
      {
        id: 2,
        value: 10,
        name: '甲醛',
        unit: 'mg/㎡',
        levelTxt: '',
        img: parseImgUrl('pac', 'HCHO.svg'),
      },
      {
        id: 3,
        value: 10,
        name: '温度',
        unit: '%',
        levelTxt: '',
        funcid: 'Tdb,RH',
        img: parseImgUrl('pac', 'Tdb.svg'),
      },
      {
        id: 3,
        value: 10,
        name: '湿度',
        levelTxt: '',
        unit: '%',
        funcid: 'Tdb,RH',
        img: parseImgUrl('pac', 'RH.svg'),
      },
    ]
    const proxyData = reactive({
      envlist: envlist,
      parseImgUrl: parseImgUrl,
      time1: '',
      time2: '',
      params: {
        spaceId: 'Sp31010600032517f22f3d6a4c71b18cab24c444d362',
        pubname: 'sagacarepad',
        projectId: 'Pj3101060003',
      },
      outWeather: {},
      getWeatherIconByText(text) {
        let imgname = '晴.svg'
        if (text.indexOf('晴') > -1) {
          imgname = '晴.svg'
        } else if (text.indexOf('雨') > -1) {
          imgname = '大雨.svg'
        } else if (text.indexOf('阴') > -1 || text.indexOf('云') > -1) {
          imgname = '阴.svg'
        } else if (text.indexOf('霾') > -1) {
          imgname = '雾.svg'
        } else if (text.indexOf('雾') > -1) {
          imgname = '雾.svg'
        } else if (text.indexOf('风') > -1) {
          imgname = '风.svg'
        } else if (text.indexOf('雷') > -1) {
          imgname = '雷阵雨.svg'
        }
        return imgname
      },
      getWeatherIconByCode(code) {
        let imgname = ''
        if (code <= 3) {
          imgname = '晴.svg'
        } else if (code <= 8) {
          imgname = '多云.svg'
        } else if (code <= 9) {
          imgname = '阴.svg'
        } else if (code <= 10) {
          imgname = '阵雨.svg'
        } else if (code <= 12) {
          imgname = '雷阵雨.svg'
        } else if (code <= 13) {
          imgname = '小雨.svg'
        } else if (code <= 15) {
          imgname = '大雨.svg'
        } else if (code <= 18) {
          imgname = '暴雨.svg'
        } else if (code <= 19) {
          // 冻雨
          imgname = '小雨.svg'
        } else if (code <= 20) {
          imgname = '雨夹雪.svg'
        } else if (code <= 23) {
          imgname = '小雪.svg'
        } else if (code <= 25) {
          imgname = '大雪.svg'
        } else if (code <= 29) {
          imgname = '阴.svg'
        } else if (code <= 31) {
          imgname = '雾.svg'
        } else if (code <= 35) {
          imgname = '风.svg'
        } else if (code <= 36) {
          imgname = '龙卷风.svg'
        } else if (code <= 37) {
          // 冷
          imgname = '阴.svg'
        } else if (code <= 38) {
          // 热
          imgname = '晴.svg'
        }
        return imgname
      },
      getWeatherInfo() {
        const str = setQueryConfig(proxyData.params)
        getWeatherNew(str).then((res) => {
          console.log(res)
          proxyData.outWeather = res.content ? res.content : {}
          let text = proxyData.outWeather.text || ''
          let code = proxyData.outWeather.code
          let imgname = proxyData.getWeatherIconByCode(code)
          if (!imgname) {
            imgname = proxyData.getWeatherIconByText(text)
          }
          console.log('imgname==', imgname)

          proxyData.outWeather.imgname = imgname
        })
      },
      getSpaceInfo() {
        const str = setQueryConfig(proxyData.params)
        getPacSpaceInfo({ criteria: proxyData.params }).then((res) => {
          const content = (res && res.content) || []
          if (content && content.length) {
            proxyData.formatSpaceInfo(content)
          }
        })
      },
      formatSpaceInfo(content = []) {
        for (let i = 0; i < content.length; i++) {
          let item = content[i]
          if (item.pm25 || item.pm25 === 0) {
            let obj = proxyData.checkLevel(item.pm25, 'pm25')
            // console.log("obj==", obj);
            proxyData.envlist[0].levelTxt = obj ? obj.levelTxt : '--'
            proxyData.envlist[0].num = item.pm25
          } else {
            proxyData.envlist[0].levelTxt = ''
            proxyData.envlist[0].num = '--'
          }
          if (item.hcho || item.hcho == 0) {
            let obj = proxyData.checkLevel(item.hcho, 'hcho')
            proxyData.envlist[1].levelTxt = obj.levelTxt
            proxyData.envlist[1].num = item.hcho
          } else {
            proxyData.envlist[1].levelTxt = ''
            proxyData.envlist[1].num = '--'
          }
          if (item.temperature || item.temperature == 0) {
            proxyData.envlist[2].num = item.temperature
            proxyData.envlist[2].levelTxt = '℃'
          }
          if (item.humidity || item.humidity == 0) {
            let obj = proxyData.checkLevel(item.humidity, 'humidity')
            proxyData.envlist[3].levelTxt = '%'
            proxyData.envlist[3].num = item.humidity
          } else {
            proxyData.envlist[3].num = '--'
            proxyData.envlist[3].levelTxt = '%'
            // proxyData.envlist[3].levelTxt = "";
          }
        }
      },
      checkLevel(value, name) {
        let objList = {
          humidity: {
            range: [30, 70],
            text: ['干燥', '健康', '潮湿'],
          },
          co2: {
            range: [800, 1000, 1500],
            text: ['健康', '达标', '略高', '超标'],
          },
          pm25: {
            range: [35, 75, 115, 150, 250],
            text: [
              '健康',
              '良',
              '轻度污染',
              '中度污染',
              '重度污染',
              '严重污染',
            ],
          },
          hcho: {
            range: [0.1],
            text: ['健康', '超标'],
          },
          temper: {
            range: [20, 24],
            text: ['偏冷', '舒适', '偏热'],
          },
        }
        let sortArr = [value, ...objList[name].range].sort((a, b) => {
          return a - b
        })

        let level = sortArr.findIndex((item) => item === value)
        let levelTxt = objList[name].text[level]
        return { level, levelTxt }
      },
      timeInit() {
        this.time1 = setInterval(() => {
          this.getWeatherInfo()
        }, 300000)
        this.time2 = setInterval(() => {
          this.getSpaceInfo()
        }, 300000)
      },
      dateObj: {},
      getNowDate() {
        let date = formatDate('YYYY.MM.DD HH:mm:ss')
        let dateArr = date.split(' ')
        proxyData.dateObj.month = dateArr[0].split('.')[1]
        proxyData.dateObj.day = dateArr[0].split('.')[2]
        let nowTime = dateArr[1]
        // console.log(nowTime)
        proxyData.dateObj.hours = nowTime.split(':')[0]
        proxyData.dateObj.minute = nowTime.split(':')[1]
      },
      dateTimer: null,
      getNowDateTimer() {
        proxyData.dateTimer = setInterval(() => {
          proxyData.getNowDate()
        }, 1000)
      },
    })
    onBeforeUnmount(() => {
      clearInterval(proxyData.time1)
      clearInterval(proxyData.time2)
      clearInterval(proxyData.dateTimer)
    })
    onMounted(() => {
      proxyData.getWeatherInfo()
      proxyData.getSpaceInfo()
      proxyData.timeInit()
      proxyData.getNowDate()
      proxyData.getNowDateTimer()
    })
    return {
      ...toRefs(proxyData),
    }
  },
})
</script>
<style lang="scss" scoped>
// 因为像素转换的单位是96, 大屏的设计图是2160px，
// 所以px大小除/2.25就可自定计算出rem了
.enter-main {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(160, 146, 137, 1);
  .top-box {
    box-sizing: border-box;
    // padding: 14.58vh 28vw;
    padding: 0 2.78vw;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      .logo {
        width: 34.23px;
        // height: 46px;
        margin-right: 26.6px;
      }
      .weather-icon {
        width: 53.4px;
        // height: 58.6px;
        margin-right: 23px;
      }
      .wether-info {
        color: #fff;
        .temp {
          font-family: Montserrat;
          font-size: 25.8px;
          font-weight: 600;
          line-height: 22px;
          text-align: left;
          margin-bottom: 9.8px;
        }
        .text {
          font-family: PingFang SC;
          font-size: 16.88px;
          font-weight: 600;
          line-height: 16.4px;
          text-align: left;
        }
      }
      .line {
        height: 46px;
        width: 1px;
        background: rgba(216, 185, 164, 1);
        margin-left: 17.77px;
        margin-right: 17.77px;
      }
      .wether-pm {
        color: #fff;
        .value-box {
          display: flex;
          align-items: center;
          font-size: 25.77px;
          line-height: 22.22px;
          text-align: left;
          margin-bottom: 8.88px;
          span {
            display: inline-block;
            &:nth-child(1) {
              width: 94px;
              margin-right: 7px;
              font-family: Montserrat;
              font-weight: 400;
            }
            &:nth-child(2) {
              font-family: Montserrat;
              font-weight: 600;
            }
          }
        }
        .value-des {
          display: flex;
          align-items: center;
          span {
            display: inline-block;
            font-family: PingFang SC;
            font-size: 13.33px;
            font-weight: 400;
            line-height: 16.6px;
            text-align: left;
            &:nth-child(1) {
              width: 94px;
              margin-right: 7px;
            }
            &:nth-child(2) {
              font-family: PingFang SC;
              font-size: 16.88px;
              font-weight: 600;
              text-align: left;
            }
          }
        }
      }
    }
    .right {
      width: 57.2vw;
      display: flex;
      justify-content: space-between;
    }
  }

  .env-box {
    box-sizing: border-box;
    //padding: 0 11px;
    min-width: 8.33vw;
    max-width: 14vw;
    // height: 70.8vh;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8.88px;
    background: radial-gradient(
      103.15% 78.07% at -3.15% 51.76%,
      #a09289 0%,
      #9c8c82 100%
    );
    .title-box {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px;
      border-radius: 8.4px 8.4px 0 0;
      text-align: center;
      background: radial-gradient(
        100% 100% at 0% 0%,
        rgba(255, 255, 255, 0.4) 0%,
        #a09289 100%
      );
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: -3px -3px 111px 0px rgba(255, 255, 255, 0.02) inset;
      border-bottom: 2px solid rgba(255, 255, 255, 0.2);
      border-image-source: linear-gradient(
        169.15deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(238, 237, 237, 0.2) 96.79%
      );
      .icon {
        width: 13.3px;
        height: 13.3px;
        margin-right: 4px;
      }
      .title {
        font-family: Montserrat;
        font-size: 16px;
        font-weight: 500;
        line-height: 17.78px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
      }
      .calendar-title {
        margin-left: 4.44px;
        span {
          &:nth-child(1) {
          }
          &:nth-child(2) {
            margin-left: 4.5px;
            margin-right: 4.5px;
            font-size: 12.45px;
          }
          &:nth-child(3) {
          }
        }
      }
    }

    .index-box {
      padding: 7.55px;
      display: flex;
      justify-content: center;
      align-items: center;
      .num {
        font-family: Montserrat;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        line-height: 26.66px;
        margin-right: 4px;
      }
      .text {
        font-family: PingFang SC;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        line-height: 26.66px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .temp-text {
        font-family: Montserrat;
      }
    }
    .calendar-time {
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        display: block;
        font-family: Montserrat;
        font-size: 20.44px;
        font-weight: 600;
        &:nth-child(1) {
          line-height: 26.66px;
        }
        &:nth-child(3) {
          line-height: 26.66px;
        }
        &:nth-child(2) {
          padding-left: 11.55px;
          padding-right: 11.55px;
          line-height: 6px;
          padding-bottom: 4px;
        }
      }
    }
  }
}
</style>
