<template>
  <view class="hotel-list">
    <view class="search-box">
      <view class="city-box" @click="showCity">
        <u-icon
          name="location"
          :size="28"
          color="#000000"
          style="margin-right: 8rpx"
        ></u-icon>
        {{ city }}
      </view>
      <view style="width: 1px; flex: 1">
        <u-search
          placeholder="景点"
          v-model="msg.Name"
          input-align="left"
          :value="searchObj.searchKey"
          text-color="#111"
          bg-color="rgba(0,0,0,0)"
          :show-action="false"
          @search="searchList"
          @clear="searchList"
        ></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="msg.OrderBy"
          :title="optionsTitle[0]"
          :options="orderOptions"
          @change="orderChange"
          style="justify-content: center"
          v-if="orderOptions"
        >
        </u-dropdown-item>
        <!-- 景点类型 -->
        <u-dropdown-item
          :title="optionsTitle[1]"
          v-model="msg.FoodTypeIds"
          :options="classOptions"
          @change="typeChange"
        >
          <!-- <Cascade :dataList="typeList"></Cascade> -->
        </u-dropdown-item>
        <u-dropdown-item
          v-model="msg.District"
          :title="optionsTitle[2]"
          :options="DistrictOptions"
          @change="changeDistrict"
        >
        </u-dropdown-item>
        <!-- 筛选 -->
        <u-dropdown-item :title="optionsTitle[3]">
          <view class="slot-content">
            <!-- <view class="u-text-center u-content-color">其他自定义内容</view>-->
            <view
              class="hotel-rate"
              :class="{ 'hotel-rate-active': msg.IsFree != -1 }"
              @click="changeScreen('IsFree')"
              >是否免费</view
            >
            <view
              class="hotel-rate"
              :class="{ 'hotel-rate-active': msg.IsSameDayBuy != -1 }"
              @click="changeScreen('IsSameDayBuy')"
              >是否闪入园</view
            >
            <view
              class="hotel-rate"
              :class="{ 'hotel-rate-active': msg.IsWorryFreeRefund != -1 }"
              @click="changeScreen('IsWorryFreeRefund')"
              >是否无忧退款</view
            >
            <view class="" style="display: flex; width: 100%">
              <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="no-data" v-if="dataList.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"
      :enable-back-to-top="true"
      :enable-flex="true"
      @scrolltolower="lower"
      style="height: calc(100% - 224rpx); padding-bottom: 0px"
      v-if="dataList.length > 0"
    >
      <view class="ticket-list">
        <view
          v-for="(item, index) in dataList"
          :key="item.ID"
          class="ticket-list-item"
          @click="goDetail(item.ID)"
        >
          <image
            class="left-box"
            :src="item.CoverImg"
            mode="aspectFill"
          ></image>

          <view class="right-box">
            <view class="ticket-name">
              {{ item.Name }}
            </view>
            <view class="rate-box">
              <u-rate
                inactive-color="#FFF"
                :current="item.ScoreNum"
                active-icon="star"
                disabled
                active-color="#FEB969"
              ></u-rate>
              <view class="rate">
                {{ item.ScoreNum }}
                <text
                  v-if="
                    item.ScoreNum === 1 ||
                    item.ScoreNum === 2 ||
                    item.ScoreNum === 3 ||
                    item.ScoreNum === 4 ||
                    item.ScoreNum === 5
                  "
                  >.0</text
                >
              </view>
            </view>
            <view class="address">
              {{ item.Address }}
            </view>
            <view class="tag-box">
              <view v-for="(_item, _index) in item.ScenicSpotTag" :key="_index">
                <u-tag
                  :text="_item"
                  bg-color="#FFF"
                  border-color="#DFBE6E"
                  color="#DFBE6E"
                  size="mini"
                  class="tag"
                  v-if="_item"
                ></u-tag>
              </view>
              <view v-for="(_item, _index) in item.GeographicTag" :key="_index">
                <u-tag
                  :text="_item"
                  bg-color="#FFF"
                  border-color="#DFBE6E"
                  color="#DFBE6E"
                  size="mini"
                  class="tag"
                  v-if="_item"
                ></u-tag>
              </view>
            </view>
            <view class="SalesPrice">
              <text class="SalesPrice-pre">￥</text
              >{{ $utils.getretailer() == true ? item.B2BPrice : item.B2CPrice
              }}<text class="SalesPrice-nex">起</text>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore
        :status="status"
        :load-text="loadText"
        :font-size="24"
        :margin-top="20"
        :margin-bottom="20"
        bg-color="#FFF"
      />
    </scroll-view>
    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <u-loading mode="flower" :size="48"></u-loading>
      <Text style="color: #fff; margin-top: 10rpx">加载中...</Text>
    </view>
  </view>
