<template>
    <view class="container">
    <view class="content skeleton" v-show="showContent">

      <view class="header">
        <!-- 搜索-->

        <view class="searchBar skeleton-rect">

          <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 skeleton-rect">

        <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 skeleton-rect"

                v-for="(goods) in goodsList"
                :key="goods.id"
              >

                <Card
                  :goods="goods"
                  :scrollTop="scrollTop"
                  :viewHeight="viewHeight"
                ></Card>

              </view>
            </view>

            <view class="loading-text">

              <text>{{loadedText}}</text>
              <!-- <text v-else>{{loadedText}}</text> -->

            </view>

          </view>

          <!-- </scroll-view> -->

        </view>

      </view>
  	</view>
  	<!--引用组件-->
  	<skeleton :show="showSkeleton"  ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
  	</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 skeleton from "@/components/quick-skeleton/quick-skeleton.vue";

  import store from "@/store";

  export default {
    components: {
      UniDrawer: UniDrawer,
      HMfilterDropdown: HMfilterDropdown,

      Card: Card,
  	skeleton: skeleton

    },

    data() {

      return {

        indexArr: "",
        valueArr: "",
        isLoading: true, //初始化加载状态

        loadingText: "data loading...",
        loadedText: "~~到底啦~~",

        filterDropdownValue: [],

        filterData: [],

        searchText: "",

        scrollTop: 0,
  	  showContent: true,
        viewHeight: uni.getSystemInfoSync().windowHeight,
  	  showSkeleton: false  //骨架屏显示隐藏

      };

    },

    onPageScroll({ scrollTop }) {
      // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件

      this.scrollTop = scrollTop;

    },

    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);
      }

    },
    /**
     *  页面载入完成后调用子组件的方法生成预加载效果
     */
    onReady:function(){
  	 this.getInitData()

    },

    methods: {
  	async getInitData (){
  		this.showSkeleton = true;
  		await Promise.all([store.dispatch("index/category"), store.dispatch("index/list")])
  		this.showSkeleton = false;
  		this.showContent = true
  	},

      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,.container {

    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%;
  	  min-height: 120rpx;

        margin: 0 0 20rpx 0;
        background: #ffffff;
        border: 1px solid #f2f2f2;
      }
    }
  }

  </style>