<template>
  <div>
    <index-Ch v-if="language ==0" @pop="openMaster" @pickup="openPickup"/>
    <index-En v-else  @pop="openMaster" @pickup="openPickup"/>
    <div v-if="showgg" class="fixed_gg">
      <!--天气-->
      <el-icon class="cclose" @click.stop="showgg=false"><circle-close /></el-icon>
      <div class="bg-lineg pd20">
        <div class="smallToday" @click="popWeather">
          <div>
            <div class="type">
              <weather-icon :type="weatherObj.forecast[0]?.type" :width="50"/>
            </div>
          </div>
          <div>
            <h3 v-if="language == 0">无锡</h3>
            <h3 v-else>WUXI</h3>
            <div class="wd_p">{{weatherObj.forecast[0]?.low.slice(2)}}~{{weatherObj.forecast[0]?.high.slice(2)}}</div>
          </div>
        </div>
      </div>
      <el-dialog v-model="weatherdialog" width="540" :close-on-click-modal="true"
                 style="--el-dialog-padding-primary:0;--el-dialog-border-radius:15px;
                 --el-dialog-bg-color:transparent;overflow: hidden;">
        <div class="bg-lineg pd20">
          <div class="weatherbox">
            <div class="today">
              <div class="mr50">
                <h1 v-if="language == 0">无锡</h1>
                <h1 v-else>WUXI</h1>
              </div>
              <div>
                <div class="wd">{{weatherObj.wendu}}°c</div>
                <div class="wd_p">{{weatherObj.forecast[0]?.low.slice(2)}}~{{weatherObj.forecast[0]?.high.slice(2)}}</div>
                <div class="week">{{weatherObj.forecast[0]?.week}}</div>
              </div>
              <div>
                <div class="type">
                  <weather-icon :type="weatherObj.forecast[0].type" :width="64"/>
                </div>
              </div>
            </div>
            <ul class="wlist">
              <li v-for="n in weatherObj.forecast.slice(1,6)">
                <div class="type">
                  <weather-icon :type="n.type" :width="32"/>
                </div>
                <div class="wd">{{n.low.slice(2,-1)}}/{{n.high.slice(2)}}</div>
                <div class="week" v-if="language==1">
                  {{n.week=='星期一'?'Mon':n.week=='星期二'?'Tue':n.week=='星期三'?'Wed':n.week=='星期四'?'Thu':n.week=='星期五'?'Fri':n.week=='星期六'?'Sat':n.week=='星期日'?'Sun':''}}
                </div>
                <div class="week" v-else>
                  {{n.week}}
                </div>
                <div class="date mt10">{{n.ymd.slice(5,10)}}</div>
              </li>
            </ul>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="poCode">
      <el-image :preview-src-list="['/img/code.jpg']" hide-on-click-modal="true" style="width: 120px;height: 120px;" src="/img/code.jpg"/>
    </div>
    <dialog-master-class ref="masterClassRef"/>
    <pickup ref="pickupRef"></pickup>
  </div>

</template>

<script setup>
import IndexCh from '/src/viewsPc/index'
import IndexEn from '/src/viewsPc/index_en'
import WeatherIcon from '@/viewsPc/components/weatherIcon'
import DialogMasterClass from '@/viewsPc/components/masterClass'
import pickup from '@/viewsPc/components/pickup'
import {useStorage} from "@vueuse/core/index";
import {ref} from "vue";
import {getWeather} from "@/apiPc/webSite";
import {getCurrentInstance} from "@vue/runtime-core";
const {proxy} = getCurrentInstance()
const showgg = ref(true)

const language = useStorage('language', 0)
const weatherObj = ref({
  forecast:[]
})
const weatherdialog = ref(false)
init()
function init(){
  getWeather().then(res=>{
    weatherObj.value = JSON.parse(res.data).data
    console.log(weatherObj.value)
  }).catch(err=>{
    console.log(err)
    showgg.value = false
  })
}
const popWeather = () => {
  weatherdialog.value = true
}
const openMaster = (params) => {
  console.log(params)
  var obj = {
    title:'大师课申请',
    cptId:params.cptId
  }
  proxy.$refs['masterClassRef'].open(obj)
}

const openPickup= (params) => {
  console.log(params)
  const obj = {
    title:'接送机服务',
    cptId:params.cptId
  }
  proxy.$refs['pickupRef'].open(obj)
}
</script>

<style scoped lang="scss">
.poCode{position: fixed;right: 0;top: 40%;background: #fff;padding: 10px 0 0;border-radius: 10px;overflow: hidden;
  box-shadow: 0 2px 8px #aaa;z-index: 99;}
@media screen and (max-width: 768px) {
  :deep(.zn-Box .zn-btn){margin-top: 10px;font-size: 14px}
  :deep(.bgbg){ padding: 3% 5% 0!important;
    h1 {font-size: 22px;margin:20px 0 0;}
  }
  .fixed_gg{
    transform: scale(0.7);
    transform-origin: right;
  }
}
</style>