<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>
      <template v-if="dataList.CarType!=3">
        <div class="text-grey-6 f12 q-my-md">選擇機場</div>
        <div class="row wrap">
          <div v-for="(x,i) in dataList.AirportList" :key="i">
            <q-chip size="14px" clickable @click="handleSelect(x,1)" 
            :text-color="selectedAirportObj&&selectedAirportObj.Id==x.Id?'white':'dark'" 
            :color="selectedAirportObj&&selectedAirportObj.Id==x.Id?'primary':'grey-3'" square>{{ x.AirportName }}</q-chip>
          </div>
        </div>
      </template>
      <div class="row no-wrap">
        <div v-if="dataList.CarType!=1" :class="{'col':dataList.PlaceList.length>2}">
          <div class="text-grey-6 f12 q-my-md">選擇上車範圍</div>
          <div class="row wrap">
            <div v-for="(x,i) in dataList.PlaceList" :key="i">
              <q-chip size="14px" clickable @click="handleSelect(x,3)" 
              :text-color="onCarObj&&onCarObj.Id==x.Id?'white':'dark'" 
              :color="onCarObj&&onCarObj.Id==x.Id?'primary':'grey-3'" square>{{ x.Name }}({{ x.Range }}m)</q-chip>
            </div>
          </div>
        </div>
        <div v-if="dataList.CarType!=2" :class="{'col':dataList.PlaceList.length>2,'q-ml-md':dataList.CarType!=1}">
          <div class="text-grey-6 f12 q-my-md">選擇下車範圍</div>
          <div class="row wrap">
            <div v-for="(x,i) in dataList.PlaceList" :key="i">
              <q-chip size="14px" clickable @click="handleSelect(x,4)" 
              :text-color="unCarObj&&unCarObj.Id==x.Id?'white':'dark'" 
              :color="unCarObj&&unCarObj.Id==x.Id?'primary':'grey-3'" square>{{ x.Name }}({{ x.Range }}m)</q-chip>
            </div>
          </div>
        </div>
      </div>
      
      <template v-if="TicketIds&&TicketIds.length>0">
        <div class="text-grey-6 f12 q-my-md">選擇車類型</div>
        <div class="row wrap">
          <div v-for="(x,i) in dataList.CarTypeList" :key="i">
            <q-chip v-if="TicketIds.indexOf(x.Id)!=-1" size="14px" clickable @click="handleSelect(x,2)" 
            :text-color="selectedCarObj&&selectedCarObj.Id==x.Id?'white':'dark'" 
            :color="selectedCarObj&&selectedCarObj.Id==x.Id?'primary':'grey-3'" square>{{ x.CarName }}({{ x.PeopleNum }}人)</q-chip>
          </div>
        </div>
      </template>
      <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="selectedCarObj">
            <span class="text-subtitle2 text-weight-bold">{{selectedCarObj.CarName}}</span>
            <span class="text-grey-6 f12 q-ml-sm"></span>({{ selectedCarObj.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>
    <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"
      :class="{'row wrap justify-end items-start':$q.platform.is.mobile}">
        <span :class="{'col-12 q-mb-sm':$q.platform.is.mobile}">
        <span class="f12 text-negative" v-if="!p.startDate" 
        :class="{'q-mr-lg':$q.platform.is.desktop}">
          {{$q.platform.is.mobile?'請選擇上面的出行日期':'請選擇左側的出行日期'}} 
        </span>
        <span class="f12 text-negative" 
        :class="{'q-mr-lg':$q.platform.is.desktop}"
        v-if="(p.startDate&&!selectedCarObj)
        ||(p.startDate&&dataList.CarType==1&&(!selectedAirportObj||!unCarObj))
        ||(p.startDate&&dataList.CarType==2&&(!selectedAirportObj||!onCarObj))
        ||(p.startDate&&dataList.CarType==3&&(!onCarObj||!unCarObj))" >
          {{`請選擇上面的${dataList.CarType==3?'車類型、上車下車點':dataList.CarType==1?'機場、車類型、下車點':'機場、車類型、上車點'}`}} 
        </span>
        </span>
        <q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" 
        :disable="sumPrice==0||!selectedCarObj
        ||(dataList.CarType!=3&&!selectedAirportObj)
        ||(dataList.CarType==1&&!unCarObj)||(dataList.CarType==2&&!onCarObj)
        ||(dataList.CarType==3&&(!onCarObj||!unCarObj))"
        @click="goOrderHandler"/>
        
      </div>
    </div>
  </div>
</template>

<script>
import { date } from "quasar";
export default {
  props: ["dataList","price","configId","Month"],
  watch: {
    price: {
      handler(n, o) {
        this.p = n;
        if(n&&n.startDate){
          this.chosenObj.startDate = n.startDate;
          console.log(this.chosenObj.startDate,this.dataAll,'===')
          let arr = this.dataAll.filter(x=> x.Date==this.chosenObj.startDate)
          if(arr.length>0){
            this.TicketIds = arr[0].Price.map(x=> {return x.TicketId})
          }
        }
        this.calcMoney()
        
      },
      deep: true,
      immediate: false
    },
    dataList: {
      handler(n, o) {
        this.dataList = n;
        
      },
      deep: true,
      immediate: true
    },
    Month:{
      handler(n, o) {
        this.selectedCarObj = this.dataList.CarTypeList[0]
        // this.getCarPriceData2()
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      p: {},
      chosenObj: null,
      sumPrice:0,
      selectedCarObj: null,
      priceList: [],
      selectedAirportObj: null,
      onCarObj: null,
      unCarObj: null,
      TicketIds: null
    };
  },
  created() {
    this.initModel();
    if(this.p.startDate){
      this.chosenObj.startDate = this.p.startDate;
      this.calcMoney()
      // this.getCarPriceData2()
    }
    this.getCarPriceData()
  },
  methods: {
    goOrderHandler(){
      let order = {
        CarId: this.selectedCarObj.Id,
        AirportId: this.selectedAirportObj?this.selectedAirportObj.Id:'',
        startDate: this.p.startDate,
        originalB2CPrice: this.p.originalB2CPrice,
        orderInfo: this.chosenObj,
        sumPrice: this.sumPrice,
        Id: this.dataList.Id,
        onCarId: this.onCarObj?this.onCarObj.Id:'',
        unCarId: this.unCarObj?this.unCarObj.Id:'',
      }
      let key = this.$md5(JSON.stringify(order))
      let pickuporderCars = localStorage.getItem('pickuporderCars')
      pickuporderCars = pickuporderCars?JSON.parse(pickuporderCars):[]
      pickuporderCars.push({
        key,
        order
      })
      localStorage.setItem("pickuporderCars",JSON.stringify(pickuporderCars))
      this.CommonJump('/PickuporderForm/'+key, {});
    },
    //  获取车型的详情
    getCarPriceData2() {
      this.priceList = []
      this.apipost(
        "b2c_get_GetCarSingleProductMonthPrice",
        { 
          ProductId: this.configId, 
          Month: this.Month,
          AirportId: '',
          CarTypeId: this.selectedCarObj.Id
         },
        (r) => {
          if (r.data.resultCode == 1) {
            let arr = []
            r.data.data.forEach(x=>{
              if(x.Price){
                if(this.chosenObj.startDate==x.Date){
                  this.p.originalB2CPrice = x.Price
                }
                let dataObj = {
                  startDate: x.Date,
                  originalB2CPrice: x.Price,
                  remainNum: 1,
                  Count: 1,
                  isSupportChildren: 1,
                  safeMoney: 0,
                }
                if(date.formatDate(Date.now(), 'YYYY-MM-DD')!=x.Date){
                  arr.push(dataObj)
                }
              }
            })
            const temp= JSON.parse(JSON.stringify(r.data.data))
            let PriceArr = temp.filter(x=>{ return x.Price>0 })
            if(PriceArr.length>0){
              this.$emit('getPriceList',JSON.stringify(arr),this.selectedCarObj.Id)
            }else{
              let dataObj = {
                  startDate: '',
                  originalB2CPrice: '',
                  remainNum: 0,
                  Count: 0,
                  isSupportChildren: 0,
                  safeMoney: 0,
              }
              this.priceList.push(dataObj)
              this.$emit('getPriceList',JSON.stringify(this.priceList),this.selectedCarObj.Id)
              this.p.originalB2CPrice = 0
              this.resetHandler()
            }
          }
          
        },null)
    },
    
    getCarPriceData() {
      this.priceList = []
      this.apipost(
        "b2c_get_GetCarSingleProductMonthPriceAll",
        { 
          ProductId: this.configId, 
          Month: this.Month,
          // AirportId: '',
          // CarTypeId: this.selectedCarObj.Id
         },
        (r) => {
          if (r.data.resultCode == 1) {
              this.dataAll = r.data.data
          }
          
        },null)
    },
    handleSelectAirport(item){
      this.selectedAirportObj = item
    },
    handleSelect(item,type){
      if(type==1){
        this.selectedAirportObj = item
      }else if(type==2){
        this.selectedCarObj = item
        this.getCarPriceData2()
      }else if(type==3){
        this.onCarObj = item
      }else if(type==4){
        this.unCarObj = item
      }
      
    },
    initModel() {
      this.sumPrice=0
      this.chosenObj = {
        startDate: "",
        Count: 1,
        remark: "",
      };
    },
    resetHandler() {
      this.selectedCarObj = null
      this.selectedAirportObj = null
      this.onCarObj = null
      this.unCarObj = null
      setTimeout(()=>{
        this.p = {};
        this.initModel()
      },100)
      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>
