<template>
  <div class="image-viewer" >
    <div class="cols no-events">
      <div class="col" v-for="key in fields" :key="key" >
        {{datas[index][key]}}
      </div>
    </div>
    <el-image-viewer @switch="onSwitch" class="img"
                     :z-index="1000"
                     @close="close"
                     :initial-index="index"
                     :url-list="urls">
    </el-image-viewer>
    <div class="weatherList no-events">
      <div class="weather" :class="[item.fxDate == uploadDate ? 'active' : '']" v-for="item in weatherList" :key="item.fxDate" >
        <div class="row">{{weekDay(item.fxDate)}}</div>
        <div class="row">{{new Date(item.fxDate).getDate()}}</div>
        <div class="row"><img width="30" height="30" :src="base_img_url3+'birdseye-look-mini/weather2/'+item.iconDay+'.png'" /></div>
        <div class="row">{{item.tempMax}}</div>
        <div class="row">{{item.tempMin}}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive,toRefs} from "vue";
import {useStore} from "vuex";
import {weekDay} from "../../../../utils/date_util"
import {base_img_url3} from "../../../../api/config"

let store = useStore()
let emits = defineEmits(["close"])
let props = defineProps({
  urls:{
    type:Array,
    required:true
  },
  datas:{
    type:Array,
    required:true
  },
  fields:{
    type:Array,
    required:true
  },
  index:{
    type:Number,
    default:0
  }
})

const index = ref(props.index)
const weatherList = ref([])
const uploadDate = ref()

function close(){
  emits("close")
}
function onSwitch(e){
  index.value = e
  getBefore1DayAfter6Day()
}

let cacheWeather = {}

/**
 * 获取前一天后6天的天气信息
 */
function getBefore1DayAfter6Day(){
  let organId = store.getters.userinfo.curGardenId;
  let date = props.datas[index.value]["uploadDate"]
  uploadDate.value = date
  let key = organId + date
  if(cacheWeather[key]){
    weatherList.value = cacheWeather[key]
  }else{
    VE_API.weather_item.getBefore1DayAfter6Day({organId,date}).then(({data})=>{
      weatherList.value = data
    })
  }
}

getBefore1DayAfter6Day()

</script>

<style lang="scss" scoped>
@import "../../../../styles/index";
.image-viewer{
  z-index: 999;
  .cols{
    @include wh(80%, 30px);
    @include xMid();
    z-index: 9999;
    color: #ffffff;
    font-weight: bold;
    background-color: #00000050;
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
    .col{
      margin-left: 20px;
    }
  }
  .weatherList{
    @include wh(80%, auto);
    @include xMid();
    top: 30px;
    z-index: 9999;
    color: #ffffff;
    font-weight: bold;
    background-color: #00000050;
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .weather{
      width: 14%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .row{
        @include wh(auto, 30px);
      }
    }
  }
  .active{
    border: 2px solid red;
    box-sizing: border-box;
  }


  .img{
    z-index: 999;
  }
}
</style>