<template>
  <div class="box-border">
    <div class="flex items-center pl-16 w-full h-44 pt-12">
      <div class="w-2 h-14 bg-[#FF9300] mr-8"></div>
      <h1 class="text-sm font-bold">填写游记信息</h1>
    </div>
    <div class="flex items-center justify-center">
      <van-field
        v-model="departureTime"
        :label-width="labelWidth"
        name="calendar"
        clearable
        autocomplete="off"
        placeholder="请选择出发时间"
        @click="showCalendar = true"
      >
        <!--  :rules="[{ required: true, message: '请选择出发时间' }]" -->
        <template #label>
          <div
            class="w-full box-border flex items-center text-16 h-full font-400 text-[#000]/[0.9]"
          >
            出发时间
          </div>
        </template>
        <template #right-icon>
          <div class="w-24 h-24">
            <van-image width="100%" height="100%" :src="calendar" />
          </div>
        </template>
      </van-field>
      <van-calendar
        color="#FE8E2C"
        :min-date="minDate"
        :max-date="maxDate"
        title="请选择出发时间"
        type="single"
        v-model:show="showCalendar"
        @confirm="onConfirm"
      />
    </div>

    <van-field
      :label-width="labelWidth"
      v-model="countTimes"
      name="countTimes"
      autocomplete="off"
      clearable
      placeholder="请输入您的天数 例：4天"
    >
      <!-- :rules="[{ required: true, message: '请输入您的天数' }]" -->
      <template #label>
        <span class="text-16 font-400 text-[#000]/[0.9]">出发天数</span>
      </template>
    </van-field>
    <van-field
      :label-width="labelWidth"
      v-model="role"
      label="人物关系"
      clearable
      autocomplete="off"
      placeholder="例：情侣"
    ></van-field>

    <van-field
      is-link
      v-model="endPlace"
      :label-width="labelWidth"
      clearable
      readonly
      autocomplete="off"
      placeholder="目的地"
      @click="showPicker = true"
      :rules="[{ required: true }]"
    >
      <template #label>
        <span class="text-16 font-400 text-[#000]/[0.9]">
          目的地

          <span class="text-16 text-[#D54941]">*</span>
        </span>
      </template>
    </van-field>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker
        :columns="placeOptions"
        :columns-field-names="placeOptionProps"
        @confirm="onConfirmAddr"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!-- <van-cascader
        v-model="endPlace"
        title="请选择所在地区"
        :options="placeOptions"
        :field-names="placeOptionProps"
        @confirm="onConfirmAddr"
        @cancel="showPicker = false"
      /> -->

    <!--  @finish="onConfirmAddr"  -->
    <!--  field-names=""  :options="placeOptions" -->

    <van-field name="rate" :label-width="labelWidth" label="推荐指数">
      <template #input>
        <van-rate
          color="#ffd21e"
          :icon="rate"
          void-icon="star"
          void-color="#eee"
          v-model="recommendationRate"
          clearable
        />
      </template>
    </van-field>

    <van-field
      :label-width="labelWidth"
      v-model="averageCost"
      name="averageCost"
      autocomplete="off"
      clearable
      maxlength="10"
      label="平均费用"
      placeholder="请输入平均费用"
    ></van-field>

    <van-field
      :label-width="labelWidth"
      is-link
      v-model="travelMode"
      clearable
      readonly
      autocomplete="off"
      label="出行方式"
      placeholder="请选择出行方式"
      @click="showtravelMode = true"
    ></van-field>
    <van-popup v-model:show="showtravelMode" destroy-on-close position="bottom">
      <van-picker
        :columns="travelModeOptions"
        :columns-field-names="travelModeOptionsProps"
        @confirm="onConfirmTravelMode"
        @cancel="showtravelMode = false"
      />
    </van-popup>

    <van-field
      :label-width="labelWidth"
      v-model="travelNumber"
      label="游玩人数"
      clearable
      autocomplete="off"
      placeholder="请输入游玩人数"
    ></van-field>
  </div>
</template>

<script setup>
import calendar from '~/assets//img/note-create/calendar.png'
import rate from '~/assets//img/note-create/rate.svg'

const departureTime = defineModel('departureTime')
const countTimes = defineModel('countTimes')
const endPlace = defineModel('endPlace')
const endPlaceId = defineModel('endPlaceId')
const role = defineModel('role')
const averageCost = defineModel('averageCost')
const recommendationRate = defineModel('recommendationRate')
const travelModeId = defineModel('travelMode')
const travelNumber = defineModel('travelNumber')

onMounted(() => {
  getPlaceOptions()
  getTravelModeOptions()
})

const labelWidth = '68px'
// 出发时间
const minDate = new Date(2010, 0, 1)
const maxDate = new Date()

const showCalendar = ref(false)

// 展示时间的格式
const onConfirm = (date) => {
  let year = date?.getFullYear()
  let month = date?.getMonth() + 1 // getMonth() 返回的月份从 0 开始，所以需要加 1
  let day = date?.getDate()
  month = month < 10 ? '0' + month : month
  day = day < 10 ? '0' + day : day
  departureTime.value = date ? `${year}-${month}-${day}` : ''
  showCalendar.value = false
}

let travelMode = computed(() => {
  if (travelModeId.value) {
    let travelModeOptionsItem = travelModeOptions.value.find((el) => el.id == travelModeId?.value)
    return travelModeOptionsItem?.name
  } else {
    return ''
  }
})

const placeOptionProps = {
  text: 'menuName',
  value: 'id',
  children: 'tourWriteBelongTabVoList'
}

const travelModeOptionsProps = {
  text: 'name',
  value: 'id'
}
const showPickerTest = ref('')
// 目的地
const showPicker = ref(false)
const onConfirmAddr = ({ selectedValues, selectedOptions }) => {
  showPicker.value = false
  endPlace.value = selectedOptions[selectedValues.length - 1].menuName
  endPlaceId.value = selectedOptions[selectedValues.length - 1].id
}

// 出行方式
const showtravelMode = ref(false)
const onConfirmTravelMode = ({ selectedValues, selectedOptions }) => {
  showtravelMode.value = false
  travelModeId.value = selectedOptions[selectedValues.length - 1].id
}

// 获取目的地
const placeOptions = ref([])
async function getPlaceOptions() {
  const { data } = await request('/website/tourism/publishTravelNotes/getWriteBelongTab')
  placeOptions.value = data
}

// 获取出行方式
const travelModeOptions = ref([])
async function getTravelModeOptions() {
  const { data } = await request('/admin/app/extra/listDict?dictCode=TourTravelMode')
  travelModeOptions.value = data
}
</script>

<style lang="scss" scoped>
::v-deep .van-picker__confirm {
  color: #fd9a00;
}
</style>
