<script setup name="PopupAllPicker">
const emit = defineEmits(['update:modelValue', 'confirm']);
const attrs = useAttrs();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  values: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '請選擇時間'
  },
  valueFormat: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  }
});
// 是否顯示彈出層
const columns = ref([]);
const Mdays = ref('');
const Dindex = ref(null);
const picker = ref(null);
//  獲取某年某月多少天
function getCountDays(year, month) {
  const day = new Date(year, month, 0);
  return day.getDate();
}
// 獲取年月日時分秒列信息
function getColumns() {
  const strTime = props.values;
  let vModuleDate;
  if (props.values !== '') {
    vModuleDate = new Date(strTime.replace(/-/g, '/'));
  } else {
    vModuleDate = new Date(); // 沒有傳入時間則默認(rèn)當(dāng)前時刻
  }
  const Y = vModuleDate.getFullYear();
  const M = vModuleDate.getMonth();
  const D = vModuleDate.getDate();
  const h = vModuleDate.getHours();
  const m = vModuleDate.getMinutes();
  const s = vModuleDate.getSeconds();
  const year = {}; // 獲取前后十年數(shù)組
  year.values = [];
  const CurrentDay = new Date().getFullYear();
  for (let i = CurrentDay - 4; i < CurrentDay + 1; i += 1) {
    year.values.push(i);
  }
  year.defaultIndex = year.values.indexOf(Y);
  const month = {};
  // 獲取12月數(shù)組
  month.defaultIndex = M;
  month.values = Object.keys([...Array(13)]).map((item) => {
    if (+item + 1 <= 10) {
      return `0${item}`;
    }
    if (+item + 1 === 11) {
      return `${item}`;
    }
    return (+item + 0).toString();
  });
  month.values.splice(0, 1);
  const days = getCountDays(Y, Mdays.value === '' ? M + 1 : Mdays.value);
  const day = {}; // 創(chuàng)建當(dāng)月天數(shù)數(shù)組
  day.defaultIndex = Dindex.value === null ? D - 1 : Dindex.value;
  day.values = Object.keys([...Array(days + 1)]).map((item) => {
    if (+item + 1 <= 10) {
      return `0${item}`;
    }
    if (+item + 1 === 11) {
      return `${item}`;
    }
    return (+item + 0).toString();
  });
  day.values.splice(0, 1);
  const hour = {}; // 創(chuàng)建小時數(shù)組
  hour.defaultIndex = h;
  hour.values = Object.keys([...Array(24)]).map((item) => {
    if (+item + 1 <= 10) {
      return `0${item}`;
    }
    if (+item + 1 === 11) {
      return `${item}`;
    }
    return (+item + 0).toString();
  });
  const mi = {}; // 創(chuàng)建分鐘數(shù)組
  mi.defaultIndex = m;
  mi.values = Object.keys([...Array(60)]).map((item) => {
    if (+item + 1 <= 10) {
      return `0${item}`;
    }
    if (+item + 1 === 11) {
      return `${item}`;
    }
    return (+item + 0).toString();
  });
  const ss = {}; // 創(chuàng)建秒數(shù)數(shù)組
  ss.defaultIndex = s;
  ss.values = Object.keys([...Array(60)]).map((item) => {
    if (+item + 1 <= 10) {
      return `0${item}`;
    }
    if (+item + 1 === 11) {
      return `${item}`;
    }
    return (+item + 0).toString();
  });
  // 設(shè)置默認(rèn)選項當(dāng)前年
  if (props.valueFormat.includes('YYYY')) {
    columns.value.push(year);
  }
  if (props.valueFormat.includes('MM')) {
    columns.value.push(month); // 獲取當(dāng)月的天數(shù)
  }
  if (props.valueFormat.includes('DD')) {
    columns.value.push(day);
  }
  if (props.valueFormat.includes('HH')) {
    columns.value.push(hour);
  }
  if (props.valueFormat.includes('mm')) {
    columns.value.push(mi);
  }
  if (props.valueFormat.includes('ss')) {
    columns.value.push(ss);
  }
}
function onChange(values) {
  // a為所有列備選項值的數(shù)組
  const days = getCountDays(values[0], values[1]);
  const newDays = {};
  newDays.values = Object.keys([...Array(days + 1)]).map((item) => {
    if (+item + 1 <= 10) {
      return `0${item}`;
    }
    if (+item + 1 === 11) {
      return `${item}`;
    }
    return (+item + 0).toString();
  });
  newDays.values.splice(0, 1);
  // 設(shè)置第三列的值
  picker.value.setColumnValue(2, newDays.values);
  // 設(shè)置第三列索引
  picker.value.setColumnIndex(2, values[2] - 1);
}
//  關(guān)閉彈框
function onCancel() {
  Mdays.value = '';
  Dindex.value = null;
  emit('update:modelValue', false);
}
// 時間選擇器確定
function onConfirm(val) {
  let endVal = '';
  for (let i = 0; i < columns.value.length; i += 1) {
    endVal += val[i];
    if (i === 2) {
      endVal += ' ';
    } else if (i >= 3 && i <= 5) {
      endVal += ':';
    } else if (i < columns.value.length - 1) {
      endVal += '-';
    }
  }
  // 判斷最后一個字符是否是分隔符
  if (endVal.endsWith('-') || endVal.endsWith(':')) {
    endVal = endVal.slice(0, -1); // 刪除最后一個字符
  }
  emit('update:modelValue', false);
  emit('confirm', endVal);
}
watch(
  () => props.modelValue,
  (val) => {
    if (!val) emit('update:modelValue');
    columns.value = [];
    getColumns();
  }
);
watch(
  () => props.values,
  (val) => {
    if (val === '') {
      Mdays.value = '';
      Dindex.value = null;
    }
  }
);
</script>
<template>
  <!-- 彈出層 -->
  <van-popup :show="modelValue" round position="bottom" teleport="body" class="!rounded-t-[6px]" @close="onCancel">
    <!-- 時間選擇 -->
    <van-picker
      v-bind="attrs"
      ref="picker"
      show-toolbar
      :title="title"
      :columns="columns"
      @change="onChange"
      @cancel="onCancel"
      @confirm="onConfirm"
    />
  </van-popup>
</template>
<style lang="less" scoped></style>

<script setup>
import dayjs from 'dayjs';
import PopupAllPicker from '../components/PopupAllPicker.vue';
const data = reactive({
  popupCode: '',
  dateType: 'date',
  dateFormatter: 'YYYY-MM-DD',
  datePicker: false,
  pickerDate: '' // 當(dāng)前時間選擇器的時間
});
const form = reactive({
    ...,
})
// 選擇器默認(rèn)范圍（當(dāng)前時間前后2年）
const minDate = dayjs().subtract(2, 'year').$d;
const maxDate = dayjs().subtract(-1, 'year').$d;
// 確認(rèn)時間
function onConfirmPicker(val) {
  form[data.popupCode] = val;
}
</script>
<template>
  ...
  <!-- 時間選擇器 -->
  <PopupAllPicker
    v-model="data.datePicker"
    ref="popup"
    :values="data.pickerDate"
    :min-date="minDate"
    :max-date="maxDate"
    :valueFormat="data.dateFormatter"
    @confirm="onConfirmPicker"
  />
</template>