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

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

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

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

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

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

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

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

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

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

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

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

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

  .scenicSpotList .starSu {
    position: absolute;
    bottom: 8px;
    right: 10px;
    display: flex;
  }

  .scenicSpotList .starSu .star {
    margin-left: 5px;
  }

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

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

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

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

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

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

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

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

  .scenicSpotList .btnList {
    padding: 10px 10px 20px 10px;
    display: flex;
    justify-content: space-between;
  }

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

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

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

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

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

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

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

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

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

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

  .scenicSpotList .comCursorUrl {
    cursor: pointer;
  }

  /* 景区列表 */

</style>
<template>
  <div class="flexOne scenicSpotList">
    <div class="query-box">
      <ul>
        <li>
          <span class="hotel_name">
            <em>{{$t('hotel.product_name')}}</em>
            <el-input maxlength="50" clearable @keyup.native.enter="resetPageIndex(),selectResource()"
              v-model="msg.Name">
            </el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('advmanager.v_type')}}</em>
            <el-select v-model="msg.CarType" class='multiple_input w210' :placeholder="$t('pub.pleaseSel')">
              <el-option v-for="item in IsCarList" :key="item.value" :label="item.label" :value="item.value">
              </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="goUrl('CharteringInfoManage')">{{$t('pub.addBtn')}}</button>
          <!-- <button class="hollowFixedBtn" type="button" @click="DownLoadFile()">{{$t('adm.adm_download')}}</button> -->
        </li>
      </ul>
    </div>
    <div class="hotelResource clearfix" v-loading="loading">
      <div class="resourceList" v-for="item in tableData" :key="item.subCode">
        <div class="reTopInfo" :class="{'comCursorUrl':item.ImageList}" @click="OpenNewUrl(item.ImageList[0])">
          <img v-if="!item.ImageList" src="../../../assets/img/bg_c3@3x.png">
          <img v-else :src='item.ImageList[0]' :onerror="defaultImg">
          <div class="resTypeList">
            <!-- B2B 内部 APP 小程序 -->
            <!-- <span v-for="(items,index) in item.PlaceList"
                :class="{'L1':items.AirportName,'L2':'','L3':'','L4':'','L5':''}"
                :key="index">{{items.AirportName}}</span> -->
          </div>
          <div class="delScien" @click.stop="isdelete(item.Id)">
            <i class="iconfont icon-xingzhuang"></i>
          </div>
          <div class="starSu">
            <div class="star" v-if="item.PlaceList[0].AirportName!=''" v-for="(items,index) in item.PlaceList">
              <el-tooltip class="item" effect="dark" :content="items.Bname" placement="bottom-start"
                popper-class="max-w250">
                <span class="foodList" :key="index" v-if="index==0&&items.AirportName">{{items.AirportName}}</span>
              </el-tooltip>
            </div>
            <span v-if="item.CarType==1" class="sushe">{{$t('objFill.pickup')}}</span>
            <span v-if="item.CarType==2" class="sushe">{{$t('objFill.send')}}</span>
            <span v-if="item.CarType==3" class="sushe">{{$t('objFill.baoche')}}</span>
          </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.UpdateByName+''+item.UpdateTime" placement="top-start"
          popper-class="max-w250">
          <div style="padding-left:15px;margin:10px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
            <i style="top: 1px;position: relative;" class="iconfont icon-renyuanguanli"></i>
            <span v-if="item.UpdateTime && item.UpdateTime!=''">{{item.UpdateByName}}</span>
            {{item.UpdateTime}}
          </div>
        </el-tooltip>
        <div class="btnList">
          <button @click="goUrl('CharteringInfoManage',item.Id)" class="hotelBtn">{{$t('pub.updateMsg')}}</button>
          <button @click="goUrlT('CharteringQuotation',item.Id,item.Name)" class="hotelBtn">{{$t('objFill.baojia')}}</button>
          <button class="hotelBtn" @click="clickShelf(item)">{{item.ProductState==2?$t('Operation.Op_shangjia'):$t('Operation.Op_xiajia')}}</button>
          <button @click="goB2B(item.Id)" class="hotelBtn"> {{$t('sm.yulan')}}</button>
        </div>
      </div>
      <div class="noData" v-show="noData">{{$t('system.content_noData')}}</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 {
         //当前登录用户信息
         CurrentUserInfo: {},
        countryList: "",
        provinceList: "",
        cityList: "",
        district: "",
        Ids: [],
        tableData: "",
        noData: false,
        deleteID: "",
        status: [{
            value: "0",
            label: this.$t('pub.normalSel')
          },
          {
            value: "1",
            label: this.$t('system.table_delete')
          }
        ],
        IsCarList: [{
            value: "-1",
            label: this.$t('pub.unlimitedSel')
          }, {
            value: "1",
            label: this.$t('objFill.pickup')
          },
          {
            value: "2",
            label: this.$t('objFill.send')
          },
          {
            value: "3",
            label: this.$t('objFill.baoche')
          }
        ],
        loading: true,
        EmployeeList: [],
        defaultImg: 'this.src="' + require("../../../assets/img/bg_z1@2x.png") + '"',
        msg: {
          pageIndex: 1,
          pageSize: 14,
          Name: "",
          CarType: "-1",
          total: 0,
          currentPage: 1,
        }
      };
    },
    methods: {

      goB2B(ConfigId) {
        var B2BDomain = this.CurrentUserInfo.B2BDomain;
          if (this.CurrentUserInfo.RB_Group_id == 81) {
            this.$tripUtils.GotoB2BCarPage(B2BDomain, ConfigId);
          } else {
            this.$tripUtils.GotoB2BCarPage(B2BDomain, ConfigId);
          }
      },
      // 上下架
      clickShelf(item) {
        var that = this;
        let text
        if (item.ProductState == 1) {
          text = this.$t('Operation.Op_xiajia')
        }
        if (item.ProductState == 2) {
          text = this.$t('Operation.Op_shangjia')
        }
        that.Confirm(`${this.$t('objFill.shifouyao')}${text}${this.$t('objFill.gaibaochecp')}`, this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: "warning"
          })
          .then(() => {
              var msg = {
                ProductId: item.Id
              };
            that.apipost(
              "CarSingle_post_SetCarSingleProcudtState",
              msg,
              res => {
                if (res.data.resultCode == 1) {
                  that.Success(res.data.message);
                  that.selectResource();
                } else {
                  that.Error(res.data.message);
                }
              },
              null
            );
          })
          return
        that.Confirm(`${this.$t('objFill.shifouyao')}${text}${this.$t('objFill.gaibaochecp')}`, function () {
          var msg = {
            ProductId: item.Id
          };
          that.apipost(
            "CarSingle_post_SetCarSingleProcudtState",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.selectResource();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      CopyScenic(Id) {
        var that = this;
        that.Confirm(that.$t('objFill.shifoufzcjd'), function () {
          var msg = {
            ID: Id
          };
          that.apipost(
            "ticketcoupons_post_CopyTicketCouponsService",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.selectResource();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.selectResource();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.msg.currentPage = 1;
      },
      //根据省份获取城市
      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 => {}
        );
      },
      isdelete(ID) {
        var that = this;
        that.Confirm(that.$t('tips.shifoushanchu'), function () {
          that.apipost(
            "CarSingle_post_DelCarSingleProcudt", {
              ProductId: ID
            },
            response => {
              if (response.data.resultCode == 1) {
                that.Success(that.$t('tips.shanchuchenggong'));
                that.selectResource();
              } else {
                that.Error(response.data.message);
              }
            },
            null
          );
        });
      },
      DownLoadFile() {
        this.loading = true;
        let myDate = new Date();
        let _year = myDate.getFullYear();
        let _month = myDate.getMonth() >= 9 ? myDate.getMonth() + 1 : '0' + (myDate.getMonth() + 1);
        let _date = myDate.getDate() > 9 ? myDate.getDate() : '0' + myDate.getDate();
        let _hours = myDate.getHours() > 9 ? myDate.getHours() : '0' + myDate.getHours();
        let _minutes = myDate.getMinutes() > 9 ? myDate.getMinutes() : '0' + myDate.getMinutes();
        let _seconds = myDate.getSeconds() > 9 ? myDate.getSeconds() : '0' + myDate.getSeconds();
        let downDate = _year + _month + _date + _hours + _minutes + _seconds;

        var fileName = this.$t('ground.jingdanxinx') + downDate + ".xls";
        this.GetLocalFile("dmcstatistics_post_GetTicketCouponsExport", this.msg, fileName,
          res => {
            this.loading = false;
          });
      },
      selectResource() {
        this.loading = true;
        if (this.msg.Status == "") {
          this.msg.Status = "-1";
        }
        this.apipost(
          "CarSingle_post_GetCarSingleProductPageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.msg.total = res.data.data.count;
              var tempData = res.data.data.pageData;
              this.noData = !this.msg.total > 0;
              tempData.forEach(x => {
                if (x.ScenicSpotTag != null && x.ScenicSpotTag !== "") {
                  x.FoodTagArr = x.ScenicSpotTag.split(",");
                  var newAr = [];
                  if (x.FoodTagArr != null) {
                    x.FoodTagArr.forEach(o => {
                      newAr.push({
                        Aname: o.slice(0, 3),
                        Bname: o
                      });
                    });
                    x.newAr = newAr;
                  }
                }
              });
              this.tableData = tempData;
            }
          },
          null
        );
      },
      goUrl(path, id) {
        if (id) {
          this.$store.commit("pageConditionUpdate", this.msg);
          this.$router.push({
            path: path,
            query: {
              id: id,
              blank: 'y',
              tab: this.$t('objFill.xiugaixpxx')
            }
          });
        } else {
          this.$router.push({
            path: path,
            query: {
              id: 0,
              blank: 'y',
              tab: this.$t('objFill.xingzencpxx')
            }
          });
        }

      },
      goUrlT(path, id, Name) {
        let data = {
          id: id,
          Name: Name,
        }
        this.$router.push({
          path: path,
          query: {
            obj: JSON.stringify(data),
            blank: 'y',
            tab: this.$t('objFill.chanpingbj')
          }
        });
      },
      //根据当前员工所在部门获取该部门及子部门员工信息
      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 => {}
        );
      },
    },
    mounted() {
      this.getEmployeeList();
      this.getCountryList();
    },
    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;
      }

      let userInfo = this.getLocalStorage();
      this.CurrentUserInfo = userInfo;
      this.selectResource();
    }
  };

</script>