<template>
  <view class="content">
    <view class="header">
      <!-- 搜索-->
      <view class="searchBar">
        <icon
          class="searchIcon"
          type="search"
          size="14"
        ></icon>
        <input
          v-model="searchText"
          class="searchIpt"
          placeholder="老花镜"
          confirm-type="search"
          @blur="searchKey"
        />
      </view>

      <!-- 筛选栏-->
      <!-- <view class="screenBar">
        <view
          v-for="item in screenItems"
          :key="item.current"
          @click="onClickItem(item.current)"
        >
          <view
            class="screenItem"
            v-bind:class="{ active: current === item.current }"
            v-if="item.current === 2"
            @click="dropDown"
          >
            {{ item.text }}
            <icon
              type="info"
              size="14"
            ></icon>
          </view>
          <view
            class="screenItem"
            v-bind:class="{ active: current === item.current }"
            v-if="item.current === 4"
            @click="showDrawer('showRight')"
          >
            {{ item.text }}
            <icon
              type="info"
              size="14"
            ></icon>
          </view>
          <view v-if="item.current !== 2&&item.current!==4">
            <view
              class="screenItem"
              v-bind:class="{ active: current === item.current }"
            >{{ item.text }}</view>
          </view>
        </view>
      </view> -->
    </view>
    <Uni-drawer
      ref="showRight"
      mask="true"
      maskClick="true"
      mode="right"
      :width="320"
      @change="change($event,'showRight')"
    >
      <view class="close">
        <view @click="closeDrawer('showRight')">
          <text class="word-btn-white">关闭</text>
        </view>
      </view>
    </Uni-drawer>

    <!-- 筛选菜单-->
    <view class="content-wrap">
      <view>
        <HMfilterDropdown
          :filterData="categoryList"
          :defaultSelected="filterDropdownValue"
          :updateMenuName="true"
          @search="search"
          @getList="getList"
          data-format="Object"
        ></HMfilterDropdown>
        <!-- 商品列表 -->
        <!-- 		<scroll-view
		  enable-flex
		  @scrolltolower="handleScrolltolower"
		  scroll-y
		  style="height: 1000px;margin-bottom: 20px;"
		>	 -->
        <view class="goods-list">
          <view class="product-list">
            <view
              class="product"
              v-for="(goods) in goodsList"
              :key="goods.id"
            >
              <Card
                :goods="goods"
                :scrollTop="scrollTop"
                :viewHeight="viewHeight"
              ></Card>
            </view>
          </view>
          <view class="loading-text">
            <text v-if="isLoading==true">{{loadingText}}</text>
            <text v-else>{{loadedText}}</text>
          </view>
        </view>
        <!-- </scroll-view> -->
      </view>
    </view>
  </view>
</template>

<script>
import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
import Card from "@/components/CommodityCard/CommodityCard.vue";
import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
import store from "@/store";

export default {
  components: {
    UniDrawer: UniDrawer,
    HMfilterDropdown: HMfilterDropdown,
    Card: Card
  },
  data() {
    return {
      indexArr: "",
      valueArr: "",
      isLoading: true, //初始化加载状态
      loadingText: "data loading...",
      loadedText: "~~到底啦~~",
      filterDropdownValue: [],
      filterData: [],
      searchText: "",
      scrollTop: 0,
      viewHeight: uni.getSystemInfoSync().windowHeight
    };
  },
  onPageScroll({ scrollTop }) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
    this.scrollTop = scrollTop;
    console.log("pagescroll====>", this.viewHeight);
  },
  computed: {
    goodsList() {
      // 也可以从 getters 获取
      // console.log('index-list=====>',this.$store.state.index.list)
      return this.$store.state.index.list;
    },
    categoryList() {
      return this.$store.state.index.categoryList;
    }
  },
  filters: {
    outData(value) {
      return JSON.stringify(value);
    }
  },
  onLoad() {
    store.dispatch("index/category");
    // this.getList();
    store.dispatch("index/list");
  },
  methods: {
    showDrawer(e) {
      this.$refs[e].open();
    },
    getList() {
      store.dispatch("index/list");
      this.isLoading = false; //TODO:::这里不知道怎么改，请同学帮忙写一下。
      //把data里的isLoading 改为false就可以了
    },
    // search(params) {
    //   this.$store.index.
    // },
    closeDrawer(e) {
      this.$refs[e].close();
    },
    change(e, type) {
      this[type] = e;
    },
    onClickItem(e) {
      if (this.current !== e) {
        this.current = e;
      }
    },
    dropDown() {
      console.log("下拉");
    },
    searchKey(e) {
      const { value: keyword } = e.detail;
      this.keyWords = keyword;
      store.dispatch("index/search", {
        params: {},
        keyword
      });
    },
    // 接收菜单结果
    search(e) {
      const { on, value, selectedData } = e;
      let params = {};
      const selectedPayload = {};
      for (const key in selectedData) {
        if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
          selectedPayload[key] = selectedData[key].toString();
        }
      }
      if (on[0] === 1) {
        // 若点击全部
        this.searchText = "";
        store.dispatch("index/list");
      } else {
        for (let i = 1; i <= on.length; i++) {
          // on[0]是全部
          if (on[i] === 1) {
            // 若该选项被选中
            if (this.categoryList[i].value === "filter") {
              params = {
                ...selectedPayload,
                ...params
              };
            } else {
              params[`${this.categoryList[i].value}`] = value[i][0];
            }
          }
        }
        store.dispatch("index/search", {
          params,
          keyword: this.keyWords
        });
      }
    }
  }
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f7f6f6;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f7f6f6;
  height: 178rpx;
  width: 100%;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
}
.searchBar {
  width: 670rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0rpx 16rpx;
  border: 1px solid #ff6b4a;
  border-radius: 8rpx;
  background-color: #ffffff;
}

.searchIpt {
  height: 68rpx;
  width: 670rpx;
  padding: 16rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.screenBar {
  width: 670rpx;
  height: 110rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  font-size: 32rpx;
}
.active {
  color: #ff6b4a;
}
.screenItem {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-wrap {
  width: 100%;
  background-color: #ffffff;
}

.HMfilterDropdown {
  top: 178rpx !important;
}

.goods-list {
  padding-top: 286rpx;
  .loading-text {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    color: #979797;
    font-size: 12px;
  }
  .product-list {
    width: 92%;
    padding: 0 4% 3vw 4%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .product {
      width: 48%;
      margin: 0 0 20rpx 0;
      background: #ffffff;
      border: 1px solid #f2f2f2;
    }
  }
}
</style>