<template>
  <div class="header">
    <div class="header-left">
      <div>
        <el-date-picker v-model="value1" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD" class="datePicker" />
      </div>
      <div>
        <el-select v-model="value" placeholder="请选择项目" style="width: 100%">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    <div class="header-center">新能源场站智慧运维大数据平台</div>
    <div class="header-right">
      <div>
        <div class="left-section">
          <img src="@/assets/large/weather.png" alt="天气图标" />

          <span>
            <span>多云 9°/18°</span>
          </span>
        </div>
      </div>
      <div>{{ date.ymd }} {{ date.hms }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import '@/assets/styles/element.scss';
const date: any = ref({
  ymd: '',
  hms: '',
  week: ''
});
const value1 = ref('');
const value = ref('');
const options = ref([
  {
    value: 1,
    label: '田东县乡村振兴光伏发电项目'
  },
  {
    value: 2,
    label: '田东县乡村振兴光伏发电项目（二期）'
  },
  {
    value: 3,
    label: '长顺县朝核农业光伏电站'
  }
]);
const setTime = () => {
  let date1 = new Date();
  let year: any = date1.getFullYear();
  let month: any = date1.getMonth() + 1;
  let day: any = date1.getDate();
  let hours: any = date1.getHours();
  if (hours < 10) {
    hours = '0' + hours;
  }
  let minutes: any = date1.getMinutes();
  if (minutes < 10) {
    minutes = '0' + minutes;
  }
  let seconds: any = date1.getSeconds();
  if (seconds < 10) {
    seconds = '0' + seconds;
  }
  date.value.ymd = year + '-' + month + '-' + day;
  date.value.hms = hours + ':' + minutes + ':' + seconds;
  date.value.week = date1.getDay();
};
// 添加定时器，每秒更新一次时间
const timer = setInterval(setTime, 1000);
// 组件卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped lang="scss">
$vm_base: 1920;
$vh_base: 1080;
// 计算vw
@function vw($px) {
  @return calc(($px / $vm_base) * 100vw);
}

// 计算vh
@function vh($px) {
  @return calc(($px / $vh_base) * 100vh);
}

.header {
  width: 100%;
  height: 8vh;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
.header-left {
  padding-left: vw(40);
  display: flex;
  align-items: center;
  justify-content: space-between;
  & > div {
    width: vw(240);
    margin-right: vw(20);
  }
}
.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Rang_men_zheng_title;
  font-size: vw(32);
  letter-spacing: vw(8);
}
.header-right {
  padding-right: vw(20);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: vw(15);
  .left-section {
    display: flex;
    align-items: center;
    padding-right: vw(20);
    //   margin-right: auto; /* 让右侧元素（管理系统）居右 */
  }
  .left-section img {
    width: 32px;
    height: 32px;
    margin-right: 8px; /* 图标与文字间距 */
  }
}
</style>
