<template>
  <div class="full-height column hotel-list">
    <q-table
      v-if="$q.platform.is.desktop"
      :loading="loading"
      :rows="hotels"
      :loading-label="$t('loading')"
      class="col sticky-header-column-table"
      flat
      :pagination="pages"
      :no-data-label="$t('noneData')"
      :columns="cols"
    >
      <template v-slot:top>
        <div class="row full-width">
          <div class="col"></div>
          <q-btn
            class="hover q-mr-md"
            v-for="(item, index) in 2"
            :class="{
              'bg-blue text-white': pages.sort == index + 1,
              'bg-grey-3': pages.sort != index + 1,
            }"
            @click="(pages.sort = index + 1), initHotels()"
          >
            {{
              index + 1 == 1
                ? $t("v101.scattered.anxingji")
                : $t("v101.scattered.anjiage")
            }}
          </q-btn>
        </div>
      </template>
      <template v-slot:body-cell-hotelName="props">
        <q-td
          class="cursor-pointer"
          :props="props"
          @click="goUrl('/scattered/didaDetails', props.row)"
        >
          <span>{{ props.row.hotelName }}</span>
        </q-td>
      </template>
      <template v-slot:body-cell-reviewRating="props">
        <q-td :props="props">
          <div class="row no-wrap items-center">
            <q-rating
              v-model="props.row.reviewRating"
              size="1.5em"
              color="orange"
              :max="5"
              icon="star_border"
              icon-selected="star"
              icon-half="star_half"
              no-dimming
              readonly
            />
            <span class="q-ml-xs" v-if="props.row.reviewRating > 0">{{
              props.row.reviewRating
            }}</span>
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-lowrateBySetCurrency="props">
        <q-td :props="props">
          <span class="q-ml-xs text-orange text-weight-bold fz18">
            <template v-if="props.row.type == 1">
              {{ props.row.lowrateBySetCurrency }}
            </template>
            <template v-else>
              {{ props.row.lowrateBySetCurrency }}
            </template>
          </span>
          <span class="text-grey-8 q-pl-xs">{{ $t("v101.scattered.qi") }}</span>
        </q-td>
      </template>

      <template v-slot:body-cell-hotelFeaturesMask="props">
        <q-td :props="props">
          <span v-for="(subItem, index) in props.row.hotelFeaturesMask" :key="index">
            <span
              class="rounded-borders bg-blue-1 text-blue q-mr-xs q-px-sm q-py-xs"
              v-if="subItem"
            >
              {{ subItem == 1 ? themeList[index].name : "" }}
            </span>
          </span>
        </q-td>
      </template>
      <template v-slot:bottom>
        <q-pagination
          class="full-width justify-end"
          v-model="pages.pageIndex"
          color="primary"
          :max="pages.pageCount"
          :input="true"
          @update:model-value="changePageHandler"
        />
      </template>
    </q-table>
    <q-table
      hide-header
      v-else
      :title="pageTitle"
      :rows="hotels"
      grid
      :columns="mobileCols"
      row-key="name"
      card-class="no-shadow bg-primary text-white"
      :pagination="pages"
      :loading="loading"
    >
      <template v-slot:top>
        <div class="row full-width">
          <div class="col"></div>
          <q-btn
            dense
            unelevated
            class="hover q-px-sm q-mr-md"
            v-for="(item, index) in 2"
            :class="{
              'bg-blue text-white': pages.sort == index + 1,
              'bg-grey-3': pages.sort != index + 1,
            }"
            @click="(pages.sort = index + 1), initHotels()"
          >
            {{
              index + 1 == 1
                ? $t("v101.scattered.anxingji")
                : $t("v101.scattered.anjiage")
            }}
          </q-btn>
        </div>
      </template>
      <template v-slot:item="props">
        <div
          @click="goUrl('/scattered/didaDetails', props.row)"
          class="rounded-borders bg-primary text-white col-12 q-mb-sm"
          style="
            padding: 12px;
            margin-left: 12px;
            margin-right: 12px;
            width: calc(100% - 24px);
          "
        >
          <div>
            <div
              style="opacity: 0.54; font-weight: 500; font-size: 12px; margin-bottom: 4px"
            >
              {{ $t("v101.scattered.titleHeard1") }}
            </div>
            <div style="font-size: 13px">{{ props.row.hotelName }}</div>
          </div>
          <div class="q-my-md">
            <div
              style="opacity: 0.54; font-weight: 500; font-size: 12px; margin-bottom: 4px"
            >
              {{ $t("v101.scattered.titleHeard2") }}
            </div>
            <div style="font-size: 13px">
              <q-rating
                v-model="props.row.reviewRating"
                size="1.5em"
                color="orange"
                :max="5"
                icon="star_border"
                icon-selected="star"
                icon-half="star_half"
                no-dimming
                readonly
              />
              <span class="q-ml-xs" v-if="props.row.reviewRating > 0">{{
                props.row.reviewRating
              }}</span>
            </div>
          </div>
          <div>
            <div
              style="opacity: 0.54; font-weight: 500; font-size: 12px; margin-bottom: 4px"
            >
              {{ $t("v101.scattered.titleHeard3") }}
            </div>
            <div class="">
              <span>
                <template v-if="props.row.type == 1">
                  {{ getPrice(props.row.lowrateBySetCurrency) }}
                </template>
                <template v-else>
                  {{ props.row.lowrateBySetCurrency }}
                </template>
              </span>
              <span class="q-pl-xs">{{ $t("v101.scattered.qi") }}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:bottom>
        <q-pagination
          class="full-width justify-end"
          v-model="pages.pageIndex"
          color="primary"
          :max="pages.pageCount"
          :input="true"
          @update:model-value="changePageHandler"
        />
      </template>
    </q-table>
  </div>
