<style>
  /* 日期样式开始 */
  .seatStatistics .month ul {
    border-radius: 4px 4px 0 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #e95252;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .seatStatistics .year-month {
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  .seatStatistics .year-month>input {
    width: 100px;
    float: left;
  }

  .seatStatistics .arrow {
    padding: 10px;
    font-style: normal;
    cursor: pointer;
  }

  .seatStatistics .monthminus {
    position: absolute;
    left: 0px;
    top: 15px;
  }

  .seatStatistics .monthadd {
    position: absolute;
    right: 21px;
    top: 15px;
  }

  .seatStatistics .month ul li {
    font-size: 18px;
    color: #fff;
    position: relative;
    display: inline-block;
    letter-spacing: 3px;
  }

  .seatStatistics .month ul li i {
    font-size: 22px;
    color: #ff7e7e;
    cursor: pointer;
  }

  .seatStatistics .month ul li>input {
    text-align: center;
  }

  .seatStatistics .weekdays {
    margin: 0;
    padding: 3px 0;
    background-color: #3fa783;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    color: #fff;
    justify-content: space-around;
  }

  .seatStatistics .weekdays li {
    display: inline-block;
    width: 14.2857%;
    text-align: center;
  }

  .seatStatistics .days li:nth-child(7n-1) p {
    color: #e95252 !important;
  }

  .seatStatistics .days li:nth-child(7n) p {
    color: #e95252 !important;
  }

  .seatStatistics .days {
    width: 100%;
    padding: 0;
    margin: 0;
    border-left: 1px solid #dddddd;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: space-around;
  }

  .seatStatistics .days>li {
    list-style-type: none;
    width: 14.2857%;
    height: 140px;
    text-align: center;
    position: relative;
    font-size: 12px;
    float: left;
    color: #000;
    box-sizing: border-box;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }

  .seatStatistics .days li>div {
    height: 112px;
    width: 100%;
    overflow-y: auto;
    text-align: left;
  }

  .seatStatistics .days li>div>p {
    border-bottom: 1px dashed #ccc;
    height: 28px;
    line-height: 28px;
    width: 100%;
    text-indent: 10px;
    background: #fff;
  }

  .seatStatistics .days li>div>p:nth-child(2n) {
    background: #f5f5f5;
  }

  .seatStatistics .currentInput {
    width: 120px;
    height: 30px;
    border-radius: 17px;
    outline: none;
    border: none;
    color: #fff;
    background: transparent;
    font-size: 18px;
  }

  .seatStatistics .days li .other-month {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px;
    height: 17px;
    font-size: 12px;
    line-height: 17px;
    background-color: #cccccc;
    color: #fff;
  }

  .seatStatistics .addCompany {
    width: 700px;
  }

  .seatStatistics .ckStyle {
    width: 100%;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    background: #ccc;
    color: #000;
  }

  .seatStatistics .ckStyleOther {
    background: #dddddd !important;
    font-weight: normal !important;
    color: #999;
  }

  .seatStatistics .el-dialog--center .el-dialog__body {
    padding-top: 0;
  }

  .HB_Inventor {
    display: block;
    text-align: left;
    padding-top: 8px;
  }

  .HB_Inventor>span {
    display: block;
    padding-left: 10px;
    font-size: 12px;
    height: 18px;
    margin-bottom: 3px;
  }

  .seatStatistics .Owe_Room {
    color: #e95252;
  }

  .seatStatistics .Used_room {
    color: #13b0ae;
  }

  .seatStatistics .otherMoth {
    background: #f2f2f2;
  }

  .seatStatistics .weekendDay {
    color: #e95252;
  }

  .seatStatistics .title {
    height: 14px;
    line-height: 14px;
    border-left: 3px solid #e95252;
    font-size: 16px;
    color: #333;
    text-indent: 10px;
    margin: 20px 0;
  }

  /* 日期样式结束*/

</style>
<template>
  <div class="flexOne seatStatistics">
    <div class="query-box Plan_Query">
      <ul>
        <li>
          <span>
            <em>{{$t('advmanager.v_line')}}</em>
            <el-select v-model="msg.QLineId" :placeholder="$t('pub.pleaseSel')" filterable>
              <el-option :label="$t('pub.unlimitedSel')" :value="defaultSelectValue"></el-option>
              <el-option v-for="item in LineList" :key="item.LineID" :label="item.LineName" :value="item.LineID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('system.table_goCity')}}</em>
            <el-select v-model="msg.QCityId" :placeholder="$t('system.ph_in')" filterable>
              <el-option :label="$t('pub.unlimitedSel')" :value="defaultSelectValue"></el-option>
              <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>
              {{ $t("system.query_airCompanyName") }}
            </em>
          </span>
          <el-select v-model="msg.QAirlineId" filterable :placeholder="$t('system.ph_buxian')" class="w150">
            <el-option :label="$t('system.ph_buxian')" :value="0">
            </el-option>
            <el-option v-for="item in AirlineList" :key="item.AirLineId" :label="item.AlName" :value="item.AirLineId">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>
            <em>{{$t('admin.admin_czPerson')}}</em>
            <el-select v-model="msg.QCreateBy" filterable :placeholder="$t('system.ph_in')" class="w120">
              <el-option :label="$t('pub.unlimitedSel')" :value="defaultSelectValue"></el-option>
              <el-option v-for="item in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
                :key="item.EmployeeId"></el-option>
            </el-select>
          </span>
        </li>
        <li style="margin-right:50px;">
          <button class="normalBtn" type="button" @click="GetHoltelInventory()">{{$t('pub.searchBtn')}}</button>
          <button class="normalBtn" type="button" @click="DownLoadAirticket()">{{$t('adm.adm_download')}}</button>
        </li>
      </ul>
    </div>
    <div class="title">
      {{$t('Operation.Op_jiweiTotal')}}
      <span class="Owe_Room">{{TotalCount}}</span> {{$t('Operation.Op_taoTotal')}}
      <span class="Owe_Room">{{TotalSeat}}</span>
    </div>
    <div class="month">
      <ul>
        <li>
          <i class="el-icon-caret-left monthminus" @click="currentYear-=1,getDateString(),initCalendar(dateString)"></i>
          <input type="text" disabled="disabled" v-model="currentYear" class="currentInput"
            @input="getDateString(),initCalendar(dateString)">{{$t('pub.year')}}
          <i class="el-icon-caret-right monthadd" @click="currentYear+=1,getDateString(),initCalendar(dateString)"></i>
        </li>
        <li>
          <i class="el-icon-caret-left monthminus" @click="pickPre(currentYear,currentMonth)"></i>
          <input type="text" disabled="disabled" v-model="currentMonth" class="currentInput"
            @input="getDateString(),initCalendar(dateString)">{{$t('pub.month')}}
          <i class="el-icon-caret-right monthadd" @click="pickNext(currentYear,currentMonth)"></i>
        </li>
      </ul>
    </div>

    <ul class="weekdays">
      <li>{{$t('hotel.hotel_Monday')}}</li>
      <li>{{$t('hotel.hotel_Tuesday')}}</li>
      <li>{{$t('hotel.hotel_Wednesday')}}</li>
      <li>{{$t('hotel.hotel_Thursday')}}</li>
      <li>{{$t('hotel.hotel_Friday')}}</li>
      <li class="weekendDay">{{$t('hotel.hotel_Saturday')}}</li>
      <li class="weekendDay">{{$t('hotel.hotel_Sunday')}}</li>
    </ul>
    <ul class="days clearfix" v-loading="loading">
      <li v-for="(dayobject,index) in days" :key="dayobject.index">
        <p class="ckStyle" :class="{ckStyleOther:dayobject.day.getMonth()+1 != currentMonth}">
          {{dayobject.day.getDate()}} ({{dayobject.TotalCount}})</p>
        <div class="ownScrollbarStyle">
          <p class="over_ellipsis" v-for="item in dayobject.listArr" @click="goUrl('TicketManager',item,'票务管理')">
            {{item.AirLineTicketId}}
            {{item.DepartureName}}
            -
            {{item.AlCode}}
            -
            {{item.InOut}}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          Year: new Date().Format("yyyy"),
          Month: new Date().Format("MM"),
          //线路编号
          QLineId: 0,
          //出发城市
          QCityId: 0,
          //操作人
          QCreateBy: "",
          FlightDate: "",
          QAirlineId: "", //航空公司
        },
        //线路列表
        LineList: [],
        defaultSelectValue: 0,
        //城市列表
        cityList: [],
        currentDay: 1,
        currentMonth: 1,
        currentYear: 1970,
        currentWeek: 1,
        days: [],
        //每天的机位库存
        DayData: [],
        //员工列表
        EmployeeList: [],
        TotalCount: 0,
        TotalSeat: 0,
        loading: false,
        //航空公司
        AirlineList: [],
      };
    },
    methods: {
      //获取航空公司
      getAirlineList() {
        this.apipost(
          "airline_post_GetList", {},
          (res) => {
            if (res.data.resultCode == 1) {
              this.AirlineList = res.data.data;
            }
          },
          (err) => {}
        );
      },
      //获取线路列表
      GetLineList() {
        this.apipost(
          "line_post_GetAllList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.LineList = res.data.data;
            }
          },
          err => {}
        );
      },
      goUrl(path, obj, name) {
        this.$router.push({
          path: path,
          query: {
            id: obj.AirLineTicketId,
            blank: "y",
            tab: name
          }
        });
      },
      //格式化日期
      getDateString: function () {
        this.dateString = this.$calendarUtils.formatDate(
          this.currentYear,
          this.currentMonth,
          1
        );
        this.GetHoltelInventory();
      },
      initCalendar: function (cur) {
        var newDays = this.$calendarUtils.createCalendar(cur);
        this.currentDay = newDays.CurrentDay;
        this.currentYear = newDays.CurrentYear;
        this.currentMonth = newDays.CurrentMonth;
        this.currentWeek = newDays.CurrentWeek;
        this.days.length = 0;
        var dateArray = newDays.DayArray;
        for (var i = 0; i < dateArray.length; i++) {
          var d = dateArray[i].day;
          var dayobject = {};
          dayobject.day = d;
          this.days.push(dayobject);
        }
      },
      //点击左箭头切换年月
      pickPre: function (year, month) {
        var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
        d.setDate(0);
        this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
        this.initCalendar(
          this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
        );
        this.GetHoltelInventory();
      },
      //点击右箭头切换年月
      pickNext: function (year, month) {
        var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
        d.setDate(35);
        this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
        this.initCalendar(
          this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
        );
        this.GetHoltelInventory();
      },
      //点击获取机票库存数据
      GetHoltelInventory() {
        this.loading = true;
        this.msg.FlightDate = this.currentYear + "-" + this.currentMonth + "-01";
        this.apipost(
          "AirTicket_get_GetMonthAirticketFlight",
          this.msg,
          res => {
            this.loading = false;
            this.DayData = res.data.data;
            this.TotalCount = 0;
            this.TotalSeat = 0;
            this.days.forEach(dayItem => {
              let d = dayItem.day;
              let myDate = this.$calendarUtils.formatDate(
                d.getFullYear(),
                d.getMonth() + 1,
                d.getDate()
              );
              for (var j = 0; j < this.DayData.length; j++) {
                if (this.DayData[j].DayStr == myDate) {
                  dayItem.listArr = this.DayData[j].SubList;
                  dayItem.TotalCount = dayItem.listArr.length;
                  dayItem.listArr.forEach(subItem => {
                    this.TotalSeat += subItem.TicketNum;
                  });
                  this.TotalCount += dayItem.TotalCount;
                }
              }
            });
            this.$forceUpdate();
          },
          err => {}
        );
      },
      //获取中国下面的城市列表
      getCityList() {
        this.apipost(
          "Destination_get_GetCityListByCountryId", {
            Id: 2
          },
          res => {
            this.cityList = res.data.data;
          },
          err => {}
        );
      },
      //根据当前员工所在部门获取该部门及子部门员工信息
      getEmployeeList() {
        let UserInfo = this.getLocalStorage();
        var msg = {
          GroupId: UserInfo.RB_Group_id
        };
        this.apipost(
          "admin_get_EmployeeGetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.EmployeeList = res.data.data;
            }
          },
          err => {}
        );
      },
      //机票导出
      DownLoadAirticket() {
        this.loading = true;
        var fileName = this.$t('objFill.v101.jipiaoxiaz') + this.msg.Month + ".xls";
        this.GetLocalFile("airticket_get_DownLoadAirticket", this.msg, fileName,
          res => {
            this.loading = false;
          });

      },
    },
    mounted() {
      //初始化日历
      let myDate = new Date();
      this.currentYear = myDate.getFullYear();
      this.currentMonth = myDate.getMonth() + 1;
      this.getAirlineList();
      this.getEmployeeList();
      this.getCityList();
      this.GetLineList();
      this.initCalendar();
      this.GetHoltelInventory();
    }
  };

</script>
