<template>
  <div class="picker-title" style="width:100%;margin:10px 0px">
    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <p style="margin:0">{{ title }}</p>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" style="display: flex;justify-content: flex-end;">
        <period-date-picker :start="date[0]" :end="date[1]" size="mini" width="125px" @timeReturned="time($event)" />
      </el-col>
    </el-row>
  </div>
</template>


<script>
import PeriodDatePicker from "@/components/period-date-picker";
import dayjs from "dayjs";
export default {
  name:'PickerTitle',
  props:['title'],
  components:{ PeriodDatePicker },
  data(){
    return {
      date: []
    }
  },
  mounted(){
    const current = dayjs(new Date()).format("YYYY-MM-DD")
    this.date = [current + " 00:00:00", current + " 23:59:59"]
    this.$emit("refresh", this.date);
  },
  // watch:{
  //   date: function(val) {
  //     const newVal = val.filter(v => v !== "")
  //     if (newVal && newVal.length === 2) {
  //       this.$emit("refresh", val);
  //     }
  //   }
  // },
  methods:{
    async time(e) {
      const { startTime, endTime } = e;
      this.start = startTime || "";
      this.end = endTime || "";

      const { start, end } = this;
      if ((start !== "" && end === "") || (start === "" && end !== "")) {
        this.$message.warning("时间区间不完整！");
        this.date = []
        return;
      }

      if(this.start && this.end){
        this.date = [this.start + " 00:00:00", this.end + " 23:59:59"]
      }else{
        this.date = [this.start, this.end]
      }

      const val = this.date.filter(v => v !== "")

      if(val && val.length === 2){
        this.$emit("refresh", val);
      }
    }
  }
}
</script>
