<template>
  <div class="date-input">
    <el-input
      v-model="startDateStr"
      :placeholder="$t('task.taskStartTime')"
      type="text"
      clearable
      class="date-input-field"
      @input="validateDate"
    />
    <span class="line"></span>
    <el-input
      v-model="endDateStr"
      :placeholder="$t('task.taskFinishTime')"
      type="text"
      clearable
      class="date-input-field"
      @blur="validateDate"
    />
    <div class="icon-container" @click="toggleDatePicker">
      <i class="el-icon-date" style="font-size: 24px;"></i>
    </div>
    <el-date-picker
      style="
        position: absolute;
        z-index: -100;
        top: 15px;
        left: -178px;
        transform: scale(0.1);
      "
      size="mini"
      v-model="selectedDateRange"
      :editable="false"
      type="datetimerange"
      @change="onDateChange"
      ref="timePick"
      value-format="yyyy-MM-dd HH:mm:ss"
    />
  </div>
</template>
<script>
export default {
  props: {
    // 父組件傳過來的值  
    customTimePicker: {  
      type: Array,  
      default: () => {
              return [new Date(), new Date()]
            }  
    },  
  },
  data() {
    return {
      selectedDateRange: [],
      startDateStr: "",
      endDateStr: "",
      error: ''
    };
  },
  created(){
    console.log('====> customTimePicker', this.customTimePicker);
  },
  watch: {
    customTimePicker: {
      handler(newVal) {
        console.log('customTimePicker==>newVal', newVal);
        if (newVal && newVal.length === 2) {
          this.selectedDateRange = [...newVal];
          this.startDateStr = newVal[0];
          this.endDateStr = newVal[1];
        }
      },
      deep: true
    },
    selectedDateRange: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length === 2) {
          if(oldVal && newVal.toString() === oldVal.toString()) {
            return;
          } else {
            this.startDateStr = newVal[0].toString().replace('T', ' ');
            this.endDateStr = newVal[1].toString().replace('T', ' ');
            this.$emit('input', newVal);
          }
        }
      },
      deep: true
    },
    startDateStr(newVal, oldVal) {
      if(oldVal && newVal.toString() === oldVal.toString()) {
        return;
      } else {
        this.selectedDateRange[0] = newVal.toString().replace('T', ' ');
        this.$emit('input', this.selectedDateRange);
      }
    },
    endDateStr(newVal, oldVal) {
      if(oldVal && newVal.toString() === oldVal.toString()) {
        return;
      } else {
        this.selectedDateRange[1] = newVal.toString().replace('T', ' ');
        this.$emit('input', this.selectedDateRange);
      }
    }
  },
  methods: {
    validateDate() {
      const value = this.startDateStr;
      if (value.trim() === '') {
        this.error = '';
        this.$emit('updateError', this.error);
        return;
      }
      // 驗證格式
      const regex = /^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/;
      const match = value.match(regex);
      if (!match) {
        this.$message.error('Invalid date format. Please use yyyy-MM-dd HH:mm:ss.');
        //this.error = 'Correct format is yyyy-MM-dd HH:mm:ss';
        // this.$emit('updateError', this.error);
        return;
      }
      // 解析日期
      const [year, month, day, hours, minutes, seconds] = match.slice(1).map(Number);
      // 檢查年份是否在合理范圍內
      if (year < 1900 || year > 2100) {
        this.$message.error('Invalid year. Please enter a year between 1900 and 2100.');
        // this.error = 'please input valid year';
        // this.$emit('updateError', this.error);
        return;
      }
      // 檢查月份是否在1到12之間
      if (month < 1 || month > 12) {
        this.$message.error('Invalid month. Please enter a month between 1 and 12.');
        // this.error = 'please input valid month';
        // this.$emit('updateError', this.error);
        return;
      }
      // 檢查日期是否在1到當月的最大天數(shù)之間
      const daysInMonth = new Date(year, month, 0).getDate();
      if (day < 1 || day > daysInMonth) {
        this.$message.error('Invalid day. Please enter a day between 1 and the maximum number of days in the selected month.');
        // this.error = 'please input valid day';
        // this.$emit('updateError', this.error);
        return;
      }
       // 檢查小時是否在0到23之間
       if (hours < 0 || hours > 23) {
        this.$message.error('Invalid hour. Please enter an hour between 0 and 23.');
        // this.error = 'please input valid hour';
        // this.$emit('updateError', this.error);
        return;
      }
      // 檢查分鐘是否在0到59之間
      if (minutes < 0 || minutes > 59) {
        this.$message.error('Invalid minute. Please enter a minute between 0 and 59.');
        // this.error = 'please input valid minute';
        // this.$emit('updateError', this.error);
        return;
      }
      // 檢查秒是否在0到59之間
      if (seconds < 0 || seconds > 59) {
        this.$message.error('Invalid second. Please enter a second between 0 and 59.');
        // this.error = 'please input valid second';
        // this.$emit('updateError', this.error);
        return;
      }
      // 創(chuàng)建日期對象
      const date = new Date(year, month - 1, day, hours, minutes, seconds);
      // 檢查日期是否有效
      if (isNaN(date.getTime())) {
        this.$message.error('Invalid date. Please enter a valid date.');
        // this.error = 'please input valid date';
        // this.$emit('updateError', this.error);
        return;
      }
      this.error = '';
      this.$emit('updateError', this.error);
    },
    toggleDatePicker() {
      //觸發(fā)日期框展開
      //  document
      //     	.querySelector(".time-date-picker")
      //     	.querySelector("input")
      //     	.focus();
      this.$refs.timePick.focus();
    },
    onDateChange(date) {
      this.startDateStr = date[0];
      this.endDateStr = date[1];
      this.$set(this, 'selectedDateRange', [this.startDateStr, this.endDateStr])
      this.$emit('input', this.selectedDateRange);
    },
  },
};
</script>
<style scoped>
.date-input {
  display: flex;
  align-items: center;
  position: relative; /* 為絕對定位的日期選擇器提供相對定位 */
}
.date-input-field {
  width: 18%;
  /* flex-grow: 1; /* 讓輸入框占滿剩余空間 */
  /* margin: 0; /* 刪除外邊距 */
  z-index: 10;
}
.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /*width: 30px; /* 正方形框的寬度 */
  /*height: 30px; /* 正方形框的高度 */
  /*border: 1px solid #ccc; /* 正方形框的邊框 */
  cursor: pointer;
  /*background-color: #f9f9f9; /* 可以選擇性添加背景色 */
  background: transparent;
  color: #008ed0;
  /*border: 1px solid #008ed0;
}
.icon {
  font-size: 16px; /* 調整圖標大小 */
  font-weight: bold; /* 粗體字 */
  margin: 0; /* 刪除圖標的外邊距 */
}
/*
.timePickCSS {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}
*/
.line {
  display: inline-block;
  width: 10px;
  height: 2px;
  background-color: #005987;
}
</style>

