<template>
  <view class="mask" v-if="show" @tap="close">
    <view class="box" @tap.stop="nullFunction">
      <view class="u-flex u-relative u-row-center u-p-30 top">
        <view class="font-bold u-font-32">筛选日期时间</view>
        <view class="close" @tap="close">
          <uni-icons type="closeempty" size="24"></uni-icons>
        </view>
      </view>
      <!-- 	<view class="u-p-30 u-flex u-flex-wrap gap-20 fastTime">
					<view class="item" v-for="(item,index) in fastTime" :key="index" @tap="changeTime(item.key)">
						{{item.title}}
					</view>
				</view> -->
      <picker-view
        :immediate-change="true"
        @pickend="pickend"
        :value="value"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <view class="item" v-for="(item, index) in years" :key="index"
            >{{ item }}年</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in months" :key="index"
            >{{ item }}月</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in days" :key="index"
            >{{ item }}日</view
          >
        </picker-view-column>
        <!-- 			<picker-view-column>
					<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
				</picker-view-column> -->
      </picker-view>
      <view class="u-text-center color-999">至</view>
      <picker-view
        :immediate-change="true"
        :value="value1"
        @pickend="pickend1"
        @change="bindChange1"
        class="picker-view"
      >
        <picker-view-column>
          <view class="item" v-for="(item, index) in years" :key="index"
            >{{ item }}年</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in months" :key="index"
            >{{ item }}月</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in days1" :key="index"
            >{{ item }}日</view
          >
        </picker-view-column>
        <!-- 		<picker-view-column>
					<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
				</picker-view-column> -->
      </picker-view>

      <!-- 站位 -->
      <view style="height: 80px"></view>
      <view class="fixed_b">
        <my-button shape="circle" @tap="confirm">确定</my-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import dayjs from "dayjs";
import myButton from "@/components/my-components/my-button.vue";
import { reactive, ref } from "vue";
const $nowDate = new Date();
const nowDate = {
  year: $nowDate.getFullYear(),
  month: $nowDate.getMonth() + 1,
  day: $nowDate.getDate(),
  hours: $nowDate.getHours(),
  minutes: $nowDate.getMinutes(),
  seconds: $nowDate.getSeconds(),
};
const yearsLen = 30;
const years = new Array(yearsLen)
  .fill(1)
  .map((v, index) => {
    return nowDate.year - index;
  })
  .reverse();
const months = new Array(12).fill(1).map((v, index) => {
  return index + 1;
});
const days = ref(
  new Array(getMonthArea($nowDate, "end").getDate()).fill(1).map((v, index) => {
    return index + 1;
  })
);
const days1 = ref(
  new Array(getMonthArea($nowDate, "end").getDate()).fill(1).map((v, index) => {
    return index + 1;
  })
);
const hours = new Array(24).fill(1).map((v, index) => {
  return index;
});
const minutes = new Array(60).fill(1).map((v, index) => {
  return index;
});
const seconds = new Array(60).fill(1).map((v, index) => {
  return index;
});
const fastTime = reactive([
  {
    title: "今日",
    key: "now",
  },
  {
    title: "昨日",
    key: "prve",
  },
  {
    title: "本月",
    key: "nowMonth",
  },
  {
    title: "上月",
    key: "prveMonth",
  },
]);

function setPrveDay() {}

function setNowMoneth() {}

function setprveMoneth() {}

function setDay(start, end) {
  value.value = [start.year, start.month, start.day, 0, 0, 0];
  value1.value = [end.year, end.month, end.day, 23, 59, 59];
}

function changeTime(key) {
  const yearIndex = years.findIndex((v) => v == nowDate.year);
  const prveyearIndex = years.findIndex((v) => v == nowDate.year) - 1;
  const nowMonthIndex = nowDate.month - 1;
  const nowDayIndex = nowDate.day - 1;
  const dataMap = {
    now: function () {
      return {
        start: {
          year: yearIndex,
          month: nowMonthIndex,
          day: nowDayIndex,
        },
        end: {
          year: yearIndex,
          month: nowMonthIndex,
          day: nowDayIndex,
        },
      };
    },
    prve: function () {
      const oneDay = 1000 * 60 * 60 * 24;
      const date = new Date(
        new Date(nowDate.year, nowDate.month, nowDate.day, 0, 0, 0).getTime() -
          oneDay
      );
      return {
        start: {
          year: years.findIndex((v) => v == date.getFullYear()),
          month: date.getMonth() - 1 < 0 ? 11 : date.getMonth() - 1,
          day: date.getDate() - 1,
        },
        end: {
          year: years.findIndex((v) => v == date.getFullYear()),
          month: date.getMonth() - 1 < 0 ? 11 : date.getMonth() - 1,
          day: date.getDate() - 1,
        },
      };
    },
    nowMonth: function () {
      return {
        start: {
          year: yearIndex,
          month: nowMonthIndex,
          day: 0,
        },
        end: {
          year: yearIndex,
          month: nowMonthIndex,
          day: new Date(nowDate.year, nowDate.month, 0).getDate() - 1,
        },
      };
    },
    prveMonth: function () {
      const oneDay = 1000 * 60 * 60 * 24;
      const date = new Date(
        new Date(nowDate.year, nowDate.month - 1, 0, 0, 0).getTime() - oneDay
      );
      console.log(date.getMonth());
      return {
        start: {
          year: years.findIndex((v) => v == date.getFullYear()),
          month: date.getMonth(),
          day: 0,
        },
        end: {
          year: years.findIndex((v) => v == date.getFullYear()),
          month: date.getMonth(),
          day: date.getDate(),
        },
      };
    },
  };
  const data = dataMap[key]();
  setDay(data.start, data.end);
  changeDays(false, value.value);
  changeDays(true, value1.value);

  console.log(value1.value);
  const start = returnDateString(value.value);
  const end = returnDateString(value1.value);

  emits("confirm", {
    text: `${start}——${end}`,
    start,
    end,
  });
  close();
}
let value = ref([
  years.length - 1,
  nowDate.month - 1,
  nowDate.day - 1,
  0,
  0,
  0,
]);
let value1 = ref([
  years.length - 1,
  nowDate.month - 1,
  nowDate.day - 1,
  23,
  59,
  59,
]);

