<template>
  <q-card
    class="bg-white q-py-lg column"
    style="max-width: 886px; min-width: 375px; width: 900px; height: 65vh"
    v-if="model && model.length > 0"
    v-for="(item, index) in model"
    :key="index"
    v-loading="loading"
  >
    <div
      class="q-px-lg q-mb-lg"
      :class="{ 'row justify-between': $q.platform.is.desktop }"
    >
      <div
        :class="{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }"
      >
        <div class="mobile-only row items-center">
          <div class="text-weight-bold fz20 ellipsis" style="width: 280px">
            {{ item.Hotel.HotelName }}{{ item.Hotel.HotelName }}{{ item.Hotel.HotelName }}
          </div>
          <q-icon
            class="text-grey-13 cursor-pointer text-right q-ml-sm"
            name="close"
            size="md"
            v-close-popup
          ></q-icon>
        </div>
        <div class="text-weight-bold fz20 ellipsis desktop-only">
          {{ item.Hotel.HotelName }}
        </div>
      </div>
      <q-icon
        class="text-grey-13 cursor-pointer desktop-only"
        name="close"
        size="md"
        v-close-popup
      ></q-icon>
    </div>
    <q-scroll-area
      :thumb-style="scrollStyle.thumbStyle"
      :bar-style="scrollStyle.barStyle"
      class="col q-px-lg"
    >
      <div
        class="col bg-white rounded-border q-mb-md"
        :class="{ 'row q-pa-lg': $q.platform.is.desktop }"
      >
        <div
          :class="{
            'col row': $q.platform.is.desktop,
            'col-12 column': $q.platform.is.mobile,
          }"
        >
          <q-img
            v-if="model.HotelPic"
            :class="{
              'col-1 q-mr-lg': $q.platform.is.desktop,
              'col-12': $q.platform.is.mobile,
            }"
            :src="model.HotelPic"
            style="display: inline-block"
            :style="{
              height: $q.platform.is.mobile ? '150px' : '130px',
              width: $q.platform.is.mobile ? '100%' : '130px',
            }"
            spinner-color="drk"
            spinner-size="20px"
            mode="cover"
            :ratio="1"
          />
          <div
            class="column"
            :class="{
              'col q-pl-lg': $q.platform.is.desktop,
              'q-pt-sm': $q.platform.is.mobile,
            }"
          >
            <div class="text-red fz18 text-weight-bold">{{ item.Hotel.HotelName }}</div>
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{
                $t("v101.scatteredOrder.shifu")
              }}</span>
              <span class="col fz14 text-weight-bold text-blick">{{
                item.Hotel.TotalPrice
              }}</span>
            </div>

            <div
              v-for="(itemrate, indexrate) in item.Hotel.RatePlanList"
              :key="indexrate"
            >
              <div class="q-pt-xs">
                <span class="text-grey-6 q-pr-lg">{{
                  $t("v101.scatteredOrder.fangxing")
                }}</span>
                <span class="text-grey-9 q-pr-lg">
                  {{ getRoomType(itemrate.BedType) }}
                </span>
              </div>
              <div class="q-pt-xs">
                <span class="text-grey-6 q-pr-lg">{{
                  $t("v103.scheduledTripDetails.itineraryDetails.canshi")
                }}</span>
                <span class="text-grey-9">
                  {{ itemrate.BreakfastType == 1 ? "不含早" : "含早" }}
                </span>
              </div>
              <div class="q-pt-xs">
                <span class="text-grey-6 q-pr-lg">{{
                  $t("v101.scatteredOrder.jiagejihua")
                }}</span>
                <span class="text-grey-9">
                  {{ itemrate.RatePlanName }}
                </span>
              </div>
              <!-- <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.lutiankefang')}}</span>
              <span class="text-grey-9">
                <template v-if="parmResult.withOpenAirBath==0">{{$t('v101.scatteredOrder.wu')}}</template>
                <template v-if="parmResult.withOpenAirBath==1">{{$t('v101.scatteredOrder.you')}}</template>
              </span>
            </div> -->
            </div>
          </div>
        </div>
      </div>
      <div :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }">
        <div
          class="col column bg-white rounded-border q-mb-md"
          :class="{ 'q-mr-lg': $q.platform.is.desktop }"
        >
          <div
            class="bg-light-blue-1 q-py-md fz14 rounded-borders row items-center text-weight-bold"
            :class="{
              'q-px-lg': $q.platform.is.desktop,
              'q-px-sm': $q.platform.is.mobile,
            }"
          >
            {{ $t("v101.scatteredOrder.yudinxinx") }}
          </div>
          <div
            class="column"
            :class="{
              'q-pa-lg': $q.platform.is.desktop,
              'q-pa-sm': $q.platform.is.mobile,
            }"
          >
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{
                $t("v101.scatteredOrder.dindanhao")
              }}</span>
              <div class="q-pl-lg">
                <span>{{ item.BookingID }}</span>
              </div>
            </div>
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{
                $t("v101.scatteredOrder.fangxingxinxi")
              }}</span>
              <div class="q-pl-lg">
                <span class="q-pr-lg">
                  {{ roomtypeName }}
                  <!-- {{parmResult?getGradeType(parmResult.gradeType):''}}{{parmResult?getRoomType(parmResult.roomType):''}} -->
                </span>
              </div>
            </div>

            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{
                $t("v101.scatteredOrder.ruzhuriqi")
              }}</span>
              <div class="q-pl-lg row items-center">
                <span
                  :class="{
                    'q-pr-lg': $q.platform.is.desktop,
                    'q-pr-xs': $q.platform.is.mobile,
                  }"
                  >{{ getformatDateStr(item.CheckInDate) }}</span
                >
                <q-separator
                  :class="{
                    'q-px-sm': $q.platform.is.desktop,
                    'q-px-xs': $q.platform.is.mobile,
                  }"
                  color="dark"
                />
                <span
                  :class="{
                    'q-pl-lg': $q.platform.is.desktop,
                    'q-pl-xs': $q.platform.is.mobile,
                  }"
                  >{{ getformatDateStr(item.CheckOutDate) }}</span
                >
              </div>
            </div>
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{
                $t("v101.scatteredOrder.fangjianshuliang")
              }}</span>
              <div class="q-pl-lg">
                <span>{{ item.NumOfRooms }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col column bg-white rounded-border q-mb-md">
          <div
            class="bg-light-blue-1 q-py-md fz14 rounded-borders row items-center justify-between"
            :class="{
              'q-px-lg': $q.platform.is.desktop,
              'q-px-sm': $q.platform.is.mobile,
            }"
          >
            <span class="text-weight-bold">{{
              $t("v101.scatteredOrder.ruzhuxinxi")
            }}</span>
          </div>
          <div
            class="column"
            :class="{
              'q-pa-lg': $q.platform.is.desktop,
              'q-pa-sm': $q.platform.is.mobile,
            }"
          >
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{
                $t("v101.scatteredOrder.yudinren")
              }}</span>
              <div class="q-pl-lg">
                <span>{{ item.Contact.Name.First + item.Contact.Name.Last }}</span>
              </div>
            </div>
            <!-- <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{$t('v101.scatteredOrder.dangqiandizhi')}}</span>
              <div class="q-pl-lg row">
                <span>{{parmResultRoomInfo.guestAddress}}</span>
              </div>
            </div> -->
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{
                $t("v101.scatteredOrder.Email")
              }}</span>
              <div class="q-pl-lg">
                <span>{{ item.Contact.Email }}</span>
              </div>
            </div>
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{
                $t("v101.scatteredOrder.dianhua")
              }}</span>
              <div class="q-pl-lg">
                <span>{{ item.Contact.Phone }}</span>
              </div>
            </div>
            <div class="row items-center no-wrap q-mb-md">
              <span class="text-grey-6 ScatteredOrderdDetail">{{
                $t("v101.scatteredOrder.kehubeizhu")
              }}</span>
              <div class="q-pl-lg">
                <span>{{ item.CustomerRequest }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </q-scroll-area>
  </q-card>
  <q-inner-loading
    :showing="loading"
    :label="$t('loading')"
    label-class="text-grey-6 f12"
  />
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  toRef,
  toRefs,
  provide,
  onMounted,
  inject,
  watch,
} from "vue";
import { useI18n } from "vue-i18n";
import { DirtionmaryHelper } from "../../../config/dictionary";
import { date } from "quasar";
import message from "../../../utils/message";
import { moneyFormat, dateDiffer } from "../../../utils/tools";
import DidaService from "../../../api/didahotel";
import { currentRouter } from "src/router";
import { HotelRate, HotelArea, useHotel } from "../../../utils/hotelRate";
import { isPhone, validatAlphabetsName } from "../../../utils/validate";
import { ApiResult } from "src/@types/enumHelper";
import useScrollModule from "../../../module/scrollbar/scrollModule";
export default defineComponent({
  components: {},
  props: ["OrderID"],
  emits: ["close"],
  setup(props, context) {
    const { t } = useI18n();

    const data = reactive({
      scrollStyle: {} as any,
      params: {
        orderId: props.OrderID,
      },
      model: {} as any,
      parmResult: {} as any,
      parmResultRoomInfo: {} as any,
      loading: false,
      RoomTypeList: [] as Array<HotelArea>, //房间等级
      scatteredRoomTypeList: [] as Array<HotelArea>, //散客房间类型
      roomtypeName: "",
    });

    data.scrollStyle = useScrollModule().scrollStyle;
    data.RoomTypeList = useHotel.getHotelRoomType();
    data.scatteredRoomTypeList = useHotel.getHotelScatRoom();

    const methods = {
      //日期格式化
      getformatDateStr(value) {
        var dt = new Date(value);
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, "0");
        let date = (dt.getDate() + 1).toString().padStart(2, "0");
        return year + "-" + month + "-" + date;
      },
      //获取房型
      getGradeType(type) {
        let gradeType = "";
        switch (parseInt(type)) {
          case 1:
            gradeType = data.RoomTypeList[0].name;
            break;
          case 2:
            gradeType = data.RoomTypeList[1].name;
            break;
          case 3:
            gradeType = data.RoomTypeList[2].name;
            break;
          case 4:
            gradeType = data.RoomTypeList[3].name;
            break;
          case 5:
            gradeType = data.RoomTypeList[4].name;
            break;
          case 6:
            gradeType = data.RoomTypeList[5].name;
            break;
        }
        return gradeType;
      },
      //获取房型
      getRoomType(roomtypeId) {
        if (roomtypeId > 0) {
          data.HotelRoomTypes.forEach((item) => {
            if (item.ID == roomtypeId) {
              this.roomtypeName = item.Name_CN;
            }
          });
        }
        return this.roomtypeName;
      },
      //获取道旅床类型列表
      getdidaBedType() {
        DidaService.GetDidaBedType({}).then((res) => {
          if (res.data.resultCode == 1) {
            data.HotelRoomTypes = res.data.data;
          }
        });
      },
      initHotel() {
        data.loading = true;
        let param = Object.assign(data.params);
        DidaService.GetDiDaBookingSearchList(param)
          .then((r) => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.model = r.data.data.BookingDetailsList;
            }
            data.loading = false;
          })
          .catch((e) => {
            data.loading = false;
            message.errorMsg(e.message);
          });
      },
    };
    methods.initHotel();
    methods.getdidaBedType();
    onMounted(() => {});

    return { ...toRefs(data), ...methods };
  },
});
</script>

<style>
.ScatteredOrderdDetail {
  width: 70px;
}
</style>
