<template>
  <div>
    <q-card
      class="light-shadow q-pa-md bg-white rounded-borders q-mb-md"
      flat
      v-for="(x, index) in orders"
      :key="index"
    >
      <div class="row items-center desktop-only">
        <div class="q-mr-md">
          <q-btn
            :color="x.OrderType == 1 ? 'cyan' : 'negative'"
            unelevated
            disable
            size="sm"
            :label="`${
              x.OrderType == 1
                ? $t('hotelorder.orderType.guest')
                : $t('hotelorder.orderType.tour')
            }`"
          ></q-btn>
        </div>
        <div class="f12 text-grey-6">
          {{ $t("hotelorder.search.orderNum") }}：{{ x.OrderNo }}
        </div>
        <div class="q-ml-md">
          <q-btn
            color="dark"
            flat
            size="sm"
            :label="$t('hotelorder.copy')"
            v-if="copyId != x.OrderId"
            @click="setCopyHandler(x)"
          />
          <q-btn
            color="cyan"
            icon="check"
            outline
            size="sm"
            :label="$t('hotelorder.copyed')"
            v-else
          ></q-btn>
        </div>
        <div class="col text-center f12 text-grey-6">
          <span v-if="x.OrderType == 1"
            >{{ $t("hotelorder.search.contactInfo") }}：{{ x.ContactName }}/{{
              x.ContactNumber
            }}</span
          >
          <span v-else>{{ $t("hotelorder.search.tcNum") }}：{{ x.TCNum }}</span>
        </div>
        <div class="f12 text-grey-6">
          {{ $t("hotelorder.createTime") }}：{{ x.CreateTime }}
        </div>
        <div class="q-ml-md f12" :class="[x.typeInfo.Color]">
          <q-icon :name="x.typeInfo.Icon" />
          <span class="q-ml-sm">{{ x.typeInfo.StatusName }}</span>
        </div>
      </div>
      <div class="mobile-only">
        <div class="row justify-between">
          <div class="q-mr-md">
            <q-btn
              :color="x.OrderType == 1 ? 'cyan' : 'negative'"
              unelevated
              disable
              size="sm"
              :label="`${
                x.OrderType == 1
                  ? $t('hotelorder.orderType.guest')
                  : $t('hotelorder.orderType.tour')
              }`"
            ></q-btn>
          </div>
          <div class="q-ml-md f12" :class="[x.typeInfo.Color]">
            <q-icon :name="x.typeInfo.Icon" />
            <span class="q-ml-sm">{{ x.typeInfo.StatusName }}</span>
          </div>
        </div>
        <div class="bg-grey-2 rounded-borders q-pa-sm q-mt-md">
          <div class="row items-center justify-between">
            <div class="f12 text-grey-6">
              {{ $t("hotelorder.search.orderNum") }}：{{ x.OrderNo }}
            </div>
            <div class="q-ml-md">
              <q-btn
                color="dark"
                flat
                size="sm"
                :label="$t('hotelorder.copy')"
                v-if="copyId != x.OrderId"
                @click="setCopyHandler(x)"
              />
              <q-btn
                color="cyan"
                outline
                size="sm"
                :label="$t('hotelorder.copyed')"
                v-else
              ></q-btn>
            </div>
          </div>
          <div class="f12 text-grey-6">
            <span v-if="x.OrderType == 1"
              >{{ $t("hotelorder.search.contactInfo") }}：{{ x.ContactName }}/{{
                x.ContactNumber
              }}</span
            >
            <span v-else>{{ $t("hotelorder.search.tcNum") }}：{{ x.TCNum }}</span>
          </div>
          <div class="f12 text-grey-6">
            {{ $t("hotelorder.createTime") }}：{{ x.CreateTime }}
          </div>
        </div>
      </div>
      <div class="reactive">
        <div class="q-mt-md row">
          <q-table
            separator="cell"
            :hide-bottom="!x.Remark || !x.isMore"
            :pagination="{ rowsPerPage: 100 }"
            dense
            :rows="x.NewDetailList"
            bordered
            :columns="cols"
            class="sticky-rightrowspan-column-table light-border col no-shadow"
          >
            <template v-slot:header-cell-Room="props">
              <q-th :props="props">
                <div class="row items-center">
                  <span class="q-mr-md">{{ props.col.label }}</span>
                  <q-tooltip>{{ $t("hotelorder.priceTips") }}</q-tooltip>
                  <svg-icon icon="Code/Question-circle.svg" :size="14"></svg-icon>
                </div>
              </q-th>
            </template>
            <template v-slot:body-cell-Room="props">
              <q-td :props="props">
                <div class="room-item f12 text-grey-6" v-for="x in props.row.RoomList">
                  <span class="q-mr-md">
                    {{ x.RoomInfo.TypeName }}: {{ x.Number }} {{ $t("unit.jian") }}
                  </span>
                  <span class="q-mr-md">
                    {{ $t("hotelorder.people") }}: {{ x.PeopleNumber ?? 1 }}
                    {{ $t("unit.ren") }}
                  </span>
                  <span class="q-mr-md">
                    {{ $t("hotelorder.unitPrice") }}: {{ x.Unit_Price ?? 1 }}
                  </span>
                  <span class="q-mr-md">
                    {{ $t("hotelorder.xj") }}: {{ x.Money ?? 1 }}
                  </span>
                </div>
              </q-td>
            </template>
            <template v-slot:body-cell-RoomNo="props">
              <q-td :props="props">
                <n-tag
                  :bordered="false"
                  size="small"
                  type="error"
                  v-if="!props.row.ReserveRoomNo"
                >
                  {{ $t("hotelorder.check.un") }}
                </n-tag>
                <n-tag :bordered="false" size="small" type="success" v-else>
                  {{ props.row.ReserveRoomNo }}
                </n-tag>
              </q-td>
            </template>
            <template v-slot:body-cell-HandFittingFee="props">
              <q-td
                :props="props"
                :colspan="x.DetailList.length"
                v-if="props.rowIndex == 0"
                :rowspan="x.DetailList.length"
              >
                {{ moneyFormat(x.HandFittingFee) }}
                <div class="q-mt-sm" v-if="x.OrderStatus == 2">
                  <q-btn size="sm" dense outline color="primary" v-if="x.ContractUrl">
                    <a
                      class="text-primary"
                      style="text-decoration: none"
                      :href="x.ContractUrl"
                      >{{ $t("v101.downloadHands") }}</a
                    >
                  </q-btn>
                  <span style="display:none;" class="text-grey-500 f12">{{ $t("v101.noneHands") }}</span>
                </div>
              </q-td>
            </template>
            <template v-slot:body-cell-HotelName="props">
              <q-td :props="props">
                <div class="max-hotelname ellipsis">{{ props.value }}</div>
                <q-tooltip>{{ props.value }}</q-tooltip>
              </q-td>
            </template>
            <template v-slot:bottom="props">
              <div v-if="x.Remark" class="msl text-negative">
                {{ $t("v101.hotelRemark") }}：{{ x.Remark }}
              </div>
              <more
                v-if="x.isMore"
                @change="ViewMore(x, index)"
                :upIcon="x.upIcon"
              ></more>
            </template>
          </q-table>
        </div>
      </div>
      <div
        class="q-mt-md"
        v-if="x.OrderStatus != 3"
        :class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }"
      >
        <div
          class="pay row text-grey rounded-borders q-pa-md"
          v-if="
            $q.platform.is.desktop ||
            ($q.platform.is.mobile && expendsOrderId == x.OrderId)
          "
          :class="{ 'bg-grey-2': $q.platform.is.mobile }"
        >
          <svg-icon
            color=" svg-red"
            icon="Code/Warning-1-circle.svg"
            :size="16"
            v-if="$q.platform.is.desktop"
          ></svg-icon>
          <div class="q-ml-sm">
            <div class="q-mb-sm" v-if="x.CustomerPayType == 2 || x.CustomerPayType == 3">
              <div class="f12">
                {{ $t("hotelorder.pay.t1") }}
                <span class="text-orange">{{ x.PaymentDate }}</span>
                {{ $t("hotelorder.pay.t11") }}
                <span class="text-orange">{{ x.FinalPaymentDate }}</span>
                {{ $t("hotelorder.pay.t12") }}
              </div>
              <q-btn
                dense
                outline
                color="accent"
                size="sm"
                class="q-mt-sm"
                :label="$t('hotelorder.payinfo')"
                @click="ViewPayment"
              ></q-btn>
            </div>
            <div v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3">
              <div class="f12">
                {{ $t("hotelorder.pay.t2") }}
                <span class="text-negative">{{ x.UploadGuestDate }}</span>
                {{ $t("hotelorder.pay.t21") }}
              </div>
              <div class="row items-center f12 q-mt-sm">
                <div class="text-accent q-mr-md" v-if="x.GuestFileList.length > 0">
                  {{ x.GuestFileList[0].split("/").at(-1) }}
                </div>
                <q-btn
                  dense
                  unelevated
                  color="primary"
                  size="sm"
                  class="q-mr-sm"
                  v-if="x.GuestFileList.length > 0"
                >
                  <a
                    class="text-white"
                    style="text-decoration: none"
                    :href="x.GuestFileList[0]"
                    >{{ $t("upload.down") }}</a
                  >
                </q-btn>
                <n-upload
                  class="col"
                  :action="importFileUrl"
                  @finish="handleFinish"
                  @change="uploadHandleChange(x.OrderId)"
                  file-list-style="display:none"
                >
                  <q-btn
                    dense
                    outline
                    color="primary"
                    size="sm"
                    :label="
                      x.GuestFileList.length == 0
                        ? $t('hotelorder.uploadGuest')
                        : $t('upload.reload')
                    "
                  ></q-btn>
                </n-upload>
              </div>
            </div>
          </div>
        </div>
        <div
          class="mobile-only row items-center justify-between"
          v-if="$q.platform.is.mobile"
        >
          <div class="text-negative">
            <svg-icon
              color=" svg-red"
              icon="Code/Warning-1-circle.svg"
              :size="16"
            ></svg-icon>
            <span class="q-ml-sm">{{ $t("hotelorder.warn") }}</span>
          </div>
          <q-btn
            color="grey"
            @click="setShowWarnHander(x.OrderId)"
            dense
            size="sm"
            flat
            :label="expendsOrderId == x.OrderId ? $t('expends.off') : $t('expends.on')"
          />
        </div>
        <div class="col desktop-only"></div>
        <div
          class="rounded-borders bg-grey-2 q-pa-md"
          :class="{ 'q-mx-md': $q.platform.is.desktop, 'q-mt-md': $q.platform.is.mobile }"
        >
          <div
            class="row items-center justify-between q-mb-sm q-pb-sm"
            style="border-bottom: 1px dashed #ddd"
          >
            <div class="f12 text-grey">{{ $t("hotelorder.orderMoney") }}</div>
            <div class="dark q-ml-xl">
              <span class="din text-subtitle1">{{ moneyFormat(x.Money) }}</span>
              <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
                <span class="f12">{{ $t("unit.jp") }}</span>
              </template>
              <template v-if="b2bUserInfo && b2bUserInfo.groupId != 2">
                <span class="f12">{{ x.CurrencyCode }}</span>
              </template>
            </div>
          </div>
          <div
            class="row items-center justify-between q-mb-sm q-pb-sm"
            style="border-bottom: 1px dashed #ddd"
            v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3"
          >
            <div class="f12 text-grey">{{ $t("hotelorder.payType.t1") }}</div>
            <div class="dark">
              <span class="f12">{{ moneyFormat(x.SelfPayMoney) }}</span>
              <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
                <span class="f12">{{ $t("unit.jp") }}</span>
              </template>
              <template v-if="b2bUserInfo && b2bUserInfo.groupId != 2">
                <span class="f12">{{ x.CurrencyCode }}</span>
              </template>
            </div>
          </div>
          <div
            class="row items-center justify-between"
            v-if="x.CustomerPayType == 2 || x.CustomerPayType == 3"
          >
            <div class="f12 text-grey">{{ $t("hotelorder.payType.t2") }}</div>
            <div class="dark">
              <span class="f12">{{ moneyFormat(x.BeforeMoney) }}</span>
              <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
                <span class="f12">{{ $t("unit.jp") }}</span>
              </template>
              <template v-if="b2bUserInfo && b2bUserInfo.groupId != 2">
                <span class="f12">{{ x.CurrencyCode }}</span>
              </template>
            </div>
          </div>
        </div>
        <div
          class="rounded-borders q-pa-sm justify-between"
          :class="{
            column: $q.platform.is.desktop,
            'row items-center': $q.platform.is.mobile,
            'bg-green-1': x.OrderStatus != 1,
            'bg-grey-2': x.OrderStatus == 1,
          }"
        >
          <q-list
            dense
            v-if="x.OrderStatus == 1"
            :class="{
              'row items-center justify-between full-width': $q.platform.is.mobile,
            }"
          >
            <q-item
              class="text-negative"
              clickable
              v-close-popup
              @click="cancelConfirmHandler(x.OrderId)"
            >
              <q-item-section>
                <q-item-label>{{ $t("hotelorder.opera.cancel") }}</q-item-label>
              </q-item-section>
            </q-item>
            <q-item
              class="text-primary"
              clickable
              v-close-popup
              @click="modify(x.OrderId)"
            >
              <q-item-section>
                <q-item-label>{{ $t("hotelorder.opera.edit") }}</q-item-label>
              </q-item-section>
            </q-item>
            <q-item
              class="text-positive"
              clickable
              v-close-popup
              @click="goUrl(x.OrderId)"
            >
              <q-item-section style="display:none;">
                <q-item-label>{{ $t("v101.Listofquotation.baojiadan") }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
          <div v-else>
            <div class="f12 text-green-4">{{ $t("hotelorder.payed") }}</div>
            <div class="text-subtitle1 din text-green-14">
              {{ x.OrderIncome.toFixed(2) }}
              <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
                <span class="text-green-4 f12">{{ $t("unit.jp") }}</span>
              </template>
              <template v-if="b2bUserInfo && b2bUserInfo.groupId != 2">
                <span class="text-green-4 f12">{{ x.CurrencyCode }}</span>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div v-if="x.OrderStatus == 3">
        <div
          class="q-mt-md q-pa-sm row items-center rounded-borders bg-orange-1"
          style="border-width: 0 5px; border-style: solid; border-color: #ffb74d"
        >
          <div class="text-subtitle2 text-weight-bolder text-grey-900">
            {{ $t("v101.cancelRemark") }}：
          </div>
          <div class="f12 text-grey-600 q-ml-sm col">
            {{ x.CancelRemark ? x.CancelRemark : $t("v101.selfCancle") }}
          </div>
          <div class="f12 text-grey-900">{{ x.CancelEmpName }} {{ x.CancelTime }}</div>
        </div>
      </div>
    </q-card>
    <q-card
      class="light-shadow q-pa-md bg-white rounded-borders q-mb-md"
      v-if="pages.pageCount > 0"
      flat
    >
      <q-pagination
        class="full-width justify-end"
        v-model="pages.pageIndex"
        color="primary"
        :max="pages.pageCount"
        :input="true"
        @update:model-value="changePageHandler"
      />
    </q-card>
    <q-inner-loading
      :showing="loading"
      :label="$t('loading')"
      label-class="text-grey-6 f12"
    />
  </div>
  <div class="text-center q-mt-xl" v-if="(!orders || orders.length == 0) && !loading">
    <svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
    <div class="q-mt-md f12 text-grey-6">{{ $t("noneData") }}</div>
  </div>
  <q-dialog v-model="showBankAccount">
    <BankAccount @change="showBankAccount = false"></BankAccount>
  </q-dialog>
</template>

<script lang="ts">
import { DirtionmaryHelper } from "../../../../config/dictionary";
import { defineComponent, inject, reactive, toRefs, watch } from "vue";
import HotelService from "../../../../api/hotel";
import { ApiResult } from "../../../../@types/enumHelper";
import message from "../../../../utils/message";
import { RoomType, StandardStatus } from "../../../../@types";
import {
  getHotelOrderStatus,
  getHotelRoomType,
  moneyFormat,
} from "../../../../utils/tools";
import { useI18n } from "vue-i18n";
import svgIcon from "../../../global/svg-icon.vue";
import { copyToClipboard, useQuasar } from "quasar";
import { currentRouter } from "../../../../router";
import { UploadFileInfo, NTag, NUpload } from "naive-ui";
import { slice } from "lodash";
import BankAccount from "../../../BankAccount.vue";
import more from "../../../more.vue";
import { getStoreGetter } from "../../../../store/utils";
export default defineComponent({
  components: { svgIcon, NTag, NUpload, BankAccount, more },
  setup(props) {
    const search = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any;
    const { t } = useI18n();
    const $q = useQuasar();
    const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
    watch(search, (n, o) => {
      if (data.loading) return;
      data.loading = true;
      data.pages.pageIndex = 1;
      data.orders = [];
      methods.initOrders();
    });

    const data = reactive({
      PaymentDialog: false,
      orders: [] as Array<any>,
      status: [] as Array<StandardStatus>,
      rooms: [] as Array<RoomType>,
      uploadOrderId: 0,
      showBankAccount: false,
      pages: {
        pageIndex: 1,
        pageSize: 10,
        pageCount: 0,
      },
      loading: true,
      copyId: 0,
      expendsOrderId: 0,
      cols: [
        {
          name: "Date",
          label: t("hotelorder.col.d"),
          field: (row: any) => row.Date,
          align: "left",
        },
        {
          name: "HotelName",
          label: t("hotelorder.col.hn"),
          field: (row: any) => row.HotelName,
          align: "left",
        },
        { name: "Room", label: t("hotelorder.col.r"), align: "left" },
        { name: "RoomNo", label: t("hotelorder.col.n"), align: "left" },
        {
          name: "Tax",
          label: t("hotelorder.col.t"),
          field: (row: any) =>
            row.TaxesPrice
              ? `${(row.PeopleNum * row.TaxesPrice).toFixed(2)}`
              : t("hotelorder.col.noneTax"),
          align: "left",
        },
        {
          name: "Tax2",
          label: t("hotelorder.col.t2"),
          field: (row: any) =>
            row.PriceInTangTax
              ? `${(row.PeopleNum * row.PriceInTangTax).toFixed(2)}`
              : t("hotelorder.col.noneTax"),
          align: "left",
        },
        {
          name: "Money",
          label: t("hotelorder.col.m"),
          field: (row: any) => row.HotelMoeny.toFixed(2),
          align: "left",
        },
        {
          name: "PayType",
          label: t("hotelorder.col.pt"),
          field: (row: any) =>
            row.PayType == 1 ? t("hotelorder.payType.t1") : t("hotelorder.payType.t2"),
          align: "left",
        },
        { name: "HandFittingFee", label: t("hotelorder.hands"), align: "left" },
      ] as any,
      importFileUrl: "https://mallApi.oytour.com/api/File/UploadTencent?MallBaseId=1",
    });

    const methods = {
      ViewMore(x: any, index: Number) {
        x.upIcon = !x.upIcon;
        if (x.upIcon) {
          x.NewDetailList = JSON.parse(JSON.stringify(x.DetailList));
        } else {
          x.NewDetailList = [];
          x.DetailList.forEach((y: any, index: Number) => {
            if (index < 2) {
              x.NewDetailList.push(y);
            }
          });
        }
      },
      goUrl(id: number) {
        currentRouter.push("/hotel/offer/" + id);
      },
      ViewPayment() {
        data.showBankAccount = true;
      },
      initOrders() {
        let param = Object.assign(data.pages, search);
        //data.orders = []
        HotelService.GetHotelOrders(param)
          .then((r) => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              let arrList = function (arr: Array<any>) {
                arr.forEach((item) => {
                  item.isMore = false;
                  item.upIcon = false;
                  item.NewDetailList = [];
                });
              };
              arrList(r.data.data.pageData);
              r.data.data.pageData.forEach((x: any) => {
                x.typeInfo =
                  data.status.find((y) => y.StatusId == x.OrderStatus) ?? data.status[1];
                if (x.DetailList.length > 2) {
                  x.isMore = true;
                }
                let dataLists = [];
                x.DetailList.forEach((y: any, index: Number) => {
                  let PeopleNum = 0;
                  y.RoomList.forEach((z: any) => {
                    z.RoomInfo =
                      data.rooms.find((r) => r.TypeId == z.RoomType) ?? data.rooms[0];
                    PeopleNum += z.PeopleNumber;
                  });
                  y.PeopleNum = PeopleNum;
                  if (index < 2) {
                    dataLists.push(y);
                  }
                });
                x.NewDetailList = JSON.parse(JSON.stringify(dataLists));
              });
              data.orders = r.data.data.pageData;
              data.pages.pageCount = r.data.data.pageCount;
            } else {
              message.errorMsg(r.data.message);
            }
            data.loading = false;
          })
          .catch((e) => {
            message.errorMsg(e.message);
            data.loading = false;
          });
      },
      cancelConfirmHandler(orderId: number) {
        $q.dialog({
          title: t("dialog.titles.horder"),
          message: t("dialog.contents.horder"),
          cancel: true,
          persistent: true,
        }).onOk(() => {
          methods.cancelOrderHandler(orderId);
        });
      },
      cancelOrderHandler(orderId: number) {
        if (data.loading) return;
        data.loading = true;
        HotelService.CancelHotelOrder(orderId)
          .then((r) => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.pages.pageIndex = 1;
              this.initOrders();
              message.successMsg(`${t("success")}`);
            } else {
              message.errorMsg(r.data.message);
            }
            data.loading = false;
          })
          .catch((e) => {
            message.errorMsg(e.message);
            data.loading = false;
          });
      },
      setShowWarnHander(id: number) {
        data.expendsOrderId = id == data.expendsOrderId ? 0 : id;
      },
      changePageHandler(n: any) {
        data.pages.pageIndex = n;
        methods.initOrders();
      },
      uploadHandleChange(orderId: number) {
        data.uploadOrderId = orderId;
        data.loading = true;
      },
      init() {
        data.status = getHotelOrderStatus();
        data.rooms = getHotelRoomType();
        methods.initOrders();
      },
      modify(id: number) {
        currentRouter.push("/hotel/modify/" + id);
      },
      handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
        data.loading = false;
        let r = (options.event?.target as XMLHttpRequest).response;
        if (r) {
          let res = JSON.parse(r);
          if (res.resultCode == ApiResult.SUCCESS && res.data) {
            methods.setGuestListHandler(res.data);
          } else {
            message.errorMsg(t("upload.failed"));
            data.loading = false;
          }
        } else {
          message.errorMsg(t("upload.failed"));
          data.loading = false;
        }
      },
      setGuestListHandler(url: string) {
        HotelService.SetGuestFile(data.uploadOrderId, url)
          .then((r) => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              message.successMsg(t("upload.success"));
              let order = data.orders.find((x) => x.OrderId == data.uploadOrderId);
              order.GuestFileList = [url];
            } else {
              message.errorMsg(t("upload.failed"));
            }
            data.loading = false;
          })
          .catch((r) => {
            data.loading = false;
            message.errorMsg(r.message);
          });
      },
      setCopyHandler(order: any, ctx?: string) {
        if (ctx) {
          data.copyId = -1;
          copyToClipboard(ctx);
        } else {
          data.copyId = order.OrderId;
          copyToClipboard(order.OrderNo);
        }

        setTimeout(() => {
          data.copyId = 0;
        }, 2000);
      },
    };

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

<style>
.light-border table,
.light-border table td,
.light-border .q-table__middle,
.light-border.borders,
.light-border table th {
  border-color: #eee !important;
}

.light-border .room-item {
  height: 28px;
  line-height: 28px;
  border-bottom: 1px solid #eee;
}

.light-border .room-item:last-child {
  border-bottom: none;
}

.light-border .max-hotelname {
  width: 140px;
  height: 28px;
  line-height: 28px;
}

.orderListDialog-title {
  position: relative;
}

.orderListDialog-title span {
  font-size: 20px;
}

.orderListDialog-close {
  position: absolute;
  right: 0;
  top: -10px;
  font-size: 26px;
}

.orderListDialog-bg {
  background: #5098ff;
  border-radius: 10px;
}

.orderListDialog-img {
  background: url("../../../../assets/images/wallet.png") no-repeat right #5098ff;
  background-size: 97px 100%;
}
</style>
