<template>
  <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
    <view class="search">
      <view class="search-wrapper">
        <view class="index-search">
          <view class="index-cont-search t-c">
            <text class="search-icon iconfont icon-search"></text>
            <text class="search-text">
              <input type="text" placeholder="请输入关键字" v-model="searchValue">
            </text>
            <button class="search-text-bu" @click="onSearch">搜索</button>
          </view>
        </view>
      </view>
    </view>
    <view class="item-title-tab">
      <view class="item-title b-f" v-for="items in tab" @click="changeTab(items.key)">
        <text :class="{'item-title-text': tabKey === items.key}">{{items.title}}</text>
      </view>
    </view>
    <view class="goods-list clearfix">
      <view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_islicode)">
        <!-- 单列显示 -->
        <view class="dis-flex">
          <!-- 图片 -->
          <view class="goods-item_left">
            <image class="image" :src="item.gdimg"></image>
          </view>
          <view class="goods-item_right">
            <!-- 名称 -->
            <view class="goods-name">
              <text class="twoline-hide">{{ item.goods_name }}</text>
            </view>
            <view class="goods-item_desc">
              <!-- 权益 -->
              <view class="desc-selling_point dis-flex">
                <text class="oneline-hide">{{ item.goods_ownership_str }}</text>
              </view>
              <!-- 用户 -->
              <view class="desc-selling_point dis-flex">
                <text class="oneline-hide">{{ item.username }}</text>
              </view>
              <!-- 销量 -->
              <view class="desc-goods_sales dis-flex">
                <text>销量：{{ item.sale_count }}</text>
              </view>
              <!-- 价格 -->
              <view class="desc_footer">
                <text class="price_x">¥{{ item.price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </mescroll-body>
</template>

<script>
  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
  import * as GoodsApi from '@/api/goods'
  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
  //解压缩
  import pako from '@/core/pako'
  import { base64ToUint8Array,numberWithCommas} from '@/utils/util'

  const pageSize = 10

  export default {
    components: {
      MescrollBody,
    },
    mixins: [MescrollMixin],
    data() {
      return {
        searchValue: '',
        // 上拉加载配置
        upOption: {
          // 首次自动执行
          auto: true,
          // 每页数据的数量; 默认10
          page: { size: pageSize },
          // 数量要大于4条才显示无更多数据
          noMoreSize: 4,
        },
        tab: [
          {
            key: 1,
            title: '标的',
          },
          {
            key: 2,
            title: '店铺',
          },
        ],
        tabKey: 1,
        list: getEmptyPaginateObj(), // 商品列表数据
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 记录商品ID
      this.searchValue = options.searchValue
    },

    methods: {
      /**
       * 搜索提交
       */
      async onSearch() {
        await this.getGoodsList()
        await this.getHomeListImage()
      },
      // 切换tab
      async changeTab(val) {
        this.tabKey = val
        await this.getGoodsList()
        await this.getHomeListImage()
      },
      /**
       * 上拉加载的回调 (页面初始化时也会执行一次)
       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
       * @param {Object} page
       */
      async upCallback(page = 1) {
        const app = this
        // 设置列表数据
        await app.getGoodsList(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()
      },

      /**
       * 获取标的列表
       * @param {number} pageNo 页码
       */
      getGoodsList(pageNo = 1) {
        const app = this
        const param = {
          authorization: '',
          entrust_name: '',
          entrust_user_name: app.options.k,
          goods_status: '1',
          limit: pageSize,
          order: 'desc',
          order_type: '',
          page: pageNo,
          record_type: '',
          source_type: '',
        }
        if (app.searchValue != '') {
          if (app.tabKey === 1) {
            param.goods_name = app.searchValue
          } else if (app.tabKey === 2) {
            param.entrust_user_name = app.searchValue
          }
        }
        return new Promise((resolve, reject) => {
          GoodsApi.nbgoods(param)
              .then(result => {
                // 合并新数据
                const newList = app.initList(result.data)
                app.list.data = getMoreListData(newList, app.list, pageNo)
                resolve(newList)
              })
              .catch(reject)
        })
      },
      // 初始化订单列表数据
      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.list.data.forEach((item, key) => {
          if (item.goods_image === "") {
            GoodsApi.nbgoodsImage({"id": item.id}).then(res2 => {
              if (res2.code === 200) {
                this.list.data[key].goods_image = res2.data.data[0].goods_image;
                this.list.data[key].gdimg = pako.inflateRaw(base64ToUint8Array(res2.data.data[0].goods_image), {to: 'string'})
              }
            })
          }
        })
      },
      // 跳转商品详情页
      onTargetDetail(gislicode) {
        this.$navTo('pages/goods/detail', { gislicode })
      },
    }
  }
</script>

<style lang="scss" scoped>

  .search {
    position: fixed;
    float: top;
    top: var(--window-top);
    left: var(--window-left);
    right: var(--window-right);
    z-index: 19;

    .search-wrapper {
      background: #1c223b;
      padding: 0rpx 20rpx 20rpx 20rpx;
    }

    .index-search {
      border-bottom: 0;
      background: #fff;
      border-radius: 50rpx;
      overflow: hidden;
      font-size: 28rpx;
      color: #6d6d6d;
      box-sizing: border-box;
      height: 64rpx;
      line-height: 64rpx;

      .index-cont-search {
        width: 100%;
        font-size: 28rpx;
        background: #f7f7f7;
        display: flex;
        justify-content: center;
        align-items: center;

        .search-icon {
          font-size: 34rpx;
          margin-left: 50rpx;
        }

        .search-text {
          text-align: left;
          float: left;
          margin-left: 20rpx;
          width: 100%;

          input {
            font-size: 20rpx;
          }
        }
        .search-text-bu {
          margin-right: 20rpx;
          color: #ffffff;
          background-color: #1c223b;
          font-size: 20rpx;
          width: 120rpx;
          height: 50rpx;
          text-align: center;
          border-radius: 50rpx;
        }
      }
    }
  }

  .item-title-tab {
    width: 100%;
    margin-top: 80rpx;
    .item-title{
      width: 20%;
      background-color: #f7f7f7;
      padding: 26rpx 26rpx 0rpx 26rpx;
      font-size: 36rpx;
      font-weight: 600;
      display: inline-block;
      text-align: left;
      .item-title-text {
        border-bottom: #000000 solid 4rpx;
      }
    }
  }

  // 单列显示
  .goods-list {
    width: 100%;
    margin-top: 20rpx;
    .goods-item {
      width: 97%;
      height: 280rpx;
      margin-bottom: 12rpx;
      margin-left: 12rpx;
      padding: 20rpx;
      box-sizing: border-box;
      background: #fff;
      line-height: 1.6;
      border-radius: 10rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .goods-item_left {
      display: flex;
      width: 300rpx;
      background: #fff;
      align-items: center;

      .image {
        display: block;
        width: 240rpx;
        height: 240rpx;
      }
    }

    .goods-item_right {
      position: relative;
      // width: 450rpx;
      flex: 1;

      .goods-name {
        margin-top: 10rpx;
        min-height: 68rpx;
        line-height: 1.3;
        white-space: normal;
        color: #484848;
        font-size: 26rpx;
        font-weight: bold;
      }
    }

    .goods-item_desc {
      margin-top: 8rpx;
    }

    .desc-selling_point {
      width: 400rpx;
      font-size: 28rpx;
      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;
        font-weight: bold;
        float: right;
        margin-top: 40rpx;
      }

      .price_y {
        text-decoration: line-through;
      }
    }
  }

</style>
