<template>
  <div>
    <index-Ch
      v-if="language ==0" @backNumber="openBackNumber" @pickup="openPickup" @pop="openMaster"
      @schSearch="openSchSearch"
    />
    <index-En v-else @backNumber="openBackNumber" @pickup="openPickup" @pop="openMaster" @schSearch="openSchSearch" />
    <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" :close-on-click-modal="true" style="--el-dialog-padding-primary:0;--el-dialog-border-radius:15px;
                 --el-dialog-bg-color:transparent;overflow: hidden;"
        width="540"
      >
        <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||n.wea" :width="32" />
                </div>
                <div v-if="n.low" class="wd">{{ n.low.slice(2, -1) }}/{{ n.high.slice(2) }}</div>
                <div v-if="n.tem_night" class="wd">{{ n.tem_night }}/{{ n.tem_day }}</div>
                <div v-if="language==1" class="week">
                  {{
                    n.week == '星期一' ? 'Mon' : n.week == '星期二' ? 'Tue' : n.week == '星期三' ? 'Wed' : n.week == '星期四' ? 'Thu' : n.week == '星期五' ? 'Fri' : n.week == '星期六' ? 'Sat' : n.week == '星期日' ? 'Sun' : ''
                  }}
                </div>
                <div v-else class="week">
                  {{ n.week }}
                </div>
                <div v-if="n.ymd" class="date mt10">{{ n.ymd.slice(5, 10) }}</div>
                <div v-else class="date mt10">{{ n.date.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" />
    <pick-up ref="pickupRef" />
    <back-number ref="backNumberRef" />
    <sch-search ref="schSearchRef" />
  </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 BackNumber from '@/viewsPc/components/querybackNumber'
import SchSearch from '@/viewsPc/components/schSearch'
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(false)

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
    showgg.value = true
  }).catch(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)
}
const openBackNumber = (params) => {
  console.log(params)
  const obj = {
    title: '背号查询',
    cptId: params.cptId
  }
  proxy.$refs['backNumberRef'].open(obj)
}
const openSchSearch = (params) => {
  console.log(params)
  const obj = {
    title: '日程查询',
    cptId: params.cptId
  }
  proxy.$refs['schSearchRef'].open(obj)
}
</script>

<style lang="scss" scoped>
.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>