<template>
  <div>
    <div class="text-subtitle2 text-weight-bold">選擇日期、選項</div>
    <div class="text-grey-6 f12 q-my-md">請選擇出發日期</div>
    <div class="rounded-borders" style="border: 1px solid #eee">
      <div class="q-px-lg q-py-sm row items-center">
        <div class="text-subtitle2 text-weight-bold col">
          {{ months[currentMonth].display }}
        </div>
        <div>
          <q-btn
            color="primary"
            round
            icon="iconfont iconpreviewleft"
            flat
            @click="changeShowMonthHandler(-1)"
            class="q-mr-sm"
            :disable="currentMonth == 0"
          />
          <q-btn
            color="primary"
            round
            icon="iconfont iconpreviewright"
            flat
            @click="changeShowMonthHandler(1)"
            :disable="currentMonth == months.length - 1"
          />
        </div>
      </div>
      <div class="q-pa-sm non-selectable" style="border-top: 1px solid #eee">
        <div class="row items-center">
          <div
            class="col text-weight-bold text-center"
            style="padding: 10px 0 20px"
            v-for="(x, i) in chineseWeek"
            :key="i"
          >
            {{ x }}
          </div>
        </div>
        <div class="row wrap">
          <div
            class="rounded-borders text-center text-weight-bold"
            :class="{
              'cursor-pointer hover-date': x.value != '' && x.price,
              'cursor-not-allowed': (!x.price || x.price.remainNum==0) && x.value != '',
              'bg-primary': x.value != '' && x.value == currentDate,
            }"
            style="padding: 8px 4px; width: 14.285%"
            v-for="(x, i) in col"
            :key="i"
            @click="chosenDateHandler(x)"
          >
            <div
              class="text-dark"
              :class="{ 'text-white': x.value == currentDate }"
              v-if="x.price"
            >
              {{ x.display }}
            </div>
            <div class="text-grey-6" v-else>{{ x.display }}</div>
            <div
              class="q-mt-sm f12"
              :class="{
                'text-grey-1': x.value == currentDate,
                ' text-grey-6': x.value != currentDate,
              }"
            >
              {{
                x.price && x.price.remainNum>0 ? moneyFormat(x.price.originalB2CPrice, 0) :(x.price && x.price.remainNum==0?'售罄':'&nbsp;')
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { date } from "quasar";
export default {
  props: ["priceList"],
  data() {
    return {
      chineseWeek: ["日", "一", "二", "三", "四", "五", "六"],
      chineseMonth: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "6月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      data: [],
      months: [],
      currentMonth: 0,
      col: [],
      prices: [],
      currentDate: "",
    };
  },
  watch: {
    priceList: {
      handler(newVal, oldValue) {
        this.prices = newVal;
        this.init();
      },
      deep: true, // 深度监听
    },
  },
  created() {
    this.prices = this.priceList;
    this.init();
  },
  methods: {
    init() {
      this.createChosenDateHandler();
      let startDate = this.prices.length>0&&this.prices[0].startDate?this.prices[0].startDate:''
      let firstMonth = date.formatDate(
        new Date(startDate),
        "YYYY/MM"
      );
      let current = this.months.findIndex((x) => x.monthValue == firstMonth)
      this.currentMonth = current>-1?current:0;
      this.changeMonthHandler();

    },
    createChosenDateHandler() {
      let beginDate = new Date();
      let endDate = date.addToDate(beginDate, { years: 1 });
      while (beginDate <= endDate) {
        let i = parseInt(date.formatDate(beginDate, "M")) - 1;
        this.months.push({
          value: date.formatDate(beginDate, "YYYY/MM/DD"),
          monthValue: date.formatDate(beginDate, "YYYY/MM"),
          display: `${date.formatDate(beginDate, "YYYY")} ${
            this.chineseMonth[i]
          }`,
        });
        beginDate = date.addToDate(beginDate, { months: 1 });
      }
    },
    changeShowMonthHandler(i) {
      this.currentMonth += i;
      let value = this.months[this.currentMonth].value
      this.$emit('getQuotationData',value)
      this.changeMonthHandler();
    },
    changeMonthHandler() {
      try {
        this.col = [];
        let newDate = new Date(this.months[this.currentMonth].monthValue+'/01');
        let newBeginDate = date.startOfDate(newDate, "month");
        let newEndDate = date.endOfDate(newDate, "month");
        for (let i = 0; i < date.formatDate(newBeginDate, "d"); i++) {
          this.col.push({
            value: "",
          });
        }
        while (newBeginDate <= newEndDate) {
          let value = date.formatDate(newBeginDate, "YYYY-MM-DD");
          let price = this.prices.find((x) => x.startDate == value);
          this.col.push({
            value,
            display: date.formatDate(newBeginDate, "DD"),
            price,
          });
          newBeginDate = date.addToDate(newBeginDate, { days: 1 });
          // 默认日期 价格
          let InitialOption = false
          for(let i=0;i<this.col.length;i++){
            if (!InitialOption&&this.col[i].price && this.col[i].price.remainNum>0) {
              this.currentDate = this.col[i].value;
              this.$emit("change", this.col[i]);
              InitialOption = true
            }
          }
        }
        let after = 6 - date.formatDate(newBeginDate, "d");
        for (let i = 0; i < after; i++) {
          this.col.push({
            value: "",
          });
        }
      } catch (error) {
        alert(error)
      }
    },
    chosenDateHandler(item) {
      if (item.price && item.price.remainNum>0) {
        this.currentDate = item.value;
        this.$emit("change", item);
      }
    },
    changePriceHandler(dateStr,money){
      //this.currentDate.price.originalB2CPrice=money
      this.col.forEach(x=>{
        if(x.value==dateStr){
          x.price.originalB2CPrice=money
        }
      })
    },
    reset() {
      this.currentDate = "";
    },
  },
};
</script>

<style>
.hover-date:hover {
  background: #eee;
}
</style>
