<template>
  <div id="scene-box">
    <div class="sb-time-row">
      <div v-for="item, index in sceneList.time" @click="ueCallChangeTime((index+1)*6)" class="scene-item">
        <img :src="item.icon" alt="">
        <span :class="{'highlight': item.status}">{{item.name}}</span>
      </div>
    </div>
    <div class="sb-weather-row">
      <div v-for="item, index in sceneList.weather" @click="ueCallChangeWeather(index)" class="scene-item">
        <img :src="item.icon" alt="">
        <span :class="{'highlight': item.status}">{{item.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SceneBox'
}
</script>

<script setup>
  import { reactive } from 'vue'
  import { ueCallChangeTime, ueCallChangeWeather } from '@/utils/UIInteractions'

  const sceneList = reactive({
    time: [
      { name: '早晨', icon: require('@/assets/imgs/scene/zaochen.png'), status: false },
      { name: '中午', icon: require('@/assets/imgs/scene/qingtian.png'), status: false },
      { name: '傍晚', icon: require('@/assets/imgs/scene/bangwan.png'), status: false },
      { name: '晚上', icon: require('@/assets/imgs/scene/wanshang.png'), status: false },
    ],
    weather: [
      { name: '晴', icon: require('@/assets/imgs/scene/w-qing.png'), status: false },
      { name: '多云', icon: require('@/assets/imgs/scene/w-duoyun.png'), status: false },
      { name: '雾', icon: require('@/assets/imgs/scene/w-wu.png'), status: false },
      { name: '小雨', icon: require('@/assets/imgs/scene/w-xiaoyu.png'), status: false },
      { name: '中雨', icon: require('@/assets/imgs/scene/w-zhongyu.png'), status: false },
      { name: '大雨', icon: require('@/assets/imgs/scene/w-dayu.png'), status: false },
      { name: '小雪', icon: require('@/assets/imgs/scene/w-xiaoxue.png'), status: false },
      { name: '中雪', icon: require('@/assets/imgs/scene/w-zhongxue.png'), status: false },
      { name: '大雪', icon: require('@/assets/imgs/scene/w-daxue.png'), status: false },
    ]
  })
</script>

<style lang="scss" scoped>
#scene-box {
  position: absolute;
  box-sizing: border-box;
  padding: 20px;
  top: -92vh;
  right: 0.5vw;
  width: 300px;
  height: 300px;
  background-color: rgba(35, 68, 101, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid #3272a3;
  box-shadow: 0 0 4px 2px inset #0856919d;
  border-radius: 6px;

  .sb-time-row, .sb-weather-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .sb-weather-row {
    // margin-top: 5px;
    margin: 5px 20px 0;
    .scene-item {
      width: 26%;
    }
  }

  .sb-time-row {
    .scene-item {
      width: 20%;
    }
  }

  .scene-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    &>img {
      width: 35px;
      height: 35px;
    }
    &>span {
      margin-top: 3px;
      font-size: 14px;
    }
    .highlight {
      color: yellow;
    }
  }
}
</style>