<template>
  <div>
    <div class="box">
      <el-card class="mt30" v-loading="loading">
        <el-row v-if="form" class="hotel" align="middle" :gutter="20">
          <!--          <el-col :span="6">-->
          <!--            <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
          <!--          </el-col>-->
          <el-col :span="language == 0?16:24">
            <h3 class="esp flex">{{ form?.name }}
              <div class="starBox ml20">
                <img v-for="i in Number(form?.starLevel||0)" src="@/assets/booking/star.png">
              </div>
            </h3>

            <div class="tagbox">
              <span v-for="(t,index) in form?.label?.split('，')" v-show="index<4">{{ t }}</span>
              <a v-show="form?.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>
            </div>
            <div class="info">
              <el-icon>
                <Clock/>
              </el-icon>
              <span class="mr10">{{ language == 0 ? '入住时间' : 'Check-in' }}：{{ form?.checkInTime }}</span>
              <span>{{ language == 0 ? '离店时间' : 'Check-out' }}：{{ form?.checkOutTime }}</span>
            </div>
            <div class="info esp">
              <el-icon>
                <MapLocation/>
              </el-icon>
              <span>{{ form?.addName }}</span>
            </div>
            <div v-if="form?.introduction" class="info pointer">
              <div :class="showAll?'':'esp_2'" @click="showAll=!showAll" v-html="form.introduction.toString()"></div>
            </div>
          </el-col>
          <el-col :span="8" class="text-right" v-if="language == 0">
            <div class="mapBox" @click="goMap">
              <div id="map"></div>
            </div>
          </el-col>
        </el-row>
        <el-empty v-else :image="`/img/order_no.png`" :image-size="228" description=""/>
      </el-card>

      <div class="mt30">
        <el-row :gutter="20">
          <el-col :span="10">
            <div class="imgbox hotelImg">
              <el-image :src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover"
                        :preview-src-list="form?.photos?.split(',')"/>
            </div>
          </el-col>
          <el-col :span="14">
            <el-row class="h100" :gutter="20">
              <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photos?.split(',').slice(1,7)">
                <div class="imgbox hotelImg">
                  <el-image :src="fillImgUrl(p)" fit="cover"/>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <el-card class="mt30 mb60">
        <div class="lineHead">
          <ul>
            <li>
              {{ language == 0 ? '房型选择' : 'Available Rooms' }}
              <span style="margin-left: 100px" @click="initTime">
                 <el-date-picker
                     @change="getDaysBetween"
                     v-model="hotTime"
                     type="daterange"
                     :disabled-date="disabledDateRZ"
                     :placeholder="language==0?'选择日期':'Select date'"
                     format="YYYY-MM-DD"
                     :clearable="false"
                     value-format="YYYY-MM-DD"
                 />
              </span>
            </li>
          </ul>
        </div>
        <div>
          <div v-for="(r,index) in roomList" :key="index" class="room"
               v-show="language==0?r.roomPrice>0:r.roomPriceEn>0">
            <el-row :gutter="30" align="middle">
              <el-col :span="4">
                <div class="roomImg">
                  <img :src="fillImgUrl(r.photo?.split(',')[0])">
                </div>
              </el-col>
              <el-col :span="14">
                <h3 class="name">{{ r.roomType }}</h3>
                <el-row :gutter="10">
                  <el-col :span="8">{{ r.area }}m²</el-col>
                  <el-col :span="8" v-show="r.windowFlag==1"> {{ language == 0 ? '有窗' : 'With windows' }}</el-col>
                  <el-col :span="8" v-show="r.windowFlag==0"> {{ language == 0 ? '无窗' : 'Windowless' }}</el-col>
                  <el-col :span="8" v-show="r.bathroomFlag==1"> {{ language == 0 ? '热水洗浴' : 'Shower' }}</el-col>
                  <!-- <text v-show="r.bathroomFlag==0"> </text> -->
                  <el-col :span="8" v-show="r.addBedFlag==1"> {{ language == 0 ? '允许加床' : 'Extra bed' }}</el-col>
                  <el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'">
                    {{ r.breakfastNum }}{{ language == 0 ? '份早餐' : ' breakfasts' }}
                  </el-col>
                  <el-col :span="8" v-else>{{ language == 0 ? '无早餐' : 'No breakfast' }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="3">
                <div class="price">{{
                    language == 0 ? '¥' : '€'
                  }}<span>{{ language == 0 ? r.roomPrice : r.roomPriceEn }}</span></div>
              </el-col>
              <el-col :span="3">
                <el-button v-if="language==0" :disabled="!r.useCount && !hotTime" :class="{'forbid':(!r.useCount && !hotTime)}"
                           @click="goOrder(r)" class="bg-lineg button">
                  订
                  <div>{{ language == 0 ? '在线付' : 'Online' }}</div>
                </el-button>
                <el-button v-else style="color: #fff" :disabled="!r.useCount && !hotTime" class="btn-lineG w100"
                           :class="{'forbid':(!r.useCount && !hotTime)}" round type="pri mary" @click="goOrder(r)">Select
                </el-button>
                <!--                   <div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">-->
                <!--                     剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间-->
                <!--                   </div>-->
                <!--                   <div class="text-center text-primary mt10 fontsize14" v-else>-->
                <!--                     {{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms-->
                <!--                   </div>-->
              </el-col>
            </el-row>
          </div>

          <el-empty v-if="roomList.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ref, reactive, onMounted, getCurrentInstance} from "vue";
import {useRoute} from "vue-router";
import {dayjs} from 'element-plus'
import {getHotelById, getHotelRooms, checkRoomPayByUserId} from "@/apiPc/booking"
import {getBaseInfoByActiveId} from "@/apiPc/booking";

const {proxy} = getCurrentInstance()

import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import {ElMessageBox} from "element-plus";

const user = useUserStore().user
const useStore = useUserStore
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const form = ref({})
const query = ref({
  hotelId: route.query.id
})
const hotTime = ref([])
const showAll = ref(false)
const loading = ref(false)
const roomList = ref([])
const map = ref(null)
const formTime = ref({})

let baseHotTime;

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

    getData()
  })

})

