<style>
.alsoroom .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
}
.alsoroom .roomList {
  width: 100%;
  height: 100%;
  min-height: 500px;
}
.alsoroom .itemList {
  width: 795px;
  height: 143px;
  float: left;
  margin: 28px 10px 0 22px;
  background: #fff;
  position: relative;
  color: #666666;
  font-size: 12px;
  border-left: 6px solid #fff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.alsoroom .itemList:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
.alsoroom .roomType {
  float: left;
  margin-left: 10px;
  width: 37px;
  height: 18px;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  line-height: 18px;
  background: #47bf8c;
}
.alsoroom .leftInfo {
  width: 400px;
  margin-top: 22px;
  float: left;
}
.alsoroom .imgDiv {
  width: 148px;
  height: 99px;
  border-radius: 4px;
  float: left;
  margin: 0 20px 0 23px;
}
.alsoroom .Hoteltitle {
  font-size: 14px;
  font-family: "MicrosoftYaHei";
  color: rgba(0, 0, 0, 1);
  margin: 3px 0 15px 0;
}
.alsoroom .HotelContent {
  color: #666666;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.alsoroom .infoDiv {
  float: left;
  width: 201px;
}
.alsoroom .rightInfo {
  float: left;
  margin: 29px 20px 0 20px;
  padding-right: 20px;
  border-right: 1px dashed #d1d1d1;
}
.alsoroom .remainRoom {
  color: #47bf8c;
  margin: 0 3px;
  font-weight: bold;
}
.alsoroom .imgDiv img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.alsoroom .progressBar {
  float: left;
  width: 196px;
}
.alsoroom .proDiv {
  margin-top: 10px;
}
.alsoroom .iconRoom {
  float: left;
  margin: 20px 10px 0 0;
}
.alsoroom .useRoomTime {
  float: left;
  height: 30px;
  margin: 20px 10px 0 0;
}
.alsoroom .rightInfo button {
  float: right;
  margin-top: 20px;
}
.alsoroom .recentlyRoom .el-input__icon {
  line-height: 34px;
}
.alsoroom .el-form-item {
  margin: 20px 0 0 135px;
}
.alsoroom .el-form-item__error {
  left: 80px;
}
.alsoroom .typedif {
  margin: 20px;
}
.alsoroom .typedif span {
  display: inline-block;
  font-size: 12px;
  line-height: 12px;
}
.alsoroom .typedif span:nth-child(2) {
  position: relative;
  top: -1px;
  margin-right: 20px;
}
.alsoroom .typedif span:nth-child(4) {
  position: relative;
  top: -1px;
}
.alsoroom .lineTypeOne {
  width: 5px;
  height: 12px;
  background-color: #e95252;
  border-radius: 3px;
}
.alsoroom .lineTypeTwo {
  width: 5px;
  height: 12px;
  background-color: #47bf8c;
  border-radius: 3px;
}
.alsoroom .roomInformation {
  text-align: center;
  line-height: 100px;
  margin-top: 20px;
  padding-right: 20px;
}
.alsoroom .classOne {
  border-color: #47bf8c;
}
.alsoroom .classTwo {
  border-color: #e95252;
}
.alsoroom .el-input__icon {
  line-height: normal;
}
.alsoroom .el-input--prefix .el-input__inner {
  padding-left: 30px;
}
.alsoroom .hotelName {
  float: left;
  max-width: 154px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alsoroom .w150 .el-input {
  width: 150px !important;
}
</style>
<template>
            <div class="flexOne alsoroom">
                 <div class="query-box">
                    <ul>
                        <li>
                            <span>
                                <em>{{$t('system.quety_area')}}</em>
                                <el-select v-model="msg.Country" clearable class="w150" filterable @change="getProvinceList(msg.Country,1)" :placeholder="$t('hotel.hotel_country')">
                                    <el-option v-for='item in countryList'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                                <el-select v-model="msg.Province" class="w150" filterable @change="getProvinceList(msg.Province,2)" :placeholder="$t('hotel.hotel_province')">
                                    <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"  class="w150" filterable @change="getProvinceList(msg.City,3)" :placeholder="$t('hotel.hotel_city')">
                                    <el-option v-for='item in cityList'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                                <el-select v-model="msg.District" class="w150" filterable :placeholder="$t('hotel.hotel_area')">
                                    <el-option v-for='item in district'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                            </span>
                        </li>
                        <li>
                            <span>  
                                <em>{{$t('pub.date')}}</em>
                                <el-date-picker class="w150" clearable
                                        v-model="msg.StartDate"
                                        type="date"
                                        :picker-options="pickerOptions1"
                                        format="yyyy-MM-dd"
                                        :placeholder="$t('admin.admin_choDate')">
                                </el-date-picker>
                                -
                                <el-date-picker class="w150" clearable
                                        v-model="msg.EndDate"
                                        type="date"
                                        format="yyyy-MM-dd"
                                        :picker-options="pickerOptions2"
                                        :placeholder="$t('admin.admin_choDate')">
                                </el-date-picker>
                            </span>
                        </li>
                        <li>
                            <button class="hollowFixedBtn" @click="resetPageIndex(),initDate()">{{$t('pub.searchBtn')}}</button>
                        </li>
                </ul>
                 </div>
                <div class="roomList clearfix" v-loading="loading">
                    <div class="typedif">
                        <span class="lineTypeOne"></span>
                        <span>{{$t('hotel.hotel_roomTypeOne')}}</span>
                        <span class="lineTypeTwo"></span>
                        <span>{{$t('hotel.hotel_roomTypeTwo')}}</span>
                    </div>

                    <div class="itemList" v-for="(item,index) in dataList" :key="item.subCode" :class="{'classOne':item.ReturnCount>0,'classTwo':item.ReturnCount==0}">
                        <div class="leftInfo clearfix">
                              <div class="imgDiv">
                                  <img :src="item.HotelImage">
                              </div>      
                              <div class="infoDiv">
                                  <div class="Hoteltitle clearfix">
                                    <el-tooltip class="item" effect="dark" :content="item.HotelName" placement="top-start" popper-class="max-w250">
                                        <div class="hotelName">{{item.HotelName}}</div>
                                    </el-tooltip>
                                      <div class="roomType">{{usedPercent[index]}}</div>
                                  </div>
                                  <div class="HotelContent">
                                    {{item.ProductName}}
                                  </div>
                              </div>
                        </div>
                        <div class="rightInfo">
                            <div class="clearfix">
                                <span style="float:left;">{{$t('hotel.hotel_roomUsed')}}<span>{{item.UseInventory}}</span>{{$t('hotel.hotel_room')}}</span>
                                <span style="float:right;">{{$t('hotel.hotel_remain')}}<span class="remainRoom">{{item.RemainingInventory}}</span>{{$t('hotel.hotel_room')}}</span>
                            </div> 
                            <div class="proDiv">
                                <div class="progressBar">
                                    <el-progress :percentage="progress[index]" color="#47BF8C" :show-text='false'></el-progress>
                                </div>
                            </div>
                            <div class="clearfix">
                                <div class="iconRoom">
                                    <i class="iconfont icon-renyuankaoqin"></i>
                                </div>
                                <div class="useRoomTime">
                                    <span>{{$t('hotel.hotel_OccupancyTime')}}</span>
                                    <span>{{item.DateStr}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="roomInformation" v-if="item.ReturnCount>0">
                            {{$t('hotel.hotel_refund')}}<span class="remainRoom">{{item.ReturnCount}}</span>{{$t('hotel.hotel_roomList')}}
                        </div>
                        <div class="roomInformation" v-else>
                            <i class="el-icon-info"></i>{{$t('hotel.hotel_noReturnInformation')}}
                        </div>
                    </div>
                </div>
                <el-pagination v-if="choseIndex==1"
                    background
                    @current-change="handleCurrentChange" 
                    :current-page.sync="currentPage"
                    layout="total,prev, pager, next, jumper"
                    :page-size=msg.pageSize 
                    :total=total>
                </el-pagination>
                <el-dialog center custom-class='insideDialog' width="100" title="提示信息" :visible.sync="innerVisible" append-to-body>
                        {{this.insideDialogTxt}}
                        <div slot="footer" class="dialog-footer">
                            <button class="normalBtn" type="primary" @click="outerVisible=false,innerVisible=false">{{$t('pub.sureBtn')}}</button>
                        </div>
                </el-dialog>
            </div>
        
</template>

<script>
export default {
  data() {
    return {
      choseIndex: 1,
      total: 1,
      currentPage: 1,
      innerVisible: false,
      insideDialogTxt: "",
      dialogTitle: "",
      dataList: "",
      usedPercent: [],
      progress: [],
      loading: true,
      countryList: "",
      provinceList: "",
      cityList: "",
      district: "",
      msg: {
        pageIndex: 1,
        pageSize: 10,
        Country: "",
        Province: "",
        City: "",
        District: "",
        StartDate: "",
        EndDate: ""
      },
      pickerOptions1: {
        disabledDate: time => {
          let endTime = new Date(this.msg.EndDate);
          return endTime.getTime() < time.getTime();
        }
      },
      pickerOptions2: {
        disabledDate: time => {
          let startTime = new Date(this.msg.StartDate);
          return startTime.getTime() >= time.getTime();
        }
      }
    };
  },
  methods: {
    //初始化还房记录
    initDate() {
      this.loading = true;
      this.apipost(
        "hotelreport_get_RepayRoomRecord",
        this.msg,
        res => {
          this.usedPercent = [];
          this.progress = [];
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
            this.dataList.forEach(x => {
              let Count = x.UseInventory + x.RemainingInventory;
              let y = x.UseInventory / Count * 100;
              if (y > 100) {
                y = 100;
              }
              this.progress.push(y);
              let n = x.ProductName.substring(0, 2);
              this.usedPercent.push(n);
            });
          }
        },
        err => {}
      );
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.initDate();
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    getProvinceList(ID, type) {
      //根据省份获取城市
      let msg = { Id: ID };
      if (type == 1) {
        this.msg.Province = "";
        this.msg.City = "";
        this.msg.District = "";
      } else if (type == 2) {
        this.msg.City = "";
        this.msg.District = "";
      } else if (type == 3) {
        this.msg.District = "";
      }
      if (this.msg.Country !== "") {
        this.apipost(
          "dict_post_Destination_GetChildList",
          msg,
          res => {
            if (type == 1) {
              this.provinceList = res.data.data;
            } else if (type == 2) {
              this.cityList = res.data.data;
            } else if (type == 3) {
              this.district = res.data.data;
            }
          },
          err => {}
        );
      }
    },
    getCountryList() {
      //获取国家
      let msg = {};
      this.apipost(
        "dict_post_Destination_GetCountry",
        msg,
        res => {
          this.countryList = res.data.data;
        },
        err => {}
      );
    }
  },

  mounted() {
    this.initDate(); //初始化列表
    this.getCountryList(); //初始化国家
  }
};
</script>