</template>

<script lang="ts">
import { useRouter } from "vue-router";
import { DirtionmaryHelper } from "../../../config/dictionary";
import message from "../../../utils/message";
import { defineComponent, inject, reactive, toRefs, watch } from "vue";
import { date, useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import DidaService from "../../../api/didahotel";
import { HotelArea, useHotel } from "../../../utils/hotelRate";
export default defineComponent({
  components: {},
  name: "list-table",
  setup() {
    const $q = useQuasar();
    const { t } = useI18n();
    const search = inject(DirtionmaryHelper.DiDaHOTEL_QUERY_PARAM) as any;
    const $router = useRouter();
    watch(search, (n, o) => {
      data.pages.pageIndex = 1;
      methods.initHotels();
    });

    const data = reactive({
      groupBookingFlg: "" as any,
      JapanIncrease: "" as any,
      travelLngLat: [] as Array<any>, //地图坐标
      themeList: [] as Array<HotelArea>,
      hotels: [] as Array<any>,
      loading: false,
      cols: [
        { name: "hotelName", label: t("v101.scattered.titleHeard1"), align: "left" },
        {
          name: "reviewRating",
          label: t("v101.scattered.titleHeard2"),
          field: (row: any) => row.reviewRating,
          align: "left",
        },
        {
          name: "lowrateBySetCurrency",
          label: t("v101.scattered.titleHeard3"),
          align: "left",
        },
        {
          name: "hotelFeaturesMask",
          label: t("v101.scattered.titleHeard5"),
          align: "left",
        },
        {
          name: "address",
          label: t("v101.scattered.titleHeard6"),
          field: (row: any) => row.address,
          align: "left",
        },
      ] as any,
      pages: {
        pageIndex: 1,
        pageSize: 10,
        pageCount: 0,
        rowsPerPage: 10,
        sort: 1,
      },
      pageTitle: "" as string | undefined,
      mobileCols: [
        {
          name: "hotelName",
          label: t("hotel.col.first"),
          field: (row: any) => row.hotelName,
        },
        {
          name: "TotalInventory",
          label: t("hotel.col.three"),
          field: (row: any) => row.TotalInventory,
        },
        {
          name: "LowerPrice",
          label: t("hotel.col.four"),
          field: (row: any) =>
            `¥${row.LowerPrice.toFixed(2)}${t("unit.jp")} {t('hotel.col.low')}`,
        },
      ],
      showPriceList: false,
      queryHotelObj: {},
      orderSubmitObj: {} as any,
      orderSubmitItemObj: {} as any,
      showOrderPreview: false,
      showHotelDetailId: 0,
    });
    data.themeList = useHotel.getHotelTheme();
    data.pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY);

    const methods = {
      initHotels() {
        data.loading = true;
        data.hotels = [];
        let dataList = [] as any[];
        data.travelLngLat = [];
        let param = Object.assign(data.pages, search);
        DidaService.GetDidaHotelListV2(param)
          .then((r) => {
            if (r.data.data.pageData) {
              dataList = r.data.data.pageData;
              data.pages.pageCount = r.data.data.pageCount;
            }

            if (dataList && dataList.length > 0) {
              //获取酒店坐标
              dataList.forEach((x) => {
                x.reviewRating = parseFloat(x.reviewRating);
                x.lowrateBySetCurrency = parseFloat(x.lowrateBySetCurrency);
                let obj = {
                  lat: x.latitudeW,
                  lng: x.longitudeW,
                  name: x.hotelName,
                };
                data.travelLngLat.push(obj);
                x.type = 1;
              });
            }
            data.hotels = dataList;
            data.hotels.forEach((x) => {
              if (isNaN(x.reviewRating)) {
                x.reviewRating = 0;
              }
              x.hotelFeaturesMask = x.hotelFeaturesMask.split(",");
            });
            //按价格升序
            if (data.pages.sort == 2) {
              data.hotels.sort(methods.getSortFun("asc", "lowrateBySetCurrency"));
            }
            //按照星级降序
            if (data.pages.sort == 1) {
              data.hotels.sort(methods.getSortFun("desc", "reviewRating"));
            }
            data.groupBookingFlg = r.data.data.parmResult.groupBookingFlg;
            data.JapanIncrease = r.data.data.parmResult.JapanIncrease;
            data.loading = false;
          })
          .catch((e) => {
            data.loading = false;
          });
      },
      //数组排序
      getSortFun(order, sortBy) {
        var ordAlpah = order == "asc" ? ">" : "<";
        var sortFun = new Function(
          "a",
          "b",
          "return a." + sortBy + ordAlpah + "b." + sortBy + "?1:-1"
        );
        return sortFun;
      },
      //获取价格
      getPrice(price) {
        return price;
        //return Math.ceil(price / data.JapanIncrease);
      },
      changePageHandler(n: any) {
        data.pages.pageIndex = n;
        methods.initHotels();
      },
      showHotelDetailHandler(hotelId: number) {
        data.showHotelDetailId = hotelId;
      },
      goUrl(url: string, row: {}) {
        url = `${url}/${row.hotelId}`;
        window.open(url, "_blank");
      },
    };
    methods.initHotels();
    return { ...toRefs(data), ...methods };
  },
});
</script>

<style></style>
