<template>
  <div class="container">
    <div class="page">
      <div style="margin-top: 350px;">

        <van-field v-model="userName" clearable placeholder="请输入姓名">
          <template #label>
            <div style="color: #E5E5E5;">
              预约人姓名
            </div>
          </template>
        </van-field>

        <van-field style="margin-top: 20px;" readonly type="number" clearable placeholder="">
          <template #label>
            <div style="color: #E5E5E5; width: 200px;display: flex;align-items: center;">
              <div>
                用餐人数
              </div>
              <van-stepper style="margin-left: 30px;z-index: 999;" v-model="num" :min="10" theme="round"
                button-size="22" disable-input />
            </div>
          </template>
        </van-field>
        <van-field class="ts" @click="showPc" style="margin-top: 20px;" readonly v-model="standard" clearable placeholder="">
          <template #label>
            <div style="color: #E5E5E5;width: 200px;"  @click="showPc">
              <div>
                用餐标准(元/人)
              </div>


            </div>
          </template>
          <template #button>
            <div style="color: #777777;" @click="showPc">
              >
            </div>
          </template>
        
        </van-field>
        <van-field @click="showPicker = true" readonly style="margin-top: 20px;" v-model="appointDate" clearable
          placeholder="请选择预约时间">
          <template #label>
            <div style="color: #E5E5E5;">
              预约时间
            </div>
          </template>
          <template #button>
            <div style="color: #777777;">
              >
            </div>
          </template>
        </van-field>
        <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
          <!-- <van-picker-group next-step-text="下一步" title="预约日期" :tabs="['选择日期', '选择时间']" @confirm="onConfirm"
            @cancel="onCancel">
            <van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" />
            <van-time-picker v-model="currentTime" />
          </van-picker-group> -->
          <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate"
            @confirm="onConfirm" @cancel="onCancel" />
        </van-popup>
        <van-field rows="3" type="textarea" autosize style="margin-top: 20px;" v-model="remark" clearable
          placeholder="请填写备注">
          <template #label>
            <div style="color: #E5E5E5;">
              备注
            </div>
          </template>

        </van-field>


      </div>
      <van-button v-if="userName && appointDate && num" @click="confirmYuyue" style="width: 92%;margin-top: 30px;"
        color="#1936C9">确认预约</van-button>
      <van-button v-else color="#464646" style="width: 92%;margin-top: 30px;">确认预约</van-button>
      <div style="margin-top: 20px;color: #959595; font-size: 14px;">
        到预约时间未消费则餐券作废
      </div>
    </div>
    <van-dialog v-model:show="showsuccess" :show-confirm-button="false">
      <template #title>
        <img src="@/assets/success.png" style="position: absolute;width: 64px;height: 64px;left: 40%;top: 0;" />
      </template>
      <div class="success-content">
        <div style="font-weight: bold;">预约成功</div>
        <div style="color: rgba(0, 0, 0, 0.40);margin-top: 10px;">您已预约 {{ dateTxt }} 用餐</div>
        <div style="color: rgba(0, 0, 0, 0.40)">用餐人数 {{ mealPer }} 人</div>
        <div style="color: rgba(0, 0, 0, 0.40);font-size: 14px;position: absolute;bottom: 13px;">到预约时间未消费则餐券作废</div>
      </div>
    </van-dialog>
    <van-dialog v-model:show="showfail" :show-confirm-button="true">
      <template #title>
        <img src="@/assets/fail.png" style="position: absolute;width: 64px;height: 64px;left: 40%;top: 0;" />
      </template>
      <div class="success-content" style="height: 180px;">
        <div style="font-weight: bold;">预约失败</div>
        <div style="color: rgba(0, 0, 0, 0.40);margin-top: 10px;">预约已满，不可预约</div>

      </div>
    </van-dialog>
    <van-popup v-model:show="showYc" destroy-on-close position="bottom">
            <van-picker title="标题" :columns="columns" @confirm="onYSConfirm" @cancel="onYSCancel" />
          </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getUserInfo, addMeal } from '@/api/login'
