<style>

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

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

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

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

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

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

<template>
  <div class="commonPriceHotelWork">
    <div class="Ck_hotelInfo">
      <span style="color:red">{{TCNUM}} 【{{DateStr}}】</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>
      <el-tabs type="border-card" v-loading="loading" 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}}</label>
                <span class="cm_Inventory">{{subItem.Inventory}}</span>
                <span class="cm_Inventory">{{$t('hotel.hotel_remainList')}}:{{subItem.RemainingInventory}}</span>
                <span class="cm_Inventory">{{$t('objFill.jiage')}}:{{subItem.CostPrice}}</span>
              </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <input type="button" class="normalBtn com_SaveBtn" @click="sendCkedHotel()" :value="$t('pub.saveBtn')" />
  </div>
</template>
 <script>
   export default {
     props: ["TCID", "DateStr","DayNum","TCNUM"],
     data() {
      return {
        loading:false,
        dataList: [],
        ProvinceList: [],
        qMsg:{
           ProvinceId: 0, //选择个省份编号
           Name:"",//酒店名称
        },
        IsShow:false,
        ckedHotel:{}
      };
    },
    methods: {
      getPriceHotelCheck() {
        this.loading=true;
        this.IsShow=false;
        this.dataList = [];
        this.HotelList = [];
        this.apipost('hotel_post_GetHasStockHotelList_V2', {
          //1-只查询有库存的酒店
          IsMoreThanZero: 1,
          Country: "651",
          IsAllHotel: 1,
          Province: this.qMsg.ProvinceId,
          Name:this.qMsg.Name,
          sDate: this.DateStr
        }, res => {
          this.loading=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.TCID=this.TCID;
            ckHotelObj.DateStr=this.DateStr;
            ckHotelObj.DayNum=this.DayNum;
        }
        this.$emit("childPriceHotel", ckHotelObj);
      },
      //获取日本下面的市->下拉框用
      getProvinceList() {
        let msg = {
          Id: 651
        };
        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 => {}
        );
      }
    },
    mounted() {
      this.getProvinceList();
    }
  };
 </script>