<template>
  <picker
    mode="multiSelector"
    :range="listData"
    range-key="label"
    @change="onChange"
    @columnchange="onColumnchange"
  >
    <view
      class="cell_content"
      :style="{
        borderTop: props.borderTop ? borderStyle : ''
      }"
    >
      <view class="title">
        {{ props?.title || '标题' }}
        <text v-if="required"> * </text>
      </view>
      <view :class="selectValue ? 'valueStyle' : 'valueStyle placeholderStyle'">
        {{ selectValue || placeholder }} <uni-icons type="right" size="15" color="#999"></uni-icons>
      </view>
    </view>
  </picker>
</template>
<style lang="scss" scoped>
.cell_content {
  padding: 16rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    color: #333333;
    font-size: 29rpx;
    padding: 25rpx 0;
    text {
      color: #f00;
    }
  }
  .valueStyle {
    font-size: 28rpx;
  }
  .placeholderStyle {
    color: #ccc;
  }
}
</style>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { getTheFutureDay, getCurrentHour, generateTimeSlots } from '@/common/libraries/day'
import { onShow } from '@dcloudio/uni-app'
const borderStyle = '1rpx solid #eee'
const placeholder = '请选择'
interface EnumItem {
  label?: string
  value?: string
}
const props = defineProps([
  'Enums',
  'title',
  'pickerIndex',
  'value',
  'borderTop',
  'required',
  'valueExpectStartTime',
  'valueExpectEndTime',
  'icon',
  'iconSize',
  'valueDefault'
])
const listData = ref<any>([])
const selectValue = ref('')
const emit = defineEmits(['change', 'update:valueExpectStartTime', 'update:valueExpectEndTime'])
const onChange = (e: any) => {
  let res = e?.detail?.value
  let label_str = listData.value[0][res[0]]
  let label_end = listData.value[1][res[1]]
  console.log(e, 'e')
  let str_time = `${label_str?.value} ${label_end?.str}`
  let end_time = `${label_str?.value} ${label_end?.end}`
  selectValue.value = `${label_str?.label}(${label_end?.label})`

  emit('update:valueExpectStartTime', str_time)
  emit('update:valueExpectEndTime', end_time)
  emit('change', {
    str_time,
    end_time
  })
}

watch(
  () => props?.valueDefault,
  newVal => {
    selectValue.value =  ''
    console.log('打开props.value', newVal)
  }
)

const setDayList = () => {
  let dayInfo = getCurrentHour()
  let day0 = getTheFutureDay(0)
  let day1 = getTheFutureDay(1)
  let day2 = getTheFutureDay(2)
  let timeSlots = generateTimeSlots()
  listData.value = [
    [
      { label: '今天', value: day0 },
      { label: '明天', value: day1 },
      { label: '后天', value: day2 }
    ],
    timeSlots
  ]
  console.log(dayInfo, 'day1')
}

const onColumnchange = (e: any) => {
  if (e?.detail?.column === 0) {
    if (e?.detail?.value) {
      let val = listData.value[e?.detail?.column][e?.detail?.value]?.value
      let timeSlots = generateTimeSlots(val)
      listData.value[1] = timeSlots
      console.log(timeSlots, 'timeSlots')
    } else {
      let timeSlots = generateTimeSlots()
      listData.value[1] = timeSlots
      console.log(timeSlots, 'timeSlots')
    }
  }
  console.log(e, 'e')
}

onMounted(() => {
  selectValue.value =  ''
  setDayList()
})
</script>
