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

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

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

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

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

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

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

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

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

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

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

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

  .hotelSalesBoard .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;
  }

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

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

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

  .hotelSalesBoard .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;
  }

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

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

  .hotelSalesBoard .Owe_Room {
    color: #e95252;
  }

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

  .hotelSalesBoard .otherMoth {
    background: #f2f2f2;
  }

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

  .hotelSalesBoard .hasStock_1 {
    color: #FFFFFF;
    background-color: #ff3737;
  }

  .hotelSalesBoard .hasStock_2 {
    background-color: #ff99cc;
  }

  .hotelSalesBoard .hasStock_3 {
    background-color: #bcd6ee;

  }

  .hotelSalesBoard .hasStock_4 {
    background-color: #DDDDDD;
  }

  .hotelSalesBoard .hasStock_5 {
    background-color: #02F78E;
  }

  .hotelSalesBoard .stock1 {
    color: red;
  }

  .hotelSalesBoard .stock2 {
    color: white;
  }

  /* 日期样式结束*/

</style>
<template>
  <div class="flexOne hotelSalesBoard" style="padding:0 20px;">
    <div class="query-box Plan_Query">
      <ul style="position:relative;">
        <li>
          <span>
            <!-- 区域 -->
            <em style="min-width:60px;">面積</em>
            <el-select v-model="msg.Province" filterable @change="getProvinceList(msg.Province,2)"
              :placeholder="$t('hotel.hotel_province')">
              <el-option :key="0" :value="0" label="選択してください"></el-option>
              <el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
            <el-select v-model="msg.City" filterable :placeholder="$t('hotel.hotel_city')">
              <el-option :key="0" :value="0" label="選択してください"></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 style="min-width:60px;">会社名</em>
            <el-select filterable v-model='msg.OutBranchId' placeholder="選択してください">
              <el-option label="無制限" :value='-1'></el-option>
              <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <!-- 酒店 -->
            <em style="min-width:60px;">ホテル</em>
            <el-select v-model="msg.HotelId" placeholder="選択してください" filterable>
              <el-option label="無制限" :value="defaultSelectValue"></el-option>
              <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li style="display:none;">
          <span>
            <em>仕入先</em>
            <el-select v-model="msg.Supplier" placeholder="選択してください">
              <el-option label="無制限" :value='0'></el-option>
              <el-option v-for="(item,index) in SupplierList" :key="index" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li style="position:absolute;right:10px;top:0;">
          <!-- 查询 -->
          <button class="normalBtn" type="button" @click="GetHoltelInventory()">問い合わせ</button>
          <!-- 下载 -->
          <input type="button" class="normalBtn" value="ダウンロードする" @click="DownLoadHotelSalesBoard()" />
        </li>
      </ul>
    </div>
    <div class="title">
      <!-- 酒店统计 共 -->
      ホテルの統計 合計
      <span class="Owe_Room">{{TotalInventory}}</span> 部屋, 現在の使用         <!-- 间, 当前使用 -->
      <span class="Owe_Room">{{UseInventory}}</span> 部屋,割合   <!-- 间,占比-->
      <span class="Owe_Room">{{((UseInventory/TotalInventory)*100).toFixed(2)}}</span> %.
      &nbsp;&nbsp;
      <!-- 红日 -->
      <span class="hasStock_1" style="padding:2px 4px;border-radius:5px">赤い日</span>
      <!-- 旺季 -->
      <span class="hasStock_2" style="padding:2px 4px;border-radius:5px">ハイシーズン</span>
      <!-- 平季 -->
      <span class="hasStock_3" style="padding:2px 4px;border-radius:5px">フラットシーズン</span>
      <!-- 淡季 -->
      <span class="hasStock_4" style="padding:2px 4px;border-radius:5px">ローシーズン</span>
      <!-- 特别价 -->
      <span class="hasStock_5" style="padding:2px 4px;border-radius:5px">特別価格</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>{{$t('hotel.hotel_Saturday')}}</li>
      <li>{{$t('hotel.hotel_Sunday')}}</li>
    </ul>
    <ul class="days clearfix" v-loading="msg.loading">
      <li v-for="(dayItem,index) in days" :key="dayItem.index">
        <p class="ckStyle" :class="{ckStyleOther:dayItem.day.getMonth()+1 != currentMonth}">{{dayItem.day.getDate()}}
        </p>
        <div v-if="dayItem.dayValue">
          <p style="word-break:breakall;" :class="stockColor(subItem.InventoryType)"
            v-for="subItem in dayItem.dayValue">{{subItem.HotelName}}
            (总: {{subItem.Inventory}} &nbsp;&nbsp;
            <!--@click="goUrl('roomReservations',subItem,dayItem.DayStr,'订房管理')" text-decoration:underline;-->
            <a title="点击跳转到订房管理" v-if="subItem.UseInventory>0"
              
              style="cursor:pointer;"
              :class="subItem.InventoryType==4 ? 'stock1' : 'stock2'">已用:{{subItem.UseInventory}}</a>
            <span v-else>已用:{{subItem.UseInventory}}</span>
            )
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          Year: 0,
          Month: 0,
          HotelId: 0,
          //只查询日本
          Country: "651",
          Province: 0,
          City: 0,
          loading: false,
          OutBranchId: -1,
          //供应商编号
          Supplier:0,
        },
        //分公司列表
        companyList: [],
        //酒店列表
        HotelList: [],
        defaultSelectValue: 0,
        currentDay: 1,
        currentMonth: 1,
        currentYear: 1970,
        currentWeek: 1,
        days: [],
        //每天的机位库存
        DayData: [],
        //总库存
        TotalInventory: 0,
        //使用库存
        UseInventory: 0,
        //国家 省市 区
        provinceList: [],
        cityList: [],
        district: [],
        //供应商列表
        SupplierList:[]
      };
    },
    methods: {
      getBranchList() {
        this.ApiPost2('admin_get_BranchGetList', {
          RB_Group_Id: '2',
          Status: 0,
        }, res => {
          if (res.data.resultCode == 1) {
            this.companyList = res.data.data;
          }
        }, err => {})
      },
      stockColor: function (type) {
        //红日
        if (type === 1) {
          return 'hasStock_1'
        }
        //旺季
        else if (type === 2) {
          return 'hasStock_2'
        }
        //平季
        else if (type === 3) {
          return 'hasStock_3'
        } //淡季 
        else if (type === 4) {
          return 'hasStock_4'
        }
        //特别价
        else if (type === 5) {
          return 'hasStock_5'
        }
      },
      //调整到订房管理
      goUrl(path, obj, dateStr, name) {
        this.$router.push({
          path: path,
          query: {
            hotelId: obj.HotelId,
            dateStr: dateStr,
            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.msg.loading = true;
        this.msg.Year = this.currentYear;
        this.msg.Month = this.currentMonth;
        this.DayData = [];
        this.ApiPost2(
          "hotelreport_get_GetHotelPriceMonthStatisticsExt_Supplier",
          this.msg,
          res => {
            this.msg.loading = false;
            this.DayData = res.data.data;
            this.UseInventory = 0;
            this.TotalInventory = 0;
            this.days.forEach(dayItem => {
              let d = dayItem.day;
              dayItem.dayValue = [];
              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.dayValue = this.DayData[j].SubList;
                  dayItem.DayStr = this.DayData[j].DayStr;
                  this.DayData[j].SubList.forEach(subItem => {
                    this.TotalInventory = parseFloat(this.TotalInventory) + parseFloat(subItem.Inventory);
                    this.UseInventory = parseFloat(this.UseInventory) + parseFloat(subItem.UseInventory);
                  });
                }
              }
            });
            this.$forceUpdate();
          },
          err => {}
        );
      },
      //获取酒店列表
      GetHotelList() {
        this.ApiPost2(
          "hotel_post_GetHasStockHotelList_Supplier", {
            Country: 651,
            IsMoreThanZero: 1
          },
          res => {
            if (res.data.resultCode == 1) {
              this.HotelList = res.data.data;
            }
          },
          err => {}
        );
      },
      getProvinceList(ID, type) {
        //根据省份获取城市
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.msg.Province = 0;
          this.msg.City = 0;
          this.provinceList = [];
          this.cityList = [];
        } else if (type == 2) {
          this.msg.City = 0;
          this.cityList = [];
        }
        this.ApiPost2(
          "dict_post_Destination_GetChildList",
          msg,
          res => {
            if (type == 1) {
              this.provinceList = res.data.data;
            } else if (type == 2) {
              this.cityList = res.data.data;
            }
          },
          err => {}
        );
      },
      //Excel下载
      DownLoadHotelSalesBoard() {
        if (this.msg.HotelId > 0) {
          this.msg.loading = true;
          let qMsg = {
            queryMsg: this.msg,
            uid: this.getLocalStorageSupplier().SupplierAccountId
          };
          let fileName = "酒店统计" + this.$commonUtils.getCurrentDate() + ".xls";
          this.GetLocalFile("hotel_get_downloadHotelSalesBoard_Supplier", qMsg, fileName,
            res => {
              this.msg.loading = false;
            });
        } else {
          this.Info("请选择要下载的酒店!");
        }
      },
      // 获取供应商
      initSupplier() {
        this.ApiPost2("supplier_post_GetAllList", {
          Type: 1
        }, res => {
          if (res.data.resultCode === 1) {
            this.SupplierList = res.data.data;
          }
        }, err => {});
      },
    },
    mounted() {
      //初始化日历
      var id = this.$route.query.id;
      if (id) {
        this.msg.HotelId = parseInt(id);
      }
      let myDate = new Date();
      this.currentYear = myDate.getFullYear();
      this.currentMonth = myDate.getMonth() + 1;
      this.msg.Year = this.currentYear;
      this.msg.Month = this.currentDay;
      //this.initSupplier();
      this.getBranchList();
      this.GetHotelList();
      this.initCalendar();
      this.GetHoltelInventory();
      this.getProvinceList(651, 1);
    }
  };

</script>