<template>
  <div>
    <div class="query-box" style="border-bottom: none;">
      <ul>
        <li>
          <span>
            <em>{{$t('system.quety_area')}}</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>{{$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>星级</em>
            <el-select v-model="msg.Star" :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :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>价格区间</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>日期</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>供应商</em>
            <el-select v-model="msg.Supplier" placeholder="请选择">
              <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>酒店</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="温馨提示"
            @click="showNotice=true,resetPageIndex(),GetHotelTipList()" />
          <input type="button" class="normalBtn" value="查询" @click="getList()" />
          <input type="button" class="normalBtn" value="下载" @click="DownLoadHotelQuery()" />
        </li>
      </ul>
    </div>

    <div style="width: 100%;min-height:200px;  overflow-x: auto;padding-bottom: 10px; " class="HotelQueryList"
      v-loading="loading">
      <div class="hotelProductManage2_tableBox" style="margin-bottom:20px;">
        <span style="color:#000000;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 style="text-decoration: underline;cursor:pointer" @click="GotoHotel(scope.row.HotelId)">
                {{scope.row.HotelName}}</div>
              <div>{{scope.row.TotalInventory}}</div>
            </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 Hq_duoge"
                @click="GotoUrl(scope.row,index,scope.row.subList[index].UseInventory)">
                {{scope.row.subList[index].Inventory}}/{{scope.row.subList[index].UseInventory}}/{{scope.row.subList[index].RemainingInventory}}
              </div>
              <div class="Hotel_kong Com_hoteldiv">
                <span v-if="scope.row.subList[index].UseInventory-scope.row.subList[index].Inventory>0"
                  style="color:red;">
                  {{scope.row.subList[index].UseInventory-scope.row.subList[index].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">
      <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>
  </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,
          //供应商
          Supplier: 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:0
        },
        postMsg: {
          Id: 0,
          TipContent: '',
          OpType:0,
        },
        //默认显示弹窗信息
        showHQinfo: true,
        //酒店温馨提示列表
        HotelTipList: [],
        //供应商列表
        SupplierList: [],
        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: {
      // 获取供应商
      initSupplier() {
        this.apipost("supplier_post_GetAllList", {
          Type: 1
        }, res => {
          if (res.data.resultCode === 1) {
            this.SupplierList = res.data.data;
          }
        }, err => {});
      },
      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,
              IsUnionCked:0,
              blank: 'y',
              tab: "团控查询",
            }
          });
        }
      },
      com_onresize() {
        //clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
        var contentsHeight = document.body.clientHeight;
        var h = contentsHeight - 50 - 180 - 50;
        if (h < 110) {
          return;
        }
        //设置table的行高
        this.tableHeight = h;
      },
      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.apipost("dict_post_HotelOffer_GetHotelStatics", 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.apipost(
          "hotel_post_GetHasStockHotelList", {
            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();
      },
      resetPageIndex() {
        this.queryMsg.pageIndex = 1;
        this.queryMsg.currentPage = 1;
      },
      //获取酒店列表
      GetHotelTipList() {
        this.apipost(
          "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.apipost(
          "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.apipost(
            "hoteltip_post_RemoveHotelTip", {
              ID: Id
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success("删除成功!");
                that.GetHotelTipList();
              } else {
                that.Error("删除失败!");
              }
            },
            err => {}
          );
        })
      },
      GetHotelTip(Id) {
        this.apipost(
          "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.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 => {}
        );
      },
      getBranchList() {
        this.apipost('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.getLocalStorage().EmployeeId
        };
        let fileName = "酒店查询统计" + this.$commonUtils.getCurrentDate() + ".xls";
        this.GetLocalFile("hotel_get_downloadHotelQuery", qMsg, fileName,
          res => {
            this.loading = false;
          });
      },
    },
    mounted() {
      this.initSupplier();
      this.getBranchList();
      this.getProvinceList(651, 1);
      this.GetHotelList();
      this.getList();
      this.GetHotelTipList();
      this.com_onresize();
      window.onresize = () => {
        this.com_onresize();
      }
    }
  };

</script>

<style>
  .Hq_duoge {
    cursor: pointer;
    text-decoration: underline;
  }

  .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;
  }

</style>