<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="operation" @click="handelOperation">{{ language == 0 ? '操作手册' : 'Website Operation Manual' }}
      <el-icon>
        <Download/>
      </el-icon>
    </div>
    <dialog-master-class ref="masterClassRef"/>
    <pick-up ref="pickupRef"></pick-up>
    <back-number ref="backNumberRef"></back-number>
    <sch-search ref="schSearchRef"></sch-search>
  </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";
import {useRouter} from "vue-router";

const {proxy} = getCurrentInstance()
const showgg = ref(false)
const router = useRouter()
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)
}

function handelOperation() {
  router.push('/about/operation')
}
</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;
  }
}

.operation {
  position: fixed;
  right: 0;
  top: 580px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border-radius: 50px;
  padding: 10px 20px;
  cursor: pointer;
}
</style>