<template>
  <div class="hotelQury2">
    <div class="query-box" style="border-bottom: none;">
      <ul style="position:relative;">
        <li>
          <span>
            <!-- 区域 -->
            <em class="HQ_em">面積</em>
            <el-select v-model="msg.Province" filterable @change="getProvinceList(msg.Province,2)"
              :placeholder="$t('hotel.hotel_province')">
              <!-- 请选择 -->
              <el-option :key="0" :value="0" label="選択してください"></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 :placeholder="$t('hotel.hotel_city')">
              <el-option :key="0" :value="0" label="選択してください"></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>
          <!-- 公司名称 -->
          <span><em class="HQ_em">会社名</em>
            <el-select filterable v-model='msg.OutBranchId' :placeholder="$t('pub.unlimitedSel')">
              <el-option label="無制限" :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 class="HQ_em">星</em>
            <el-select v-model="msg.Star" class="w150" :placeholder="$t('pub.pleaseSel')">
              <el-option label="無制限" :value='0'></el-option>
              <el-option label="3星或商务" :value='3'></el-option>
              <el-option label="4星" :value='4'></el-option>
              <el-option label="5星" :value='5'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <!-- 价格区间 -->
            <em class="HQ_em">価格帯</em>
            <el-select v-model="msg.PriceLevel" :placeholder="$t('pub.pleaseSel')">
              <el-option label="無制限" :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 class="HQ_em">日付</em>
            <el-date-picker v-model='msg.StartDate' value-format="yyyy-MM-dd" type="date" :picker-options="beforeCheck">
            </el-date-picker>
            <el-date-picker v-model='msg.EndDate' value-format="yyyy-MM-dd" type="date" :picker-options="afterCheck">
            </el-date-picker>
          </span>
        </li>
        <li>
          <span>
            <!-- 酒店 -->
            <em class="HQ_em">ホテル</em>
            <el-select v-model="msg.HotelChooseArray" placeholder="選択してください" 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 style="position:absolute;top:0;right:10px;">
          <!-- 温馨提示 -->
          <input type="button" class="normalBtn" style="padding:0 12px;margin-left:0" value="ヒント"
            @click="showNotice=true,resetPageIndex(),GetHotelTipList()" />
            <!-- 查询 -->
          <input type="button" class="normalBtn" value="問い合わせ" style="padding:0 12px;margin-left:5px" @click="getList()" />
          <!-- 下载 -->
          <input type="button" class="normalBtn" value="ダウンロードする" style="padding:0 12px;margin-left:5px"
            @click="DownLoadHotelQuery()" />
        </li>
      </ul>
    </div>

    <div style="width: 100%;min-height:200px;  overflow-x: auto;padding:0 20px; " class="HotelQueryList"
      v-loading="loading">
      <div style="margin-bottom:20px;">
        <!-- 红日 -->
        <span style="color:#fff;background-color: #ff3737;padding:2px 4px;border-radius:5px">赤い日</span>
        <!-- 旺季 -->
        <span style="color:#000000;background-color: #ff99cc;padding:2px 4px;border-radius:5px">ハイシーズン</span>
        <!-- 平季 -->
        <span style="color:#000000;background-color: #bcd6ee;padding:2px 4px;border-radius:5px">フラットシーズン</span>
        <!-- 淡季 -->
        <span style="color:#000000;background-color: #DDDDDD;padding:2px 4px;border-radius:5px">ローシーズン</span>
        <!-- 特别价 -->
        <span style="color:#000000;background-color: #02F78E;padding:2px 4px;border-radius:5px">特別価格</span>
      </div>
      <template v-if="isShow">
        <el-table v-if="dataList.length>0" :data="dataList" style="width:100%" border v-loading='loading'
          :height="tableHeight">
          <!-- 酒店名称 -->
          <el-table-column fixed label="ホテル名" min-width="180">
            <template slot-scope="scope">
              <div>
                {{scope.row.HotelName}}</div>
              <div>{{scope.row.TotalInventory}}</div>
              <input type="button" class="normalBtn" style="margin-left:0;height:22px;padding:0 10px;"
                @click="getLogsList(scope.row.HotelId)" value="操作ログ" />
            </template>
          </el-table-column>
          <!-- 价格库存 -->
          <el-table-column label="価格&在庫" fixed min-width="120">
            <template slot-scope="scope">
              <!-- 价格 -->
              <div class="Hotel_kong">価格</div>
              <!-- 总/用/剩 -->
              <div class="Hotel_kong" style="min-width:60px;">合計/使用する/残り</div>
              <!-- 超定 -->
              <div class="Hotel_kong">過剰決定</div>
            </template>
          </el-table-column>
          <el-table-column v-for='(item,index) in dataList[0].subList' :label="getDateList(item.DateStr)" :key='index'
            min-width="120">
            <template slot-scope="scope">
              <div class="Hotel_kong Com_hoteldiv">
                <template v-if="scope.row.subList[index].PriceList.length>0">
                  <template v-for="childItem in scope.row.subList[index].PriceList">
                    <div :class="getClass(1,childItem.InventoryType)" style="height:100%;float:left;width:100%"
                      :style="{width:(100/scope.row.subList[index].PriceList.length)+'%'}">{{childItem.CostPrice}}</div>
                  </template>
                </template>
                <template v-else>
                  <div :class="getClass(0,0)" style="width:100%;height:100%">&nbsp;</div>
                </template>
              </div>
              <div class="Hotel_kong Com_hoteldiv">
                {{item.Inventory}}/{{item.UseInventory}}/{{item.RemainingInventory}}
              </div>
              <div class="Hotel_kong Com_hoteldiv">
                <span v-if="item.subList[index].UseInventory-item.Inventory>0"
                  style="color:red;">
                  {{item.UseInventory-item.Inventory}}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="noDataNotice" v-else>
          <i class="iconfont icon-kong"></i>
          <p>{{$t("active.ld_noData")}}</p>
        </div>
      </template>

    </div>

    <div class="combottomDiv HqCom_bottom" v-if="showNotice" style="left:0;">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="20">
            <!-- 日期 -->
            <el-form-item label="日付">
              <el-date-picker class="w150" type="date" v-model="queryMsg.QStartDate"
                :picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder></el-date-picker>
              <el-date-picker class="w150" type="date" v-model="queryMsg.QEndDate"
                :picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" placeholder></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- 查询 -->
            <input type="button" class="normalBtn" value="問い合わせ" @click="resetPageIndex(),GetHotelTipList()" />
            <!-- 关闭 -->
            <input type="button" class="normalBtn" value="閉じる" @click="showNotice=false" />
          </el-col>
        </el-row>
        <div class="Hq_addDetail">
          <el-row>
            <el-col :span="12">
              <el-form-item label="説明">
                <quill-editor class="w595" :options="editorOption" v-model="postMsg.TipContent"></quill-editor>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <input type="button" class="normalBtn" value="保存する" @click="SaveHotelTip()" />
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div>
        <table border="0" cellspacing="1" cellpadding="0" class="HouseTypeList Hq_addTable" style="width:97%;">
          <tr>
            <!-- 编号 -->
            <th width="50">数</th>
            <th>内容</th>
            <!-- 操作人 -->
            <th width="70">オペレーター</th>
            <!-- 操作时间 -->
            <th width="150">運用世界</th>
            <!-- 操作 -->
            <th width="80">運営</th>
          </tr>
          <template v-if="queryMsg.total>0">
            <tr v-for="(item,index) in HotelTipList">
              <td>{{item.Id}}</td>
              <td>
                <p style="text-align:left;padding-left:5px;" v-html="item.TipContent"></p>
              </td>
              <td>{{item.CreateByName}}</td>
              <td>{{item.CreateTimeStr}}</td>
              <td>
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <el-button type="primary" icon="el-icon-edit" circle @click="GetHotelTip(item.Id)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button type="danger" icon="el-icon-delete" circle @click="RemoveHotelTip(item.Id)"></el-button>
                </el-tooltip>
              </td>
            </tr>
          </template>
          <tr v-else>
            <!-- 暂无数据 -->
            <td colspan="5">まだデータがありません...</td>
          </tr>
        </table>
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryMsg.currentPage"
          :page-size="queryMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queryMsg.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog custom-class="w800" title="信息" :visible.sync="showHQinfo" center>
      <el-form>
        <table border="0" cellspacing="1" cellpadding="0" class="HouseTypeList Hq_addTable" style="width:100%;">
          <tr>
            <!-- 编号 -->
            <th width="50">数</th>
            <!-- 内容 -->
            <th>内容</th>
            <!-- 操作人 -->
            <th width="70">オペレーター</th>
            <!-- 操作时间 -->
            <th width="140">運用世界</th>
          </tr>
          <template v-if="queryMsg.total>0">
            <tr v-for="(item,index) in HotelTipList">
              <td>{{item.Id}}</td>
              <td>
                <p style="text-align:left;padding:0 5px;" v-html="item.TipContent"></p>
              </td>
              <td>{{item.CreateByName}}</td>
              <td>{{item.CreateTimeStr}}</td>
            </tr>
          </template>
          <tr v-else>
            <!-- 暂无数据 -->
            <td colspan="5">まだデータがありません...</td>
          </tr>
        </table>
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryMsg.currentPage"
          :page-size="queryMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queryMsg.total">
        </el-pagination>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- 关闭 -->
        <button class="hollowFixedBtn" @click="showHQinfo = false">閉じる</button>
      </div>
    </el-dialog>

    <el-dialog custom-class="w800" title="操作日志" :visible.sync="showLogInfo" center :before-close="closeChangeMachie">
      <el-form>
        <table border="0" cellspacing="1" cellpadding="0" class="HouseTypeList Hq_addTable logsTable"
          style="width:100%;">
          <tr>
            <!-- 操作人 -->
            <th width="50">オペレーター</th>
            <!-- 日期 -->
            <th>日付</th>
            <!-- 操作时间 -->
            <th>稼働時間</th>
            <!-- 内容 -->
            <th width="70">内容</th>
          </tr>
          <template v-if="LogsList.length>0">
            <tr v-for="(item,index) in LogsList">
              <td width="50">{{item.CreateByName}}</td>
              <td width="50">{{item.UseTimeStr}}</td>
              <td width="80">
                {{item.CreateTimeStr}}
              </td>
              <td>{{item.Remarks}}</td>
            </tr>
          </template>
          <tr v-else>
            <!-- 暂无数据 -->
            <td colspan="5">まだデータがありません...</td>
          </tr>
        </table>
        <el-pagination background @current-change="handleCurrentChange2" :current-page.sync="queryLogMsg.currentPage"
          :page-size="queryLogMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queryLogMsg.total">
        </el-pagination>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- 关闭 -->
        <button class="hollowFixedBtn" @click="showLogInfo = false,queryLogMsg.pageIndex=1">閉じる</button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          //酒店选择数组
          HotelChooseArray: [],
          StartDate: new Date().Format("yyyy-MM-dd"),
          EndDate: this.setEdate(),
          //只查询日本
          Country: "651",
          Province: 0,
          City: 0,
          OutBranchId: -1,
          //星级
          Star: 0,
          //价格等级
          PriceLevel: 0,
        },
        tableHeight: 0,
        beforeCheck: {
          disabledDate: time => {
            if (this.msg.StartDate) {
              let endTime = new Date(this.msg.EndDate);
              return time && endTime.getTime() < time.getTime();
            } else {
              return false;
            }
          }
        },
        afterCheck: {
          disabledDate: time => {
            if (this.msg.StartDate) {
              let startTime = new Date(this.msg.StartDate);
              //可以选择当天
              return time && time.getTime() < startTime.getTime() - 1 * 24 * 60 * 60 * 1000;
            } else {
              return false;
            }
          }
        },
        //分公司列表
        companyList: [],
        defaultSelectValue: 0,
        //国家 省市 区
        provinceList: [],
        cityList: [],
        district: [],
        queryMsg: {
          QStartDate: '',
          QEndDate: '',
          pageIndex: 1,
          pageSize: 5,
          currentPage: 1,
          total: 0,
          OpType: 1,
        },
        postMsg: {
          Id: 0,
          TipContent: '',
          OpType: 1
        },
        queryLogMsg: {
          pageIndex: 1,
          pageSize: 6,
          currentPage: 1,
          total: 0,
          HotelId: 0
        },
        //默认显示弹窗信息
        showHQinfo: true,
        showLogInfo: false,
        LogsList: [],
        HotelId: 0,
        //酒店温馨提示列表
        HotelTipList: [],
        HotelList: [],
        dataList: [],
        isShow: false,
        loading: false,
        showNotice: false,
        pickerBeginDateBefore: {
          disabledDate: time => {
            let endTime = new Date(this.queryMsg.QStartDate)
            return endTime.getTime() < time.getTime()
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.queryMsg.QEndDate)
            return startTime.getTime() >= time.getTime()
          }
        },
        editorOption: {
          placeholder: '内容を入力してください',
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'], // toggled buttons
              ['blockquote', 'code-block', 'align']
            ]
          }
        },
      };
    },
    methods: {
      GotoHotel(HotelId) {
        this.$router.push({
          path: "HotelManagement",
          query: {
            ID: HotelId,
            tab: "酒店查询",
            blank: 'y',
          }
        });
      },
      GotoUrl(item, subIndex, UseInventory) {
        if (UseInventory > 0) {
          this.$router.push({
            path: "TravelControlList",
            query: {
              HotelId: item.HotelId,
              HotelUseTime: item.subList[subIndex].DateStr,
              blank: 'y',
              tab: "团控查询",
            }
          });
        }
      },
      getList() {
        this.loading = true;
        if (this.msg.StartDate == null) {
          this.msg.StartDate = new Date().Format("yyyy-MM-dd");
        }
        if (this.msg.EndDate == null) {
          this.msg.EndDate = this.setEdate();
        }
        this.ApiPost2("dict_post_HotelOffer_GetHotelStatics_Supplier", 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 => {}
        );
      },
      //获取酒店列表
      GetHotelList() {
        this.ApiPost2(
          "hotel_post_GetHasStockHotelList_Supplier", {
            Country: 651,
            IsMoreThanZero: 1
          },
          res => {
            if (res.data.resultCode == 1) {
              this.HotelList = res.data.data;
            }
          },
          err => {}
        );
      },
      setEdate() {
        return this.addMoth(new Date().Format("yyyy-MM-dd"), 1)
      },
      addMoth(d, m) {
        let ds = d.split('-'),
          _d = ds[2] - 0;
        let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
        let max = nextM.getDate();
        d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
        return d.toLocaleDateString().match(/\d+/g).join('-')
      },
      //格式化返回显示日期
      getDateList(dateStr) {
        var str = dateStr.split('-');
        var weekDay = ["天", "一", "二", "三", "四", "五", "六"];
        var myDate = new Date(Date.parse(dateStr));

        return str[1] + '/' + str[2] + "（" + weekDay[myDate.getDay()] + "）";
      },
      //获取星期几
      getWeek(dateStr) {
        var weekDay = ["天", "一", "二", "三", "四", "五", "六"];
        var myDate = new Date(Date.parse(dateStr));
        return weekDay[myDate.getDay()]
      },
      //获取颜色状态
      getClass(Status, InventoryType) {
        var classStr = "";
        if (Status == 0) {
          classStr = 'noKucun';
        }
        switch (InventoryType) {
          case 1:
            classStr = "classHong";
            break;
          case 2:
            classStr = "classWang";
            break;
          case 3:
            classStr = "classPing";
            break;
          case 4:
            classStr = "classDan";
            break;
          case 5:
            classStr = "classTe";
            break;
        }
        return classStr;
      },
      handleCurrentChange(val) {
        this.queryMsg.pageIndex = val;
        this.GetHotelTipList();
      },
      handleCurrentChange2(val) {
        this.queryLogMsg.pageIndex = val;
        this.getLogsList(this.HotelId);
      },
      resetPageIndex() {
        this.queryMsg.pageIndex = 1;
        this.queryMsg.currentPage = 1;
      },
      //获取酒店列表
      GetHotelTipList() {
        this.ApiPost2(
          "hoteltip_get_GetPageList", this.queryMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.HotelTipList = res.data.data.pageData;
              this.queryMsg.total = res.data.data.count;
            }
          },
          err => {}
        );
      },
      SaveHotelTip() {
        this.ApiPost2(
          "hoteltip_post_SetHotelTip", this.postMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.Success("保存成功!");
              this.postMsg.Id = 0;
              this.postMsg.TipContent = "";
              this.GetHotelTipList();
            } else {
              this.Error("保存失败!");
            }
          },
          err => {}
        );
      },
      RemoveHotelTip(Id) {
        var that = this;
        this.Confirm('是否要删除此数据?', function () {
          that.ApiPost2(
            "hoteltip_post_RemoveHotelTip", {
              ID: Id
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success("删除成功!");
                that.GetHotelTipList();
              } else {
                that.Error("删除失败!");
              }
            },
            err => {}
          );
        })
      },
      GetHotelTip(Id) {
        this.ApiPost2(
          "hoteltip_get_GetHotelTip", {
            ID: Id
          },
          res => {
            if (res.data.resultCode == 1) {
              this.postMsg.Id = res.data.data.Id;
              this.postMsg.TipContent = res.data.data.TipContent;
            } else {
              this.Error("获取数据失败!");
            }
          },
          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.ApiPost2(
          "dict_post_Destination_GetChildList",
          msg,
          res => {
            if (type == 1) {
              this.provinceList = res.data.data;
            } else if (type == 2) {
              this.cityList = res.data.data;
            }
          },
          err => {}
        );
      },
      getBranchList() {
        this.ApiPost2('admin_get_BranchGetList', {
          RB_Group_Id: '2',
          Status: 0,
        }, res => {
          if (res.data.resultCode == 1) {
            this.companyList = res.data.data;
          }
        }, err => {})
      },
      //Excel下载
      DownLoadHotelQuery() {
        this.loading = true;
        let qMsg = {
          queryMsg: this.msg,
          uid: this.getLocalStorageSupplier().SupplierAccountId
        };
        let fileName = "酒店查询统计" + this.$commonUtils.getCurrentDate() + ".xls";
        this.GetLocalFile("hotel_get_downloadHotelQuery_Supplier", qMsg, fileName,
          res => {
            this.loading = false;
          });
      },
      com_onresize() {
        //clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
        var contentsHeight = document.body.clientHeight;
        var h = contentsHeight - 50 - 134 - 50;
        if (h < 110) {
          return;
        }
        //设置table的行高
        this.tableHeight = h;
      },
      //获取日志
      getLogsList(HotelId) {
        this.showLogInfo = true;
        this.HotelId = HotelId;
        this.queryLogMsg.HotelId = HotelId;
        this.ApiPost2('DmcInfoChangeLog_get_GetHotelLogList', this.queryLogMsg, res => {
          if (res.data.resultCode == 1) {
            this.LogsList = res.data.data.pageData;
            this.queryLogMsg.total = res.data.data.count;
          }
        }, err => {})
      },
      closeChangeMachie() {
        this.showLogInfo = false;
        this.queryLogMsg.pageIndex = 1;
      }
    },
    mounted() {
      this.getBranchList();
      this.getProvinceList(651, 1);
      this.GetHotelList();
      this.getList();
      this.GetHotelTipList();
      this.com_onresize();
      window.onresize = () => {
        this.com_onresize();
      }
    },
  };