function initTime() {
  if (!hotTime.value[0]) {
    hotTime.value = baseHotTime
  }
}

function getDateTime() {
  if (formTime.value) {
    if (dayjs().isBefore(dayjs(formTime.value.hqStart))) {
      // hotTime.value[0]=dayjs(formTime.value.hqStart).format('YYYY-MM-DD')
      // hotTime.value[1]=dayjs(formTime.value.hqStart).add(1,'day').format('YYYY-MM-DD')
      baseHotTime = [dayjs(formTime.value.hqStart).format('YYYY-MM-DD'), dayjs(formTime.value.hqStart).add(1, 'day').format('YYYY-MM-DD')]
    } else {
      // hotTime.value[0]=dayjs().format('YYYY-MM-DD')
      // hotTime.value[1]=dayjs().add(1,'day').format('YYYY-MM-DD')
      baseHotTime = [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'day').format('YYYY-MM-DD')]
    }
  }
}

function getData() {
  loading.value = true
  getHotelById(route.params.hotelId).then(res => {
    loading.value = false
    form.value = res.data
    initMap()
  }).catch(err => {
    console.log(err)
  })
  query.value.hotelId = route.query.id
  query.value.rzStart = hotTime.value ? hotTime.value[0] : null
  query.value.rzEnd = hotTime.value ? hotTime.value[1] : null
  getHotelRooms(query.value).then(res => {
    roomList.value = res.rows
    console.log(roomList.value)
  })
}

function initMap() {
  // const TMap = (window as any).TMap
  var center = new TMap.LatLng(form.value.latitude, form.value.longitude);//设置中心点坐标'
  var map = new TMap.Map("map", {
    center: center,//设置地图中心点坐标
    zoom: 17,   //设置地图缩放级别
  });
  var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude);//创建一个坐标
  //创建InfoWindow实例，并进行初始化
  var infowindow = new TMap.InfoWindow({
    content: form.value.address, //信息窗口内容
    position: infoWindowLocation,//显示信息窗口的坐标
    map: map,
    offset: {x: 0, y: -32}
  });
  infowindow.close();
  var marker = new TMap.MultiMarker({
    map: map,
    //样式定义
    styles: {
      "myStyle": new TMap.MarkerStyle({
        "anchor": {x: 16, y: 32}
      })
    },
    //点标记数据数组
    geometries: [{
      "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
      // "styleId": 'myStyle',  //指定样式id
      "position": new TMap.LatLng(form.value.latitude, form.value.longitude),  //点标记坐标位置
      "properties": {//自定义属性
        "title": form.value.name
      }
    }
    ]
  })
  marker.on("click", function (evt) {
    //设置infoWindow
    infowindow.open(); //打开信息窗
    infowindow.setPosition(evt.geometry.position);//设置信息窗位置
  })
}

function goOrder(room) {
  if(!hotTime.value[0]){
    proxy.$modal.msgError(language.value == 0 ?'请先选择入住日期':'Please choose the date of check-in first')
    return
  }

  ElMessageBox.confirm(language.value == 0 ? '你当前选择的入住时间为' + hotTime.value[0] + '至' + hotTime.value[1] + '，是否确定？' : 'Your current check-in time is' + hotTime.value[0] + '~' + hotTime.value[1] + 'Are you sure?', {type: 'warning'}).then({}).then(() => {
    checkRoomPayByUserId(room.hotelId).then(res => {
      if (res.data == -100) {
        ElMessageBox.confirm(
            language.value == 0 ? '你有未支付的酒店订单，是否前往个人中心查看' : 'You already have an unpaid hotel order, do you want to go to the personal center to check it?',
            language.value == 0 ? '提示' : 'Warning',
            {
              confirmButtonText: language.value == 1 ? 'Go My Reservation ' : '前往我的预订',
              // cancelButtonText: language.value==1?'Continue to book':'继续预订',
              type: 'warning',
            }
        ).then((res) => {
          console.log(res)
          router.push({
            name: 'myReservation',
          })
        })
        //  .catch((res) => {
        //   console.log(res)
        //   goNext(room)
        // })
        return
      }
      goNext(room)
    })
  })


}

