<style>
    .hotelKb .hotel_box{display: flex;flex-wrap: wrap;position: relative;padding: 20px; padding-left: 40px;}
    .hotelKb .hotel_item{width: 120px;height: 120px;border-radius: 4px;margin: 0 10px 10px 0;position: relative;cursor: pointer;overflow: hidden;}
    .hotelKb .hotel_item img{width: 100%;height: 100%;position: absolute;left: 0;top: 0}
    .hotelKb .hotel_item_info{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.5);}
    .hotelKb .el-input__icon{line-height: 34px;}
    .hotelKb .hotel_item_info_name{font-size: 12px;padding: 5px 10px;color: white;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
    .hotelKb .icon-img_chuangwei{color: #FFFFFF;opacity: 0.65;font-size: 12px;padding-right: 5px;}
    .hotelKb .RemainingInventory{font-size: 28px;color: white}
    .hotelKb .hotel_item_info_chuang{position: absolute;bottom: 10px;width: 100%;text-align: right;padding-right: 10px;}
    .hotelKb .hotel_item_info_warning{background-color: #E95252}
    .hotelKb .time .el-input--prefix .el-input__inner{padding-left: 30px}
</style>
<template>
  <div class="flexOne hotelKb">
       <div class="query-box">
           <ul>
                <li>
                    <label class="">{{$t('system.quety_area')}}</label>
                    <el-select v-model="msg.Country" clearable  filterable @change="getProvinceList(msg.Country,1)" :placeholder="$t('system.table_country')">
                        <el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
                        <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"  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"  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"  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>
                </li>
                <li class='time'>
                    <div class="block">
                        <span class="demonstration">{{$t('pub.year')}}</span>
                        <el-date-picker
                        v-model="msg.Year"
                        type="year"
                        placeholder="选择年"
                        value-format="yyyy">
                        </el-date-picker>
                    </div>
                </li>
                <li class='time'>
                    <div class="block">
                        <span class="demonstration">{{$t('pub.month')}}</span>
                        <el-date-picker
                        v-model="msg.Month"
                        type="month"
                        format='MM'
                        placeholder="选择月"
                        value-format="MM">
                        </el-date-picker>
                    </div>
                </li>
                <li>
                     <input type="button" class="hollowFixedBtn" value="查询" @click="getList()"/>
                </li>
           </ul>
           
       </div>
       <div class="hotel_box">
           <div class="hotel_item" v-for="item in DataList" v-loading="loading">
              <img v-if="item.HotelImage" :src="item.HotelImage">
              <img v-else="" src="../../assets/img/bg_z1@2x.png" :onerror="defaultImg">
              <div class="hotel_item_info" :class="item.warning? 'hotel_item_info_warning':''">
                  <p class="hotel_item_info_name">{{item.HotelName}}</p>
                  <p class="hotel_item_info_chuang"><span class='iconfont icon-img_chuangwei'></span><span class='RemainingInventory'>{{item.RemainingInventory}}</span></p>
              </div>
           </div>
       </div>
  </div>
</template>
<script>
export default {
  data(){
      return{
         msg:{
             Country:'',
             Province:'',
             City:'',
             District:'',
             Year:'',
             Month:'',
         },
         DataList:[],
         countryList:'',
         provinceList:'',
         cityList:'',
         district:'',
         loading: true,
         defaultImg: 'this.src="' + require('../../assets/img/bg_z1@2x.png') + '"',
      }
  },methods:{
     getList(){
         this.loading=true;  
         if(this.msg.Year==null){this.msg.Year=''}
         if(this.msg.Month==null){this.msg.Month=''}
         this.apipost('dict_post_HotelProduc_HotelStock',this.msg,res=>{           
            if(res.data.resultCode==1&&res.data.data.length>0){
                let DataList={}
                DataList = res.data.data;
                DataList.forEach(x => {
                    if(x.RemainingInventory<15){
                        x.warning = true
                    }                
                });
                this.DataList = DataList;
                this.loading=false; 
            }
         },err=>{})
     },
     getProvinceList(ID,type){//根据省份获取城市
        let msg = {Id:ID};
        if(type==1){
            this.msg.Province='';
            this.msg.City='';
            this.msg.District='';
            this.provinceList=[]
            this.cityList=[]
        }else if(type==2){
            this.msg.City='';
            this.msg.District='';
            this.cityList=[]
        }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.getList();
      this.getCountryList();
  },
}
</script>