<template>
  <view class="content">
    <view class="header">
      <!-- 搜索-->
      <view class="searchBar">
        <icon class="searchIcon" type="search" size="14"></icon>
        <input class="searchIpt" placeholder="老花镜" confirm-type="search" />
      </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="filterData"
          :defaultSelected="filterDropdownValue"
          :updateMenuName="true"
          @confirm="confirm"
          data-format="Object"
        ></HMfilterDropdown>
        <!-- 商品列表 -->
        <view class="goods-list">
          <view class="product-list">
            <view class="product" v-for="(goods) in goodsList" :key="goods.id">
              <Card :goods="goods"></Card>
            </view>
          </view>
          <view class="loading-text">{{loadingText}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
import Card from "../../components/Card/Card.vue";
import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
import data from "@/common/data.js"; //筛选菜单数据
export default {
  components: {
    UniDrawer: UniDrawer,
    HMfilterDropdown: HMfilterDropdown,
    Card: Card
  },
  data() {
    return {
      screenItems: [
        { current: 0, text: "全部", hasIcon: false },
        { current: 1, text: "销量", hasIcon: false },
        { current: 2, text: "价格", hasIcon: true },
        { current: 3, text: "折扣", hasIcon: false },
        { current: 4, text: "筛选", hasIcon: true }
      ],
      current: 0,
      showRight: false,
      indexArr: "",
      valueArr: "",
      // //商品数据
      goodsList: [
        {
        //   goods_id: 0,
        //   img: "/static/img/goods/p1.jpg",
        //   name: "商品名称",
        //   originCost: "￥198",
        //   price: "￥168",
        //   slogan: "1235人浏览"
        }
      ],
      loadingText: "正在加载...",
      filterDropdownValue: [],
      filterData: []
    };
  },
  filters: {
    outData(value) {
      return JSON.stringify(value);
    }
  },
  onLoad: function() {
    uni.request({
      url: "https://api.glass.xiuyetang.com/app/prod/list", //仅为示例，并非真实接口地址。
      method: "post",
      data: {
        // text: 'uni.request'
      },
      header: {
        // 'custom-header': 'hello', //自定义请求头信息
        "Content-Type": "application/x-www-form-urlencoded"
        // 'Content-Type':'multipart/form-data'
        // 'Content-Type':'ext/plain'
      },
      timeout: 3000,
      // dataType:'json'
      // responseType:'text',
      // sslVerify: true,//验证 ssl 证书
      withCredentials: false, //跨域请求时是否携带凭证（cookies）
      success: res => {
        console.error("success status === > ", res);
        this.goodsList = res.data.data;
        // console.log('res.data', res.data);
        // this.text = 'request success';
      },
      fail: res => {
        console.log("fail status === > ", res);
      },
      complete: res => {
        console.log("complete status === > ", res);
      }
    });
    //定时器模拟ajax异步请求数据
    // setTimeout(()=>{
    // 	//传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
    // 	this.filterDropdownValue = [
    // 		[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
    // 		[null,null],			//第1个菜单选中 都不选中
    // 		[1],					//第2个菜单选中 一级菜单的第1项
    // 		[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
    // 		[[0],[1],[1]],			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
    // 	];
    // this.filterData = data;
    // },100);
    // 模拟ajax请求子菜单数据。
    // setTimeout(()=>{
    // 	console.log('发起请求','ddddddd');
    // 	// this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
    // },3000);
  },
  methods: {
    showDrawer(e) {
      this.$refs[e].open();
    },
    closeDrawer(e) {
      this.$refs[e].close();
    },
    change(e, type) {
      this[type] = e;
    },
    onClickItem(e) {
      if (this.current !== e) {
        this.current = e;
      }
    },
    dropDown() {
      console.log("下拉");
    },
    //接收菜单结果
    confirm(e) {
      this.indexArr = e.index;
      this.valueArr = e.value;
      return;
      console.log("修改菜单");
      this.filterData[4].submenu[1] = {
        name: "项目2",
        submenu: []
      };
    }
  },
  onNavigationBarButtonTap(e) {
    this.showRight = !this.showRight;
  },
  //上拉加载，
  onReachBottom() {
    console.log("到底加载");
    let len = this.goodsList.length;
    if (len >= 30) {
      this.loadingText = "~~到底了~~";
      return false;
    } else {
      this.loadingText = "正在加载...";
    }
    let end_goods_id = this.goodsList[len - 1].goods_id;
    for (let i = 1; i <= 10; i++) {
      let goods_id = end_goods_id + i;
      let p = {
        goods_id: goods_id,
        img:
          "/static/img/goods/p" +
          (goods_id % 10 == 0 ? 10 : goods_id % 10) +
          ".jpg",
        name: "商品名称",
        originCost: "￥198",
        price: "￥168",
        slogan: "1235人付款"
      };
      this.goodsList.push(p);
    }
  }
};
</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>