<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view
    v-if="fieldData.size!==1"
    class="Mall4j component-goods"
  >
    <view
      v-for="(item, index) in nGoods"
      :key="index"
      class="goods-box-item"
    >
      <view
        v-for="(goodsItem, goodsIndex) in item"
        :key="goodsIndex"
        class="goods-item"
        @tap.stop="goodsFun(goodsItem, goodsItem.prodId)"
      >
        <view
          class="goods-item-content"
          :class="{'goods-item-three':fieldData.size===3}"
        >
          <view
            class="goods-img"
            :class="{'goods-img-three':fieldData.size===3}"
            :style="{width: fieldData.size===3 ? 220 + 'rpx' : 305 + 'rpx', height: fieldData.size===3 ? 274 + 'rpx' : 305 + 'rpx'}"
          >
            <img-show
              :src="goodsItem.pic"
              img-mode="aspectFit"
            />
            <view
              v-if="goodsItem.status !== 1"
              class="imgs_shelves"
            >
              <image
                mode="aspectFit"
                src="@/static/images/been_shelves.png"
              />
            </view>
          </view>
          <view
            class="goods-box-info"
            :class="{'goods-box-info-three':fieldData.size===3}"
          >
            <view
              v-if="state.productName"
              class="goods-info-title"
              :class="{'goods-info-title-three':fieldData.size===3}"
            >
              {{ goodsItem.prodName }}
            </view>
            <view
              v-if="state.sellingPoint"
              class="goods-info-desc"
            >
              <text>{{ goodsItem.brief || '' }}</text>
            </view>
            <view
              v-if="state.price || state.buyBtn"
              class="goods-info-price  goods-cell-3"
              :class="{'goods-info-price-three':fieldData.size===3}"
            >
              <view
                v-if="state.price"
                class="price-info"
              >
                <text class="symbol">
                  {{ '￥' }}
                </text>
                <text class="big-num">
                  {{ wxs.parsePrice(goodsItem.price)[0] }}
                </text>
                <text class="small-num">
                  {{ `.${wxs.parsePrice(goodsItem.price)[1]}` }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 一列 -->
  <view
    v-else
    class="goods-box-one"
  >
    <view
      v-for="(goodsItem, index) in nGoods[0]"
      :key="index"
      class="goods-one-column-item"
      @tap.stop="goodsFun(goodsItem, goodsItem.prodId)"
    >
      <view class="goods-img-one">
        <img-show :src="goodsItem.pic" />
        <view
          v-if="goodsItem.status !== 1"
          class="imgs_shelves"
        >
          <image
            mode="aspectFit"
            src="@/static/images/been_shelves.png"
          />
        </view>
      </view>
      <view class="goods-info-one">
        <view
          v-if="state.productName"
          class="goods-name-one"
        >
          {{ goodsItem.prodName }}
        </view>
        <view
          v-if="state.sellingPoint"
          class="goods-brief-one"
        >
          {{ goodsItem.brief || '' }}
        </view>
        <view
          v-if="state.price"
          class="goods-price-one"
        >
          <text class="symbol">
            ¥
          </text>
          <text class="big-num">
            {{ wxs.parsePrice(goodsItem.price)[0] }}
          </text>
          <text class="small-num">
            .{{ wxs.parsePrice(goodsItem.price)[1] }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  fieldData: {
    type: Object,
    default: () => ({})
  },
  shopId: {
    type: [Number, String],
    default: 0
  },
  will: {
    // 需要获取的类型 默认首页
    type: String,
    default: 'home' // home 首页 ，feature 微页面  传 化名ID , goods 商品详情页，传商品ID ,ad 公共广告
  }
})

const wxs = number()

const goods = ref([])
const nGoods = ref([])
const state = reactive({
  // 显示状态
  productName: false,
  // 1
  sellingPoint: false,
  // 2
  price: false,
  // 3
  buyBtn: false // 4
})
const locking = ref(false)

onMounted(() => {
  const data = props.fieldData
  // 显示状态
  state.productName = data.showContent.find(x => x * 1 === 1)
  state.sellingPoint = data.showContent.find(x => x * 1 === 2)
  state.price = data.showContent.find(x => x * 1 === 3)
  state.buyBtn = data.showContent.find(x => x * 1 === 4)

  if (props.fieldData.goods && !locking.value) {
    if (props.fieldData.goods) {
      goods.value = sortList(props.fieldData.goods)
      carding()
    }
  }
})

/** 梳理数据 */
const carding = () => {
  const dataFieldPar = props.fieldData
  // 单独一列
  if (dataFieldPar.size === 1) {
    nGoods.value.push(goods.value)
    return
  }
  // 两列或三列
  const columnNum = dataFieldPar.size || 2
  let cur = 1
  const cellOne = []
  const cellTwo = []
  const cellThree = []
  goods.value.forEach((li, index) => {
    if (cur === 1) {
      cellOne.push(li)
    } else if (cur === 2) {
      cellTwo.push(li)
    } else if (cur === 3) {
      cellThree.push(li)
    }
    cur++
    if (cur > columnNum) {
      cur = 1
    }
    if (index === goods.value.length - 1) {
      nGoods.value.push(cellOne, cellTwo)
      if (cellThree.length || columnNum === 3) {
        nGoods.value.push(cellThree)
      }
    }
  })
}

/**
 * 点击商品事件
 */
const goodsFun = (item, id) => {
  if (item.status !== 1) {
    uni.showToast({
      title: '当前商品已下架',
      icon: 'error'
    })
    return
  }
  uni.navigateTo({
    url: '/pages/detail/detail?spuId=' + id
  })
}

/**
 * 按照装修的id排序
 */
const sortList = (goodsList) => {
  const showArr = props.fieldData.goods
  return goodsList.sort(function (a, b) {
    return showArr.map(s => s.prodId).indexOf(a.spuId) < showArr.map(s => s.prodId).indexOf(b.spuId) ? -1 : 1
  })
}
</script>
<style lang="scss" scoped>
@use "index";
</style>
