<template>
  <div class="column full-height">
    <div class="col">
      <div class="text-right">
        <q-btn
          color="primary"
          icon="refresh"
          :label="$t('v103.scheduledTripDetails.reselect')"
          @click="resetHandler"
          flat
        />
      </div>
      <div class="text-grey-6 f12 q-my-md">
        {{ $t("v103.scheduledTripDetails.selectionquantity") }}
      </div>
      <div class="row items-end">
        <div class="col" :class="{ column: $q.platform.is.mobile }">
          <div>
            <span class="text-subtitle2 text-weight-bold">{{
              $t("v103.scheduledTripDetails.cr")
            }}</span>
            <span class="text-grey-6 f12 q-ml-sm"
              >(12-99{{ $t("v103.scheduledTripDetails.age") }})</span
            >
          </div>
          <div v-if="$q.platform.is.mobile">
            <span class="text-grey-7 product-price" style="font-size: 13px">
              {{ domain == `id.oytour` ? "IDR" : "CNY" }} {{ p.originalB2BPrice }} /{{
                $t("v103.scheduledTripDetails.each")
              }}
            </span>
          </div>
        </div>
        <div class="row items-end">
          <span
            v-if="$q.platform.is.desktop"
            class="text-grey-7 product-price"
            style="font-size: 13px"
          >
            {{ domain == `id.oytour` ? "IDR" : "CNY" }} {{ p.originalB2BPrice }} /{{
              $t("v103.scheduledTripDetails.each")
            }}
          </span>
          <q-input
            style="width: 150px"
            @input="changePeople"
            v-model="chosenObj.crCount"
            class="col"
            :class="{
              'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
            }"
            mask="#"
            reverse-fill-mask
            dense
            standout
            readonly
            :disable="!p.remainNum"
          >
            <template v-slot:prepend>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="remove"
                @click="addPeople('crCount', -1)"
              />
            </template>
            <template v-slot:append>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="add"
                @click="addPeople('crCount', 1)"
              />
            </template>
          </q-input>
        </div>
      </div>

      <div class="row items-end q-mt-md" v-if="p.isSupportChildren == 1">
        <div class="col" :class="{ column: $q.platform.is.mobile }">
          <div>
            <span class="text-subtitle2 text-weight-bold">{{
              $t("v103.scheduledTripDetails.et")
            }}</span>
            <span class="text-grey-6 f12 q-ml-sm"
              >(2-11{{ $t("v103.scheduledTripDetails.age") }},{{
                $t("v103.scheduledTripDetails.noroom")
              }})</span
            >
          </div>
          <div v-if="$q.platform.is.mobile">
            <span class="text-grey-7 product-price" style="font-size: 13px">
              {{ domain == `id.oytour` ? "IDR" : "CNY" }}
              {{ p.originalB2BPrice - p.childNoNeedPrice }} /{{
                $t("v103.scheduledTripDetails.each")
              }}
            </span>
          </div>
        </div>
        <div class="row items-end">
          <span
            v-if="$q.platform.is.desktop"
            class="text-grey-7 product-price"
            style="font-size: 13px"
          >
            {{ domain == `id.oytour` ? "IDR" : "CNY" }}
            {{ p.originalB2BPrice - p.childNoNeedPrice }} /{{
              $t("v103.scheduledTripDetails.each")
            }}
          </span>
          <q-input
            style="width: 150px"
            @input="changePeople"
            v-model="chosenObj.etbzcCount"
            class="col"
            :class="{
              'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
            }"
            mask="#"
            reverse-fill-mask
            dense
            standout
            readonly
            :disable="!p.remainNum"
          >
            <template v-slot:prepend>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="remove"
                @click="addPeople('etbzcCount', -1)"
              />
            </template>
            <template v-slot:append>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="add"
                @click="addPeople('etbzcCount', 1)"
              />
            </template>
          </q-input>
        </div>
      </div>

      <div class="row items-end q-mt-md" v-if="p.isSupportChildren == 1">
        <div class="col" :class="{ column: $q.platform.is.mobile }">
          <div>
            <span class="text-subtitle2 text-weight-bold">{{
              $t("v103.scheduledTripDetails.et")
            }}</span>
            <span class="text-grey-6 f12 q-ml-sm"
              >(2-11{{ $t("v103.scheduledTripDetails.age") }},{{
                $t("v103.scheduledTripDetails.room")
              }})</span
            >
          </div>
          <div v-if="$q.platform.is.mobile">
            <span class="text-grey-7 product-price" style="font-size: 13px">
              {{ domain == `id.oytour` ? "IDR" : "CNY" }}
              {{ p.childNeedPrice + p.originalB2BPrice }} /{{
                $t("v103.scheduledTripDetails.each")
              }}
            </span>
          </div>
        </div>
        <div class="row items-end">
          <span
            v-if="$q.platform.is.desktop"
            class="text-grey-7 product-price"
            style="font-size: 13px"
          >
            {{ domain == `id.oytour` ? "IDR" : "CNY" }}
            {{ p.childNeedPrice + p.originalB2BPrice }} /{{
              $t("v103.scheduledTripDetails.each")
            }}
          </span>
          <q-input
            style="width: 150px"
            @input="changePeople"
            v-model="chosenObj.etzcCount"
            class="col"
            :class="{
              'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
            }"
            mask="#"
            reverse-fill-mask
            dense
            standout
            readonly
            :disable="!p.remainNum"
          >
            <template v-slot:prepend>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="remove"
                @click="addPeople('etzcCount', -1)"
              />
            </template>
            <template v-slot:append>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="add"
                @click="addPeople('etzcCount', 1)"
              />
            </template>
          </q-input>
        </div>
      </div>

      <div class="row items-end q-mt-md" v-if="p.isSupportChildren == 1">
        <div class="col" :class="{ column: $q.platform.is.mobile }">
          <div>
            <span class="text-subtitle2 text-weight-bold">{{
              $t("v103.scheduledTripDetails.ye")
            }}</span>
            <span class="text-grey-6 f12 q-ml-sm"
              >(2{{ $t("v103.scheduledTripDetails.age")
              }}{{ $t("v103.scheduledTripDetails.yixia") }})</span
            >
          </div>
          <div v-if="$q.platform.is.mobile">
            <span
              v-if="$q.platform.is.desktop"
              class="text-grey-7 product-price"
              style="font-size: 13px"
            >
              {{ domain == `id.oytour` ? "IDR" : "CNY" }} {{ p.babyPrice }} /{{
                $t("v103.scheduledTripDetails.each")
              }}
            </span>
          </div>
        </div>
        <div class="row items-end">
          <span
            v-if="$q.platform.is.desktop"
            class="text-grey-7 product-price"
            style="font-size: 13px"
          >
            {{ domain == `id.oytour` ? "IDR" : "CNY" }} {{ p.babyPrice }} /{{
              $t("v103.scheduledTripDetails.each")
            }}
          </span>
          <q-input
            style="width: 150px"
            @input="changePeople"
            v-model="chosenObj.yeCount"
            class="col"
            :class="{
              'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
            }"
            mask="#"
            reverse-fill-mask
            dense
            standout
            readonly
            :disable="!p.remainNum"
          >
            <template v-slot:prepend>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="remove"
                @click="addPeople('yeCount', -1)"
              />
            </template>
            <template v-slot:append>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="add"
                @click="addPeople('yeCount', 1)"
              />
            </template>
          </q-input>
        </div>
      </div>

      <div class="text-grey-6 f12 q-mt-mb" v-if="p.isSupportChildren == 2">
        {{ $t("v103.scheduledTripDetails.prompt") }}
      </div>
      <div
        v-if="p.singleRoomPrice && p.singleRoomPrice > 0"
        class="q-pt-md q-mt-md"
        style="border-top: 1px dashed #eee"
      >
        <div class="text-grey-6 f12">{{ $t("v103.scheduledTripDetails.service") }}</div>
        <div class="row items-end">
          <div class="col" :class="{ column: $q.platform.is.mobile }">
            <div>
              <span class="text-subtitle2 text-weight-bold">{{
                $t("v103.scheduledTripDetails.service")
              }}</span>
              <span class="text-grey-6 f12 q-ml-sm"
                >({{ $t("v103.scheduledTripDetails.singleroom") }})</span
              >
            </div>
            <div v-if="$q.platform.is.mobile">
              <span class="text-grey-7 product-price" style="font-size: 13px">
                {{ domain == `id.oytour` ? "IDR" : "CNY" }} {{ p.singleRoomPrice }} /{{
                  $t("v103.scheduledTripDetails.each")
                }}
              </span>
            </div>
          </div>
          <div class="row items-end">
            <span
              v-if="$q.platform.is.desktop"
              class="text-grey-7 product-price"
              style="font-size: 13px"
            >
              {{ domain == `id.oytour` ? "IDR" : "CNY" }} {{ p.singleRoomPrice }} /{{
                $t("v103.scheduledTripDetails.each")
              }}
            </span>
            <q-input
              style="width: 150px"
              @input="changePeople"
              v-model="chosenObj.df"
              class="col"
              :class="{
                'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
              }"
              mask="#"
              reverse-fill-mask
              dense
              standout
              readonly
              :disable="!p.remainNum"
            >
              <template v-slot:prepend>
                <q-btn
                  color="primary"
                  size="sm"
                  class="q-px-none"
                  flat
                  icon="remove"
                  @click="addPeople('df', -1, true)"
                />
              </template>
              <template v-slot:append>
                <q-btn
                  color="primary"
                  size="sm"
                  class="q-px-none"
                  flat
                  icon="add"
                  @click="addPeople('df', 1, true)"
                />
              </template>
            </q-input>
          </div>
        </div>
      </div>
      <div
        v-if="p.safeMoney > 0"
        class="q-pt-md q-mt-md row items-center"
        style="border-top: 1px dashed #eee"
      >
        <div class="text-grey-6 f12 col">
          {{ $t("v103.scheduledTripDetails.insurance") }}
        </div>
        <div class="product-money f12">
          {{ domain == `id.oytour` ? "IDR" : "CNY" }} {{ p.safeMoney }}/{{
            $t("v103.scheduledTripDetails.each")
          }}
        </div>
      </div>
    </div>
    <div class="q-mt-md q-pt-md" style="border-top: 1px dashed #eee">
      <div class="row items-center">
        <span class="text-subtitle2 text-grey-6 col">{{
          $t("v103.scheduledTripDetails.total")
        }}</span>
        <span class="text-h6 text-primary product-price"
          >{{ domain == `id.oytour` ? "IDR" : "CNY" }} {{ sumPrice }}</span
        >
      </div>
      <div class="q-mt-md text-right">
        <span class="q-mr-lg f12 text-negative" v-if="!p.startDate"
          >{{
            $q.platform.is.mobile
              ? $t("v103.scheduledTripDetails.selectdatetop")
              : $t("v103.scheduledTripDetails.selectdateleft")
          }}
        </span>
        <q-btn
          color="primary"
          :label="$t('v103.scheduledTripDetails.book')"
          unelevated
          class="q-px-lg"
          :disable="sumPrice == 0"
          @click="goOrderHandler"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { date, useQuasar } from "quasar";
