<template>
  <view class="leave_cont">
    <view class="ul">
      <view class="li">
        <view class="flex1">
          <picker mode="date" :value="start_date" :start="start_date" :end="other" @change="bindDateChange">
            <view class="date">{{ start_date }}</view>
          </picker>
        </view>
      </view>
      ~
      <view class="li">
        <view class="flex1">
          <picker mode="date" :value="start_date" :start="start_date" @change="bindDateChange2">
            <view class="date">{{ end_date }}</view>
          </picker>
        </view>
      </view>
      <image class="canlendar-icon" src="@/static/images/calendar.png"></image>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs } from "vue";

const currentDate = getDate({
  format: true,
});

const data = reactive({
  start_date: "请选择开始日期",
  end_date: "请选择结束日期",
  other: "请输入",
});

const { start_date, end_date, other } = toRefs(data);

// 选择日期
function bindDateChange(e) {
  start_date.value = e.target.value;
}
function bindDateChange2(e) {
  end_date.value = e.target.value;
  other.value = end_date.value;
}
// 获取当前时间
function getDate(type) {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  if (type === "start") {
    year = year - 60;
  } else if (type === "end") {
    year = year + 2;
  }
  month = month > 9 ? month : "0" + month;
  day = day > 9 ? day : "0" + day;
  return `${year}-${month}-${day}`;
}

</script>

<style>
.leave_cont .ul {
  border: 1px solid red;
  margin: 24rpx 24rpx;
  border: 1px solid #e8f1ff;
  border-radius: 36rpx;
  line-height: 70rpx;
  position: relative;
}

.leave_cont .ul .li {
  display: inline-block;
  text-align: center;
  width: 35%;
}

.leave_cont .ul .li text {
  padding: 40rpx 0;
  font-size: 30rpx;
  color: #666666;
  text-align: center;
}

.leave_cont .ul .li .flex1 {
  flex: 1;
  color: #999999;
  font-size: 32rpx;
}

.date {
  height: 42rpx;
}
.canlendar-icon {
  width: 36rpx;
  height: 36rpx;
  position: absolute;
  right: 30rpx;
  top: 16rpx;
}
</style>
