<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: 330px;
    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;
    border-radius: 2px;
  }

  .restaurantList .L2 {
    background-color: #47bf8c;
    border-radius: 2px;
  }

  .restaurantList .L3 {
    background-color: #2aaef2;
    border-radius: 2px;
  }

  .restaurantList .L4 {
    background-color: #9cf;
    border-radius: 2px;
  }

  .restaurantList .L5 {
    background-color: #00c6ff;
    border-radius: 2px;
  }

  .restaurantList .F1 {
    color: #e95252;
  }

  .restaurantList .F2 {
    color: #47bf8c;
  }

  .restaurantList .F3 {
    color: #00c6ff;
  }

  .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 {
    text-align: center;
  }

  .restaurantList .hotelBtn {
    width: 55px;
    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>
          <span><em>{{$t('visa.v_czuser')}}</em></span>
          <el-select class="w150" v-model="msg.UpdateBy" 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 v-if="IsEditDmcSource==1" 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 class="foodList" v-for="(items,index) in item.FoodTagArr" :key="`ft_`+index">{{items}}</span>
          </div>
          <div class="delScien" @click="isdelete(item.ID)" v-if="IsEditDmcSource==1">
            <i class="iconfont icon-xingzhuang"></i>
          </div>
          <div class="starSu">
            <div class="star">
              <span class="foodList" v-if="item.DiningTypeName&&item.DiningTypeName!=''">{{item.DiningTypeName}}</span>
            </div>
          </div>
        </div>
        <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start" popper-class="max-w250">
          <div class="hotelTitle">{{item.Name}}</div>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="item.RealName" placement="top-start" popper-class="max-w250">
          <div class="hotelTitle">{{$t('ground.zhenshimingcheng')}}:<font class="F1">{{item.RealName}}</font>
          </div>
        </el-tooltip>
        <div class="hotelTitle" v-if="item.Country==651">
          {{$t('hotel.hotel_detailinfo')}}:{{item.ProvinceName}}{{item.CityName}}{{item.DistrictName}}
        </div>
        <div v-else class="hotelTitle">
          {{$t('hotel.hotel_detailinfo')}}:{{item.Address}}
        </div>
        <!-- <template v-if="item.OpenPlatformList&&item.OpenPlatformList.length>0">
          <div class="hotelTitle fz12">{{$t('objFill.v101.Rest.shangjiapit')}}:<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="`pl_`+index" style="margin-left:1.5px;">{{items.Name}}</span>
          </div>
        </template> -->
        <el-tooltip class="item" effect="dark" :content="item.UseTypeListStr" placement="top-start"
          popper-class="max-w250">
          <div class="hotelTitle fz12">{{$t('objFill.v101.traveltrip.shiyonglex')}}:<font class="F2"
              v-for="(subItem,subIndex) in item.UseTypeList" :key="`ut_`+index+subIndex">
              {{subItem}}
            </font>
          </div>
        </el-tooltip>
        <div class="hotelTitle fz12">{{$t('objFill.v101.Rest.zuidicanb')}}: <font class="F3">
            {{item.UnitPrice>0?item.UnitPrice:"/"}}</font>
        </div>
        <div style="padding:0 0 15px 15px;margin-top: 5px;">
          <i class="iconfont icon-renyuanguanli"></i>
          <span v-if="item.UpdateName && item.UpdateName!=''">{{item.UpdateName}}</span>
          {{item.UpdateTimeStr}}
        </div>
        <div class="btnList" style="text-align:center;">
          <button v-if="IsEditDmcSource==1" @click="goSubInfo('restaurantInfoManage',item.ID)"
            class="hotelBtn">{{$t('pub.updateMsg')}}</button>

          <button @click="goUrl('RestaurantPackage',item.ID)" class="hotelBtn">{{$t('restaurant.res_package')}}</button>

          <button @click="goSubInfo('restaurantInfoDetail',item.ID)" class="hotelBtn">{{$t('fnc.xiangqing')}}</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 {
        total: 0,
        currentPage: 1,
        countryList: "",
        provinceList: "",
        cityList: "",
        district: "",
        tableData: "",
        EmployeeList: [], //员工列表
        DiningTypeList: [],
        DiningPriceTypeList: [],
        CooperationTypeList: [],
        status: [{
            value: "0",
            label: this.$t('pub.normalSel')
          },
          {
            value: "1",
            label: this.$t('system.table_delete')
          }
        ],
        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,
          UpdateBy: 0, //操作人
          IsRecommend: 0,
        },
        IsHotelPriceStock: 0, //1-有获取餐厅与报价添加修改权限
        IsEditDmcSource: 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.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,
            blank: 'y',
            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() {
        let isStock = "IsHotelPriceStock";
        let editDmcSource = "F_EditDmcSource";
        this.apipost('userauth_get_CheckUserAuthNewService', '', res => {
          if (res.data.resultCode == 1) {
            var tempData = res.data.data;
            if (tempData && tempData.length > 0) {
              if (tempData.includes(isStock)) {
                this.IsHotelPriceStock = 1;
              }
              if (tempData.includes(editDmcSource)) { //查看列表权限
                this.IsEditDmcSource = 1;
              } else {
                this.msg.IsRecommend = 1;
              }
            }
          } else {
            this.msg.IsRecommend = 1;
          }
          this.selectResource();
        });
      },
      //根据当前员工所在部门获取该部门及子部门员工信息
      getEmployeeList() {
        let userInfo = this.getLocalStorage();
        let msg = {
          GroupId: 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 => {}
        );
      },
    },
    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;
      }
    },
    mounted() {
      this.getEmployeeList();
      this.GetHotelPirceStockAuth();
      this.getCountryList();
      // this.selectResource();
      this.GetDiningTypeList();
      this.GetDiningPriceTypeList();
      this.GetCooperationTypeList();
    }
  };

</script>
