<style>
    .lowinventory .hotel_box{position: relative;min-height: 500px;margin-top:30px;}
    .lowinventory .hotel_item{width: 120px;height: 120px;border-radius: 4px;margin: 0 30px 30px 0;position: relative;overflow: hidden;color:#fff;font-size:12px;float:left;}
    .lowinventory .hotel_item:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
    .lowinventory .hotel_item img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;
        filter:blur(1px);
        -webkit-filter:blur(1px);
        -moz-filter:blur(1px);
        -ms-filter:blur(1px);
        -o-filter:blur(1px);
    }
    .lowinventory .hotel_item_info{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color:rgba(0, 0, 0, 0.5)}
    .lowinventory .icon-img_chuangwei{color: #FFFFFF;opacity: 0.65;font-size: 12px;padding-right: 5px;}
    .lowinventory .time .el-input--prefix .el-input__inner{padding-left: 30px}
    .lowinventory .dataList{font-size:14px;text-align: center;height:30px;line-height:30px;border-bottom:1px dashed #fff;}
    .lowinventory .el-icon-date{margin-right:10px;}
    .lowinventory .remainSet{width:100%;height:45px;text-align: center;line-height: 45px;}
    .lowinventory .remainSet span{font-size:25px;position:relative;top:1px;}
    .lowinventory .hotelTitle{padding:0 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;text-align: center;}
    .lowinventory .el-input__icon{line-height: normal;}
    .lowinventory .el-input--prefix .el-input__inner{padding-left:30px;}
    .lowinventory .w150 .el-input{width:150px!important;}
    .lowinventory .ProductName{width:100%;text-align: center;margin-bottom:3px;font-size:14px;}
</style>
<template>
  <div class="flexOne lowinventory">
       <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 clearable class="w150"
                                v-model="msg.sDate"
                                type="date"
                                :picker-options="pickerOptions1"
                                value-format="yyyy-MM-dd"
                                :placeholder="$t('admin.admin_choDate')">
                        </el-date-picker>
                        <el-date-picker clearable class="w150"
                                v-model="msg.eDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                :picker-options="pickerOptions2"
                                :placeholder="$t('admin.admin_choDate')">
                        </el-date-picker>
                    </span>
                </li>
                <li>
                     <button class="hollowFixedBtn" @click="resetPageIndex(),getList()">{{$t('pub.searchBtn')}}</button>
                </li>
           </ul>
       </div>
       <div class="hotel_box" v-loading="loading">
            <div class="noData" v-show="noData">
                {{$t('system.content_noData')}}
            </div>
            <div class="hotel_item" v-for="item in DataList" :key="item.subCode">
              <img v-if="item.PicPath" :src="item.PicPath">
              <img v-else src="../../assets/img/LowInventory.png" :onerror="defaultImg">

              <div class="hotel_item_info">
                  <div class="dataList">
                        <i class="el-icon-date"></i>{{item.Date}}
                  </div>
                  <div class="remainSet">{{$t('hotel.hotel_remain')}}<span>{{item.RemainingInventory}}</span></div>
                  <div class="ProductName">{{item.ProductName}}</div>
                  <div class="hotelTitle">{{item.Name}}</div>
              </div>
           </div>
       </div>
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            layout="total,prev, pager, next, jumper"
            :page-size=msg.pageSize
            :total=total>
        </el-pagination>

  </div>
</template>
<script>
export default {
  data(){
      return{
         msg:{
             pageIndex:1,
             pageSize:30,
             Country:'',
             Province:'',
             City:'',
             District:'',
             sDate:'',
             eDate:'',
         },
         pickerOptions1:{
            disabledDate: (time) => {
                let endTime = new Date(this.msg.eDate);
                return endTime.getTime()<time.getTime()||time.getTime() < Date.now()-100000000;
            }
         },
         pickerOptions2:{
            disabledDate: (time) => {
                let startTime = new Date(this.msg.sDate);
                return startTime.getTime()>=time.getTime()
            }
         },
         noData:true,
         DataList:'',
         defaultImg: 'this.src="' + require('../../assets/img/LowInventory.png') + '"',
         countryList:'',
         provinceList:'',
         cityList:'',
         district:'',
         loading: true,
         total:0,
         currentPage: 1,
      }
    },
    methods:{
        getList(){
            this.loading=true;
            this.apipost('hotel_post_GetLowInventoryPageList',this.msg,res=>{
                this.loading=false;
                if(res.data.resultCode==1){
                    this.DataList = res.data.data.pageData;
                    this.total = res.data.data.count;
                    if(this.total>0){
                        this.noData = false;
                    }
                }else{
                    this.noData = true;
                }
            },err=>{})
        },
        handleCurrentChange(val){
            this.msg.pageIndex=val;
            this.getList();
        },
        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=>{})
    },
    getNextMonth(date) {
            var arr = date.split('-');
            var year = arr[0]; //获取当前日期的年份
            var month = arr[1]; //获取当前日期的月份
            var day = arr[2]; //获取当前日期的日
            var days = new Date(year, month, 0);
            days = days.getDate(); //获取当前日期中的月的天数
            var year2 = year;
            var month2 = parseInt(month) + 1;
            if (month2 == 13) {
                year2 = parseInt(year2) + 1;
                month2 = 1;
            }
            var day2 = day;
            var days2 = new Date(year2, month2, 0);
            days2 = days2.getDate();
            if (day2 > days2) {
                day2 = days2;
            }
            if (month2 < 10) {
                month2 = '0' + month2;
            }
            var t2 = year2 + '-' + month2 + '-' + day2;
            this.msg.eDate = t2;
        }
  },

  mounted(){
      this.getList();
      this.getCountryList();
      var myDate = new Date();
      let nowData = myDate.getFullYear()+"-"+ parseInt(myDate.getMonth()+1) +"-"+myDate.getDate();
      this.msg.sDate = nowData;
      this.getNextMonth(this.msg.sDate);
  },
}
</script>