<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="p&&p.startDate">
        <div class="text-grey-6 f12 q-my-md">選擇門票類型</div>
        <div class="row wrap">
          <div v-for="(x,i) in dataList.TicketList" :key="i">
            <q-chip v-if="x.originalB2CPrice>0" size="14px" clickable @click="handleSelect(x,1)" 
            :text-color="x.checked?'white':'dark'" 
            :color="x.checked?'primary':'grey-3'" square>{{ x.TicketName }}</q-chip>
          </div>
        </div>
      </template>
      <div class="text-grey-6 f12 q-my-md">選擇取票方式</div>
      <div class="row no-wrap">
        <div v-for="(x,i) in takeList" :key="i">
          <q-chip size="14px" clickable @click="handleSelect(x,2)" 
          :text-color="MailingStateObj&&MailingStateObj.Id==x.Id?'white':'dark'" 
          :color="MailingStateObj&&MailingStateObj.Id==x.Id?'primary':'grey-3'" square>{{ x.Name }}</q-chip>
        </div>
      </div>
      <div v-if="dataList.TicketList.map(x=>x.checked).indexOf(true)!=-1" class="text-grey-6 f12 q-my-md">選擇數量</div>
      <template v-for="(x,i) in dataList.TicketList">
      <div class="row items-end q-mb-md">
          <div v-if="x.checked" :key="i" class="col" :class="{'column':$q.platform.is.mobile}"
          >
            <div>
              <span class="text-subtitle2 text-weight-bold">{{x.TicketName}}</span>
              <span class="text-grey-6 f12 q-ml-sm"></span></span>
            </div>
            <div v-if="$q.platform.is.mobile">
              <span class="text-grey-7 product-price" style="font-size: 13px">
                CNY {{ moneyFormat(x.originalB2CPrice, 0) }} /每张
              </span>
            </div>
          </div>
          <div class="row items-end" v-if="x.checked">
            <span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
              CNY {{ moneyFormat(x.originalB2CPrice, 0) }} /每张
            </span>
            <q-input
              style="width: 150px"
              @input="changePeople"
              v-model="x.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(x,'Count', -1)"
                />
              </template>
              <template v-slot:append>
                <q-btn
                  color="primary"
                  size="sm"
                  class="q-px-none"
                  flat
                  icon="add"
                  @click="addPeople(x,'Count', 1)"
                />
              </template>
            </q-input>
          </div>
      </div>
      </template>
      <div v-if="MailingStateObj&&MailingStateObj.Id==1" 
      class="row items-end fz14 text-grey-6 f12 q-my-md q-pt-lg">
        <span>取票地址</span> 
        <span class="text-primary q-ml-lg">{{dataList.SelffetchAddress}}</span>
      </div>
    </div>
    <div class="q-mt-md q-pt-md" style="border-top: 1px dashed #eee">
      <div class="row items-center fz12" v-if="MailingStateObj&&MailingStateObj.Id==2&&p&&p.MailingMoney>0">
        <span class="text-subtitle2 text-grey-8 col">邮寄费</span> 
        <span class="text-primary q-ml-lg">{{p.MailingMoney}}</span>
      </div>
      <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&&(!selectedObj||!MailingStateObj)">
          {{`請選擇上面的門票類型、取票方式`}} 
        </span>
        </span>
        <q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" 
        :disable="!p.startDate||sumPrice==0||!selectedObj||!MailingStateObj"
        @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;
        this.dataList.TicketList.forEach(x=>{
          x.originalB2CPrice = 0
          this.p.PriceList.forEach(y=>{
            if(x.Id==y.TicketId){
              x.originalB2CPrice=y.Price
            }
          })
        })
        this.calcMoney()
        
      },
      deep: true,
      immediate: false
    },
    dataList: {
      handler(n, o) {
        this.dataList = n;
      },
      deep: true,
      immediate: true
    },
  },
  data() {
    return {
      p: {},
      chosenObj: null,
      sumPrice:0,
      selectedObj: null,
      priceList: [],
      takeList:[
        {Name:'自行取票',Id:1},
        {Name:'邮寄票券',Id:2},
        {Name:'电子券',Id:4},
      ],
      MailingStateObj: null,
    };
  },
  created() {
    this.initModel();
    if(this.p.startDate){
      this.calcMoney()
    }
  },
  methods: {
    goOrderHandler(){
      let order = {
        CouponsId: this.configId, 
        MailingState: this.MailingStateObj.Id,
        Month: this.Month,
        startDate: this.p.startDate,
        MailingMoney: this.p.MailingMoney,
        originalB2CPrice: this.p.originalB2CPrice,
        sumPrice: this.sumPrice,
        TicketList: this.dataList.TicketList.filter(x=>x.checked)
      }
      let key = this.$md5(JSON.stringify(order))
      let pickuporderScenTickets = localStorage.getItem('pickuporderScenTickets')
      pickuporderScenTickets = pickuporderScenTickets?JSON.parse(pickuporderScenTickets):[]
      pickuporderScenTickets.push({
        key,
        order
      })
      localStorage.setItem("pickuporderScenTickets",JSON.stringify(pickuporderScenTickets))
      this.CommonJump('/ScenicSpotTicketOrderForm/'+key, {});
    },
    handleSelect(item,type){
      if(type==2){
        this.MailingStateObj = item
      }else{
        item.checked = !item.checked
        this.selectedObj = item
      }
      setTimeout(()=>{
        this.calcMoney()
      },100)
    },
    initModel() {
      this.sumPrice=0
    },
    resetHandler() {
      this.selectedObj = null
      this.MailingStateObj = null
      this.dataList.TicketList.forEach(x=>{
        x.checked = false
      })
      setTimeout(()=>{
        this.p = {};
        this.initModel()
      },100)
      this.$emit("reset");
    },
    changePeople(val) {},
    addPeople(item, m, i, isDf = false) {
      let chosenObj = item
      chosenObj[m] = parseInt(chosenObj[m]) + i;
      if(m!='Count'){
        chosenObj[m] = chosenObj[m] < 0 ? 0 : chosenObj[m]++;
      }else{
        chosenObj[m] = chosenObj[m] < 1 ? 1 :chosenObj[m]++;
      }
      this.calcMoney()
    },
    calcMoney() {
      if (!this.p) return;
      let money = 0
      this.dataList.TicketList.forEach(x=>{
        if(x.checked){
          money+=x.originalB2CPrice*x.Count
        }
      })
      if(this.MailingStateObj&&this.MailingStateObj.Id==2){
        this.sumPrice = Number(money)+Number(this.p.MailingMoney)
        return
      }
      this.sumPrice = money;
    },
  },
};
</script>

<style></style>
