<template>
  <view class="flex-col group">
    <view class="flex-col items-center section_1">
      <view class="flex-row section_2">
        <text class="text">原纸商城</text>
        <view class="flex-row items-center section_3">
          <image
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16488644996273525546.png"
            class="image_1"
          />
          <qn-easyinput @confirm="downCallback" :maxlength="15" v-model="condition.searchValue" :inputBorder="false" placeholder="输入搜索信息"></qn-easyinput>
        </view>
      </view>
    </view>
    <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
      <view class="flex-col list">
        <view class="list-item flex-col" :key="i" v-for="(item, i) in storeList">
          <view class="flex-row">
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16488644996327336999.png"
              class="image_2"
            />
            <view class="right-group flex-col" @click="jumpStore(item)">
              <view class="text_2" v-html="item.enterpriseName"></view>
              <view class="bottom-group flex-row">
                <text>全部商品 {{ item.productNumber }}</text>
                <view class="center-section"></view>
                <text class="text_5">上新 {{ item.currentProductNumber }}</text>
              </view>
            </view>
          </view>
          <view class="bottom-group_1 flex-row">
            <view
              class="paper-group flex-col"
              v-for="paper in item.skuList"
              :key="paper.productSkuId"
              @click="go2('paper-details', { paperId: paper.productSkuId })"
            >
              <view class="top-group flex-col items-center">
                <image :src="paper.litPicUrl || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/paper-default-small.png'" class="image_4" />
                <view class="flex-col text-wrapper">
                  <text class="text_7">{{ paper.listPrice }}元/{{ paper.stockUnit | formatUnit }}</text>
                </view>
              </view>
              <view class="bottom-text-wrapper flex-col items-start">
                <view class="text_8 text_9" v-html="paper.productName"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-list>
    <image @click="go2('cart')" src="/static/imgs/mall/cart-icon.png" class="image_11" />
  </view>
</template>

<script>
import { paperUnitMap } from '@/enums/index.js'
import { getStoreList } from '@/apis/mallApi.js'
import { go2 } from '@/utils/hook.js'
export default {
  data() {
    return {
      condition: {
        searchValue: '',
        pageSize: 10,
        pageIdentifier: ''
      },
      option: {
        size: 10,
        auto: true,
        emptyText: '我是有底线的~',
        background: '#F7F8FA',
        fontSize: '40rpx'
      },
      storeList: []
    }
  },
  methods: {
    go2,
    // 获取设备列表
    getList() {
      return new Promise((resolve, reject) => {
        getStoreList({ ...this.condition })
          .then((res) => {
            if (res) {
              if (this.condition.pageIdentifier) {
                this.storeList = this.storeList.concat(res.records)
              } else {
                this.storeList = res.records
              }
              // 手动判断是否还有数据
              if (res.next && res.records.length == this.condition.pageSize) {
                res.total = this.storeList.length + 1
                this.condition.pageIdentifier = res.pageIdentifier?.join(',') || ''
              } else {
                res.total = this.storeList.length
              }
              resolve({ list: this.storeList, total: res.total })
            } else {
              reject()
            }
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    downCallback() {
      this.condition.pageIdentifier = ''
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.refreshSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.refreshFail()
        })
    },
    upCallback() {
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.loadSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.loadFail()
        })
    },
    jumpStore(store) {
      this.$store.commit('setSupplierId', store.mallSupplierId)
      go2('store')
    }
  },
  filters: {
    formatUnit(value) {
      return paperUnitMap[value] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.group {
  flex: 1 1 auto;
  height: 100vh;
  overflow-y: auto;
  position: relative;
  .section_1 {
    height: 170rpx;
    width: 750rpx;
    background: url('/static/imgs/mall/top-bg.png') no-repeat center/contain;
    padding-top: 82rpx;
    .section_2 {
      width: 750rpx;
      padding: 12rpx 32rpx;
      .text {
        align-self: center;
        color: rgb(255, 255, 255);
        font-size: 30rpx;
        font-weight: 600;
        line-height: 42rpx;
        white-space: nowrap;
      }
      .section_3 {
        margin-left: 66rpx;
        padding: 14rpx 23rpx;
        flex: 1 1 auto;
        color: rgb(34, 34, 34);
        font-size: 25rpx;
        line-height: 36rpx;
        white-space: nowrap;
        background-color: rgb(255, 255, 255);
        border-radius: 10rpx;
        height: 64rpx;
        .image_1 {
          margin-right: 10rpx;
          width: 25rpx;
          height: 25rpx;
        }
      }
    }
  }
  .list {
    width: 750rpx;
    padding: 0 16rpx 20rpx;
    background-color: #f7f8fa;
    .list-item {
      background-color: #fff;
      margin-top: 20rpx;
      padding: 24rpx 14rpx 17rpx;
      overflow: hidden;
      height: 401rpx;
      .bottom-group_1 {
        margin-top: 16rpx;
        width: 100%;
        overflow-x: auto;
        .paper-group {
          width: 220rpx;
          margin-right: 8rpx;
          .top-group {
            color: rgb(255, 255, 255);
            font-size: 28rpx;
            line-height: 40rpx;
            white-space: nowrap;
            border-radius: 8rpx;
            position: relative;
            .image_4 {
              border: 2rpx solid #f7f8fa;
              border-radius: 8rpx;
              width: 220rpx;
              height: 220rpx;
            }
            .text-wrapper {
              background-color: rgba(0, 0, 0, 0.4);
              border-radius: 20rpx;
              position: absolute;
              right: 10rpx;
              bottom: 10rpx;
              .text_7 {
                margin: 0 10rpx;
              }
            }
          }
          .bottom-text-wrapper {
            padding-top: 16rpx;
            color: rgb(51, 51, 51);
            font-size: 24rpx;
            line-height: 33rpx;
            white-space: nowrap;
            width: 220rpx;
            .text_8 {
              margin: 0 10rpx;
            }
            .text_9 {
              margin: initial;
            }
          }
        }
      }
      .image_2 {
        width: 76rpx;
        height: 76rpx;
      }
      .right-group {
        margin-left: 16rpx;
        .text_2 {
          width: 612rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgb(0, 0, 0);
          font-size: 28rpx;
          line-height: 40rpx;
          white-space: nowrap;
        }
        .bottom-group {
          margin-top: 3rpx;
          color: rgb(136, 136, 136);
          font-size: 24rpx;
          line-height: 33rpx;
          white-space: nowrap;
          .center-section {
            margin: 5rpx 0 3rpx 16rpx;
            background-color: rgb(136, 136, 136);
            width: 2rpx;
            height: 24rpx;
          }
          .text_5 {
            margin-left: 15rpx;
          }
        }
      }
    }
  }
  .image_11 {
    border-radius: 50%;
    width: 82rpx;
    height: 82rpx;
    position: fixed;
    right: 32rpx;
    bottom: 162rpx;
  }
}
</style>