</template>

<script>
import Address from "./components/address/smh-address-indexed.vue";
export default {
  components: {
    Address,
  },
  data() {
    return {
      city: "成都",
      dataList: [], //列表数据
      typeList: [], //景点类型列表
      msg: {
        pageIndex: 1,
        pageSize: 10,
        Name: "",
        FoodTypeIds: 0,
        IsFree: -1,
        IsSameDayBuy: -1,
        IsWorryFreeRefund: -1,
        OrderBy: 1,
        City: 262,
        District: 0,
      },
      page_count: 1,
      loading: false,
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      showTimePopup: false,
      optionsTitle: ["推荐排序", "景点类型", "区域", "筛选"],
      orderOptions: [
        {
          label: "销量最高",
          value: 1,
        },
        {
          label: "价格最高",
          value: 4,
        },
        {
          label: "价格最低",
          value: 5,
        },
      ],
      classOptions: [],
      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",
      },
      showCityList: false,
      cityList: [],
      DistrictOptions: [{ label: "不限", value: 0 }],
    };
  },
  onLoad(options) {
    if (options && options.Name) {
      this.msg.Name = options.Name;
    }

    this.getScenicType(); // 获取景点类型
    this.getList(); // 获取景点门票类型
    this.getCity();
    this.getDistrict(262);
  },
  created() {
    uni.setNavigationBarTitle({
      title: "门票",
    });
  },
  methods: {
    searchList() {
      this.msg.pageIndex = 1;
      this.getList();
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.getList();
      } else {
        this.status = "nomore";
      }
    },
    goDetail(id) {
      uni.navigateTo({
        url: "/pages/ticketCoupons/detail?id=" + id,
      });
    },
    chosenDateResult(obj) {
      this.searchObj.date = obj;
      this.showTimePopup = false;
    },
    chosenDate() {
      this.showTimePopup = true;
    },
    //筛选重置
    resetPrice() {
      this.msg.IsFree = -1;
      this.msg.IsSameDayBuy = -1;
      this.msg.IsWorryFreeRefund = -1;
      this.$refs.uDropdown.close();
      this.msg.pageIndex = 1;
      this.getList();
    },
    //筛选
    surePrice() {
      this.$refs.uDropdown.close();
      this.msg.pageIndex = 1;
      this.getList();
    },

    closeDropdown() {
      this.$refs.uDropdown.close();
    },
    open(index) {
      // 展开某个下来菜单时，先关闭原来的其他菜单的高亮
      // 同时内部会自动给当前展开项进行高亮
      this.$refs.uDropdown.highlight();
    },
    close(index) {
      // 关闭的时候，给当前项加上高亮
      // 当然，您也可以通过监听dropdown-item的@change事件进行处理
      this.$refs.uDropdown.highlight(index);
    },

    // 获取景点类型
    getScenicType() {
      this.request2(
        {
          url: "/api/AppletDining/GetFoodType",
          data: {
            ClassType: 1,
          },
        },
        (res) => {
          if (res.resultCode === 1) {
            // this.typeList=res.data
            this.classOptions = [
              {
                label: "不限",
                value: 0,
              },
            ];
            res.data.map((i) => {
              let obj = {
                label: i.Name,
                value: i.ID,
              };
              this.classOptions.push(obj);
            });
          }
        }
      );
    },
    //获取景区门票列表
    getList() {
      this.request2(
        {
          url: "/api/AppletDining/GetTicketCouponsPage",
          data: this.msg,
        },
        (res) => {
          if (res.resultCode === 1) {
            this.page_count = res.data.pageCount;
            res.data.pageData.forEach((item) => {
              item.ScenicSpotTag = item.ScenicSpotTag.split(",");
              item.GeographicTag = item.GeographicTag.split(",");
            });
            if (this.msg.pageIndex == 1) {
              this.dataList = res.data.pageData;
            } else if (this.msg.pageIndex > 1) {
              this.dataList = [...this.dataList, ...res.data.pageData];
            }

            if (this.page_count == 1) {
              this.status = "nomore";
            }
          }
        }
      );
    },
    changeScreen(field) {
      if (this.msg[field] === -1) {
        this.msg[field] = 1;
      } else {
        this.msg[field] = -1;
      }
    },
    orderChange(val) {
      this.msg.pageIndex = 1;
      this.getList();
      let res = this.orderOptions.filter((i) => {
        return i.value == val;
      });
      this.optionsTitle[0] = res[0].label;
    },
    typeChange(val) {
      this.msg.pageIndex = 1;
      this.getList();
      let res = this.classOptions.filter((i) => {
        return i.value == val;
      });
      this.optionsTitle[1] = res[0].label;
    },
    showCity() {
      this.showCityList = true;
    },
    confirmCity(val) {
      this.showCityList = false;
      this.msg.City = val.ID;
      this.city = val.Name;
      this.getDistrict(val.ID);
      this.msg.District = 0;
      this.optionsTitle[2] = "区域";
      this.msg.pageIndex = 1;
      this.getList();
    },
    getCity() {
      this.request2(
        {
          url: "/api/AppletDining/GetTicketDestination",
          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],
                };
                this.cityList.push(obj);
              }
            });
          }
        },
        (err) => {}
      );
    },
    getDistrict(id) {
      this.request2(
        {
          url: "/api/AppletDining/GetTicketDestination",
          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.msg.pageIndex = 1;
      this.getList();
      let res = this.DistrictOptions.filter((i) => {
        return i.value == val;
      });
      this.optionsTitle[2] = res[0].label;
    },
  },
};
</script>

