<style>
  .GnHotelmanagement .hotelResource {
    width: 100%;
    min-height: 500px;
    margin-top: 20px;
  }

  .GnHotelmanagement .resourceListMan {
    width: 215px;
    height: 350px;
    background-color: #fff;
    border: 1px dashed #ededed;
    border-radius: 4px;
    margin: 0 20px 20px 0;
    font-size: 12px;
    color: #333333;
    float: left;
  }

  .GnHotelmanagement .resourceListMan:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  .GnHotelmanagement .reTopInfo {
    width: 100%;
    height: 123px;
    position: relative;
  }

  .GnHotelmanagement .reTopInfo img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .GnHotelmanagement .resTypeList {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .GnHotelmanagement .resTypeList span {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 10px;
    color: #fff;
    margin-right: 10px;
  }

  .GnHotelmanagement .L1 {
    background-color: #e95252;
  }

  .GnHotelmanagement .L2 {
    background-color: #47bf8c;
  }

  .GnHotelmanagement .L3 {
    background-color: #2aaef2;
  }

  .GnHotelmanagement .L4 {
    background-color: #9cf;
  }

  .GnHotelmanagement .L5 {
    background-color: #00c6ff;
    margin-top: 5px;
  }

  .GnHotelmanagement .starSu {
    position: absolute;
    bottom: 8px;
    right: 10px;
  }

  .GnHotelmanagement .sushe {
    background-color: #ffc800;
    display: inline-block;
    padding: 1px 5px;
    border-radius: 10px;
    color: #fff;
  }

  .GnHotelmanagement .hotelTitle {
    margin: 22px 16px 0 16px;
    font-size: 14px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .GnHotelmanagement .brandList {
    margin: 10px 16px;
  }

  .GnHotelmanagement .brandList i {
    position: relative;
    top: 2px;
  }

  .GnHotelmanagement .brand {
    float: left;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .GnHotelmanagement .dayNum {
    float: right;
  }

  .GnHotelmanagement .Address {
    margin: 0 16px;
    height: 17px;
    overflow: hidden;
  }

  .GnHotelmanagement .Address i {
    color: #bbbbbb;
  }

  .GnHotelmanagement .icon-star1 {
    color: #ffc800;
  }

  .GnHotelmanagement .star i {
    margin-right: 3px;
    font-size: 12px;
  }

  .GnHotelmanagement .honor {
    color: #ff793e;
  }

  .GnHotelmanagement .dieline {
    color: #2aaef2;
    font-size: 14px;
    top: 1px !important;
  }

  .GnHotelmanagement .AddressInner {
    float: right;
    width: 160px;
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .GnHotelmanagement .btnList {
    margin-top: 12px;
    text-align: center;
  }

  .GnHotelmanagement .hotelBtnMan {
    width: 50px;
    height: 28px;
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    background-color: #f76f6f;
  }

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

  .GnHotelmanagement .RemainingInventory {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    margin: auto;
    top: 30px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    line-height: 60px;
    left: 50%;
    margin-left: -30px;
  }

  .GnHotelmanagement .delScien {
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
  }

  .GnHotelmanagement .delScien:hover {
    color: #f76f6f;
    cursor: pointer;
  }

  .GnHotelmanagement .resourceListMan:hover .delScien {
    display: block;
  }

  .GnHotelmanagement .comCursorUrl {
    cursor: pointer;
  }

</style>
<template>
  <div class="flexOne GnHotelmanagement">
    <div class="query-box">
      <ul>
        <li>
          <span class="hotel_name">
            <em>{{$t('hotel.hotel_name')}}</em>
            <el-input maxlength="50" @keyup.native.enter="resetPageIndex(),selectResource()" v-model="msg.Name">
            </el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('system.quety_area')}}</em>
            <el-select v-model="msg.QProvince" class="w150" filterable @change="getProvinceList(msg.QProvince,2)"
              :placeholder="$t('hotel.hotel_province')" clearable>
              <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.QCity" class="w150" filterable @change="getProvinceList(msg.QCity,3)"
              :placeholder="$t('hotel.hotel_city')" clearable>
              <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
            <el-select v-model="msg.QDistrict" class="w150" style="display:none;" filterable clearable
              :placeholder="$t('hotel.hotel_area')">
              <el-option v-for="item in district" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('hotel.hotel_status')}}</em>
            <el-select v-model="msg.HotelStatus" class="w210" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
              <el-option :key="1" :label="$t('Operation.Op_shangjia')" :value="1"></el-option>
              <el-option :key="2" :label="$t('Operation.Op_xiajia')" :value="2"></el-option>
            </el-select>
          </span>
        </li>
        <li style="display:none;">
          <span>
            <em>{{$t('ground.jiudianleixing')}}</em>
            <el-select v-model="msg.HotelType" class="w210" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option v-for="item in HotelTypeList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>

        <li>
          <span><em>{{$t('visa.v_czuser')}}</em></span>
          <el-select class="w150" v-model="msg.CreateBy" filterable :placeholder="$t('pub.pleaseSel')">
            <el-option :label="$t('pub.unlimitedSel')" :value="0">
            </el-option>
            <el-option v-for="item in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
              :key="item.EmployeeId"></el-option>
          </el-select>
        </li>
        <li>
          <button class="hollowFixedBtn" type="button"
            @click="resetPageIndex(),selectResource()">{{$t('pub.searchBtn')}}</button>
          <button class="normalBtn" type="button" @click="goSubInfo('GnHotelInfo')">{{$t('pub.addBtn')}}</button>
          <button class="normalBtn" type="button" @click="goShelves(1)">{{$t('objFill.piliangshangjia')}}</button>
          <button class="normalBtn" type="button" @click="goShelves(2)">{{$t('objFill.piliangxiajia')}}</button>
        </li>
      </ul>
    </div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;min-height:450px;"
      @selection-change="handleSelectionChange" v-loading="loading">
      <el-table-column type="selection" width="50px">
      </el-table-column>
      <el-table-column prop="Name" :label="$t('hotel.hotel_name')">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center;">
            <div><img :src="scope.row.PicPath" style="width:60px;height:45px;" /></div>
            <div style="margin-left:5px;">{{scope.row.Name}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="StarName" :label="$t('hotel.hotel_starlevel')" width="100px">
      </el-table-column>

      <el-table-column prop="TagList" :label="$t('objFill.biaoqian')">
        <template slot-scope="scope">
          <el-tag v-for="(item,index) in scope.row.TagList" size="small" style="margin-right:5px;" :key="index">{{item}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="Address" :label="$t('admin.admin_address')">
        <template slot-scope="scope">
          {{scope.row.ProvinceName}}
          <template v-if="scope.row.CityName&&scope.row.CityName!=''">
            -{{scope.row.CityName}}
          </template>
          <template v-if="scope.row.DistrictName&&scope.row.DistrictName!=''">
            -{{scope.row.DistrictName}}
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="HotelStatus" :label="$t('admin.admin_status')">
        <template slot-scope="scope">
          <span v-if="scope.row.HotelStatus==1" style="color:green;">{{$t('Operation.Op_shangjia')}}</span>
          <span v-if="scope.row.HotelStatus==2" style="color:red;">{{$t('Operation.Op_xiajia')}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="RoomList" :label="$t('objFill.fangxingbj')">
        <template slot-scope="scope">
          <el-popover placement="right" width="400" trigger="click">
            <table>
              <thead>
                <tr>
                  <th style="width:40%">
                    {{$t('hotel.hotel_roomName')}}
                  </th>
                  <th style="width:20%">
                    {{$t('objFill.baojiats')}}
                  </th>
                  <th style="width:40%">
                    {{$t('pub.date')}}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(subItem,subIndex) in scope.row.RoomList">
                  <td>
                    {{subItem.Name}}
                  </td>
                  <td>
                    {{subItem.Days}}
                  </td>
                  <td>
                    {{subItem.LDate}}-{{subItem.HDate}}
                  </td>
                </tr>
              </tbody>
            </table>
            <el-button slot="reference">{{$t('fnc.xiangqing')}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="UpdateName" :label="$t('admin.admin_czPerson')">
      </el-table-column>
      <el-table-column prop="UpdateTimeStr" :label="$t('hotel.table_operattime')">
      </el-table-column>
      <el-table-column :label="$t('system.table_operation')" width="150">
        <template slot-scope="scope">
          <!-- <button @click="goSubInfo('GnHotelInfo',scope.row.ID)" class="hotelBtnMan">{{$t('pub.updateMsg')}}</button> -->
          <!-- <button @click="goUrl('HotelProductManage',item)" class="hotelBtnMan">{{$t('ground.baojiayukucun')}}:</button> -->
          <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
            <el-button @click="goSubInfo('GnHotelInfo',scope.row.ID)" type="primary" icon="el-icon-edit" circle>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('hotel.hotel_roomType')" placement="top">
            <el-button @click="goUrl('HotelProductManage',scope.row)" style="font-size:12px;" type="primary"
              icon="iconfont icon-shouye1-copy" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top">
            <el-button @click="delHotelInfo(scope.row.ID)" style="font-size:12px;" type="danger"
              icon="iconfont icon-remove" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="text-align:center" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
      layout="prev, pager, next" :total="msg.total">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        userInfo: {}, //登录用户信息
        IsHotelPriceStock: 0, //1-有获取酒店库存与报价添加修改权限
        countryList: "",
        provinceList: "",
        cityList: "",
        district: "",
        tableData: [],
        EmployeeList: [], //员工列表
        //酒店类型
        HotelTypeList: [],
        //酒店价格
        HotelPirceTypeList: [],
        status: [{
            value: "0",
            label: this.$t('pub.normalSel')
          },
          {
            value: "1",
            label: this.$t('system.table_delete')
          }
        ],
        defaultImg: 'this.src="' + require("../../assets/img/bg_z1@2x.png") + '"',
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 14,
          Name: "",
          QCountry: "2",
          QProvince: "",
          QCity: "",
          HotelStatus: 1,
          HotelPirceType: "-1",
          HotelType: "-1",
          QDistrict: "",
          total: 0,
          currentPage: 1,
          ID: 0,
          CreateBy: 0, //操作人
          ProductType: 2,
        },
        multipleSelection: [],
        shelveMsg: {
          HotelStatus: 1, //1上架 2下架
          HotelIds: ''
        }
      };
    },
    methods: {
      //删除酒店
      delHotelInfo(ID) {
        var that = this;
        that.Confirm(that.$t("tips.shifoushanchu"), function () {
          var msg = {
            hotelID: ID
          };
          that.apipost(
            "hotel_post_Remove",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.selectResource();
              }
            },
            null
          );
        });
      },
      //批量上下架
      goShelves(type) {
        if (this.multipleSelection.length == 0) {
          this.Error(this.$t('objFill.qingxuanzhejd'));
          return
        }
        this.shelveMsg.HotelStatus = type;
        let Ids = [];
        this.multipleSelection.forEach(x => {
          Ids.push(x.ID);
        })
        this.shelveMsg.HotelIds = Ids.toString();
        this.apipost("hotel_post_SetHotelStatus",
          this.shelveMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.selectResource();
              this.Success(res.data.message);
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.selectResource();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.msg.currentPage = 1;
      },
      isdelete(ID) {
        var that = this;
        that.Confirm(that.$t("tips.shifoushanchu"), function () {
          var msg = {
            hotelID: ID
          };
          that.apipost(
            "hotel_post_Remove",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.selectResource();
              }
            },
            null
          );
        });
      },
      getProvinceList(ID, type) {
        //根据省份获取城市
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.msg.QProvince = "";
          this.msg.QCity = "";
          this.msg.QDistrict = "";
        } else if (type == 2) {
          this.msg.QCity = "";
          this.msg.QDistrict = "";
        } else if (type == 3) {
          this.msg.QDistrict = "";
        }
        if (this.msg.Country !== "") {
          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;
              } else if (type == 3) {
                this.district = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      selectResource() {
        this.loading = true;
        if (this.msg.Status == "") {
          this.msg.Status = "-1";
        }
        this.apipost(
          "hotel_post_GetPageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.tableData = res.data.data.pageData;
              this.msg.total = res.data.data.count;
              let starArr;
              this.tableData.forEach(x => {
                x.starArr = new Array(x.Star);
              });
            }
          },
          null
        );
      },
      //调整到产品列表
      goUrl(path, item) {
        this.$router.push({
          path: path,
          query: {
            id: item.ID,
            blank: 'y',
            tab: '房型列表'
          }
        });
      },

      goSubInfo(path, id) {
        this.$store.commit("pageConditionUpdate", this.msg);
        this.$router.push({
          path: path,
          query: {
            id: id,
            blank: 'y'
          }
        });
      },
      //获取酒店类型列表
      GetHotelTypeList() {
        this.apipost(
          "dmc_post_Get_GetHotelType", {},
          res => {
            if (res.data.resultCode == 1) {
              this.HotelTypeList = res.data.data;
            }
          },
          err => {}
        );
      },
      GetHotelPirceTypeList() {
        this.apipost(
          "dmc_post_Get_GetHotelPriceType", {},
          res => {
            if (res.data.resultCode == 1) {
              this.HotelPirceTypeList = res.data.data;
            }
          },
          err => {}
        );
      },
      //获取酒店修改与报价添加修改权限
      GetHotelPirceStockAuth() {
        this.apipost(
          "hotel_post_GetHotelPriceStockAuthService", {},
          res => {
            if (res.data.resultCode == 1) {
              this.IsHotelPriceStock = res.data.data;
            }
          },
          err => {}
        );
      },
      //根据当前员工所在部门获取该部门及子部门员工信息
      getEmployeeList() {
        let msg = {
          GroupId: this.userInfo.RB_Group_id,
          BranchId: "-1",
          DepartmentId: "-1",
          PostId: "-1",
          IsLeave: "0"
        };
        this.apipost(
          "admin_get_EmployeeGetList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.EmployeeList = res.data.data;
            }
          },
          err => {}
        );
      },
    },
    mounted() {
      this.userInfo = this.getLocalStorage();
      this.getEmployeeList();
      this.GetHotelPirceStockAuth();
      this.getProvinceList(this.msg.QCountry, 1);
      this.GetHotelTypeList();
      this.GetHotelPirceTypeList();
    },
    created() {
      if (this.$route.query.hasOwnProperty("cache")) {
        if (this.$store.state.pageCondition != null) {
          this.msg = this.$store.state.pageCondition;
        }
      }
      if (this.$route.query.StatisticsSTime) {
        this.msg.StatisticsSTime = this.$route.query.StatisticsSTime
      }
      if (this.$route.query.StatisticsETime) {
        this.msg.StatisticsETime = this.$route.query.StatisticsETime
      }
      if (this.$route.query.type) {
        if (this.$route.query.type == 1) {
          this.msg.CreateBy = this.$route.query.EmployeeId;
        }
        if (this.$route.query.type == 2) {
          this.msg.UpdateBy = this.$route.query.EmployeeId;
        }
      }
      var id = this.$route.query.ID;
      if (id) {
        this.msg.ID = id;
      }
      this.selectResource();
    }
  };

</script>