</script>

<style>
  .HqCom_bottom .ql-container {
    min-height: 100px;
  }

  .classHong {
    background-color: rgb(255, 55, 55);
    color: #fff;
  }

  .classWang {
    background-color: rgb(255, 153, 204);
  }

  .classPing {
    background-color: rgb(188, 214, 238);
  }

  .classDan {
    background-color: rgb(221, 221, 221);
  }

  .classTe {
    background-color: rgb(2, 247, 142);
  }

  .HouseTypeList {
    background: #ccc;
    width: 100%;
    margin-top: 20px;
  }

  .Com_hoteldiv {
    min-width: 70px;
    white-space: nowrap;
  }

  .noKucun {
    background-color: black !important;
  }

  .Hotel_kong {
    width: 100%;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border-bottom: 1px solid #d1d1d1;
  }

  .Hotel_kong:last-child {
    border: 0;
  }

  .HouseTypeList tr th {
    background: #e6e6e6;
    height: 35px;
    font-size: 12px;
    color: #333;
  }

  .HouseTypeList tr {
    background: #fff;
    text-align: center;
    height: 35px;
  }

  .HouseTypeList tr td {
    font-size: 12px;
  }

  .hotelProductManage2_tableBox span {
    margin: 0 10px 10px 0;
  }

  .Hq_addDetail {
    margin-top: 20px;
  }

  .Hq_addDetail .el-textarea__inner {
    resize: none;
  }

  .Hq_addTable .el-button.is-circle {
    padding: 5px;
  }

  .HqCom_bottom .el-form-item {
    margin-bottom: 0
  }

  .HqCom_bottom {
    height: 350px;
    padding-top: 35px;
  }

  .HQ_miaoshu {
    color: #E95252;
    font-size: 12px;
  }

  .HQ_miaoshu:first-child {
    margin-top: 10px;
  }

  .HotelQueryList .has-gutter tr th,
  .el-table th.is-leaf {
    background: #EAEAEA !important;
  }

  .HotelQueryList .el-table td,
  .el-table th.is-leaf {
    border-bottom: 1px solid #ebeef5;
  }

  .HotelQueryList .el-table .cell {
    padding: 0;
  }

  .HotelQueryList .el-table td {
    padding: 0;
  }

  .hotelQury2 .w150 .el-input {
    width: 150px;
  }

  .HQ_em {
    min-width: 75px !important;
  }

</style>