<div class="app-container">
    <el-form
  ref="submitForm"
  :model="submitForm"
  class="form-item table"
  label-width="80px"
  label-position="left"
  :inline="true"
>
  <el-form-item label="開始日期" prop="startDate">
    <el-date-picker
      v-model="submitForm.startDate"
      type="date"
      placeholder="請輸入開始日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptionsStart"
    ></el-date-picker>
  </el-form-item>
  <el-form-item label="結束日期" prop="endDate">
    <el-date-picker
      v-model="submitForm.endDate"
      type="date"
      placeholder="請輸入開始日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptionsEnd"
    ></el-date-picker>
  </el-form-item>
   <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"  size="mini" @click="resetQuery">重置</el-button>
  </el-form-item>
</el-form>
  </div>
 <script>
export default {
  name: 'statisticsCountyCrops',
data() {
    return {
      loading: true,
       // 開始結束日期限制
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.submitForm.endDate) {
            return (
              time.getTime() >= new Date(this.submitForm.endDate).getTime()
            );
          }
        }
      },
      // 結束日期限制
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.submitForm.startDate) {
            return (
              time.getTime() <= new Date(this.submitForm.startDate).getTime()
            );
          }
        }
      },
      submitForm: {
        startDate: '',
        endtDate: ''
      },
    };
  },
 methods: {
/* get請求 對象參數(shù)*/
    getList(){
      statisticsCountyCrops(this.submitForm).then(res =>{
          this.dataList = res.data;
          this.loading = false;
      }).catch(err =>{
       console.error(err)
        this.loading = false;
      })
    },
  /** 搜索按鈕操作 */
    handleQuery() {
      this.getList();
    },
   /** 重置按鈕操作 */
    resetQuery() {
      this.daterangeCreateTime = [];
      this.resetForm("submitForm");
    },  
  },
};
</scrpit>

<el-form-item label="查詢范圍">
        <el-date-picker
          v-model="daterangeCreateTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
        ></el-date-picker>
      </el-form-item>
     <script>
     export default {
      data() {
    return {
    daterangeCreateTime: [],
      queryParams:{},
      }
      },
        this.queryParams = {};
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.queryParams["startDate"] = this.daterangeCreateTime[0];
        this.queryParams["endDate"] = this.daterangeCreateTime[1];
      }
      }
       <script>