let show = ref(false);
const emits = defineEmits("close", "open", "confirm");

function toggle() {
  show.value = !show.value;
  if (show.value) {
    emits("open", true);
  } else {
    emits("close", false);
  }
}

function close() {
  show.value = false;
  emits("close", false);
}

function open() {
  show.value = true;
  emits("open", true);
}

function returnDateString(arr) {
  const year = years[arr[0]];
  const month = ("0" + (arr[1] + 1)).slice(-2);
  const day = ("0" + (arr[2] + 1)).slice(-2);
  const hour = ("0" + arr[3]).slice(-2);
  const min = ("0" + arr[4]).slice(-2);
  const sen = ("0" + arr[5]).slice(-2);

  return `${year}-${month}-${day} ${hour}:${min}:${sen}`;
}

function confirm(e) {
  const start = returnDateString(value.value);
  const end = returnDateString(value1.value);
  console.log(start);
  console.log(end);
  //如果结尾时间小于开始时间
  if (new Date(start).getTime() > new Date(end).getTime()) {
    return uni.showToast({
      title: "结束时间不能小于开始时间",
      icon: "none",
    });
  }
  emits("confirm", {
    text: `${start}——${end}`,
    start,
    end,
  });
  close();
}

function returnMonthStart(arr) {
  return new Date(years[arr[0]], months[arr[1]] - 1, 1).getDate();
}

function returnMonthEnd(arr) {
  return new Date(years[arr[0]], months[arr[1]], 0).getDate();
}

function changeDays(isDays1, arr) {
  const end = returnMonthEnd(arr);
  if (end) {
    if (isDays1) {
      days1.value = new Array(end).fill(1).map((v, index) => {
        return index + 1;
      });
    } else {
      days.value = new Array(end).fill(1).map((v, index) => {
        return index + 1;
      });
    }
  }
}

function bindChange(e) {
  value.value = e.detail.value;
  changeDays(false, e.detail.value);
}

function bindChange1(e) {
  value1.value = e.detail.value;
  changeDays(true, e.detail.value);
}

function getDayDate(date = new Date(), type) {
  const now = date;
  if (type === "start") {
    const startOfDay = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate()
    );
    return startOfDay;
  }
  if (type === "end") {
    const endOfDay = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate(),
      23,
      59,
      59,
      999
    );
    return endOfDay;
  }
}

function getMonthArea(date = new Date(), type) {
  let now = date;
  let currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
  let currentMonthEnd = new Date(
    now.getFullYear(),
    now.getMonth() + 1,
    0,
    23,
    59,
    59,
    999
  );
  if (type === "start") {
    return currentMonthStart;
  }
  if (type === "end") {
    return currentMonthEnd;
  }
  return {
    start: currentMonthStart,
    end: currentMonthEnd,
  };
}

function nullFunction() {}

function pickend(e) {
  console.log(e);
}

function pickend1(e) {
  console.log(e);
}
defineExpose({
  close,
  open,
  confirm,
  toggle,
});
</script>

<style lang="scss">
.fastTime {
  .item {
    background-color: rgb(247, 247, 247);
    padding: 6rpx 40rpx;
    border-radius: 6rpx;
    font-size: 32rpx;
  }
}

.top {
  border-bottom: 1px solid #eee;
}

.close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30rpx;
}

.mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);

  .box {
    position: absolute;
    background-color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 16rpx 16rpx 0 0;
  }
}

.fixed_b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30rpx;
  z-index: 100;
  background-color: #fff;
}

.picker-view {
  width: 750rpx;
  height: 300rpx;
}

.item {
  line-height: 34px;
  text-align: center;
}
</style>
