<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>签证状态</em>
            <el-select v-model="msg.VisaType" :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option label="未办理" value="1"></el-option>
              <el-option label="办理中" value="2"></el-option>
              <el-option label="已办理" value="3"></el-option>
            </el-select>
          </span>
        </li>
        <!-- <li>
          <span>
            <em>出发城市</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>操作人</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>
          <button
            class="normalBtn"
            type="button"
            @click="GetHoltelInventory()">{{$t('pub.searchBtn')}}</button>
        </li>
      </ul>
    </div>
    <div class="title" v-if="VisaTJ.length!==0">
      <span v-for="(item, index) in VisaTJ" :key="index">
        <span>{{item.Name}}：</span>
        <span class="Owe_Room">{{item.VisaNum}}</span>
      </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)"
          >年
          <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)"
          >月
          <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">
      <li v-for="(dayobject,index) in days" :key="index">
        <p
          class="ckStyle"
          :class="{ckStyleOther:dayobject.day.getMonth()+1 != currentMonth}"
        >{{dayobject.day.getDate()}} ({{dayobject.TotalCount}})</p>
        <div class="ownScrollbarStyle">
          <p class="over_ellipsis" style="cursor: pointer" v-for="(item,index2) in dayobject.listArr" :key="index2" :title="item.VisaType===1?'个签-'+item.TCNUM+'('+item.VisaNum+')':'团签-'+item.TCNUM+'('+item.VisaNum+')'" @click="goUrl(item)">
            <span>{{item.VisaType===1?'个签':'团签'}}</span>
            -
            <span>{{item.TCNUM}}</span>
            <span>({{item.VisaNum}})</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        Month: '',
        VisaType: '-1'
      },
      //线路列表
      LineList: [],
      defaultSelectValue: 0,
      //城市列表
      cityList: [],
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 1,
      days: [],
      //每天的机位库存
      DayData: [],
      //员工列表
      EmployeeList: [],
      VisaTJ: []
    };
  },
  methods: {
    //获取线路列表
    GetLineList() {
      this.apipost(
        "line_post_GetAllList",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
          }
        },
        err => {}
      );
    },
    goUrl(item) {
      if (item.VisaType===1) {
        this.$router.push({
          path: 'signatureHandle',
          query: {
            StartTime: item.StartTime,
            blank: "y",
            tab: '个签办理'
          }
        });
      } else if (item.VisaType===2) {
        this.$router.push({
          path: 'visaWorksheet',
          query: {
            tcid: item.TCID,
            blank: "y",
            tab: '签证工作表'
          }
        });
      }
    },
    //格式化日期
    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.msg.Month = this.currentYear + "-" + this.currentMonth + "-01";
      this.apipost(
        "dmc_get_GetVisaMonthStatistics",
        this.msg,
        res => {
          this.DayData = res.data.data.list;
          this.VisaTJ = res.data.data.VisaTJ;
          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 = this.DayData[j].totalNum;
                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 => {}
      );
    }
  },
  mounted() {
    //初始化日历
    let myDate = new Date();
    this.currentYear = myDate.getFullYear();
    this.currentMonth = myDate.getMonth() + 1;
    this.getEmployeeList();
    this.getCityList();
    this.GetLineList();
    this.initCalendar();
    this.GetHoltelInventory();
  }
};
</script>