<template>
  <div class="condition">
    <el-radio-group v-model="radioType">
      <el-radio-button label="时" value="hour" />
      <el-radio-button label="天" value="day" />
      <el-radio-button label="周" value="week" />
    </el-radio-group>
    <div class="condition-time">
      <el-date-picker
        v-if="radioType == 'hour'"
        style="width: 350px"
        v-model="value"
        type="datetimerange"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        @change="handleDateChange"
      />
      <el-date-picker
        v-else-if="radioType == 'day'"
        style="width: 350px"
        v-model="value1"
        type="daterange"
        value-format="YYYY-MM-DD HH:mm:ss"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        @change="handleDateChange"
      />

      <el-date-picker v-else style="width: 370px" v-model="value2" type="week" value-format="YYYY-MM-DD" placeholder="请选择周" @change="handleWeekChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { format } from "@/utils";
import { ref } from "vue";
const value = ref("");
const value1 = ref("");
const value2 = ref("");
const radioType = ref("hour");
const emit = defineEmits(["change"]);

const handleWeekChange = (val) => {
  value.value = "";
  value1.value = "";
  let time = new Date(val).getTime() + 6 * 24 * 60 * 60 * 1000;
  emit("change", { startDate: `${val} 00:00:00`, endDate: `${format(time, "YYYY-MM-DD")} 00:00:00`, type: radioType.value });
};
const handleDateChange = (val) => {
  if (radioType.value === "hour") {
    value1.value = "";
    value2.value = "";
  } else {
    value.value = "";
    value2.value = "";
  }
  emit("change", { startDate: val[0], endDate: val[1], type: radioType.value });
};
</script>

<style scoped lang="less">
.condition {
  display: flex;
  align-items: center;
  margin-left: 20px;
  .condition-time {
    overflow: hidden;
    margin-left: 20px;
  }
}
</style>
