<template>
  <div class="d-flex jc-center title_wrap">
    <div class="time-picker">
      <el-date-picker
          v-model="timeValue"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          :clearable="false"
          @change="changeDate"
      />
    </div>
    <div class="d-flex jc-center">
      <div class="title">
        <span class="title-text">{{ title }}</span>
      </div>
    </div>
    <div class="timers">
      {{ dateData.dateDay }} {{ dateData.dateWeek }}
    </div>
  </div>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
import dayjs from "dayjs";
import {shortcuts} from '@/utils/constants';

const emit = defineEmits(["changeDate"]);

const title = ref("宜宾市12345政务服务便民热线");
const timeValue = ref<any>([
  dayjs().subtract(1, "month").toDate(),
  dayjs().toDate(),
]); //默认近一个月
emit("changeDate", timeValue.value);
const changeDate = (val: any) => {
  emit("changeDate", val);
};
const dateData = reactive<any>({
  dateDay: "",
  dateYear: "",
  dateWeek: "",
  timing: null as any,
});

const weekday = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateDay = dayjs().format("YYYY-MM-DD hh:mm:ss");
    dateData.dateWeek = weekday[dayjs().day()];
  }, 1000);
};
timeFn();
</script>

<style scoped lang="scss">
.title_wrap {
  height: 90px;
  background-size: cover;
  background-position: center center;
  position: relative;

  .time-picker {
    position: absolute;
    left: 30px;
    top: 40px;
    font-size: 18px;
    z-index: 9;
  }

  .timers {
    position: absolute;
    right: 30px;
    top: 40px;
    font-size: 18px;
    display: flex;
    align-items: center;
  }
}

.title {
  position: relative;
  text-align: center;
  height: 90px;
  line-height: 90px;

  .title-text {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 2px;
    width: 100%;
    color: #fff;
  }
}
</style>