<style lang="scss" scoped>
.city-box {
  width: 120rpx;
  height: 40rpx;
  padding: 0rpx 20rpx 8rpx 0rpx;
  text-align: center;
  border-right: 1px solid #e2e2e2;
  font-size: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.hotel-rate {
  width: 215rpx;
  height: 60rpx;
  background: #ecf1f4;
  border-radius: 10rpx;
  font-size: 26rpx;
  color: #999999;
  line-height: 60rpx;
  margin-right: 15rpx;
  text-align: center;
  flex-shrink: 0;
  margin-bottom: 29rpx;
}

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

.hotel-rate-active {
  background-color: #111111;
  color: #ffffff;
}
/deep/.u-flex {
  justify-content: center;
}

.hotel-list {
  height: 100vh;
}

.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: 104rpx;
  height: 50rpx;
  font-size: 22rpx;
  font-weight: 500;
  color: #111111;
  line-height: 29rpx;
}

.hotel-list .search-box .days {
  height: 40rpx;
  padding: 8rpx 30rpx 8rpx 19rpx;
  color: #dfbe6e;
  border-right: 1px solid #e2e2e2;
  font-size: 24rpx;
}
.hotel-rate-box {
  display: flex;
  align-items: center;
}

.slot-content {
  // height: 200rpx;
  background-color: #ffffff;
  padding: 30rpx;
  border-top: 1px solid #c0c4cc;
  display: flex;
  flex-wrap: wrap;
  // .slot-btn{
  // 	height: 46rpx;
  // 	padding: 0 10rpx;
  // 	font-size: 26rpx;
  // 	font-family: PingFang SC;
  // 	font-weight: 500;
  // 	line-height: 44rpx;
  // 	color: #333333;
  // 	border: 1px solid #333333;
  // 	margin-right: 20rpx;
  // 	margin-bottom: 20rpx;
  // 	border-radius: 23rpx;
  // }
  // .check-btn{
  // 	background-color: #333333 !important;
  // 	color: #ffffff !important;
  // }
}
.ticket-list {
  padding: 0 30rpx;
  box-sizing: border-box;
  .ticket-list-item {
    min-height: 340rpx;
    padding: 30rpx 0;
    display: flex;
    // justify-content: space-between;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
    .left-box {
      width: 220rpx;
      height: 280rpx;
      // background-color: #CFCFCF;
      box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
      border-radius: 20rpx;
      overflow: hidden;
    }
    .right-box {
      margin-left: 30rpx;
      width: 440rpx;
      .ticket-name {
        height: 70rpx;
        line-height: 68rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        // display: flex;
        // align-items: center;
        // justify-content: center;
      }
      .rate-box {
        height: 40rpx;
        display: flex;
        align-items: center;
        .rate {
          margin-left: 10rpx;
          color: #999999;
          line-height: 40rpx;
        }
      }
      .address {
        // height: 100rpx;
        padding: 20rpx 30rpx 20rpx 0;
        font-size: 24rpx;
        font-family: PingFang SC;
        color: #999999;
        line-height: 32rpx;
      }
      .tag-box {
        display: flex;
        flex-wrap: wrap;
        .tag {
          margin-right: 10rpx;
        }
      }
      .SalesPrice {
        position: absolute;
        right: 0;
        bottom: 30rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ff3166;
        font-size: 36rpx;
        line-height: 32rpx;
        margin-top: 10rpx;
        text-align: right;
        .SalesPrice-pre,
        .SalesPrice-nex {
          font-size: 20rpx;
        }
      }
    }
  }
}
.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>
