<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 wrap">
        <q-btn @click="handleSelect(item)"
          :color="item.Id === selectedCar?'primary':'grey-5'"
          unelevated
          class="car-tag mr"
          v-for="item in CarTypeList"
          :key="item.Id"
        >
          {{ item.CarName }}({{ item.PeopleNum }}人)
        </q-btn>
      </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 v-if="selectedObj">
            <span class="text-subtitle2 text-weight-bold">{{selectedObj.CarName}}</span>
            <span class="text-grey-6 f12 q-ml-sm"></span>({{ selectedObj.PeopleNum }}人)</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.Count"
            class="col"
            :class="{
              'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
            }"
            mask="#"
            reverse-fill-mask
            dense
            standout
            readonly
          >
            <template v-slot:prepend>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="remove"
                @click="addPeople('Count', -1)"
              />
            </template>
            <template v-slot:append>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="add"
                @click="addPeople('Count', 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.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>
export default {
  props: ["price","CarTypeList","configId","Month"],
  watch: {
    price: {
      handler(n, o) {
        this.p = n;
        console.log(n,'-----')
        this.chosenObj.startDate = n.startDate;
        this.calcMoney()
      },
      deep: true,
      immediate: true
    },
    CarTypeList: {
      handler(n, o) {
        this.CarTypeList = n;
        this.selectedCar = this.CarTypeList[0].Id
      },
      deep: true,
      immediate: true
    },
  },
  data() {
    return {
      p: {},
      chosenObj: null,
      sumPrice:0,
      selectedObj: null,
      priceList: [],
      selectedCar: 0
    };
  },
  created() {
    this.initModel();
    if(this.p.startDate){
      this.chosenObj.startDate = this.p.startDate;
      this.calcMoney()
      this.getCarPriceData2()
      this.selectedCar = this.CarTypeList[0].Id
    }
    
  },
  methods: {
    //  获取车的详情
    getCarPriceData2() {
      this.priceList = []
      this.apipost(
        "b2c_get_GetCarSingleProductMonthPrice",
        { 
          ProductId: this.configId, 
          Month: this.Month,
          AirportId: '',
          CarTypeId: this.selectedCar
         },
        (r) => {
          if (r.data.resultCode == 1) {
            r.data.data.forEach(x=>{
              x.startDate = x.Date
              x.originalB2CPrice = x.Price
              x.remainNum =1
              x.Count = 1
              x.isSupportChildren = 1
              x.safeMoney = 0
              this.p.originalB2CPrice = x.Price
            })
            this.$emit('getPriceList',JSON.stringify(r.data.data),this.selectedCar)
          }
          
        },null)
    },
    
    handleSelect(item){
      this.selectedObj = item
      this.selectedCar = item.Id
      this.getCarPriceData2()
    },
    initModel() {
      this.sumPrice=0
      this.chosenObj = {
        startDate: "",
        Count: 1,
        remark: "",
      };
    },
    resetHandler() {
      this.p = {};
      this.initModel()
      this.$emit("reset");
    },
    changePeople(val) {},
    addPeople(m, i, isDf = false) {
      this.chosenObj[m] = parseInt(this.chosenObj[m]) + i;
      if(m!='Count'){
        this.chosenObj[m] = this.chosenObj[m] < 0 ? 0 : this.chosenObj[m]++;
      }else{
        this.chosenObj[m] = this.chosenObj[m] < 1 ? 1 : this.chosenObj[m]++;
      }
      this.calcMoney()
    },
    calcMoney() {
      if (!this.p) return;
      let money = this.p.originalB2CPrice * this.chosenObj.Count;
      this.sumPrice = money;
    },
  },
};
</script>

<style></style>
