<template>
  <div class="box weatherLine">
    <el-row :gutter="20" align="middle" style="height: 100%;">
      <el-col :sm="24" :lg="10">
        <!--天气-->
        <div class="leftFlex">
          <div class="smallToday">
              <div class="type">
                <weather-icon :type="weatherObj.forecast[0]?.type" :width="50"/>
              </div>
              <div class="wd_p">
<!--                {{ weatherObj.forecast[0]?.low.slice(2) }}~-->
                {{ weatherObj.forecast[0]?.high.slice(2) }}
              </div>
          </div>
          <div>{{ language ==0?'无锡':'Wuxi' }}</div>
          <div>{{dayjs().month()<9?'0':''}}{{dayjs().month()+1}} / {{dayjs().date()}}</div>
          <div v-if="language ==0">{{week[dayjs().day()]}}</div>
          <div v-else>{{weekEn[dayjs().day()]}}</div>
          <div class="forPc">{{dayjs().hour()<10?'0':''}}{{dayjs().hour()}}:{{dayjs().minute()<10?'0':''}}{{dayjs().minute()}}</div>
        </div>
      </el-col>
      <el-col :sm="24" :lg="14">
        <el-button round class="searchfw" @click="goSearch">
          <el-icon class="mr20">
            <Search/>
          </el-icon>
          {{ language ==0?'服务查询':'Service Query' }}
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue"
import useUserStore from '@/store/modules/user'
import WeatherIcon from '@/viewsPc/components/weatherIcon'
import {getWeather} from "@/apiPc/webSite"
import dayjs from "dayjs"
import router from "@/routerPc/en";
const language = ref('0')
const weatherObj = ref({
  forecast:[]
})
const week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
const weekEn = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
const props = defineProps({
  lang: {
    type: String,
    required: true,
    default: '0'
  }
})

onMounted(()=>{
  if(useUserStore().weather == null){
    init()
  }
  language.value = props.lang
})
function init(){
  getWeather().then(res=>{
    weatherObj.value = JSON.parse(res.data).data
    useUserStore().setWeather(weatherObj.value)
  })
}

function goSearch() {
  router.push({path: '/serverSearch'})
}
</script>

<style scoped lang="scss">
.weatherLine {padding: 12px;
  background: linear-gradient(90deg, #0557EC, #0540EC, #013499);
  border-radius: 45px;
  color: #fff;
}
.leftFlex{display: flex;align-items: center;justify-content: space-between;
  > div{background: url("@/assets/dance/line.png") no-repeat right;width: 20%;
    justify-content: center;
    min-height: 56px;
    display: flex;
    align-items: center;}
  .smallToday{
    width: 30%;
    .wd_p{font-size: 18px;}
  }
}
.smallToday{display: flex;align-items: center;
  .type{margin-right: 10px;}
  h3{margin: 0 0 10px;}
}
.searchfw{width: 100%;height:65px;border-radius: 100px;font-size: 24px;}

@media screen and (max-width: 768px) {
  .forPc{display: none;}
  .weatherLine{border-radius: 15px}
  .leftFlex {margin-bottom: 15px;
    .smallToday{width: 40%;
    }
  }
  .leftFlex > div{font-size: 12px; width: 15%;}
  .searchfw{font-size: 18px;height: 40px;}
}
</style>