<style>
  .restaurantList .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
}

.restaurantList .hotelResource {
  width: 100%;
  min-height: 500px;
  margin-top: 20px;
}

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

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

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

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

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

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

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

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

.restaurantList .L3 {
  background-color: #2aaef2;
}
.restaurantList .L4 {
  background-color: #9cf;
}
.restaurantList .L5 {
  background-color: #00c6ff;
  margin-top:5px;
}

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

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

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

.restaurantList .brandList {
  margin: 16px 0;
}

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

.restaurantList .brand {
  float: left;
  width: 49%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.restaurantList .dayNum {
  float: right;
  text-align: center;
  width: 50%;
}

.restaurantList .iconfont {
  margin-right: 5px;
}

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

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

.restaurantList .btnList {
  margin-top: 16px;
  text-align: center;
}

.restaurantList .hotelBtn {
  width: 80px;
  height: 28px;
  background: #f76f6f;
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
}

.restaurantList .hotelBtn:first-child {
  margin-right: 19px;
}

.restaurantList .w150 .el-input {
  width: 150px !important;
}

.restaurantList .SupportCount {
  color: #4bca81;
  font-size: 18px;
  font-weight: bold;
  margin: 0 5px 5px 0;
  display: inline-block;
}

.restaurantList .dayNumber {
  color: #2aaef2;
  font-size: 18px;
  font-weight: bold;
  margin: 0 5px 5px 5px;
  display: inline-block;
}

.restaurantList .line {
  float: left;
  width: 1px;
  height: 35px;
  background-color: #ededed;
  margin-top: 6px;
}

.restaurantList .foodList {
  display: inline-block;
  padding: 1px 5px;
  background-color: #ff9c00;
  color: #fff;
  margin-right: 6px;
  border-radius: 2px;
}

.restaurantList .foodList:last-child {
  margin-right: 0;
}

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

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

.restaurantList .resourceList:hover .delScien {
  display: block;
}

.restaurantList .comCursorUrl {
  cursor: pointer;
}

/* 餐厅列表 */
</style>
<template>
  <div class="flexOne restaurantList">
    <div class="query-box">
      <ul>
        <li>
          <span class="hotel_name">
            <em>{{$t('restaurant.res_resName')}}</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.QCountry" clearable class="w150" filterable @change="getProvinceList(msg.QCountry,1)"
              :placeholder="$t('hotel.hotel_country')">
              <el-option v-for="item in countryList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
            <el-select v-model="msg.QProvince" class="w150" filterable @change="getProvinceList(msg.QProvince,2)"
              :placeholder="$t('hotel.hotel_province')">
              <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')">
              <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" filterable :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.Status" class="w210" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </span>
        </li>
          <li>
          <span>
            <em>{{$t('ground.cantingleixing')}}</em>
            <el-select v-model="msg.DiningType" class="w210" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option v-for="item in DiningTypeList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
           <li>
          <span>
            <em>{{$t('Operation.Op_price')}}</em>
            <el-select v-model="msg.DiningPriceType" class="w210" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option v-for="item in DiningPriceTypeList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
          <li>
          <span>
            <em>{{$t('ground.hezuofangshi')}}</em>
            <el-select v-model="msg.CooperationType" class="w210" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option v-for="item in CooperationTypeList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <button class="hollowFixedBtn" type="button" @click="resetPageIndex(),selectResource()">{{$t('pub.searchBtn')}}</button>
          <button class="normalBtn" type="button" @click="$router.push('restaurantInfoManage')">{{$t('pub.addBtn')}}</button>
        </li>
      </ul>
    </div>
    <div class="hotelResource clearfix" v-loading="loading">
      <div class="resourceList" v-for="(item,index) in tableData" :key="index">
        <div class="reTopInfo" :class="{'comCursorUrl':item.URL}" @click="OpenNewUrl(item.URL)">
          <img v-if="!item.PicPath" src="../../assets/img/bg_c3@3x.png">
          <img v-else :src='compressImg(item.PicPath, "filt", 213, "")' :onerror="defaultImg">
          <div class="resTypeList">
            <span v-for="(items,index) in item.OpenPlatformList" :class="{'L1':items.ID==1,'L2':items.ID==2,'L3':items.ID==3,'L4':items.ID==4,'L5':items.ID==5}"
              :key="index">{{items.Name}}</span>
          </div>
          <div class="delScien" @click="isdelete(item.ID)">
            <i class="iconfont icon-xingzhuang"></i>
          </div>
          <div class="starSu">
            <div class="star">
              <span class="foodList" v-for="(items,index) in item.FoodTagArr" :key="index">{{items}}</span>
            </div>
            <span v-if="item.Star==8" class="sushe">{{$t('restaurant.res_homeFacility')}}</span>
            <span v-if="item.Star==9" class="sushe">{{$t('restaurant.res_SpringHotel')}}</span>
          </div>
        </div>
        <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start" popper-class="max-w250">
          <div class="hotelTitle fz12">{{item.Name}}</div>
        </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="item.RealName" placement="top-start" popper-class="max-w250">
            <div class="hotelTitle fz12">{{$t('ground.zhenshimingcheng')}}: {{item.RealName}}</div>
         </el-tooltip>
        <div class="brandList clearfix">
          <div class="brand">
            <span class="SupportCount">{{item.SupportCount}}</span>
            {{$t('hotel.hotel_people')}}
            <div>{{$t('restaurant.res_bookCapacity')}}</div>
          </div>
          <div class="line"></div>
          <div class="dayNum">
            <span class="dayNumber">{{item.DieLine}}</span>
            {{$t('hotel.hotel_day')}}
            <div>{{$t('restaurant.res_advanceDays')}}</div>
          </div>
        </div>
        <div class="btnList">
          <button @click="goSubInfo('restaurantInfoManage',item.ID)" class="hotelBtn">{{$t('pub.updateMsg')}}</button>
          <button v-if="IsHotelPriceStock==1" @click="goUrl('RestaurantPackage',item.ID)" class="hotelBtn">{{$t('restaurant.res_package')}}</button>
        </div>
      </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage" :page-size="msg.pageSize"
      layout="total,prev, pager, next, jumper" :total="msg.total"></el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        IsHotelPriceStock:0,//1-有获取餐厅与报价添加修改权限
        total: 0,
        currentPage: 1,
        countryList: "",
        provinceList: "",
        cityList: "",
        district: "",
        Ids: [],
        tableData: "",
        deleteID: "",
        DiningTypeList:[],
        DiningPriceTypeList:[],
        CooperationTypeList:[],
        status: [{
            value: "0",
            label: this.$t('pub.normalSel')
          },
          {
            value: "1",
            label: this.$t('system.table_delete')
          }
        ],
        isDeleteNote: true,
        loading: true,
        defaultImg: 'this.src="' + require("../../assets/img/bg_z1@2x.png") + '"',
        msg: {
          pageIndex: 1,
          pageSize: 14,
          Name: "",
          DiningType:"-1",
          DiningPriceType:"-1",
          CooperationType:"-1",
          QCountry: "",
          QProvince: "",
          QCity: "",
          QDistrict: "",
          Status: "0",
          total: 0,
          currentPage: 1,
          ID: 0,
        }
      };
    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.selectResource();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      isdelete(ID) {
        var that = this;
        that.Confirm(that.$t('tips.shifoushanchu'), function () {
          that.apipost(
            "dining_post_Remove", {
              ID: ID
            },
            res => {
              if (res.data.resultCode == 1) {
                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.QCountry !== "") {
          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 => {}
          );
        }
      },
      //获取国家
      getCountryList() {
        this.apipost(
          "dict_post_Destination_GetCountry", {},
          res => {
            this.countryList = res.data.data;
          },
          err => {}
        );
      },
      selectResource() {
        this.loading = true;
        if (this.msg.Status == "") {
          this.msg.Status = "-1";
        }
        this.apipost(
          "dining_post_GetPageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.total = res.data.data.count;
              this.tableData = res.data.data.pageData;
              this.msg.total = res.data.data.count;
              this.tableData.forEach(x => {
                if (x.FoodTag != "") {
                  x.FoodTagArr = x.FoodTag.split(",").slice(0, 3);
                }
              });
            }
          },
          null
        );
      },
      goUrl(path, id) {
        this.$router.push({
          path: path,
          query: {
            id: id,
            blank:'y',
            tab:'套餐查询'
          }
        });
      },
      goSubInfo(path, id) {
        this.$store.commit("pageConditionUpdate", this.msg);
        this.$router.push({
          path: path,
          query: {
            id: id,
            cache: true
          }
        });
      },
        //获取餐厅列表
    GetDiningTypeList() {
      this.apipost(
        "dining_get_GetDiningType",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.DiningTypeList = res.data.data;
          }
        },
        err => {}
      );
    },
     //获取餐厅价格列表
    GetDiningPriceTypeList() {
      this.apipost(
        "dining_get_GetDiningPriceType",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.DiningPriceTypeList = res.data.data;
          }
        },
        err => {}
      );
    },
     //获取合作方式列表
    GetCooperationTypeList() {
      this.apipost(
        "dining_get_GetCooperationType",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.CooperationTypeList = res.data.data;
          }
        },
        err => {}
      );
    },
         //获取酒店修改与报价添加修改权限
      GetHotelPirceStockAuth() {
        this.apipost(
          "hotel_post_GetHotelPriceStockAuthService", {},
          res => {
            if (res.data.resultCode == 1) {
              this.IsHotelPriceStock = res.data.data;
            }
          },
          err => {}
        );
      }
    },
    created() {
      if (this.$route.query.hasOwnProperty("cache")) {
        if (this.$store.state.pageCondition != null) {
          this.msg = this.$store.state.pageCondition;
        }
      }
      var id = this.$route.query.ID;
      if (id) {
        this.msg.ID = id;
      }
    },
    mounted() {
      this.GetHotelPirceStockAuth();
      this.getCountryList();
      this.selectResource();
       this.GetDiningTypeList();
    this.GetDiningPriceTypeList();
    this.GetCooperationTypeList();
    }
  };
</script>