<template>
  <div >
    <el-calendar v-model="currentDate" :range="calendarRange">
      <template #header="{date}">
        <el-row style="width: 100%">
          <el-col :lg="7" class="forPc">
          </el-col>
          <el-col :lg="10" class="forPc">
            <el-row justify="center" align='middle'>
<!--              <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
              <div class="cTitle">
<!--                <el-date-picker-->
<!--                  v-model="value2"-->
<!--                  type="daterange"-->
<!--                  range-separator="-"-->
<!--                  start-placeholder="Start date"-->
<!--                  end-placeholder="End date"-->
<!--                  format="YYYY-MM-DD"-->
<!--                  value-format="YYYY-MM-DD"-->
<!--                  size="small"-->
<!--                  @change="changee"-->
<!--                />-->
<!--                <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
                {{date}}
              </div>
<!--              <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
            </el-row>
          </el-col>
          <el-col :lg="7" :xs="24">
            <div style="text-align: right;padding-right: 10px">
              <el-date-picker
                v-model="currentDate1"
                type="date"
                placeholder="YYYY-MM-DD"
                format="YYYY-MM-DD"
                size="small"
                @change="dateChange"
                :disabled-date="disabledDateRZ"
                :clearable='false'
              />
            </div>
          </el-col>
        </el-row>
      </template>
      <template #date-cell="data">
        <div :class="data.data.day==query.currentDate?'primaryDate date':'date'"  @click="selectDate(data.data.day)">
          {{ data.data.day.slice(8, 10) }}
        </div>
      </template>
    </el-calendar>

    <div class="calendarList">
      <ul v-loading="loading">
        <li v-for="n in schList" :key="n.id" >
          <el-row :gutter="15" align="top">
            <el-col :lg="3" :sm="6" :xs="6">
              <el-image style="width: 90px;height: 115px;max-width: 100%;" :src="fillImgUrl(n.photos?.split(',')[0]) "
                        fit="contain" />
            </el-col>
            <el-col :lg="21" :sm="18" :xs="18">
              <el-row class="hz-title">{{ n.name }}</el-row>
              <el-row justify="space-between" class="hz-p" :gutter="15" align="middle">
                    <el-col :lg="5" :sm="6" :xs="24">
                      <div @click="hazelView(n)" class="forPc" :class="{esp_3:n.active}" >
                        {{ language==0?'套餐说明':'Package Description' }}:
                        <span style="margin-right: 20px">{{n.introduction}}</span>
                      </div>
                      <div @click="hazelView(n)" class="forWei" :class="{esp:n.active}" >
                        {{ language==0?'套餐说明':'Package Description' }}:
                        <span style="margin-right: 20px">{{n.introduction}}</span>
                      </div>
                    </el-col>

                    <el-col :lg="4" :sm="6" :xs="24">
                      <div>{{ language==0?'剩余':'' }}<span class="sign">{{ n.num-n.counts }}</span>{{language==0?'名额':'Places Remaining' }} </div>
                    </el-col>
                    <el-col :lg="5" :sm="6" :xs="24">
                      <div v-if="language==0"  class="esp">地点:{{n.address}}</div>
                      <div v-else class="esp">address:{{n.addressEn}}</div>
                    </el-col>

                    <el-col :lg="4" :sm="12"  :xs="12" class="zh-margin">
                      <span style="font-size: 24px">{{ language==0?'¥':'€'}}  </span>
                      {{language==0?n.mealPrice:n.mealPriceEn}}
                    </el-col>
                    <el-col :lg="6" :sm="12" :xs="12" class="forPc">
                      <el-button :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()"
                                 class="btn-lineG w200px mauto" round type="primary" size="large" @click="goMatch(n)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
                    </el-col>
                    <el-col :lg="6" :sm="12" :xs="12" class="forWei">
                      <el-button :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()"
                                 class="btn-lineG forWei mt10" round type="primary" size="small" @click="goMatch(n)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
                    </el-col>
              </el-row>
            </el-col>
          </el-row>
        </li>
      </ul>
      <el-empty v-if="schList.length== 0"
                style="--el-empty-padding:0;--el-empty-description-margin-top:0"
                :image="`/img/order_no.png`"
                :image-size="200"/>
    </div>
    <Dailog ref="dialogRef"></Dailog>
  </div>
</template>

<script setup>
import {ref,onMounted,getCurrentInstance} from "vue";
import {dayjs} from "element-plus";
import {useRoute,useRouter} from 'vue-router'
import * as booking from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
import useUserStore from "/@/store/modules/user";
import {getBaseInfoByActiveId} from "@/apiPc/booking";
import{ElMessageBox} from 'element-plus'
import Dailog from "/@/viewsPc/booking/component/dailog.vue";
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route=useRoute()
const currentDate = ref(new Date())
const currentDate1 = ref(new Date())
const calendarRange = ref([dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())])
const schList = ref([])
const loading = ref(false)
const formTime=ref()
const {proxy} = getCurrentInstance()
const query = ref({
  lasId:route.params.id,
})
const value2=ref('')

onMounted(() => {
  getBaseInfoByActiveId(route.params.cptId).then(res=>{
    formTime.value = res.data || null
  }).catch(err=>{
    console.log(err)
    formTime.value = null
  }).finally(()=>{
    getData()
    getScheduleList()
  })
})

