<template>
  <q-card
    class="bg-white q-pb-md window-height column"
    :style="{
      width: $q.platform.is.desktop ? '500px' : '100vw',
      height: $q.platform.is.desktop ? '100%' : '100vh',
    }"
  >
    <div class="q-pt-md q-px-lg row items-center justify-between">
      <div class="row items-center">
        <q-icon
          v-if="$q.platform.is.mobile"
          class="q-pr-sm"
          style="margin-left: -15px"
          name="navigate_before"
          size="30px"
          @click="close"
        ></q-icon>
        <span class="text-h6">{{ $t("hotel.car.subtitle") }}</span>
      </div>
      <span class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12">
        {{ $t("hotel.car.title") }}
        <span class="din text-orange-10">{{ cars.length }}</span>
        {{ $t("hotel.car.title1") }}
        <span class="din text-primary">{{ HotelLength }}</span>
        {{ $t("hotel.car.title2") }}
      </span>
      <div
        v-if="$q.platform.is.desktop"
        v-close-popup
        class="q-pa-sm"
        :class="{
          'draw-close': $q.platform.is.desktop,
          'draw-close-modile': $q.platform.is.mobile,
        }"
      >
        <q-icon name="close" size="26px"></q-icon>
      </div>
    </div>
    <q-separator color="grey-3" class="q-mt-md" />
    <q-scroll-area
      v-if="cars && cars.length > 0"
      :thumb-style="scrollStyle.thumbStyle"
      :bar-style="scrollStyle.barStyle"
      class="col"
    >
      <div
        class="q-pa-sm rounded-borders bg-dark text-grey-2 q-mx-md q-mt-md"
        v-for="(x, xi) in cars"
      >
        <div class="text-subtitle1 din text-weight-bolder">{{ x.Date }}</div>
        <q-list bordered separator>
          <q-slide-item
            class="rounded-borders"
            v-for="(y, i) in x.Hotels"
            :class="{ 'q-mt-sm': i > 0 }"
            :right-color="rightColor"
            @right="onRight"
          >
            <template v-slot:right>
              <div
                :class="{
                  'opera-box': $q.platform.is.desktop,
                  'opera-box-mobile': $q.platform.is.mobile,
                  column: $q.platform.is.mobile,
                  'justify-center': $q.platform.is.mobile,
                  'q-px-md': $q.platform.is.mobile,
                }"
              >
                <div
                  class="text-center full-width"
                  :class="{
                    row: $q.platform.is.mobile,
                    'items-center': $q.platform.is.mobile,
                  }"
                >
                  <q-btn
                    rounded
                    icon="mode"
                    color="primary"
                    dense
                    unelevated
                    :class="{
                      'q-mr-md': $q.platform.is.desktop,
                      'q-mr-lg': $q.platform.is.mobile,
                    }"
                    @click="setEditorHandler(y)"
                  />
                  <q-btn
                    rounded
                    icon="delete"
                    color="negative"
                    dense
                    unelevated
                    @click="removeHotelHandler(xi, i)"
                  />
                </div>
              </div>
            </template>
            <div class="q-pa-sm rounded-borders bg-light-blue-1 hotel-car-item">
              <div
                v-if="$q.platform.is.desktop"
                :class="{
                  'opera-box': $q.platform.is.desktop,
                  'opera-box-mobile': $q.platform.is.mobile,
                  column: $q.platform.is.mobile,
                  'justify-center': $q.platform.is.mobile,
                  'q-px-md': $q.platform.is.mobile,
                }"
              >
                <div
                  class="text-center full-width"
                  :class="{
                    column: $q.platform.is.mobile,
                    'items-center': $q.platform.is.mobile,
                  }"
                >
                  <q-btn
                    rounded
                    icon="mode"
                    color="primary"
                    dense
                    unelevated
                    :class="{
                      'q-mr-md': $q.platform.is.desktop,
                      'q-mb-lg': $q.platform.is.mobile,
                    }"
                    @click="setEditorHandler(y)"
                  />
                  <q-btn
                    rounded
                    icon="delete"
                    color="negative"
                    dense
                    unelevated
                    @click="removeHotelHandler(xi, i)"
                  />
                </div>
              </div>
              <div
                class="text-subtitle2 text-weight-bolder text-primary row items-center"
              >
                <div class="col">
                  <span
                    class="listCarHotelName"
                    :style="{ width: $q.platform.is.desktop ? '300px' : '200px' }"
                    >{{ y.HotelName }}</span
                  >
                </div>
                <div class="f12">
                  <span>{{ $t("hotel.shopping.TheSelected") }}</span>
                  <span class="text-red q-px-sm">{{ y.SumPeople }}</span>
                  <span>{{ $t("unit.ren") }}</span>
                  <span class="text-red q-px-sm">{{ y.Total }}</span>
                  <span>{{ $t("hotel.shopping.between") }}</span>
                </div>
              </div>
              <div
                class="q-mt-sm q-pb-sm text-dark"
                style="
                  border-top: 1px dashed var(--q-primary);
                  border-bottom: 1px dashed var(--q-primary);
                "
              >
                <div
                  class="row no-wrap items-center q-mt-sm"
                  :class="{ 'justify-between': $q.platform.is.mobile }"
                  v-for="z in y.DetailList"
                >
                  <div
                    :class="{
                      'col-6': $q.platform.is.desktop,
                      row: $q.platform.is.desktop,
                      column: $q.platform.is.mobile,
                    }"
                  >
                    <span
                      :class="{
                        'col-6': $q.platform.is.desktop,
                        'q-mb-xs': $q.platform.is.mobile,
                      }"
                      >{{ z.RoomName }}</span
                    >
                    <span :class="{ 'col-6': $q.platform.is.desktop }"
                      >{{ moneyFormat(z.Unit_Price) }}/{{ $t("unit.ren") }}</span
                    >
                  </div>
                  <div
                    :class="{
                      col: $q.platform.is.desktop,
                      row: $q.platform.is.desktop,
                      column: $q.platform.is.mobile,
                    }"
                  >
                    <span
                      :class="{
                        'col-4': $q.platform.is.desktop,
                        'text-right': $q.platform.is.mobile,
                        'q-mb-xs': $q.platform.is.mobile,
                      }"
                    >
                      <span>{{ z.PeopleNumber }}</span>
                      <span>{{ $t("unit.ren") }}</span>
                      <span>{{ z.Number }}</span>
                      <span>{{ $t("hotel.shopping.between") }}</span>
                    </span>
                    <span class="col text-right"
                      >{{ $t("hotelorder.xj") }}：{{
                        moneyFormat(z.Unit_Price * z.PeopleNumber)
                      }}</span
                    >
                  </div>
                </div>
              </div>
              <div
                class="q-mt-sm row items-center text-dark justify-between q-pb-sm"
                v-if="y.TaxesPrice > 0 || y.PriceInTangTax > 0"
                style="border-bottom: 1px dashed var(--q-primary)"
              >
                <span v-if="y.TaxesPrice > 0"
                  >{{ $t("hotelorder.col.t") }}：{{ y.TaxesPrice }}*{{ y.SumPeople
                  }}{{ $t("unit.ren") }}={{
                    moneyFormat(y.TaxesPrice * y.SumPeople)
                  }}</span
                >
                <span v-if="y.PriceInTangTax > 0"
                  >{{ $t("hotelorder.col.t2") }}：{{ y.PriceInTangTax }}*{{ y.SumPeople
                  }}{{ $t("unit.ren") }}={{
                    moneyFormat(y.PriceInTangTax * y.SumPeople)
                  }}</span
                >
              </div>
              <div class="q-mt-sm text-right text-primary">
                {{ $t("hotel.groupPrice") }}：{{ moneyFormat(y.Money) }}
              </div>
            </div>
          </q-slide-item>
        </q-list>
      </div>
    </q-scroll-area>

    <div v-else class="q-pa-lg row items-center justify-center">
      {{ $t("noneData") }}
    </div>
    <div class="column q-px-md" v-if="cars && cars.length > 0">
      <div
        class="col"
        :class="{
          row: $q.platform.is.desktop,
          wrap: $q.platform.is.desktop,
          'justify-between': $q.platform.is.desktop,
          'q-py-lg': $q.platform.is.desktop,
          'q-py-sm': $q.platform.is.mobile,
        }"
      >
        <div :class="{ 'col-6': $q.platform.is.desktop }">
          <n-select
            filterable
            :class="{
              'q-pr-sm': $q.platform.is.desktop,
              'q-pb-lg': $q.platform.is.desktop,
              'q-pb-sm': $q.platform.is.mobile,
            }"
            v-model:value="parameters.OrderType"
            :placeholder="$t('hotel.car.OrderType')"
            :options="cacheHotels"
            max-tag-count="responsive"
            size="large"
            value-field="ID"
            label-field="Name"
          />
        </div>
        <div
          v-if="parameters.OrderType == 2"
          :class="{ 'col-6': $q.platform.is.desktop }"
        >
          <q-input
            :class="{
              'q-pl-sm': $q.platform.is.desktop,
              'q-pb-lg': $q.platform.is.desktop,
              'q-pb-sm': $q.platform.is.mobile,
            }"
            v-model="parameters.TCNum"
            reverse-fill-mask
            dense
            type="text"
            standout
            :label="$t('hotel.car.inputText') + $t('hotel.car.TCNum')"
            ref="TCNumRef"
            :rules="
              $q.platform.is.desktop
                ? [(val) => !!val || $t('hotel.car.inputText') + $t('hotel.car.TCNum')]
                : [(val) => !!val || '']
            "
          />
        </div>
        <template v-if="parameters.OrderType == 1">
          <div :class="{ 'col-6': $q.platform.is.desktop }">
            <q-input
              v-model="parameters.ContactName"
              :class="{
                'q-pl-sm': $q.platform.is.desktop,
                'q-pb-lg': $q.platform.is.desktop,
                'q-pb-sm': $q.platform.is.mobile,
              }"
              reverse-fill-mask
              dense
              type="text"
              standout
              :label="$t('hotel.car.inputText') + $t('hotel.car.ContactName')"
              ref="ContactNameRef"
              :rules="
                $q.platform.is.desktop
                  ? [
                      (val) =>
                        !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactName'),
                    ]
                  : [(val) => !!val || '']
              "
            />
          </div>
          <div :class="{ 'col-6': $q.platform.is.desktop }">
            <q-input
              v-model="parameters.ContactNumber"
              :class="{
                'col-6': $q.platform.is.desktop,
                'q-pr-sm': $q.platform.is.desktop,
                'q-pb-lg': $q.platform.is.desktop,
                'q-pb-sm': $q.platform.is.mobile,
              }"
              reverse-fill-mask
              dense
              type="text"
              standout
              :label="$t('hotel.car.inputText') + $t('hotel.car.ContactNumber')"
              ref="ContactNumberRef"
              :rules="
                $q.platform.is.desktop
                  ? [
                      (val) =>
                        !!val ||
                        $t('hotel.car.inputText') + $t('hotel.car.ContactNumber'),
                    ]
                  : [(val) => !!val || '']
              "
            />
          </div>
        </template>
        <q-input
          :class="{
            'col-6': $q.platform.is.desktop,
            'q-pl-sm': $q.platform.is.desktop && parameters.OrderType == 1,
            'q-pr-sm': $q.platform.is.desktop && parameters.OrderType == 2,
            'q-pb-lg': $q.platform.is.desktop,
          }"
          v-model="parameters.Remark"
          reverse-fill-mask
          dense
          filled
          clearable
          type="text"
          :label="$t('hotel.car.Remark')"
        />
      </div>
      <div
        :class="{
          row: $q.platform.is.desktop,
          'justify-between': $q.platform.is.desktop,
          'items-center': $q.platform.is.desktop,
        }"
      >
        <div class="text-negative text-weight-bolder din">
          <span class="text-weight-thin">{{ $t("hotel.car.sumPrice") }}：</span>

          <span class="text-h6">{{ moneyFormat(parameters.Money) }}</span>
          <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
            <span class="fz14">円</span>
          </template>
          <template
            v-if="
              cars &&
              cars.length > 0 &&
              cars[0].Hotels &&
              cars[0].Hotels.length > 0 &&
              cars[0].Hotels[0].DetailList &&
              cars[0].Hotels[0].DetailList.length > 0
            "
          >
            <span class="fz14"> {{ cars[0].Hotels[0].DetailList[0].CurrencyCode }}</span>
          </template>
        </div>
        <div
          :class="{
            row: $q.platform.is.mobile,
            'justify-end': $q.platform.is.mobile,
            'q-pt-sm': $q.platform.is.mobile,
          }"
        >
          <q-btn
            color="primary"
            size="md"
            unelevated
            class="q-px-xl"
            :loading="loading"
            @click="submit"
          >
            <div class="ellipsis">
              {{ $t("hotel.car.submit") }}
            </div>
          </q-btn>
        </div>
      </div>
    </div>
  </q-card>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  provide,
  onMounted,
  inject,
  watch,
  onBeforeUnmount,
  computed,
} from "vue";
import { useI18n } from "vue-i18n";
import useScrollModule from "../../../module/scrollbar/scrollModule";
import { DirtionmaryHelper } from "../../../config/dictionary";
import message from "../../../utils/message";
import { ApiResult } from "../../../@types/enumHelper";
import HotelService from "../../../api/hotel";
import { moneyFormat, dateDiffer } from "../../../utils/tools";
import { getStoreGetter } from "../../../store/utils";
import { useQuasar } from "quasar";
import { NSelect } from "naive-ui";
export default defineComponent({
  components: { NSelect },
  props: {},
  setup(props, context) {
    const HotelLength = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_LENGTH) as any;
    const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as any;
    const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any;
    // cars&&cars.value.forEach((item:any,index:Number) => {
    //   if(dateDiffer(item.Date)<15){
    //     cars.value.splice(index,1)
    //   }
    // });
    const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
    HotelLength.value = cars.value.length;
    const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any;
    const { t } = useI18n();
    const TCNumRef = ref(null) as any;
    const ContactNameRef = ref(null) as any;
    const ContactNumberRef = ref(null) as any;
    const $q = useQuasar();
    const data = reactive({
      scrollStyle: {} as any,
      addNum: 1,
      parameters: {
        Money: 0,
        DetailList: [] as Array<any>,
        Remark: "",
        OrderType: 1, //订单类型 1散客 2团队
        TCNum: "", //=团队时 传递 组团号
        ContactName: "", //=散客时 传递 联系人
        ContactNumber: "", //=散客时 传递 联系人电话
        OrderId: 0,
      },
      currentIndex: 0,
      currentI: 0,
      currentS: 0,
      RemainingInventory: 0,
      loading: false,
      cacheHotels: [
        { Name: t("hotel.car.scattered"), ID: 1 },
        { Name: t("hotel.car.group"), ID: 2 },
      ],
    });
    data.scrollStyle = useScrollModule().scrollStyle;
    const info = ref(null);
    const panning = ref(false);
    //   今天购买数量
    watch(cars.value, (n, o) => {
      methods.getMoney();
    });
    const slideRatio = ref({
      left: 0,
      right: 0,
    });
    const rightColor = computed(() =>
      slideRatio.value.right >= 1 ? "bg-light-blue-1" : "blue-1"
    );
    let timer;
    function finalize(reset) {
      timer = setTimeout(() => {
        reset();
      }, 1000);
    }
    onBeforeUnmount(() => {
      clearTimeout(timer);
    });
    const methods = {
      onRight({ reset }) {
        finalize(reset);
      },
      close() {
        context.emit("close");
      },
      getMoney() {
        data.parameters.Money = 0;
        cars.value.forEach((item: any) => {
          item.Hotels.forEach((t: any) => {
            data.parameters.Money += t.Money;
          });
        });
      },
      submit() {
        let temp = JSON.parse(JSON.stringify(cars.value));
        if (data.loading) return;
        let flag = false;
        if (data.parameters.OrderType == 1) {
          ContactNameRef.value.validate();
          ContactNumberRef.value.validate();
          flag = !ContactNameRef.value.hasError && !ContactNumberRef.value.hasError;
        } else {
          TCNumRef.value.validate();
          flag = !TCNumRef.value.hasError;
        }
        if (!flag) return;
        data.loading = true;
        data.parameters.DetailList = [] as Array<any>;
        temp.forEach((x: any) => {
          x.Hotels.forEach((y: any) => {
            y.RoomList = JSON.parse(JSON.stringify(y.DetailList));
            delete y.DetailList;
            data.parameters.DetailList.push(y);
          });
        });
        data.loading = true;
        HotelService.SetCustomerOrder(data.parameters)
          .then((r) => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              message.successMsg(`${t("success")}`);
              localStorage.removeItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE);
              cars.value = [];
              orderstatus.value = true;
              HotelLength.value = 0;
              context.emit("success");
            } else {
              message.errorMsg(r.data.message);
            }
            data.loading = false;
          })
          .catch((e) => {
            message.errorMsg(e.message);
            data.loading = false;
          });
      },
      removeHotelHandler(x: number, y: number) {
        $q.dialog({
          title: t("dialog.titles.hotel"),
          message: `${t("dialog.contents.hotel.t1")} ${cars.value[x].Date} ${t(
            "dialog.contents.hotel.t2"
          )}${cars.value[x].Hotels[y].HotelName}`,
          cancel: true,
          persistent: true,
        }).onOk(() => {
          if (cars.value[x].Hotels.length == 1) {
            cars.value.splice(x, 1);
          } else {
            cars.value[x].Hotels.splice(y, 1);
          }
          HotelLength.value = cars.value.length;
        });
      },
      setEditorHandler(x: any) {
        editor.value = x;
        context.emit("close");
      },
    };
    methods.getMoney();
    return {
      ...toRefs(data),
      cars,
      TCNumRef,
      ContactNameRef,
      ContactNumberRef,
      moneyFormat,
      info,
      panning,
      rightColor,
      HotelLength,
      b2bUserInfo,
      ...methods,
    };
  },
});
</script>

<style>
.ListCar-title {
  white-space: wrap;
}
.hotel-car-item {
  position: relative;
  overflow: hidden;
}
.hotel-car-item .opera-box {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  display: none;
  background: rgba(0, 0, 0, 0.3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hotel-car-item:hover .opera-box {
  display: flex;
}
.hotel-car-item .opera-box-mobile {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  right: 0;
  display: none;
  background: rgba(0, 0, 0, 0.3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.listCarHotelName {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
