<template>
  <view class="font-bold text-base bg-white" @click="toChange">
    <view class="border-b-solid border-b-1 border-b-gray-200">
      <view class="mx-3 flex items-center h-100">
        <view class="w-168">有效期</view>
        <view class="ml-a flex items-center">
          <view v-if="startDate && endDate" class="mr-2">
            <view>{{ timeFormat(startDate, 'yyyy-mm-dd') }}</view>
            <view>{{ timeFormat(endDate, 'yyyy-mm-dd') }}</view>
          </view>
          <up-icon name="arrow-right"></up-icon>
        </view>
      </view>
    </view>
    <view v-if="weekDays" class="border-b-solid border-b-1 border-b-gray-200">
      <view class="mx-3 flex items-center h-100">
        <view class="w-168">有效日</view>
        <view class="ml-a mr-2">{{ $lock.convertWeekDaysToChineseString(weekDays) }}</view>
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
    <view v-if="startDate && endDate">
      <view class="mx-3 flex items-center h-100">
        <view class="w-168">有效时间</view>
        <view class="ml-a mr-2"
          >{{ timeFormat(startDate, 'h:M') }}-{{ timeFormat(endDate, 'h:M') }}</view
        >
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { timeFormat } from 'uview-plus'
  import { useBasicStore } from '@/stores/basic'
  import { useLockStore } from '@/stores/lock'

  const $basic = useBasicStore()
  const $lock = useLockStore()

  const startDate = ref(null)
  const endDate = ref(null)
  const weekDays = ref(null)

  const emits = defineEmits(['change'])

  const toChange = () => {
    $basic.routeJump({
      name: 'cycleDate',
      params: {
        info: JSON.stringify({
          startDate: startDate.value,
          endDate: endDate.value,
          weekDays: weekDays.value
        })
      },
      events: {
        change(data) {
          startDate.value = data.startDate
          endDate.value = data.endDate
          weekDays.value = data.weekDays
          emits('change', data)
        }
      }
    })
  }
</script>