function getData(){
  if (!formTime.value.mealStart) return
  const toDay=dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
  const start=dayjs(formTime.value.mealStart).valueOf()
  if(toDay<start){
    currentDate.value= currentDate1.value= query.value.currentDate = dayjs(start).format('YYYY-MM-DD')
  }else{
    currentDate.value= currentDate1.value = query.value.currentDate = dayjs(toDay).format('YYYY-MM-DD')
  }
  calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]
}

function getScheduleList() {
  loading.value = true
  query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD')
  if(!query.value.currentDate)return proxy.$message.error('请选择时间')
  booking.getActivityMealVoListByStudioId(query.value).then(res=>{
    loading.value = false
    schList.value = res.data
    schList.value.forEach(item=>item.active=true)
  })
}

function disabledDateRZ(date) {
  if (formTime.value) {
    const toDay=dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
    const start=dayjs(formTime.value.mealStart).valueOf()
    const end=dayjs(formTime.value.mealEnd).valueOf()
    if (toDay<start) {
      return date.getTime()<start||date.getTime()>end
    } else if(toDay>start&&toDay <end) {
      return date.getTime()<toDay||date.getTime()>end
    }else return true
  }
}

function selectDate(date) {
  currentDate1.value= currentDate.value=dayjs(date).toDate()
  console.log(date)
  getScheduleList()
}

function dateChange(){
  currentDate.value=currentDate1.value
  calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]
  getScheduleList()
}

function hazelView(n){
  proxy.$refs['dialogRef'].open(n.details)
}

function goMatch(n) {
  if (!user) {
    useUserStore().setVisitor()
    return
  }

  ElMessageBox.confirm(language.value==0?`你当前所预约的时间为${query.value.currentDate}是否确定？`:`Your current appointment is ${query.value.currentDate}. Are you sure?`,{type:'warning'})
    .then(() => {
      router.push({
        name: 'makeUpOrder',
        params: {
          lasId: n.id
        },
        query: {
          date: dayjs(currentDate.value).format('YYYY-MM-DD')
        }
      })
    })
    .catch(() => {
      // catch error
    })



}

</script>

<style scoped lang="scss">
.forWei{display: none}
.el-calendar {
  --el-calendar-border: none;
  --el-calendar-cell-width: 40px;
  text-align: center;
  --el-text-color-regular: #8E8D94;

  :deep(.el-calendar__header) {
    justify-content: center;
    padding: 0 0 10px
  }

  :deep(.el-calendar__body) {
    border: 1px solid #F0F0F0;
    padding: 0
  }

  :deep(.el-calendar-table .el-calendar-day) {
    padding: 1px;
  }

  :deep(.el-calendar-table td.is-selected) {
    background: transparent;
  }

  :deep(.el-calendar__button-group) {
    display: none;
  }

  :deep(.el-calendar-table thead th) {
    padding: 5px 0 0
  }

  .primaryDate {
    color: #fff;
    background: linear-gradient(90deg, #8623FC, #453DEA);
  }

  .date {
    margin: auto;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
  }
}

.calendarList {
  border: 1px solid #F0F0F0;
  padding: 12px 20px;
  overflow: auto;
  height: 625px;

  ul {
    li {cursor: pointer;
      background: #F6F9FE;
      margin: 7px 0 7px 20px;
      position: relative;
      padding: 13px;
      border-radius: 10px;
      font-weight: 500;
      font-size: 15px;

      label {
        color: #453DEA;
        margin-right: 15px;

        &::before {
          content: '';
          background: #fff;
          left: -17px;
          top: 0px;
          bottom: 0;
          margin: auto;
          border-radius: 50%;
          width: 2px;
          height: 2px;
          position: absolute;
          z-index: 1
        }
      }
    }

    li::before {
      content: '';
      background: linear-gradient(0deg, #8623FC, #453DEA);
      border-radius: 50%;
      width: 8px;
      height: 8px;
      position: absolute;
      left: -20px;
      top: 0;
      bottom: 0;
      margin: auto;
      z-index: 1;
    }

    li::after {
      content: '';
      left: -16px;
      width: 1px;
      height: 100%;
      background: #EBEBEB;
      position: absolute;
      top: 20px
    }

    //li:hover {
    //  color: #fff;
    //  background: linear-gradient(-90deg, #8623FC, #453DEA);
    //
    //  label {
    //    color: #fff;
    //  }
    //}
  }
}

.hz-title{
  font-size: 20px;
  font-weight: 400;
  color: #000;
  margin-bottom: 10px;
}

.zh-margin{
  font-weight: bold;
  font-size: 32px;
  color: #FF8124;
}
.hz-p{
  font-size: 15px;
  color: #4C5359;
  font-weight: 400;
}

:deep(.el-calendar__header) {
  background: linear-gradient(90deg, #8623FC, #453DEA);
  height: 50px;
  line-height: 50px;
}

.canBtn{
  color: #453DEA;
  border-radius: 2px;
  width: 22px;
  height: 22px;
  line-height: 26px;
  text-align: center;
  background-color: #fff;
  margin: 0 16px -2px 16px;
  cursor:pointer
}

.cTitle{
  color: #fff;
  font-size: 20px;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .forPc{display: none!important;}
  .forWei{display: block}
  .hz-title{font-size: 16px}
  .hz-p{font-size: 12px;}
  .zh-margin{font-size: 20px;
    span{font-size: 16px!important;}
  }
  .calendarList{padding: 0;
    ul li{margin: 0}
  }
}
</style>