const showPicker = ref(false)
const currentDate = ref([])
const currentTime = ref([])
const minDate = ref(new Date(new Date().setDate(new Date().getDate() + 1)))
const maxDate = ref(new Date(2026, 11, 31))
const showsuccess = ref(false)
const showfail = ref(false)
const appointDate = ref('')
const num = ref(10)
const remark = ref('')
const userName = ref('')
const standard = ref(400)
const dateTxt = ref('')
const mealPer = ref('')
const showYc = ref(false)
const columns = ref([
  {
    text: '400',
    value: 400
  },
  {
    text: '500',
    value: 500
  },
  {
    text: '600',
    value: 600
  }
])
const onYSConfirm = (value) => {
  console.log(value)
  standard.value = value.selectedValues[0]
  showYc.value = false
}
const onYSCancel = () => {
  showYc.value = false
}
const showPc = () => {
  showYc.value = true
}
const onConfirm = () => {

  // showPicker.value = false
  appointDate.value = currentDate.value.join('-') + ' 18:00'
  showPicker.value = false
  console.log(appointDate.value)
}
const onCancel = () => {
  showPicker.value = false
}
const confirmYuyue = async () => {
  await addYuyue()
  // showsuccess.value = true
}
// 新增预约
const addYuyue = async () => {
  if (!appointDate.value) {
    showToast('请选择预约时间')
    return
  }
  if (!num.value) {
    showToast('请输入用餐人数')
    return
  }
  if (!userName.value) {
    showToast('请输入预约人姓名')
    return
  }

  try {
    const res = await addMeal({
      appointDate: appointDate.value,
      num: parseInt(num.value),
      remark: remark.value,
      userName: userName.value.trim(),
      standard: standard.value
    })

    if (res.status === 0) {
      // showsuccess.value = true
      await geYYtUserInfo()
      router.push('/success')
    } else {
      showToast({
        message: res.msg,
        position: 'top'
      })
      showfail.value = true
    }
  } catch (error) {
    showfail.value = true
  }
}


const route = useRoute()
const router = useRouter()

// 获取预约信息
const geYYtUserInfo = async () => {
  const res = await getUserInfo({})
  if (res.status === 0) {
    if (res.data.isExist) {
      // showsuccess.value = true
      router.push('/success')
      dateTxt.value = res.data.appointDate
      mealPer.value = res.data.num
      appointDate.value = res.data.appointDate
      num.value = res.data.num
      remark.value = res.data.remark
      userName.value = res.data.userName
      standard.value = res.data.standard
    } else {
      if (res.data.isOver) {
        showfail.value = true
      }
    }

  } else {
    showfail.value = true
  }
}
onMounted(async () => {
  // 如果没登陆退回到登录
  if (!localStorage.getItem('token')) {
    router.push('/login')
    return
  }
  await geYYtUserInfo()
})
</script>
<style>
.van-toast--text {
  background: rgba(0, 0, 0, 0.7) !important;
}
</style>
<style lang="less" scoped>
.container {
  width: 100%;

  background-image: url('@/assets/bg2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}
.ts {
 /deep/ .van-cell__title{
margin-right: 80px;
 }
}

.page {
  height: 100vh;
  padding: 31px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.van-field {
  width: 800px;
  background: none;
}

.van-cell-group {
  background: none;
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  height: 500px;
  border-radius: 20px 20px 0 0;
}

/deep/ .van-cell__title {
  margin-right: 0;
}

/deep/ .van-field__control {
  color: #E5E5E5 !important;
}

/deep/ .van-dialog {
  background: none;
}

::v-deep .van-field__control::-webkit-input-placeholder {
  color: #898989;

}

/deep/ .van-dialog__confirm {
  color: #46299D;
}
/deep/ .van-stepper__input{
  color: #E5E5E5;
}

</style>