<!--
 * @Date: 2023-12-14 10:04:23
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-14 18:25:51
 * @FilePath: /meihuaApp/src/components/calendarSelect.vue
 * @Description: 文件描述
-->
<template>
  <view class="calendar-select-page" @tap="openCalendar">
    <nut-row gutter="10">
      <nut-col span="10">
        <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
        <view style="color: #6A4925; font-size: 0.95rem; font-weight: bold;">2023.12.07 星期四</view>
      </nut-col>
      <nut-col span="4">
        <view style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
          共1晚
        </view>
      </nut-col>
      <nut-col span="10">
        <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
        <view style="color: #6A4925; font-size: 0.95rem; font-weight: bold;">2023.12.08 星期五</view>
      </nut-col>
    </nut-row>
  </view>
  <nut-calendar
    v-model:visible="state.isVisible"
    :default-value="state.date"
    type="range"
    :start-date="`2019-12-22`"
    :end-date="`2021-01-08`"
    @close="closeSwitch('isVisible')"
    @choose="setChooseValue"
    @select="select"
  >
  </nut-calendar>
</template>

<script setup>
import { ref, reactive } from 'vue'

const state = reactive({
  date: ['2019-12-23', '2019-12-26'],
  isVisible: false
});

const openSwitch = (param) => {
  state[`${param}`] = true;
};
const closeSwitch = (param) => {
  state[`${param}`] = false;
};
const setChooseValue = (param) => {
  // state.date = [...[param[0][3], param[1][3]]];
  console.warn(param);
};
const select = (param) => {
  console.warn(param);
};

const show = ref(false);

const openCalendar = () => {
  show.value = true;
  state.isVisible = true;
}

const onClose = () => {
  show.value = false
}

const onConfirm = (event) => {
  console.warn(event);
}
</script>

<style lang="less">
.calendar-select-page {
  background-color: #F6ECE1;
  border-radius: 0.5rem;
  padding: 1rem;
}
</style>