<template>
  <view class="container">
	  <!-- 搜索 -->
	  <view class="sozone">
	  	<Search/>
	  </view>
	  <!-- 轮播图 -->
	  <view class="lbzone">
		  <Banner :dataList="imglist"/>
	  </view>
	  <!-- 资讯中心 -->
	  <view class="infolist">
		  
	  </view>
	  <!-- 标签和导航区 -->
	  <view class="linkzone">
		  <view class="lkbox">
			  <view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
			  <view class="lktxt">公共数据专区</view>
		  </view>
		  <view class="lkbox">
		  		<view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
		  		<view class="lktxt">数据超市</view>
		  </view>
		  <view class="lkbox">
		  		<view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
		  		<view class="lktxt">文化资源数据</view>
		  </view>
		  <view class="lkbox">
		  		<view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
		  		<view class="lktxt">文化数字内容</view>
		  </view>
	  </view>
	  <!-- 商品列表 -->
	  <view class="glistzone">
		  <view class="diy-goods">
		    <view class="goods-list display__list column__2">
			<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
			  <view class="goods-item" v-for="(dataItem, index) in gdlist.data" :key="index" @click="onTargetGoods(dataItem.goods_islicode)">
			    <!-- 多列商品 -->
			    <block>
			      <!-- 标的图片 -->
			      <view class="goods-image">
			        <image class="image" mode="aspectFill" :src="dataItem.gdimg"></image>
			      </view>
			      <view class="detail">
			        <!-- 标的标题 -->
			        <view class="goods-name">
			          <text class="twoline-hide">{{ dataItem.goods_name }}</text>
			        </view>
			        <!-- 标的价格 && 销量-->
			        <view class="detail-price oneline-hide">
			          <text class="goods-price f-30 col-m">￥ {{ dataItem.price }}</text>
			          <text class="sale-count col-9 f-24">销量：{{ dataItem.sale_count }}</text>
			        </view>
			  	  <!-- 标的所有者的信息 -->
			  	  <view class="detail-owner oneline-hide">
			  		  <text class="oneline-hide"> {{dataItem.username}} </text>
			  	  </view>
			  		  
			      </view>
			    </block>
			  
			  </view>
			  </mescroll-body>
			  </view>
			  </view>
	
	  </view>
	
  </view>
</template>

<script>
  import Banner from './components/banner'
  import Search from './components/search'
  import * as Api from '@/api/page'
  import * as Gapi from '@/api/goods'
  // 滚动加载
  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
  
  import { base64ToUint8Array,numberWithCommas } from '@/utils/util'
  import pako from '@/core/pako'


  const App = getApp()
  
  // 每页记录数量
  const pageSize = 9

  export default {
    components: {
      Banner,
	  Search,
	  //  滚动标签
	  MescrollBody
    },
	mixins: [MescrollMixin],
    data() {
      return {
        // 页面参数
        options: {},
		// 图片列表
		imglist:[],
		// 商品列表
		gdlist: getEmptyPaginateObj(),
		// 上拉加载配置
		upOption: {
		  // 首次自动执行
		  auto: true,
		  // 每页数据的数量; 默认10
		  page: { size: pageSize },
		  // 数量要大于4条才显示无更多数据
		  noMoreSize: 4,
		  // 空布局
		  empty: {
		    tip: '暂无记录'
		  }
		},
		// 控制onShow事件是否刷新订单列表
		canReset: false,
		
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
      this.options = options
	  // 注册全局事件订阅: 是否刷新列表
	  uni.$on('syncRefresh', canReset => {
	    this.canReset = canReset
	  })
    },
	
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
	  this.canReset && this.onRefreshList()
	  this.canReset = false
	},
	/**
	 * 生命周期函数--监听页面的卸载
	 */
	onUnload() {
	  // 卸载全局事件订阅
	  uni.$off('syncRefresh')
	},


	mounted() {
		this.getBannerList();
		//
		//this.getHomeList();
	},

    methods: {
		// 轮播图片
		getBannerList(){
			Api.pageinfo().then((res)=>{
				let ldata = res.data
				// 轮播图
				this.imglist = ldata.rotations 
			}).catch(err=>{
				console.log(err)
			});
		},
		
		//商品列表
		getHomeList(pageNo = 1){
			const app = this
			// 必须的字段
			let stimestamp = new Date().getTime() 
			// promise 方式
			return new Promise((resolve, reject) => {
				let rqdata = {"pay_type":2,"goods_status":1,"page":pageNo,"limit":pageSize}
				// 获取列表
				Gapi.nbgoods(rqdata)
				.then(res=>{
					// 合并新数据
					const newList = app.initList(res.data)
					console.log(newList,"newlist")
					app.gdlist.data = getMoreListData(newList, app.gdlist, pageNo)
					resolve(newList)
				})
			})
			

		},
		
		/**
		 * 上拉加载的回调 (页面初始化时也会执行一次)
		 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
		 * @param {Object} page
		 */
		async upCallback(page) {
		  const app = this
		  // 设置列表数据
		  await app.getHomeList(page.num)
		    .then(list => {
		      const curPageLen = list.data.length
		      const totalSize = list.data.total
		      app.mescroll.endBySize(curPageLen, totalSize)
		    })
		    .catch(() => app.mescroll.endErr())
			// 标的列表
      await app.getHomeListImage()
		},
		
		// 初始化订单列表数据
		initList(newList) {
		  newList.data.forEach(item => {
			// 处理价格表现形式  
			item.price = numberWithCommas(item.price)
			item.gdimg = item.goods_image === "" ? '' : pako.inflateRaw(base64ToUint8Array(item.goods_image), {to: 'string'})
		  })
		  return newList
		},
    async getHomeListImage() {
      this.gdlist.data.forEach((item,key) => {
        if (item.goods_image === "") {
          Gapi.nbgoodsImage({"id": item.id}).then(res2=>{
            if (res2.code === 200) {
              this.gdlist.data[key].goods_image = res2.data.data[0].goods_image;
              this.gdlist.data[key].gdimg = pako.inflateRaw(base64ToUint8Array(res2.data.data[0].goods_image), {to: 'string'})
            }
          })
        }
      })
    },
		// 刷新订单列表
		onRefreshList() {
		  this.gdlist = getEmptyPaginateObj()
		  setTimeout(() => {
		    this.mescroll.resetUpScroll()
		  }, 120)
		},
		
		/**
		 * 跳转商品详情页
		 */
		onTargetGoods(gislicode) {
		  this.$navTo('pages/goods/detail', { gislicode })
		}
		
    },
	// 以下空，moune 兄弟元素
  }
