<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">
              <template v-if="CurrentPriceInfo.priceFlight&&CurrentPriceInfo.priceFlight.length>0"
                v-for="(fItem,fIndex) in CurrentPriceInfo.priceFlight">
                <div class="trafficList" :key="fIndex+100">
                  <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>
              </template>
            </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>
  export default {
    props: {
      dateData: Array,
      priceInfo: Object,
    },
    data() {
      return {
        week: ['日', '一', '二', '三', '四', '五', '六'],
        monthList: [], //月份数据   
        CurrentPriceInfo: {}, //当前选择的数据
      }
    },
    mounted() {
      this.getMonthsData()
      if (this.priceInfo) {
        this.CurrentPriceInfo = {
          b2BMemberPrice: this.priceInfo.b2BMemberPrice,
          b2BPrice: this.priceInfo.b2BPrice,
          b2CMemberPrice: this.priceInfo.b2CMemberPrice,
          b2CPrice: this.priceInfo.b2CPrice,
          configID: this.priceInfo.configID,
          dayNum: this.priceInfo.dayNum,
          isSubstitution: this.priceInfo.isSubstitution,
          seat: (this.priceInfo.ySeat + this.priceInfo.fSeat + this.priceInfo.cSeat) - (this.priceInfo.surplusCSeat +
            this.priceInfo.surplusFSeat + this.priceInfo.surplusYSeat),
          startDate: this.priceInfo.startDate,
          tcState: this.priceInfo.tcState,
          tcid: this.priceInfo.tcid,
          tcnum: this.priceInfo.tcnum,
          teamType: this.priceInfo.teamType,
          totalSeat: (this.priceInfo.ySeat + this.priceInfo.fSeat + this.priceInfo.cSeat),
          priceFlight: this.priceInfo.priceFlight
        }
      }
    },
    created() {

    },
    methods: {
      buyNow(){
        this.$emit('showDialog')
      },
      //点击日期
      clickDay(subItem) {
        if (this.monthList && this.monthList.length > 0) {
          this.monthList.forEach(item => {
            if (item.dayArray && item.dayArray.length > 0) {
              item.dayArray.forEach(childItem => {
                childItem.checked = false;
              })
            }
          });
        }
        subItem.checked = !subItem.checked;
        if (this.dateData && this.dateData.length > 0) {
          this.dateData.forEach(item => {
            if (item.startDate == subItem.dayStr) {
              this.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 (this.monthList && this.monthList.length > 0) {
          this.monthList.forEach(item => {
            if (item && item.dayArray) {
              item.dayArray.forEach(subItem => {
                if (this.dateData) {
                  this.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 = this.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 = this.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,
          });
        };
        this.monthList.push({
          monthStr: tempMonthData.CurrentYear + "年-" + tempMonthData.CurrentMonth + "月",
          month: tempMonthData.CurrentMonth,
          dayArray: days,
        });
        this.selectDate();
      },
      //获取月份
      getMonthsData: function () {
        var currentDate = this.formatDate2(new Date());
        let month = currentDate.CYear + "-" + currentDate.CMonth + '-1'
        for (let i = 0; i < 2; i++) {
          if (i != 0) {
            let newDate = this.formatDate2(this.AddMonth(month, 1));
            month = newDate.CYear + "-" + newDate.CMonth + '-1';
          }
          this.getCalendarMonth(month, i);
        }
      },
    }
  }

</script>
