<template>
  <view class="hotel-list">
    <view class="search-box">
      <view class="hotel-city" @click="showCity">
        <u-icon
          name="location"
          :size="24"
          color="#000000"
          style="margin-right: 8rpx"
        ></u-icon>
        {{ city }}
      </view>

      <view class="date" @click="chosenDate">
        <view>住 {{ startDay }}</view>
        <view>离 {{ endDay }}</view>
      </view>
      <view class="days">{{ day }}晚</view>
      <view style="width: 1px; flex: 1">
        <u-search
          placeholder="关键字/位置/品牌/酒店名"
          v-model="searchObj.Name"
          input-align="left"
          :value="searchObj.Name"
          text-color="#111"
          bg-color="rgba(0,0,0,0)"
          @change="research()"
          :show-action="false"
        ></u-search>
      </view>
    </view>
    <u-popup
      v-model="showCityList"
      mode="bottom"
      :border-radius="40"
      :safe-area-inset-bottom="true"
    >
      <Address @confirm="confirmCity" :list="cityList" />
    </u-popup>
    <view>
      <u-dropdown
        ref="uDropdown"
        @open="open"
        @close="close"
        active-color="#000"
        inactive-color="#444"
      >
        <u-dropdown-item
          v-model="searchObj.OrderByType"
          :title="optionsTitle[0]"
          :options="options1"
          @change="change"
        >
        </u-dropdown-item>
        <u-dropdown-item
          v-model="searchObj.District"
          :title="optionsTitle[1]"
          :options="DistrictOptions"
          @change="changeDistrict"
        >
        </u-dropdown-item>
        <!-- <u-dropdown-item v-model="searchObj.enclosure" :title="optionsTitle[1]" :options="options2" @change="change2"></u-dropdown-item> -->
        <u-dropdown-item :title="optionsTitle[2]">
          <view
            class="slot-content"
            style="padding: 30rpx; background-color: #fff"
          >
            <view>
              <text
                style="
                  font-size: 28rpx;
                  color: #111;
                  font-weight: 800;
                  margin-right: 10rpx;
                "
                >价格</text
              >
              <text style="font-size: 24rpx; color: #111">{{
                tempRateAndPrice.priceText
              }}</text>
            </view>
            <view
              style="
                display: flex;
                align-items: center;
                color: #999999;
                margin-top: 15rpx;
              "
            >
              <view style="font-size: 24rpx; flex: 1">￥0</view>
              <view
                style="
                  font-size: 24rpx;
                  flex: 1;
                  color: #333;
                  text-align: right;
                "
                >￥1000以上</view
              >
            </view>
            <range-slider
              ref="rangeslider"
              :width="690"
              :height="80"
              :step="10"
              :liveMode="true"
              background-color="#E2E2E2"
              :block-size="40"
              active-color="#111111"
              min="0"
              max="1000"
              @rangechange="rangechange4"
              :values="tempRateAndPrice.price"
            ></range-slider>
            <view style="margin: 20rpx 0 29rpx 0">
              <text style="font-size: 28rpx; color: #111; font-weight: 800"
                >星级</text
              >
            </view>
            <view class="hotel-rate-box">
              <view
                v-for="(x, i) in rates"
                :key="i"
                class="hotel-rate"
                :class="{ active: tempRateAndPrice.rate.indexOf(x.Id) != -1 }"
                @click="setHotelRate(x.Id)"
              >
                {{ x.Name }}</view
              >
            </view>
            <view
              style="
                box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);
                margin-top: 40rpx;
                display: flex;
              "
            >
              <view style="flex: 1; margin-right: 30rpx">
                <u-button :custom-style="btnStyle" @click="resetPrice"
                  >重置</u-button
                >
              </view>
              <view style="flex: 1">
                <u-button :custom-style="btnStyle2" @click="surePrice"
                  >完成</u-button
                >
              </view>
            </view>
          </view>
        </u-dropdown-item>
      </u-dropdown>
    </view>
    <u-popup
      v-model="showTimePopup"
      mode="bottom"
      border-radius="20"
      length="95%"
      :safe-area-inset-bottom="true"
    >
      <canlendar @finish="chosenDateResult"></canlendar>
    </u-popup>
    <view class="morewhere">
      <view
        v-for="(x, i) in searchObj.TagList"
        class="item"
        @click="chosenMorewhere(x)"
        :class="{ active: x.IsCheck == 1 }"
        >{{ x.Name }}</view
      >
    </view>
    <view class="no-data" v-if="HotelList.length === 0">
      <image
        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/no-data.png"
        mode="aspectFit"
        class="no-data-img"
      ></image>
      <view class="zhanwu"> 暂无数据 </view>
    </view>
    <scroll-view
      :scroll-y="true"
      @scrolltolower="lower"
      :enable-back-to-top="true"
      :enable-flex="true"
      :scroll-top="scrollTop"
      @scroll="scroll"
      style="height: calc(100% - 224rpx); padding-bottom: 0px"
      v-if="HotelList.length > 0"
    >
      <hotel-good
        :HotelList="HotelList"
        :dayObj="dayObj"
        :searchObj="searchObj"
      ></hotel-good>
      <u-loadmore
        v-if="showLoading"
        :status="status"
        :load-text="loadText"
        :font-size="24"
        :margin-top="20"
        :margin-bottom="20"
        bg-color="#F5F5F5"
        color="#111"
      />
    </scroll-view>
  </view>
