<template>
  <div class="column full-height">
    <div class="col">
      <div class="text-right">
        <q-btn
          color="primary"
          icon="refresh"
          label="全部重選"
          @click="resetHandler"
          flat
        />
      </div>
      <div class="text-grey-6 f12 q-my-md">選擇數量</div>
      <div class="row items-end">
        <div class="col" :class="{'column':$q.platform.is.mobile}">
          <div>
            <span class="text-subtitle2 text-weight-bold">成人</span>
            <span class="text-grey-6 f12 q-ml-sm">(12-99歲)</span>
          </div>
          <div v-if="$q.platform.is.mobile">
            <span class="text-grey-7 product-price" style="font-size: 13px">
              CNY {{ moneyFormat(p.originalB2CPrice, 0) }} /每人
            </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">
            CNY {{ moneyFormat(p.originalB2CPrice, 0) }} /每人
          </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">儿童</span>
          <span class="text-grey-6 f12 q-ml-sm">(2-11歲,不占床)</span>
          </div>
          <div v-if="$q.platform.is.mobile">
            <span class="text-grey-7 product-price" style="font-size: 13px">
              CNY
              {{ moneyFormat(p.originalB2CPrice - p.childNoNeedPrice, 0) }} /每人
            </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">
            CNY
            {{ moneyFormat(p.originalB2CPrice - p.childNoNeedPrice, 0) }} /每人
          </span>
          <q-input
            style="width: 150px"
            @input="changePeople"
            v-model="chosenObj.etCount"
            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('etCount', -1)"
              />
            </template>
            <template v-slot:append>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="add"
                @click="addPeople('etCount', 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">婴儿</span>
            <span class="text-grey-6 f12 q-ml-sm">(2歲以下)</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">
              CNY {{ moneyFormat(p.babyPrice, 0) }} /每人
            </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">
            CNY {{ moneyFormat(p.babyPrice, 0) }} /每人
          </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">
        本團只支持成人出遊
      </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">單房服務</div>
        <div class="row items-end">
          <div class="col" :class="{'column':$q.platform.is.mobile}">
            <div>
              <span class="text-subtitle2 text-weight-bold">單房服務</span>
              <span class="text-grey-6 f12 q-ml-sm">(獨立單間住宿)</span>
            </div>
            <div v-if="$q.platform.is.mobile">
              <span class="text-grey-7 product-price" style="font-size: 13px">
                CNY {{ moneyFormat(p.singleRoomPrice, 0) }} /每人
              </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">
              CNY {{ moneyFormat(p.singleRoomPrice, 0) }} /每人
            </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">保險服務費</div>
        <div class="product-money f12">CNY {{ p.safeMoney }}/每人</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">總金額</span>
        <span class="text-h6 text-primary product-price">CNY {{ moneyFormat(sumPrice,0) }}</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?'請選擇上面的出行日期':'請選擇左側的出行日期'}} </span>
        <q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" :disable="sumPrice==0"/>
      </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'
export default defineComponent({
  components: {  },
  props: ['price'],
  setup(props, context) {
    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 = {
      initModel() {
        data.sumPrice=0
        data.chosenObj = {
          startDate: "",
          crCount: 1,
          etCount: 0,
          yeCount: 0,
          lrCount: 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.etCount >
            data.p.remainNum
          ) {
            data.chosenObj[m] = data.chosenObj[m] - 1;
          }
        } else {
          if (
            data.chosenObj.crCount + data.chosenObj.etCount <
            data.chosenObj.df
          ) {
            data.chosenObj[m] = data.chosenObj[m] - 1;
          }
        }
        methods.calcMoney()
      },
      calcMoney() {
        if (!data.p) return;
        let money =
          data.p.originalB2CPrice * data.chosenObj.crCount;
        money +=
          (data.p.originalB2CPrice-data.p.childNoNeedPrice+data.p.babyChargePrice) * data.chosenObj.etCount;
        money += data.p.babyPrice * data.chosenObj.yeCount;
        money += data.p.singleRoomPrice * data.chosenObj.df;

        let sumCount =
          data.chosenObj.crCount +
          data.chosenObj.etCount +
          data.chosenObj.lrCount;
        money += data.p.visaPrice * sumCount;
        money += data.p.otherPrice * sumCount;
        data.sumPrice = money;
      },
  
    }
    methods.initModel();
    if(data.p.startDate){
      data.chosenObj.startDate = data.p.startDate;
        methods.calcMoney()
    }
    return {
      ...toRefs(data),
      ...methods,
      moneyFormat,
    }
  }
})
</script>

<style></style>
