<template>
  <div>
    <div class="box">
      <el-card :body-style="{ padding: '0px' }" class="mt20">
        <div slot="header">
          <div class="bg-lineg">{{ language == 0 ? '化妆预约下单' : 'Make Up booking order' }}</div>
        </div>

        <el-card>
          <div class='order-header'>
            <div class="title">
              {{formData.name }}
            </div>
            <el-row class="hz-row" >
              <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
                <OfficeBuilding/>
              </el-icon>
              {{ language==0?'成立':'Established for'}} <span class="sign" style="padding-top: 2px">6</span>{{language==0?'年':'years'}} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
              <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
                <UserFilled/>
              </el-icon>
              <span class="sign" style="padding-top: 2px"> {{ formData.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
              <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
                <PhoneFilled/>
              </el-icon>
              <span style="padding-top: 2px">
            {{ formData.contact }}
          </span>
              &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
              <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
                <LocationFilled/>
              </el-icon>
              {{formData.rearks}}

            </el-row>
            <hr style="border:1px solid #D3D1F6 ">
            <el-row class="table">
              <div style="margin-right: 50px">
                <el-image style="width:55px;height: 70px " :src="fillImgUrl(formDatas.photos?.split(',')[0]) " fit="cover" />
              </div>
              <el-row style="flex: 1">
                <div style="flex: 1">
                  <div style="margin-bottom: 20px;">{{ language==0?'预约日期':"Appointment date" }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{route.query.date}}</span></div>
                  <div>{{ language==0?'套餐名称':"Package name" }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{ formDatas.name }}</span></div>
                </div>

                <div style="flex: 1">
<!--                  <div style="margin-bottom: 20px">预约时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">09:00~12:00</span> </div>-->
                  <div style="margin-bottom: 20px">{{ language==0?'上门化妆':'Home makeup' }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{ formDatas.goHome==1?'是':'否' }}</span></div>
                  <div >{{ language==0?' 价格':"Price" }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">{{language==0? '￥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div>
                </div>

                <div style="flex: 1">
                  <div style="margin-bottom: 20px">{{ language==0?'套餐说明':"Package description" }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{formDatas.introduction}}</span></div>
<!--                  <div >价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">{{language==0? '￥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div>-->
                </div>
              </el-row>
            </el-row>
          </div>
          <br>
          <div class="yu">{{ language==0?'预约时间':'Appointment time' }}</div>
          <el-row style="width: 100%" >
            <el-button v-for="v in radioList"  @click="handleRadio(v)" :disabled="v.num-v.counts<=0" class="radioBox"  :class="{'radioBoxbg':v.flag}">
              <div>
                <div>{{ v.nameStart }}-{{ v.nameEnd }}</div>
                <div v-if="language==0">(剩余: <span class="sing">{{ v.num-v.counts }}</span> 个)</div>
                <div v-else>(Remaining: <span class="sing">{{ v.num-v.counts }}</span> )</div>
              </div>
            </el-button>
          </el-row>
          <br>
          <div class="yu">{{ language==0?'预约信息':"Reservation information" }}</div>
          <br>
          <div class="form-order">
            <el-form :model="form" style="width: 800px" :label-width="language==0?'140px':'200px'" :rules="rules" ref="formRef">
              <el-form-item :label="language==0?'预约数量':'Number Of Reservations'" required prop="num">
                <el-input-number style="width: 100%" v-model.trim="form.num" :min="1" :max="10"  @change="changNum"/>
              </el-form-item>
              <el-form-item :label="language==0?'预约联系人':'Name'" required prop="contacts">
                <el-input v-model.trim="form.contacts" :min="1" :max="10" />
              </el-form-item>
              <el-form-item :label="language==0?'联系电话':'Contact Number'" required prop="phone">
                <el-input v-model.trim="form.phone" :min="1" :max="13" />
              </el-form-item>
              <el-form-item :label="language==0?'备注':'Remarks'"  prop="remarks">
                <el-input type="textarea" :rows="3" v-model.trim="form.remarks" :min="1" :max="10" />
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-card>

      <el-card class="mt30">
        <el-row justify="space-between" align="middle">
          <el-col :span="12">
            <label>{{ language == 0 ? '共计金额' : 'Total' }}：
              <span class=" text-warning">  {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{
                  money
                }}</span></span>
            </label>
          </el-col>
          <el-col :span="12" class="text-right">
            <el-button type="primary" class="btn-lineG w200px" size="large" round @click="submit">
              {{ language == 0 ? '确认付款' : 'Book Now' }}
            </el-button>
          </el-col>
        </el-row>
      </el-card>
      <div style="height: 60px;"></div>

    </div>
  </div>
</template>

<script setup>
import {useRouter, useRoute} from "vue-router";
import {ref, reactive, onMounted,getCurrentInstance} from "vue";
import {useStorage} from "@vueuse/core/index";
import {checkResidueRoom, getBaseInfoByActiveId, newsSubmitOrderHotel, submitOrderMeal} from "@/apiPc/booking"
import * as booking from "@/apiPc/booking"
import dayjs from 'dayjs'
import {ElMessage, ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user";
import {formatDate} from "/@/utils";
const { proxy } = getCurrentInstance()
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const room = ref({})
const form = ref({
  num: '1',
  roomNum: 0,
  addNum: 0,
  ddDate: '14:00',
  phone: user?.phonenumber || '',
})
const formData=ref({})
const formDatas=ref({})
const timeVal=ref(null)
const money = ref(0)
const rules = ref({
  num: [
    { required: true, message: language.value==0?'预约数量不能为空':"phone is required", trigger: 'blur' },
  ],
  contacts: [
    { required: true, message:language.value==0?'请输入预约联系人':'phone is required', trigger: 'blur' },
  ],
  phoned: [
    { required: true, message: language.value==0? '请输入联系电话':"phone is required", trigger: 'blur' },
  ],

})
const radioList=ref([])

onMounted(() => {
  console.log(route.query)
  getData()
  getRadioList()
})

function getData() {
  booking.makeUpDetail({ activityId: route.params.cptId,
    studioId:route.params.id}).then(res => {
    formData.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

getScheduleList()
function getScheduleList() {
  booking.getActivityMealVoListByStudioId({lasId:route.params.id,lasmId:route.params.lasId}).then(res=>{
    formDatas.value={}
    res.data.forEach(v=>{
      if (v.id==route.params.lasId) formDatas.value=v
    })
    console.log(formDatas.value)
  })
}

function getRadioList(){
  booking.getMealConfList({ lasmId:route.params.lasId,currentDate:route.query.date}).then(res => {
    radioList.value = res.data
      radioList.value.forEach(item=>{
      item.flag=false
    })
    console.log(radioList.value)
  }).catch(err => {
    console.log(err)
  })
  timeVal.value={}
}

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

  if (!timeVal.value.id)return  proxy.$modal.msgError('请选择预约时间!', )
  proxy.$refs['formRef'].validate(valid=>{
    if (valid){
      form.value.total=money.value
      form.value.orderName=formData.value.name
      form.value.dcStart=route.query.date
      form.value.activeId=route.params.cptId
      form.value.asId=route.params.id
      form.value.asmId=route.params.lasId
      form.value.asmcId=timeVal.value.id
      form.value.packageName=formDatas.value.name
      form.value.timePeriod= timeVal.value.nameStart+'-'+timeVal.value.nameEnd
      console.log(form.value)
      // 提交确认
      ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
        confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
        cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
        type: 'warning'
      }).then(() => {
        booking.submitOrderMeal(form.value).then(res => {
          if (res.data) {
            if (res.data.orderId <0||res.data.total<0) {
              ElMessage.warning(language.value == 0 ? '订单库存数量不足!' : 'The order stock quantity is insufficient!')
              getRadioList()
            } else {
              //去付钱
              router.push({
                name: 'bookingPay',
                query: {
                  orderId: res.data.orderId,
                  money: res.data.total,
                  type: 'makeUp'
                }
              })
            }
          } else {
            ElMessage.warning(language.value == 0 ? '无可预订的时间' : 'No booking time available')
          }
        }).catch(err => {
          ElMessage.warning(language.value == 0 ? '无可预订的时间' : 'No booking time available')
        })
      })

    }else {
      return proxy.$message.warning(language.value == 0 ? '请填写完整信息' : 'Please fill in the complete information')
    }
  })
}

function handleRadio(v){
  timeVal.value=null
  radioList.value.forEach(t=>{
    if(v.id==t.id){
      t.flag=true
      v.flag =true
      timeVal.value=v
      changeMaony()
    }else{
      t.flag=false
    }
  })
}

function changNum (){
  changeMaony()
}
function changeMaony(){
  if(timeVal.value&&form.value.num){
    if (language.value==0){
      money.value=  formDatas.value.mealPrice * form.value.num
    }else{
      money.value=  formDatas.value.mealPriceEn * form.value.num
    }
  }

}
</script>

<style scoped lang="scss">
.bigMoney {
  font-size: 36px !important;
  font-family: 'DIN Alternate';
  font-weight: bold;
}

.bg-lineg {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
}

.leftboderTT {
  font-weight: 600;
  font-size: 16px;
  color: #453DEA;
}

.order-header{
  padding:22px 33px 0 22px;
  border: 1px solid #453DEA;
  background-color: rgba(69,61,234,0.04);
  .title{
    font-weight: 500;
    font-size: 24px;
    color: #000000;
    margin-bottom: 10px;
  }

}

.border-rr {
  border-radius: 5px;
  border: 1px solid #DCDFE6;
}

.ccitemBox {
  overflow: auto;

  label {
    margin: 10px 0;
    display: block;
    min-height: 30px;

    span {
      color: #FF8124;
      font-family: DIN Alternate;
      font-size: 24px;
    }
  }
}



.red {
  color: #FF8124;
}

.tip {
  font-size: 14px;
  color: #666;
  padding: 0 10px;
}
.form-order{
  border: 1px solid #DCDFE6;
  padding: 23px 0;
}

.yu{
  font-size: 16px;
  color: #453DEA;
  border-left: 8px solid #453DEA;
  padding-left: 10px;
  font-weight: 600;
}

.table{
  font-size: 14px;
  color: #000;
  font-weight: 400;
  padding: 19px 0;
  .span{
    color: #4C5359;
  }
}

.radioBox{
  border: 1px dashed #acacac;
  height: 60px;
  width: 156px;
  text-align: center;
  line-height: 29px;
  margin: 10px;
  padding: 0;
  span{
    width: 100%;
    height: 100%;
  }
}
.radioBoxbg{
  background-color: #ecebfc;
  border: 1px solid #453DEA;
  color:#453DEA;

}

.sing{
  color:#453DEA;
}

</style>