</template>

<script>
import rangeSlider from "./components/range-slider.vue";
import canlendar from "./components/time/index";
import hotelGood from "./components/hotel-good.vue";
import Address from "./components/address/smh-address-indexed.vue";
export default {
  data() {
    return {
      city: "成都",
      cityList: [],
      showCityList: false,
      showTimePopup: false,
      searchObj: {
        pageIndex: 1,
        pageSize: 15,
        Name: "", //关键字
        StartPrice: 0,
        EndPrice: 1000,
        QStartDate: "",
        QEndDate: "",
        OrderByType: "1", //排序类型
        QStars: "", //星级
        TagList: [], //查询标签
        City: 262, //市
        District: 0, //区
      },
      day: 0,
      startDay: "",
      endDay: "",
      HotelList: [], //酒店数据
      tempRateAndPrice: {
        price: {},
        priceText: "不限",
        rate: [],
      },
      optionsTitle: ["推荐排序", "区域", "价格/星级", "筛选"],
      rates: [],
      options1: [], //推荐排序数据
      options2: [
        {
          label: "不限",
          value: -1,
        },
        {
          label: "宝镜岩",
          value: 1,
        },
        {
          label: "盆景滩",
          value: 2,
        },
        {
          label: "芦苇海",
          value: 3,
        },
        {
          label: "五彩池",
          value: 4,
        },
        {
          label: "镜海",
          value: 5,
        },
        {
          label: "犀牛海",
          value: 6,
        },
        {
          label: "诺日朗瀑布",
          value: 7,
        },
        {
          label: "火花海",
          value: 8,
        },
      ],
      btnStyle: {
        borderRadius: "16rpx",
        color: "#111",
        fontSize: "30rpx",
        width: "100%",
        border: "1px solid #111",
        background: "#FFF",
      },
      btnStyle2: {
        borderRadius: "16rpx",
        color: "#fff",
        fontSize: "30rpx",
        width: "100%",
        background: "#111",
      },
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多商品了",
      },
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      showLoading: false,
      status: "loadmore",
      page_count: 0,
      dayObj: {},
      DistrictOptions: [{ label: "不限", value: 0 }],
    };
  },
  components: {
    rangeSlider,
    canlendar,
    hotelGood,
    Address,
  },
  onLoad(options) {
    if (options && options.Name) {
      this.searchObj.Name = options.Name;
    }
  },
  created() {
    uni.setNavigationBarTitle({
      title: "酒店",
    });
    let d1 = new Date();
    let d = new Date();
    let d2 = new Date(d.setDate(d.getDate() + 1));
    let startWeek = "周" + "日一二三四五六".charAt(new Date().getDay());
    let endWeek = "周" + "日一二三四五六".charAt(new Date().getDay() + 1);
    var obj = {
      start: `${d1.getFullYear()}-${d1.getMonth() + 1}-${d1.getDate()}`,
      end: `${d2.getFullYear()}-${d2.getMonth() + 1}-${d2.getDate()}`,
      startDay: `${d1.getMonth() + 1}-${d1.getDate()}`,
      endDay: `${d2.getMonth() + 1}-${d2.getDate()}`,
      day: 1,
      startWeek: startWeek,
      endWeek: endWeek,
    };
    this.dayObj = obj;
    uni.setStorage({
      key: "Time",
      data: JSON.stringify(obj),
    });
    this.searchObj.QStartDate = obj.start;
    this.searchObj.QEndDate = obj.end;
    this.startDay = obj.startDay;
    this.endDay = obj.endDay;
    this.day = obj.day;
    this.getSearchCondition();
    this.getList();
    this.getCity();
    this.getDistrict(262);
  },
  methods: {
    showCity() {
      this.showCityList = true;
    },
    confirmCity(val) {
      this.searchObj.City = val.ID;
      this.showCityList = false;
      this.city = val.Name;
      this.getDistrict(val.ID);
      this.searchObj.District = 0;
      this.searchObj.pageIndex = 1;
      this.optionsTitle[1] = "区域";
      this.getList();
    },
    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    goTop: function (e) {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
    },
    research() {
      this.searchObj.pageIndex = 1;
      this.getList(1);
    },
    lower(e) {
      // TODO: 滚动到了底部，实现翻页加载
      if (this.searchObj.pageIndex < this.page_count) {
        this.status = "loading";
        this.searchObj.pageIndex++;
        this.getList();
      } else {
        this.status = "nomore";
      }
    },
    chosenMorewhere(obj) {
      if (obj.IsCheck == 0) {
        obj.IsCheck = 1;
      } else {
        obj.IsCheck = 0;
      }
      this.research();
    },
    chosenDateResult(obj) {
      this.searchObj.QStartDate = obj.start;
      this.searchObj.QEndDate = obj.end;
      this.startDay = obj.startDay;
      this.endDay = obj.endDay;
      this.day = obj.day;
      this.dayObj = obj;
      this.research();
      this.showTimePopup = false;
    },
    chosenDate() {
      this.showTimePopup = true;
    },
    setHotelRate(rateId) {
      let temp = this.tempRateAndPrice.rate.indexOf(rateId);
      if (temp == -1) {
        this.tempRateAndPrice.rate.push(rateId);
      } else {
        this.tempRateAndPrice.rate.splice(temp, 1);
      }
    },
    resetPrice() {
      this.optionsTitle[2] = "价格/星级";
      var obj = this.$refs.rangeslider;
      obj.progressBarLeft = 0;
      obj.progressBarWidth = obj._getMaxLength();
      obj.minBlockLeft = 0;
      obj.maxBlockLeft = obj._getMaxLength();
      this.tempRateAndPrice = {
        price: {
          minValue: 0,
          maxValue: 1000,
        },
        priceText: "不限",
        rate: [],
      };
      this.closeDropdown();
      this.searchObj.StartPrice = 0;
      this.searchObj.EndPrice = 1000;
      this.research();
    },
    surePrice() {
      let result = "";
      if (this.tempRateAndPrice.rate.length > 0) {
        this.rates.forEach((x) => {
          if (this.tempRateAndPrice.rate.indexOf(x.value) != -1) {
            result += x.label + ",";
          }
        });
      }
      if (this.tempRateAndPrice.priceText != "不限") {
        result += this.tempRateAndPrice.priceText;
      }
      result = result == "" ? "价格/星级" : result;
      this.optionsTitle[2] = result;
      this.$forceUpdate();
      this.closeDropdown();
      this.research();
    },
    rangechange4(e) {
      this.searchObj.StartPrice = e.minValue;
      this.searchObj.EndPrice = e.maxValue;
      if (e.minValue == 0) {
        if (e.maxValue == 1000) {
          this.tempRateAndPrice.priceText = "不限";
        } else {
          this.tempRateAndPrice.priceText = `￥${e.maxValue}以下`;
        }
      } else if (e.maxValue == 1000) {
        this.tempRateAndPrice.priceText = `￥${e.minValue}以上`;
      } else {
        this.tempRateAndPrice.priceText = `￥${e.minValue} - ￥${e.maxValue}之间`;
      }
    },
    closeDropdown() {
      this.$refs.uDropdown.close();
    },
    open(index) {
      // 展开某个下来菜单时，先关闭原来的其他菜单的高亮
      // 同时内部会自动给当前展开项进行高亮
      this.$refs.uDropdown.highlight();
      if (index == 2) {
        // this.tempRateAndPrice = this.searchObj.rateAndPrice
      }
    },
    close(index) {
      // 关闭的时候，给当前项加上高亮
      // 当然，您也可以通过监听dropdown-item的@change事件进行处理
      this.$refs.uDropdown.highlight(index);
    },
    change(index) {
      let temp = this.options1.find((x) => {
        if (x.value == index) {
          return x;
        } else {
          return false;
        }
      });
      this.optionsTitle[0] = temp.label;
      this.research();
    },
    change2(index) {
      if (index != -1) {
        let temp = this.options2.find((x) => {
          if (x.value == index) {
            return x;
          } else {
            return false;
          }
        });
        this.optionsTitle[1] = temp.label;
      } else {
        this.optionsTitle[1] = "附近";
      }
    },
    //获取查询条件
    getSearchCondition() {
      this.request2(
        {
          url: "/api/Hotel/GetHotelQuery",
          data: {},
        },
        (res) => {
          if (res.resultCode == 1) {
            let tempObj = res.data;
            this.options1 = [];
            this.rates = [];
            if (tempObj && tempObj.OrderByList.length > 0) {
              tempObj.OrderByList.forEach((x) => {
                let obj = {
                  label: x.Name,
                  value: x.Id,
                };
                this.options1.push(obj);
              });
            }
            if (tempObj && tempObj.TagList) {
              this.searchObj.TagList = tempObj.TagList;
            }
            if (tempObj && tempObj.StarList) {
              this.rates = tempObj.StarList;
            }
          }
        },
        (err) => {}
      );
    },
    //获取列表数据
    getList(type) {
      this.searchObj.QStars = this.tempRateAndPrice.rate.toString();
      if (type == 1) {
        this.HotelList = [];
      }
      this.request2(
        {
          url: "/api/Hotel/AppGetHotelPage",
          data: this.searchObj,
        },
        (res) => {
          if (res.resultCode == 1) {
            if (this.searchObj.pageIndex === 1) {
              this.HotelList = res.data.pageData;
            } else {
              this.HotelList = this.HotelList.concat(res.data.pageData);
            }
            this.page_count = res.data.pageCount;
          }
        }
      );
    },
    getCity() {
      this.request2(
        {
          url: "/api/Hotel/GetHotelDestination",
          data: { ID: 0 },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.cityList = [];
            res.data.map((i) => {
              let initial = i.PinYin.slice(0, 1);

              let find = this.cityList.filter((e) => {
                return e.letter == initial;
              });
              if (find.length > 0) {
                find[0].citylist.push(i);
              } else {
                let obj = {
                  letter: initial,
                  citylist: [i],
                };
                // obj.citylist[0]=i
                this.cityList.push(obj);
              }
            });
          }
        },
        (err) => {}
      );
    },
    getDistrict(id) {
      this.request2(
        {
          url: "/api/Hotel/GetHotelDestination",
          data: { ID: id },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.DistrictOptions = [{ label: "不限", value: 0 }];
            res.data.map((i) => {
              let obj = {
                label: i.Name,
                value: i.ID,
              };
              this.DistrictOptions.push(obj);
            });
          }
        },
        (err) => {}
      );
    },
    changeDistrict(val) {
      this.searchObj.pageIndex = 1;
      this.getList();
      let res = this.DistrictOptions.filter((i) => {
        return i.value == val;
      });
      this.optionsTitle[1] = res[0].label;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.u-flex {
  justify-content: center;
}
.hotel-list {
  height: 100vh;
}
.hotel-list .hotel-city {
  width: 105rpx;
  height: 40rpx;
  padding: 0rpx 10rpx 8rpx 0rpx;
  margin-right: 20rpx;
  text-align: center;
  /* color: #DFBE6E; */
  border-right: 1px solid #e2e2e2;
  font-size: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.hotel-list .search-box {
  height: 88rpx;
  background: #ecf1f4;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  padding: 19rpx 30rpx;
  margin: 0 30rpx;
}

.hotel-list .search-box .date {
  width: 82rpx;
  height: 50rpx;
  font-size: 22rpx;
  font-weight: 500;
  color: #111111;
  line-height: 29rpx;
  margin-top: -6px;
}

.hotel-list .search-box .days {
  height: 40rpx;
  padding: 8rpx 20rpx 8rpx 10rpx;
  color: #dfbe6e;
  border-right: 1px solid #e2e2e2;
  font-size: 24rpx;
}

.hotel-rate-box {
  display: flex;
  align-items: center;
}

.hotel-rate {
  width: 160rpx;
  height: 60rpx;
  background: #ecf1f4;
  border-radius: 10rpx;
  font-size: 26rpx;
  color: #999999;
  line-height: 60rpx;
  margin-right: 15rpx;
  text-align: center;
}

.hotel-rate:last-child {
  margin-right: 0;
}

.hotel-rate.active {
  background: #111111;
  color: #ffffff;
}

.hotel-list .morewhere {
  padding: 10rpx 30rpx;
  display: flex;
  align-items: center;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.hotel-list .morewhere .item {
  padding: 0 20rpx;
  height: 36rpx;
  line-height: 36rpx;
  background: #ecf1f4;
  border-radius: 8rpx;
  margin-right: 26rpx;
  font-size: 22rpx;
  color: #999999;
  font-weight: 400;
  flex-shrink: 0;
}

.hotel-list .morewhere .item.active {
  background: #111111;
  color: #ffffff;
}

.hotel-list .morewhere .item:last-child {
  margin-right: 0;
}

.no-data {
  .no-data-img {
    width: 180rpx;
    height: 240rpx;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .zhanwu {
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-top: 20rpx;
  }
}
</style>
