<style>
  .calendar-box {
    /* height:460px; */
  }

  .calendar-box .calendar {
    width: 100%;
    overflow: hidden;
    table-layout: fixed;
  }

  .calendar-box .calendar th {
    height: 20px;
    padding: 10px 0;
    line-height: 20px;
    background: #eee;
    color: #333;
    text-align: center;
    font-size: 14px;
    font-family: 'PingFangR';
  }

  .dayList {
    position: relative;
    float: left;
    width: 14.28%;
    height: 70px;

    border: 1px solid transparent;
    background-color: #F5F5F5;
    font-size: 12px;
  }

  .dayList.noPrice {
    color: #ccc;
    background-color: #FFFFFF;
  }

  .dayList.selectDay {
    border: 1px solid #ff4646;
    background-color: #f9f7f6;
  }

  .dayList.yesPrice {
    font-weight: bold;
    font-family: 'PingFangR'
  }

  .dayList p {
    float: initial;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 10px 0;
  }

  .dayList p.price {
    float: initial;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 10px 0;
    color: #ff4646;
  }

  .Tripcan_info {
    width: 100%;
    min-width: 300px;
    height: 100%;
    border: 1px solid #d1d1d1;
    margin-top: 25px;
    background-color: #fff;
  }

  .trafficInfo {
    float: left;
    width: 60%;
    min-height: 190px;
    border-right: 1px solid #d1d1d1;
  }

  .trafficTitle {
    margin: 20px;
  }

  .trafficFlight {
    padding: 20px
  }

  .trafficList {
    display: inline-block;
    width: 30%;
    text-align: center;
    vertical-align: middle;
  }

  .trafficTime {
    display: flex;
    width: 100px;
    margin: auto;
    font-weight: bold;
    justify-content: space-between;
  }

  .TripStartInfo {
    float: left;
    width: 40%;
    padding: 20px;
    color: #9a9696;
  }

  .tripRightspan {
    color: black;
  }

  .TripCanbao {
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
  }

  .TripCanbao>div:last-child {
    color: #ff9a14;
    font-size: 34px;
    font-weight: bold;
  }

  .TripQi {
    font-size: 14px;
    font-weight: normal;
    margin-left: 10px;
  }

  .Tripcan_info:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    overflow: hidden;
  }

  .monthDayList::after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    overflow: hidden;
  }

  .monthDayList {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
  }

  .trip_BtnDiv {
    margin-top: 11px;
  }

  .traffic_Line {
    position: relative;
    width: 70px;
    height: 1px;
    margin: 10px auto;
    background-color: #d1d1d1;
  }

  .traffic_Line>div:first-child {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #d1d1d1;
    position: absolute;
    left: -3px;
    top: -3px;
  }

  .traffic_Line>div:last-child {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #d1d1d1;
    position: absolute;
    right: -3px;
    top: -3px;
  }

  @media only screen and (max-width: 1200px) {
    .trafficInfo {
      width: 100%;
      border-right: 0;
    }
    .monthDayList {
      flex-direction: column;
    }

    .TripStartInfo {
      width: 100%;
    }
    .monthDayChild{
      width:100%!important;
    }
  }

  .monthDayChild {
    width: 48%;
    display: inline-block;
    margin-bottom:20px;
  }

  .nowMonth {
    color: black;
  }

  .otherMonth {
    color: gainsboro;

  }

  .daysItem {
    position: relative;
    float: left;
    width: 14.28%;
    height: 76px;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid #d1d1d1;
  }

  .calendarItem_week>div {
    display: inline-block;
    width: 14.28%;
    height: 40px;
    padding: 10px 0;
    line-height: 20px;
    background: #eee;
    color: #333;
    text-align: center;
    font-size: 14px;
    font-family: 'PingFangR';
  }

  .calendarItem_month {
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
  }

  .trip-Seat {
    font-size: 12px;
  }

  .ckedDate {
    background-color: #006be2!important;
    color: #fff;
  }
  .tripcanClick{
    padding-bottom:5px;
  }
  .tripcanClick:hover{
    background-color:#e2f0fb; 
  }