import {
  inject,
  provide,
  reactive,
  toRefs,
  defineComponent,
  onMounted,
  ref,
  watch,
  getCurrentInstance,
} from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { DirtionmaryHelper } from "src/config/dictionary";
import scheduledTripService from "src/api/scheduledTrip";
import { ApiResult } from "src/@types/enumHelper";
import message from "src/utils/message";
import { moneyFormat } from "src/utils/tools";
import md5 from "md5-ts";
export default defineComponent({
  components: {},
  props: ["msg", "price"],
  setup(props, context) {
    const domain = inject(DirtionmaryHelper.DOMAIN_NAME);
    const $router = useRouter();
    const { t } = useI18n();
    const $q = useQuasar();
    const qDateProxy = ref(null) as any;
    let { ctx: that, proxy } = getCurrentInstance();
    const data = reactive({
      p: props.price,
      chosenObj: null,
      sumPrice: 0,
    });
    watch(
      () => props.price,
      (n, o) => {
        data.p = n;
        data.chosenObj.startDate = n.startDate;
        methods.calcMoney();
      },
      { deep: true }
    );
    const methods = {
      goOrderHandler() {
        let order = {
          configId: props.msg.configId,
          tcid: data.p.tcid,
          startCityId: 0,
          orderInfo: data.chosenObj,
        };
        let key = md5(JSON.stringify(order));
        let lineTrip = localStorage.getItem("lineTrip");
        lineTrip = lineTrip ? JSON.parse(lineTrip) : [];
        lineTrip.push({
          key,
          order,
        });
        localStorage.setItem("lineTrip", JSON.stringify(lineTrip));
        $router.push({ path: `/scheduledTrip/preview/${key}` });
      },
      initModel() {
        data.sumPrice = 0;
        data.chosenObj = {
          startDate: "",
          crCount: 1, //成人
          etCount: 0, //儿童
          yeCount: 0, //婴儿
          lrCount: 0, //老人
          etzcCount: 0, //儿童占床
          etbzcCount: 0, //儿童不占床
          etzc: 0,
          df: 0, //单房数量
          dcf: 0,
          srf: 0,
          isUnico: false,
          unicoDep: {
            city: null,
            date: null,
            price: 0,
            isSup: -2,
          },
          unicoArr: {
            city: null,
            date: null,
            price: 0,
            isSup: -2,
          },
          remark: "",
        };
      },
      resetHandler() {
        data.p = {};
        methods.initModel();
        context.emit("reset");
      },
      changePeople(val) {},
      addPeople(m, i, isDf = false) {
        data.chosenObj[m] = parseInt(data.chosenObj[m]) + i;
        if (m != "crCount") {
          data.chosenObj[m] = data.chosenObj[m] < 0 ? 0 : data.chosenObj[m];
        } else {
          data.chosenObj[m] = data.chosenObj[m] < 1 ? 1 : data.chosenObj[m];
        }
        if (!isDf) {
          if (data.chosenObj.crCount + data.chosenObj.etzcCount > data.p.remainNum) {
            data.chosenObj[m] = data.chosenObj[m] - 1;
          }
        } else {
          if (data.chosenObj.crCount + data.chosenObj.etzcCount < data.chosenObj.df) {
            data.chosenObj[m] = data.chosenObj[m] - 1;
          }
        }
        methods.calcMoney();
      },
      calcMoney() {
        if (!data.p || !data.p.originalB2BPrice) return (data.sumPrice = 0);
        data.chosenObj.etCount = data.chosenObj.etbzcCount + data.chosenObj.etzcCount;
        //成人价格=成人人数*(成交单价-早鸟优惠)
        let crMoney = data.p.originalB2BPrice * data.chosenObj.crCount;
        //儿童价格=儿童人数*(单价-早鸟优惠+儿童附加费)
        let erMoney =
          (data.p.originalB2BPrice - data.p.childNoNeedPrice + data.p.babyChargePrice) *
          data.chosenObj.etCount;

        //婴儿价格=婴儿人数*婴儿价格
        let babyMoney = data.p.babyPrice * data.chosenObj.yeCount;
        let singMoney = data.p.singleRoomPrice * data.chosenObj.df;
        let sumCount =
          data.chosenObj.crCount +
          data.chosenObj.etCount +
          data.chosenObj.lrCount +
          data.chosenObj.yeCount;
        let visaMoney = data.p.visaPrice * sumCount;
        let otherMoney = data.p.otherPrice * sumCount;
        // console.log("sumCount", sumCount);
        // console.log("crMoney", crMoney);
        // console.log("erMoney", erMoney);
        // console.log("babyMoney", babyMoney);
        // console.log("singMoney", singMoney);
        // console.log("visaMoney", visaMoney);
        // console.log("otherMoney", otherMoney);
        let money = crMoney;
        money += erMoney;
        money += babyMoney;
        money += singMoney;
        money += visaMoney;
        money += otherMoney;
        //console.log("money", money);
        data.sumPrice = money;
      },
    };
    methods.initModel();
    if (data.p.startDate) {
      data.chosenObj.startDate = data.p.startDate;
      methods.calcMoney();
    }
    return {
      ...toRefs(data),
      ...methods,
      domain,
      moneyFormat,
    };
  },
});
</script>

<style></style>
