<style>
  .HotelWorkList .has-gutter tr th,
  .el-table th.is-leaf {
    background-color: #EAEAEA !important;
  }

  .HotelWorkList .HW_hotelDialog {
    width: 900px;
  }

  .HotelWorkList .Hw_tableOne {
    width: 100%;
    height: 40px;
    background-color: #EAEAEA;
  }

  .HotelWorkList .Hw_tableOne th {
    text-align: center;
  }

  .HotelWorkList .HotelWorkInput .el-input {
    width: 223px;
  }

  .HotelWorkList .HworkInput .el-input {
    width: 110px;
  }

</style>

<template>
  <div class="HotelWorkList">
    <div class="query-box HotelWorkInput" style="border-bottom: none;">
      <ul>
        <li>
          <span>
            <em>{{$t('system.quety_area')}}</em>
            <el-select v-model="msg.Province" filterable class="w110 HworkInput"
              @change="getProvinceList(msg.Province,2)" :placeholder="$t('hotel.hotel_province')">
              <el-option :key="0" :value="0" :label="$t('pub.pleaseSel')"></el-option>
              <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 class="w110 HworkInput" :placeholder="$t('hotel.hotel_city')">
              <el-option :key="0" :value="0" :label="$t('pub.pleaseSel')"></el-option>
              <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li style="display:none;">
          <span><em>{{$t('admin.admin_company')}}</em>
            <el-select filterable v-model='msg.OutBranchId' :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
              <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('hotel.hotel_starlevel')}}</em>
            <el-select v-model="msg.Star" :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
              <el-option :label="$t('ground.sanxinghsw')" :value='3'></el-option>
              <el-option :label="$t('ground.sixing')" :value='4'></el-option>
              <el-option :label="$t('ground.wuxing')" :value='5'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('ground.jiagequjian')}}</em>
            <el-select v-model="msg.PriceLevel" :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
              <el-option label="5000以下" :value='1'></el-option>
              <el-option label="5000~6000" :value='2'></el-option>
              <el-option label="6000~7000" :value='3'></el-option>
              <el-option label="7000~8000" :value='4'></el-option>
              <el-option label="8000~9000" :value='5'></el-option>
              <el-option label="9000~10000" :value='6'></el-option>
              <el-option label="10000以上" :value='7'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('adm.adm_time')}}</em>
            <el-date-picker v-model="msg.YearMonthStr" type="month" value-format="yyyy-MM"
              :placeholder="$t('ground.xuanzeyue')">
            </el-date-picker>
          </span>
        </li>

        <li>
          <span>
            <em>{{$t('hotel.hotel_Supplier')}}</em>
            <el-select v-model="msg.Supplier" :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
              <el-option v-for="(item,index) in SupplierList" :key="index" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('hotel.hotel')}}</em>
            <el-select v-model="msg.HotelChooseArray" :placeholder="$t('pub.pleaseSel')" class="multiple_input w300"
              filterable multiple :multiple-limit="3">
              <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="getList()" />
          <input type="button" class="normalBtn" :value="$t('adm.adm_download')" @click="DownLoadHotelWork()" />
        </li>
      </ul>
    </div>
    <div class="hotelProductManage2_tableBox" style="margin-bottom: 20px;">
      <span style="color:#FFFFFF; background-color:green ; padding: 2px 4px; border-radius: 5px;">OK</span>
      <span
        style="color:#FFFFFF; background-color:#3333CC; padding: 2px 4px; border-radius: 5px;">{{$t('visa.v_zanding')}}</span>
      <span
        style="color:#FFFFFF; background-color:red; padding: 2px 4px; border-radius: 5px;">{{$t('ground.wicaozuo')}}</span>
      <span
        style="color:#FFFFFF; background-color:#000; padding: 2px 4px; border-radius: 5px;">{{$t('ground.wukucun')}}</span>
    </div>
    <template v-if="isShow">
      <el-table :data="dataList" style="width:100%" border v-loading='loading' :height="tableHeight">
        <el-table-column fixed :label="$t('hotel.hotel_name')" min-width="220" style="background:#EAEAEA">
          <template slot-scope="scope">
            <div style="text-decoration: underline;cursor:pointer" @click="GotoHotel(scope.row.Hotel)">
              {{scope.row.HotelName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column v-for='(item,index) in dataList[0].DayList' :label="item.DateStr" :key='index' min-width="210">
          <template slot-scope="scope">
            <template v-if="scope.row.DayList[index].IsHaveStock==0">
              <div style="background-color:#000!important;width:50px;height:100%;margin:0,padding:0;color:#FFFFFF">
                {{$t('ground.wukucun')}}
              </div>
            </template>
            <template v-else>
              <template
                v-if="scope.row.DayList[index].HotelJourneyOrderList&&scope.row.DayList[index].HotelJourneyOrderList.length>0">
                <template v-for="(childItem,childIndex) in scope.row.DayList[index].HotelJourneyOrderList">
                  <div :title="childItem.TCID+'【OK】'" v-if="childItem.DMCState==1||childItem.OPState==1" :key="childIndex"
                    slot="reference"
                    style="white-space:nowrap;color:green;cursor:pointer;text-decoration:underline;display:inline-block"
                    @click="outerVisible=true,GetClickItem(item.DateAllStr,scope.row.Hotel,childItem.TCID)">
                    {{childItem.BookGroup}}
                  </div>
                  <a style="display:inline-block;text-decoration:underline;color:red;cursor:pointer" :key="childIndex"
                    @click="DeleteHotel(item.DateAllStr,scope.row.Hotel,childItem.TCID)">{{$t('system.table_delete')}}</a>
                </template>
              </template>
              <template v-else>
                <div slot="reference" class="w80" style="cursor:pointer;text-decoration:underline;"
                  @click="outerVisible=true,GetClickItem(item.DateAllStr,scope.row.Hotel,0)">
                  {{$t('ground.shezhijiudian')}}
                </div>
              </template>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="noDataNotice" v-if="dataList.length==0">
        <i class="iconfont icon-kong"></i>
        <p>{{$t("active.ld_noData")}}</p>
      </div>
    </template>
    <el-dialog custom-class='HW_hotelDialog' :title="'【'+qMsg.DateStr+'】团期酒店信息列表'" :visible.sync="outerVisible" center>
      <div>
        {{$t('ground.thdjth')}}:&nbsp;&nbsp;&nbsp;<el-input type="text" v-model="qMsg.TCNUM" maxlength="50"
          class="w200"></el-input>
        <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="GetChangeHotelList()" />
      </div>
      <table class="Hw_tableOne" style="margin-top:20px;">
        <tr>
          <th width="60">
            {{$t('fnc.xuanze')}}
          </th>
          <th width="145">
            {{$t('visa.v_tuanhao')}}
          </th>
          <th width="150">
            {{$t('salesModule.DJNum')}}
          </th>
          <th width="125">
            {{$t('hotel.hotel')}}
          </th>
          <th width="125">
            {{$t('salesModule.ChangeHotel')}}
          </th>
          <th width="80">
            {{$t('salesModule.OPstatus')}}
          </th>
          <th width="90">
            {{$t('salesModule.DJstatus')}}
          </th>
          <th width="90">
            {{$t('system.table_operation')}}
          </th>
        </tr>
      </table>
      <div style="height:400px;overflow:auto;border-bottom:1px solid #d1d1d1;border-left:1px solid #d1d1d1;"
        v-loading="changeLoading">
        <table style="width:100%;">
          <tr v-for="(hItem,hIndex) in MyDataList" :key="hIndex">
            <td style="text-align:center;" width="60">
              <el-checkbox :checked="hItem.IsChecked" @change="ChangeStatus(hItem)"></el-checkbox>
            </td>
            <td style="text-align:center;" width="145">
              {{hItem.TCNUM}}<br />({{hItem.TCID}})
            </td>
            <td style="text-align:center;" width="150">
              {{hItem.DMCNum}}
            </td>
            <td style="text-align:left;" width="125">
              {{hItem.OldHotelName}}
            </td>
            <td style="text-align:left;" width="125">
              {{hItem.NewHotelName}}
            </td>
            <td style="text-align:center;" width="80">
              <template v-if="hItem.OPState==1">
                <a style="color:green">{{$t('salesModule.OPZD')}}</a>
              </template>
              <template v-else-if="hItem.OPState==2">
                <a style="color:red">{{$t('salesModule.OPCD')}}</a>
              </template>
            </td>
            <td style="text-align:center;" width="90">
              <template v-if="hItem.DMCState==1">
                <a style="color:green">{{$t('salesModule.DJOK')}}</a>
              </template>
              <template v-else-if="hItem.DMCState==2">
                <a style="color:red">{{$t('salesModule.DJZK')}}</a>
              </template>
              <template v-else-if="hItem.DMCState==0">
                <a style="color:red">{{$t('salesModule.DJWCZ')}}</a>
              </template>
            </td>
            <td style="text-align:center;" width="90">
              <a style="text-decoration:underline;color:blue;cursor:pointer;"
                @click="DelItem(hItem)">{{$t('system.table_delete')}}</a>
            </td>
          </tr>
        </table>
      </div>
      <div style="text-align:center;margin-top:20px;">
        <input type="button" class="normalBtn" :value="$t('pub.saveBtn')" @click="SaveHotelOrder()" />
        <input type="button" class="normalBtn" :value="$t('pub.closeSel')" @click="CloseHotel()" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        qCountryId: 0,
        userInfo: {}, //当前用户信息
        //查询条件
        msg: {
          YearMonthStr: "",
          CountryId: 0, //只查询日本
          //酒店选择数组
          HotelChooseArray: [],
          Province: 0, //省份编号
          City: 0, //城市编号
          OutBranchId: -1, //出团公司编号
          //星级
          Star: 0,
          //价格等级
          PriceLevel: 0,
          //供应商
          Supplier: 0,
        },
        qMsg: {
          DateStr: "",
          HotelId: 0,
          TCID: 0,
          TCNUM: "", //团号
        }, //团查询条件
        defaultSelectValue: 0,
        dataList: [],
        loading: false,
        isShow: false,
        changeLoading: false, //改变酒店loading
        MyDataList: [], //获取可变更的酒店列表
        outerVisible: false,
        //省份列表
        provinceList: [],
        //城市列表
        cityList: [],
        //供应商列表
        SupplierList: [],
        //公司列表
        companyList: [],
        //酒店列表
        HotelList: [],
        //默认高度
        tableHeight: 0
      };
    },

    methods: {
      GotoHotel(HotelId) {
        this.$router.push({
          path: "HotelManagement",
          query: {
            ID: HotelId,
            tab: "酒店查询",
            blank: 'y',
          }
        });
      },
      ChangeStatus(item) {
        item.IsChecked = !item.IsChecked;
      },
      CloseHotel() {
        this.outerVisible = false;
        this.MyDataList = [];
        this.qMsg.DateStr = "";
        this.qMsg.HotelId = 0;
        this.qMsg.TCID = 0;
        this.qMsg.TCNUM = "";
      },
      GetClickItem(DateStr, HotelId, TCID) {
        this.qMsg.DateStr = DateStr;
        this.qMsg.HotelId = HotelId;
        this.qMsg.TCID = TCID;
        this.qMsg.TCNUM = "";
        this.GetChangeHotelList();
      },
      //获取可以改变的酒店列表
      GetChangeHotelList() {
        this.changeLoading = true;
        this.MyDataList = [];
        var that = this;
        this.apipost("journeyorder_post_GetCanChangeHotelListService", this.qMsg,
          res => {
            that.changeLoading = false;
            if (res.data.resultCode == 1) {
              var nArray = res.data.data;
              nArray.forEach(item => {
                if (item.TCID == this.qMsg.TCID) {
                  item.IsChecked = true;
                }
              });
              that.MyDataList = nArray;
            } else {
              that.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //保存酒店订单
      SaveHotelOrder() {
        var that = this;
        that.Confirm(that.$t('ground.sfthxzjd'), function () {
          var newList = [];
          if (that.MyDataList && that.MyDataList.length > 0) {
            that.MyDataList.forEach(item => {
              if (item.IsChecked) {
                var Nitem = JSON.parse(JSON.stringify(item));
                Nitem.NewHotelID = that.qMsg.HotelId;
                newList.push(Nitem);
              }
            });
          }
          if (newList && newList.length > 0) {
            that.apipost("journeyorder_post_SaveWorkHotelOrderService", newList,
              res => {
                if (res.data.resultCode == 1) {
                  that.Success(res.data.message);
                  that.getList();
                  that.CloseHotel();
                } else {
                  that.Error(res.data.message);
                }
              },
              err => {}
            );
          } else {
            that.Info("请选择团期!");
          }
        });
      },
      //删除酒店
      DelItem(hItem) {
        var that = this;
        this.Confirm(that.$t('sm.sfdeletenothf'), function () {
          that.apipost('dmcstatistics_post_DeleteHotelOrder', {
            ID: hItem.ID,
            TCID: hItem.TCID
          }, res => {
            if (res.data.resultCode == 1) {
              that.Success(res.data.message);
              that.getList();
              that.GetChangeHotelList();
            } else {
              that.Error(res.data.message);
            }
          }, err => {})
        });
      },
      getList() {
        this.loading = true;
        this.isShow = false;
        this.dataList = [];
        if (this.msg.YearMonthStr == "") {
          this.msg.YearMonthStr = new Date().Format("yyyy-MM");
        }
        this.apipost("hotel_post_GetHotelWorkListService", this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data;
              this.isShow = true;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      getProvinceList(ID, type) {
        //根据省份获取城市
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.msg.Province = 0;
          this.msg.City = 0;
          this.provinceList = [];
          this.cityList = [];
        } else if (type == 2) {
          this.msg.City = 0;
          this.cityList = [];
        }
        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;
            }
          },
          err => {}
        );
      },
      // 获取供应商
      initSupplier() {
        this.apipost("supplier_post_GetAllList", {
          Type: 1
        }, res => {
          if (res.data.resultCode === 1) {
            this.SupplierList = res.data.data;
          }
        }, err => {});
      },
      //获取酒店列表
      GetHotelList() {
        this.apipost(
          "hotel_post_GetHasStockHotelList", {
            Country: this.qCountryId,
            IsMoreThanZero: 1
          },
          res => {
            if (res.data.resultCode == 1) {
              this.HotelList = res.data.data;
            }
          },
          err => {}
        );
      },
      //Excel下载
      DownLoadHotelWork() {
        this.loading = true;
        let qMsg = {
          queryMsg: this.msg,
          uid: this.userInfo.EmployeeId
        };
        let fileName = this.$t('ground.jiudiangzb') + this.$commonUtils.getCurrentDate() + ".xls";
        this.GetLocalFile("hotel_get_downloadHotelWork", qMsg, fileName,
          res => {
            this.loading = false;
          });
      },
      com_onresize() {
        //clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
        var contentsHeight = document.body.clientHeight;
        var h = contentsHeight - 50 - 180 - 40;
        if (h < 110) {
          return;
        }
        //设置table的行高
        this.tableHeight = h;
      },
      DeleteHotel(DateAllStr, Hotel, TCID) {
        var that = this;
        var nMsg = {
          TCID: TCID,
          Hotel: Hotel,
          UseTime: DateAllStr
        };
        that.Confirm(that.$t('ground.shifoushancgjd'), function () {
          that.apipost("journeyorder_post_DeleteWorkHotelOrderService", nMsg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            err => {}
          );
        });
      }
    },
    mounted() {
      this.userInfo = this.getLocalStorage();
      if (this.userInfo.RB_Group_id == 2) {
        this.qCountryId = 651;
        this.msg.CountryId = 651;
      } else if (this.userInfo.RB_Group_id == 91) {
        this.qCountryId = 1252;
        this.msg.CountryId = 1252;
      }
      this.GetHotelList();
      this.msg.YearMonthStr = new Date().Format("yyyy-MM");

      this.getProvinceList(this.qCountryId, 1);
      this.initSupplier();
      this.getList();
      //自适应高度调节
      this.com_onresize();
      window.onresize = () => {
        this.com_onresize();
      }
    },
  };

</script>

<style>

</style>