</style>
<template>
  <div class="q-mt-lg q-mb-lg">
    <div class="section-block download1">
      <div class="calendar-box" id='calendar'>
        <div class="monthDayList">
          <div class="monthDayChild" v-for="(item, index) in monthList" :key="index">
            <div class="calendarItem_month">
              <!-- <template v-if="index==0">
                <i style="float:left;" class="iconfont iconpreviewleft"></i>
              </template> -->
              {{item.monthStr}}
              <!-- <template v-if="index==1">
                <i style="float:right;" class="iconfont iconpreviewright"></i>
              </template> -->
            </div>
            <div class="calendarItem_week">
              <div v-for="(i,index) in week" :key="index">{{i}}</div>
            </div>
            <div class="calendarItem_day">
              <div class="daysItem" v-for="(subItem, index2) in item.dayArray" :key="index2"
                :class="subItem.daymonth===item.month? 'nowMonth':'otherMonth'">
                <template v-if="subItem.b2BPrice||subItem.seat">
                  <div style="cursor:pointer;" class="tripcanClick" @click="clickDay(subItem)" :class="subItem.checked?'ckedDate':''">
                    <div style="width:100%;height:10px;"></div>
                    {{subItem.day}}
                    <div class="trip-Seat">{{subItem.b2BPrice}}</div>
                    <div class="trip-Seat">余{{subItem.seat}}</div>
                  </div>
                </template>
                <template v-else>
                  <div style="width:100%;height:10px;"></div>
                  <div>
                    {{subItem.day}}
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="Tripcan_info">
          <div class="trafficInfo">
            <div class="trafficTitle">交通资讯</div>
            <div class="trafficFlight">
              <div v-if="CurrentPriceInfo.priceFlight&&CurrentPriceInfo.priceFlight.length>0"
                v-for="(fItem,fIndex) in CurrentPriceInfo.priceFlight" :key="fIndex+100">
                <div class="trafficList">
                  <div class="trafficTime">
                    <span>{{fItem.startDate.substring(5).replace('-','/')}}</span><span>{{fItem.departureTime}}</span>
                  </div>
                  <div>{{fItem.departureAirPortName}}</div>
                </div>
                <div class="trafficList" :key="fIndex+500">
                  <div>{{fItem.alName}}</div>
                  <div class="traffic_Line">
                    <div></div>
                    <div></div>
                  </div>
                  <div>{{fItem.flightNumber}}</div>
                </div>
                <div class="trafficList" :key="fIndex+1000">
                  <div class="trafficTime">
                    <span>{{fItem.arriveDate.substring(5).replace('-','/')}}</span><span>{{fItem.arrivalTime}}</span>
                  </div>
                  <div>{{fItem.arrivalAirPortName}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="TripStartInfo">
            <div>
              出發日期：<span class="tripRightspan">{{CurrentPriceInfo.startDate}}</span>
            </div>
            <div>
              團位編號：<span class="tripRightspan">
                  <template v-if="CurrentPriceInfo&&CurrentPriceInfo.tcnum">
                      {{CurrentPriceInfo.tcnum.toUpperCase()}}
                  </template>
                  </span>
            </div>
            <div class="TripCanbao">
              <div>可報名人數：<span class="tripRightspan">{{ CurrentPriceInfo.seat}}位</span>
              </div>
              <div>
                {{CurrentPriceInfo.b2BPrice}}<span class="TripQi">起</span>
              </div>
            </div>
            <div class="trip_BtnDiv">
              <q-btn style="width:100%;" type="a" label="立即预定" color="primary" @click="buyNow()"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { date,useQuasar } from "quasar";
  import { inject, provide, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance  } from 'vue';
  import { useRouter } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { DirtionmaryHelper } from 'src/config/dictionary'
  import scheduledTripService from 'src/api/scheduledTrip'
  import { ApiResult } from 'src/@types/enumHelper'
  import message from 'src/utils/message'
  import { formatDate, formatDate2, AddMonth, createCalendar } from 'src/utils/tools'
  export default defineComponent({
    components: {  },
    props: [],
    setup(props,context) {
      const $router = useRouter()
      const { t } = useI18n()
      const $q = useQuasar()
      const data= reactive({
        week: ['日', '一', '二', '三', '四', '五', '六'],
        monthList: [], //月份数据   
        CurrentPriceInfo: {}, //当前选择的数据
        dateData: props.dateData,
        priceInfo: props.priceInfo
      })
      const methods = {
        buyNow(){
          context.emit('showDialog')
        },
        //点击日期
        clickDay(subItem) {
          if (data.monthList && data.monthList.length > 0) {
            data.monthList.forEach(item => {
              if (item.dayArray && item.dayArray.length > 0) {
                item.dayArray.forEach(childItem => {
                  childItem.checked = false;
                })
              }
            });
          }
          subItem.checked = !subItem.checked;
          if (data.dateData && data.dateData.length > 0) {
            data.dateData.forEach(item => {
              if (item.startDate == subItem.dayStr) {
                data.CurrentPriceInfo = {
                  b2BMemberPrice: item.b2BMemberPrice,
                  b2BPrice: item.b2BPrice,
                  b2CMemberPrice: item.b2CMemberPrice,
                  b2CPrice: item.b2CPrice,
                  configID: item.configID,
                  dayNum: item.dayNum,
                  isSubstitution: item.isSubstitution,
                  seat: (item.ySeat + item.fSeat + item.cSeat) - (item.surplusCSeat +
                    item.surplusFSeat + item.surplusYSeat),
                  startDate: item.startDate,
                  tcState: item.tcState,
                  tcid: item.tcid,
                  tcnum: item.tcnum,
                  teamType: item.teamType,
                  totalSeat: (item.ySeat + item.fSeat + item.cSeat),
                  priceFlight: item.priceFlight
                };
              }
            });
          }
        },
        //组装团期数据
        selectDate() {
          if (data.monthList && data.monthList.length > 0) {
            data.monthList.forEach(item => {
              if (item && item.dayArray) {
                item.dayArray.forEach(subItem => {
                  if (data.dateData) {
                    data.dateData.forEach(dItem => {
                      if (dItem.startDate == subItem.dayStr) {
                        subItem.b2BPrice = dItem.b2BPrice;
                        subItem.b2BMemberPrice = dItem.b2BMemberPrice;
                        subItem.seat = dItem.seat;
                        subItem.isSubstitution = dItem.isSubstitution;
                      }
                    });
                  }
                });
              }
            });
          }
        },
        //生成月份和月份下每一天
        getCalendarMonth(qDate, key) {
          let tempMonthData = createCalendar(qDate);
          let tempMonth = tempMonthData.DayArray;
          let days = [];
          for (let i = 0; i < tempMonth.length; i++) {
            var tempDay = new Date(tempMonth[i].day);
            var newDayStr = formatDate(tempDay.getFullYear(), (tempDay.getMonth() + 1), tempDay.getDate());
            days.push({
              date: tempMonth[i].day,
              daymonth: (tempDay.getMonth() + 1),
              dayStr: newDayStr,
              day: tempDay.getDate(),
              checked: false,
            });
          };
          data.monthList.push({
            monthStr: tempMonthData.CurrentYear + "年-" + tempMonthData.CurrentMonth + "月",
            month: tempMonthData.CurrentMonth,
            dayArray: days,
          });
          methods.selectDate();
        },
        //获取月份
        getMonthsData: function () {
          var currentDate = formatDate2(new Date());
          let month = currentDate.CYear + "-" + currentDate.CMonth + '-1'
          for (let i = 0; i < 2; i++) {
            if (i != 0) {
              let newDate = formatDate2(AddMonth(month, 1));
              month = newDate.CYear + "-" + newDate.CMonth + '-1';
            }
            methods.getCalendarMonth(month, i);
          }
        },
    
      }
      
      if (data.priceInfo) {
        data.CurrentPriceInfo = {
          b2BMemberPrice: data.priceInfo.b2BMemberPrice,
          b2BPrice: data.priceInfo.b2BPrice,
          b2CMemberPrice: data.priceInfo.b2CMemberPrice,
          b2CPrice: data.priceInfo.b2CPrice,
          configID: data.priceInfo.configID,
          dayNum: data.priceInfo.dayNum,
          isSubstitution: data.priceInfo.isSubstitution,
          seat: (data.priceInfo.ySeat + data.priceInfo.fSeat + data.priceInfo.cSeat) - (data.priceInfo.surplusCSeat +
            data.priceInfo.surplusFSeat + data.priceInfo.surplusYSeat),
          startDate: data.priceInfo.startDate,
          tcState: data.priceInfo.tcState,
          tcid: data.priceInfo.tcid,
          tcnum: data.priceInfo.tcnum,
          teamType: data.priceInfo.teamType,
          totalSeat: (data.priceInfo.ySeat + data.priceInfo.fSeat + data.priceInfo.cSeat),
          priceFlight: data.priceInfo.priceFlight
        }
      }
      methods.getMonthsData()
    
      return {
        ...toRefs(data),
        ...methods,
      }
    }
  })
</script>
