<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="text-center text-weight-bold q-mb-sm" 
           style="padding: 0 4px; width: 14.285%" v-for="(x, i) in dayList" :key="i"
            @click="chosenDateHandler(x)">
            <div
            :style="{padding: x.price && x.price.remainNum==0?'9px 0px':'4px 0px'} "
            :class="{
              'cursor-pointer hover-date': x.value != '' && x.price,
              'cursor-not-allowed': (!x.price || x.price.remainNum==0) && x.value != '',
              'bg-primary rounded-borders': x.value != '' && x.value == currentDate,
              'remainBorder': x.value!= '' && x.value != currentDate&&x.price && x.price.remainNum>0,
            }">
                <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="f12" :class="{
                  'text-grey-1': x.value == currentDate,
                  ' text-grey-7': x.value != currentDate,
                  'q-mt-sm': x.price && x.price.remainNum==0
                }">
                <!-- {{
                  x.price && x.price.remainNum>0 ? moneyFormat(x.price.originalB2CPrice, 0) :(x.price && x.price.remainNum==0?'售罄':'&nbsp;')
                }} -->
                <p v-if="x.price && x.price.remainNum>0">{{ x.price && x.price.remainNum>0 ? '可售:'+x.price.remainNum:'&nbsp;' }}  </p>
                {{
                  x.price && x.price.remainNum>0 ? moneyFormat(x.price.originalB2CPrice, 0) :(x.price && x.price.remainNum==0?'售罄':'&nbsp;')
                }}
            </div>
            
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    date
  } from "quasar";
  export default {
    props: ["priceList", "tcid", "dataList"],
    data() {
      return {
        chineseWeek: ["日", "一", "二", "三", "四", "五", "六"],
        chineseMonth: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "6月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
        data: [],
        months: [],
        currentMonth: 0,
        dayList: [],
        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"
        );
        //当前团期所在的月份
        if (this.dataList && this.dataList.currentPriceInfo && this.dataList.currentPriceInfo.startDate) {
          firstMonth = date.formatDate(
            new Date(this.dataList.currentPriceInfo.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.dayList = [];
          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.dayList.push({
              value: "",
            });
          }
          while (newBeginDate <= newEndDate) {
            let value = date.formatDate(newBeginDate, "YYYY-MM-DD");
            let price = this.prices.find((x) => x.startDate == value);
            let tempPriceList = this.prices.filter((x) => x.startDate == value);
            if (tempPriceList && tempPriceList.length > 0) {
              
            }

            this.dayList.push({
              value,
              display: date.formatDate(newBeginDate, "DD"),
              price,
            });
            newBeginDate = date.addToDate(newBeginDate, {
              days: 1
            });
            // 默认日期 价格
            let InitialOption = false
            for (let i = 0; i < this.dayList.length; i++) {
              if (this.tcid && this.tcid.length > 0) {
                if (!InitialOption && this.dayList[i].price && this.dayList[i].price.id === this.tcid) {
                  this.currentDate = this.dayList[i].value;
                  this.$emit("change", this.dayList[i]);
                  InitialOption = true
                }
              } else {
                if (!InitialOption && this.dayList[i].price && this.dayList[i].price.remainNum > 0) {
                  this.currentDate = this.dayList[i].value;
                  this.$emit("change", this.dayList[i]);
                  InitialOption = true
                }
              }
            }
          }
          let after = 6 - date.formatDate(newBeginDate, "d");
          for (let i = 0; i < after; i++) {
            this.dayList.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.dayList.forEach(x => {
          if (x.value == dateStr) {
            x.price.originalB2CPrice = money
          }
        })
      },
      reset() {
        this.currentDate = "";
      },
    },
  };

</script>

<style  lang="scss">
  .hover-date:hover {
    background: #eee;
  }
  .remainBorder{
    border-top: 2px solid #000;
    background: $primary-1;
  }

</style>
