<template>
  <div class="column full-height">
    <div class="col">
      <div class="text-right" v-if="$q.platform.is.desktop">
        <q-btn
          color="primary"
          icon="refresh"
          label="全部重選"

          @click="resetHandler"
          flat
        />
      </div>
      <div v-if="p && p.unionCityList && p.unionCityList.length>0">
        <div class="text-grey-6 f12 q-my-md">出發城市</div>
        <div class="row q-col-gutter-sm">
          <div  v-for="(x,i) in p.unionCityList" :key="i">
            <q-chip size="14px" clickable @click="changeCityHandler(x)" :text-color="currentUnionCity.cityId==x.cityId?'white':'dark'" :color="currentUnionCity.cityId==x.cityId?'primary':'grey-3'" square>{{ x.cityName }}</q-chip>
          </div>
        </div>
      </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.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">儿童</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.childNeedPrice + 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.childNeedPrice + p.originalB2CPrice, 0) }} /每人
          </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">婴儿</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"
          @click="goOrderHandler"
          :disable="sumPrice == 0"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["price",'travel'],
  watch: {
    price: {
      handler(n, o) {
        console.log(n)
        this.p = n?n:{};
        if (this.p.startDate) {
          this.chosenObj.startDate = this.p.startDate;
          this.calcMoney();
          if(this.p.unionCityList && this.p.unionCityList.length>0 && this.p.originalB2CPrice==this.p.RealPrice){
            this.currentUnionCity = this.p.unionCityList[0]
          }
        }
        
      },
      deep: true
      
    },
  },
  data() {
    return {
      p: {},
      chosenObj: null,
      sumPrice: 0,
      currentUnionCity:{}
    };
  },
  created() {
    this.initModel();
    this.p=this.price
    if (this.p && this.p.startDate) {
      this.chosenObj.startDate = this.p.startDate;
      this.calcMoney()
      if(this.p.unionCityList && this.p.unionCityList.length>0){
        this.currentUnionCity = this.p.unionCityList[0]
      }
    }
  },
  methods: {
    initModel() {
      this.sumPrice = 0;
      this.chosenObj = {
        startDate: "",
        crCount: 1,
        etCount: 0,
        yeCount: 0,
        lrCount: 0,
        etbzcCount: 0,
        etzcCount: 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() {
      this.p = null;
      this.initModel();
      this.$emit("reset");
    },
    changePeople(val) {},
    addPeople(m, i, isDf = false) {
      this.chosenObj[m] = parseInt(this.chosenObj[m]) + i;
      if (m != "crCount") {
        this.chosenObj[m] = this.chosenObj[m] < 0 ? 0 : this.chosenObj[m];
      } else {
        this.chosenObj[m] = this.chosenObj[m] < 1 ? 1 : this.chosenObj[m];
      }
      if (!isDf) {
        if (
          this.chosenObj.crCount + this.chosenObj.etzcCount >
          this.p.remainNum
        ) {
          this.chosenObj[m] = this.chosenObj[m] - 1;
        }
      } else {
        if (
          this.chosenObj.crCount + this.chosenObj.etzcCount <
          this.chosenObj.df
        ) {
          this.chosenObj[m] = this.chosenObj[m] - 1;
        }
      }
      this.calcMoney();
    },
    calcMoney() {
      if (!this.p || !this.p.originalB2CPrice) {
        this.sumPrice=0
        return;
      };
      let money = this.p.originalB2CPrice * this.chosenObj.crCount;
      money +=
        (this.p.originalB2CPrice -
          this.p.childNoNeedPrice +
          this.p.babyChargePrice) *
        this.chosenObj.etbzcCount;
      money +=
        (this.p.originalB2CPrice +
          this.p.childNeedPrice +
          this.p.babyChargePrice) *
        this.chosenObj.etzcCount;
      money += this.p.babyPrice * this.chosenObj.yeCount;
      money += this.p.singleRoomPrice * this.chosenObj.df;

      let sumCount =
        this.chosenObj.crCount +
        this.chosenObj.etCount +
        this.chosenObj.lrCount;
      //money += this.p.visaPrice * sumCount;
      money += this.p.otherPrice * sumCount;
      this.sumPrice = money;
    },
    changeCityHandler(x){
      this.currentUnionCity = x
      this.$emit("changeCity",x)
    },
    goOrderHandler(){
      let order = {
        configId:this.travel.id,
        tcid:this.p.tcid,
        startCityId:this.currentUnionCity?this.currentUnionCity.cityId:this.travel.startCityId,
        orderInfo:this.chosenObj
      }
      let key = this.$md5(JSON.stringify(order))
      let lineCars = localStorage.getItem('lineCars')
      lineCars = lineCars?JSON.parse(lineCars):[]
      lineCars.push({
        key,
        order
      })
      localStorage.setItem("lineCars",JSON.stringify(lineCars))
      this.CommonJump('/lineOrderPriview/'+key, {});
    }
  },
};
</script>

<style></style>