function goNext(room) {
  router.push({
    name: 'hotelOrder',
    params: {
      roomId: room.id
    },
    query: {
      room: encodeURIComponent(JSON.stringify(room)),
      hotelName: form.value.name,
      checkInTime: form.value.checkInTime,
      start: hotTime.value[0],
      end: hotTime.value[1],
    }
  })
}

function getDaysBetween() {
  if (hotTime.value && hotTime.value.length == 2) {
    const d1 = dayjs(hotTime.value[0]).format('YYYY-MM-DD')
    const d2 = dayjs(hotTime.value[1]).format('YYYY-MM-DD')
    if (d1 == d2) {
      getDateTime()
      return proxy.$modal.msgError(language.value == 0 ? '入住时间跨度需要大于一天' : 'The duration of the stay must be more than one day.')
    } else {
      getData()
    }
  }
}

function disabledDateRZ(date) {
  //判读今天大与form.value.hqStart
  if (formTime.value.hqStart) {
    const today = dayjs().format('YYYY-MM-DD')
    if (formTime.value.hqStart < today) {
      return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
    } else {
      return !((date.getTime() >= dayjs(formTime.value.hqStart).valueOf()) && (date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
    }
  }
  // return true
}

function goMap() {
  return
  // var tencentMapUrl = "https://map.qq.com/";
  // window.location.href = tencentMapUrl;
  var url = `https://map.qq.com/?type=gcj02&lat=${form.value.latitude}&lng=${form.value.longitude}`
  var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + form.value.latitude + "," + form.value.longitude + "&referer=yellowpage";
  window.open(url, "_blank")
}

</script>

<style scoped lang="scss">
.room {
  background: #FAFBFD;
  margin: 20px 0 0;
  padding: 20px;
  border: 1px solid #E5E5E5;

  .name {
    font-size: 20px;
    margin: 0 0 10px;
  }

  .roomImg {
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;

    img {
      width: 100%;
      object-fit: cover;
      object-position: center;
      height: 100%;
    }
  }

  .price {
    color: #FF8124;
    font-size: 24px;

    span {
      font-size: 36px;
      font-family: "DIN Alternate"
    }
  }

  .bg-lineg {
    margin: auto;
    border-radius: 10px;
    text-align: center;
    padding: 7px 2px 2px;
    font-size: 24px;
    width: 66px;
    cursor: pointer;

    div {
      background: #fff;
      font-size: 13px;
      border-radius: 20px;
      padding: 0 10px;
      color: #453DEA;
      font-weight: 500;
    }
  }
}

.hotel {
  h3 {
    margin: 0 0 20px;
  }

  img.w100 {
    object-fit: cover;
    aspect-ratio: 16/9
  }

  .addr {
    font-size: 16px;
    color: #929AA0;
    font-weight: 400;
  }

  .price {
    margin: 0 0 25px;
    color: #FF8124;
    font-size: 18px;

    span {
      font-size: 24px;
      margin: 0 8px;
      font-family: 'DINAlternate-Bold';
      font-weight: 600;
    }

    i {
      font-style: normal;
      color: #929AA0;
    }
  }
}

:deep(.button) {
  display: block;
  height: 55px;
  width: auto;
  color: #fff;

  span {
    display: block !important;

    div {
      margin-top: 3px;
    }
  }

}

.starBox {
  img {
    display: inline-block;
    margin-right: 4px
  }
}

.tagbox {
  margin: 15px 0;

  a {
    color: #AFB5B9;
    font-size: 12px;
  }

  span {
    border-radius: 13px;
    font-size: 12px;
    padding: 4px 10px;
    margin-right: 10px;
    font-weight: 400;
  }

  span:nth-child(4n) {
    background: rgba(50, 177, 108, 0.2);
    color: rgba(50, 177, 108, 1);
  }

  span:nth-child(4n+1) {
    background: rgba(243, 152, 0, 0.2);
    color: rgba(243, 152, 0, 1);
  }

  span:nth-child(4n+2) {
    background: rgba(0, 160, 233, 0.2);
    color: rgba(0, 160, 233, 1);
  }

  span:nth-child(4n+3) {
    background: rgba(247, 64, 166, 0.2);
    color: rgba(247, 64, 166, 1);
  }
}

.mapBox {
  position: relative;
  overflow: hidden;
  height: 200px;

  #map {
    position: relative;
    left: -70px;
    width: calc(100% + 160px);
  }
}

.hotelImg {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/9;

  img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
}

.info {
  font-weight: 400;
  font-size: 14px;
  color: #929AA0;

  .el-icon {
    margin-right: 5px;
  }
}

.oddmb:nth-child(2) {
  margin-bottom: 20px;
}

.forbid {
  cursor: not-allowed !important;
  color: #a8abb2 !important;
  //filter:grayscale(1);
  background: #fff;

  div {
    color: #a8abb2 !important;
  }
}

.forbid:hover {
  box-shadow: none;
}
</style>