</script>

<style lang="scss" scoped>
  .container {
     background: #1C223B;
	 position: relative;
	 min-height: 100vh;
	 
	 // 搜索
	.sozone{
		position: relative;
		z-index: 70;
	}
	// swiper
	.lbzone{
		padding-bottom: 20rpx;
		z-index: 80;;
	}
	// navbar
	.linkzone{
		padding: 10rpx 10rpx 20rpx;
		display: flex;
		
		.lkbox{
			background-color: #fff;
			margin-left: 30rpx;
			width: 150rpx;
			height: 150rpx;
			border-radius: 20%;
			color: #fff;
			font-weight: 600;
			
			.lkimg{
				width: 130rpx;
				height: 130rpx;
				margin: 10rpx auto;
				// padding: 10rpx;
				
				// display: flex;
				// text-align: center;
				image{
					width: 130rpx;
				}
			}
			.lktxt{
				// word-break: break-all;
				white-space: nowrap;
				margin-top: 22rpx;
				text-align: center;
				height: 56rpx;
				line-height: 56rpx;
			}
		}
	}
	// goods
	.glistzone{
		margin-top: 46rpx;
		padding: 4rpx;
	}
  }
  
  .diy-goods {
    .goods-list {
      padding: 4rpx;
      box-sizing: border-box;
  
      .goods-item {
  		// background-color: #fff;
        box-sizing: border-box;
        padding: 16rpx;
  
        .goods-image {
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          overflow: hidden;
          background: #fff;
  
          &:after {
            content: '';
            display: block;
            margin-top: 100%;
          }
  
          .image {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            -o-object-fit: cover;
            object-fit: cover;
          }
        }
  
        .detail {
          padding: 8rpx;
          background: #fff;
  		  border-radius: 0 0 6% 6%;
  		  box-shadow: #333 2rpx 3rpx 2rpx;
  
          .goods-name {
            min-height: 68rpx;
            line-height: 1.3;
            white-space: normal;
            color: #484848;
            font-size: 26rpx;
          }
  
          .detail-price {
            .goods-price {
  				font-weight: 800;
  				margin-right: 8rpx;
            }
  
            .sale-count {
  				maring-left:20rpx;
              font-size: 18rpx;
            }
          }
  		  
  		  .detail-owner{
  			  padding: 4rpx;
  			  font-size: 22rpx;
  			  color: #999;
  			  margin-left: 10rpx;
  		  }
  		  
        }
      }
  
      &.display__slide {
        white-space: nowrap;
        font-size: 0;
  
        .goods-item {
          display: inline-block;
        }
      }
  
      &.display__list {
        .goods-item {
          float: left;
        }
      }
  
      &.column__2 {
        .goods-item {
          width: 50%;
        }
      }
  
      &.column__3 {
        .goods-item {
          width: 33.33333%;
        }
      }
  
      &.column__1 {
        .goods-item {
          width: 100%;
          height: 280rpx;
          margin-bottom: 12rpx;
          padding: 20rpx;
          box-sizing: border-box;
          background: #fff;
          line-height: 1.6;
  
          &:last-child {
            margin-bottom: 0;
          }
        }
  
        .goods-item_left {
          display: flex;
          width: 40%;
          background: #fff;
          align-items: center;
  
          .image {
            display: block;
            width: 240rpx;
            height: 240rpx;
          }
        }
  
        .goods-item_right {
          position: relative;
          width: 60%;
  
          .goods-name {
            margin-top: 20rpx;
            min-height: 68rpx;
            line-height: 1.3;
            white-space: normal;
            color: #484848;
            font-size: 26rpx;
          }
        }
  
        .goods-item_desc {
          margin-top: 8rpx;
        }
  
        .desc-selling_point {
          width: 400rpx;
          font-size: 24rpx;
          color: #e49a3d;
        }
  
        .desc-goods_sales {
          color: #999;
          font-size: 24rpx;
        }
  
        .desc_footer {
          font-size: 24rpx;
  
          .price_x {
            margin-right: 16rpx;
            color: #f03c3c;
            font-size: 30rpx;
          }
  
          .price_y {
            text-decoration: line-through;
          }
        }
      }
    }
  }
  
</style>
