<style>

  .comCheckHotel .comCheckHotel {
    width: 100%;
    height: 150px;
    overflow: auto
  }

  .comCheckHotel .comCk_list {
    padding: 0 20px;
    margin: 0 15px 5px 0;
  }

  .comCheckHotel .cm_Inventory {
    margin-left: 20px;
    color: red;
    display: inline-block;
  }

  .comCheckHotel .cm_hotelTitle {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #d1d1d1;
    padding: 0 20px 10px 20px;
  }

  .comCheckHotel .com_SaveBtn {
    margin: 10px 20px 0 45%;
  }

  .comCheckHotel .ckedList {
    background-color: #E95252;
    color: #fff;
  }
  .comCheckHotel .Ck_hotelInfo{
    width:100%;
    height:40px;
    background-color: #F6F8FB;
    text-align: center;
    line-height: 40px;
    margin-bottom:10px;
  }
  .comCheckHotel .ck_goUrl{
      color:blue;
      cursor: pointer;
      margin-left:10px;
  }
</style>

<template>
  <div class="comCheckHotel">
    <div class="Ck_hotelInfo">
      <span style="color:red">{{UseDate}}</span> {{$t('objFill.jdkcxx')}}
    </div>
    <div class="cm_hotelTitle clearfix">
      <div style="float:left;">
        {{$t('pub.area')}}:
        <el-select filterable v-model="qMsg.ProvinceId" class="w120" :placeholder="$t('pub.pleaseSel')">
          <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
          <el-option v-for="item in ProvinceList" :label='item.Name' :value='item.ID' :key='item.ID'>
          </el-option>
        </el-select>
      </div>
      <div style="float:left;margin-left:10px;">
        {{$t('objFill.v101.traveltrip.jiudmcdh')}}:
        <el-input type="text" v-model="qMsg.Name" class="w120" @keyup.native.enter="getCheckHotel()" :placeholder="$t('objFill.jiudianhdh')"></el-input>
        <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="getCheckHotel()" />
      </div>
    </div>
    <div v-loading="hotelLoading"   >
      <el-tabs type="border-card" v-if="IsShow" >
        <el-tab-pane :label="item.ProvinceName" v-for="(item,index) in dataList" :key="item.subCode">
          <div class="clearfix comCheckHotel">
              <div class="comCk_list" v-for="(subItem,subIndex) in item.HotelList">
                <input :id="'H'+index+'_'+subIndex" type="checkbox" v-model="subItem.isChecked" @click="getCheck(item.HotelList,subIndex)"/>
                <label :for="'H'+index+'_'+subIndex" style="cursor: pointer">{{subItem.Name}}
                  <template v-if="subItem.Supplier>0">
                     【{{subItem.SupplierName}}】
                  </template>
                </label>
                <span class="cm_Inventory">{{subItem.Inventory}}</span>
                <span class="cm_Inventory">{{$t('hotel.hotel_remainList')}}:{{subItem.RemainingInventory}}</span>
                <span class="ck_goUrl" @click="goUrl(subItem.ID)">{{$t('hotel.hotel_InventoryAdd')}}</span>
              </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <br/>
    <br/>
    <input type="button" class="normalBtn com_SaveBtn" @click="sendCkedHotel()" :value="$t('pub.saveBtn')" />
  </div>
</template>
<script>
  export default {
    props: ["UseDate","Country"],
    data() {
      return {
        hotelLoading:false,
        dataList: [],
        ProvinceList: [],
        qMsg:{
           ProvinceId: 0, //选择个省份编号
           Name:"",//酒店名称
        },
        IsShow:false,
        ckedHotel:{}
      };
    },
    methods: {
      getCheckHotel() {
        this.hotelLoading=true;
        this.IsShow=false;
        this.dataList = [];
        this.HotelList = [];
        this.apipost('hotel_post_GetHasStockHotelList_V2', {
          //1-只查询有库存的酒店
          IsMoreThanZero: 0,
          Country: this.Country,
          IsAllHotel: 1,
          Province: this.qMsg.ProvinceId,
          Name:this.qMsg.Name,
          sDate: this.UseDate
        }, res => {
          this.hotelLoading=false;
          this.IsShow=true;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
            this.dataList.forEach(x => {
              x.HotelList.forEach(y => {
                y.isChecked = false;
              })
            })
          } else {
            this.Error(res.data.message)
          }
        }, err => {})
      },
      getCheck(hotelList, index) {
        hotelList.forEach((x, subIndex) => {
          if (index == subIndex) {
            x.isChecked = !x.isChecked;
            this.ckedHotel = x;
          } else {
            x.isChecked = false;
          }
        })
        this.$forceUpdate();
      },
      //向父组件传递选中酒店
      sendCkedHotel() {
        var ckHotelObj = {};
        if(this.ckedHotel){
            ckHotelObj.ID = this.ckedHotel.ID;
            ckHotelObj.Address = this.ckedHotel.Address;
            ckHotelObj.Inventory = this.ckedHotel.Inventory;
            ckHotelObj.Name = this.ckedHotel.Name;
            ckHotelObj.PayStyle = this.ckedHotel.PayStyle;
            ckHotelObj.Tel = this.ckedHotel.Tel;
            ckHotelObj.RebateRatio=this.ckedHotel.RebateRatio;
            ckHotelObj.RebateCount=this.ckedHotel.RebateCount;
            ckHotelObj.CostPrice=this.ckedHotel.CostPrice;
            ckHotelObj.Supplier=this.ckedHotel.Supplier;
        }
        this.$emit("childHotel", ckHotelObj);
      },
      //获取日本下面的市->下拉框用
      getProvinceList() {
        let msg = {
          Id: this.Country
        };
        this.apipost("dict_post_Destination_GetChildList", msg, res => {
            if (res.data.resultCode == 1) {
              this.ProvinceList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      goUrl(ID){
         this.$router.push({
          path: 'HotelProductManage2',
          query: {
            id: ID,
            Country: this.Country,
            IsSelfBook: 1,
            blank: 'y',
            tab: '报价详情'
          }
        });
      }
    },
    mounted() {
      this.getProvinceList();
    }
  };
</script>