<template>
  <scroll-view class="shop-page-container" :style="{ height: windowHeight + 'px' }" scroll-y enable-back-to-top>
    <view v-if="shopData" class="shop-info padding-sm radius-bock" @tap="toShopInfo">
      <view class="info">
        <view class="name text-cut text-bold">
          <block v-if="shopData.isself === 1">
            <view class="cu-tag radius sm bg-red">{{ $t('mall.product.selfOperated') }}</view>
          </block>
          <block v-else>
            <view class="cu-tag radius sm wanl-bg-pink" v-if="shopData.state == 0">{{ $t('mall.product.personal') }}</view>
            <view class="cu-tag radius sm wanl-bg-blue" v-else-if="shopData.state == 1">{{ $t('mall.product.enterprise') }}</view>
            <view class="cu-tag radius sm wanl-bg-orange" v-else-if="shopData.state == 2">{{ $t('mall.product.flagship') }}</view>
          </block>
          <text class="margin-left-xs"> {{ shopData.shopname }} </text>
        </view>
        <view class="exponent text-min wanl-gray-dark">
          <view>
            <text class="margin-right-xs">{{ $t('mall.shop.fans') }}</text> {{ shopData.find_user && shopData.find_user.fans || 0 }}
          </view>
        </view>
      </view>
      <view class="menu">
        <button v-if="shopData.isFollow === 0" class="cu-btn radius-bock text-sm bg-white" @click.stop="$emit('handleFollow')">
          <text class="wlIcon wlIcon-31xuanze text-bold margin-right-xs"></text> {{ $t('mall.shop.follow') }}
        </button>
        <button v-else class="cu-btn radius-bock text-sm bg-white" @click.stop="$emit('handleFollow')">
          <text class="wlIcon wlIcon-31guanbi text-bold margin-right-xs"></text> {{ $t('mall.shop.unfollow') }}
        </button>
      </view>
    </view>
    <view v-if="pageModules && pageModules.item && pageModules.item.length > 0" class="page-content">
      <view v-for="(item, index) in pageModules.item" :key="index">
        <view v-if="item.type === 'banner'" class="padding-sm">
          <swiper class="screen-swiper" indicator-dots circular autoplay interval="4000" duration="500" v-if="item.data && item.data.length">
            <swiper-item v-for="(banner, bindex) in item.data" :key="bindex">
              <image :src="banner.image" mode="aspectFill" class="radius-bock" style="width:100%;height:300rpx;" />
            </swiper-item>
          </swiper>
        </view>
        <view v-if="item.type === 'image'" class="padding-sm">
          <image v-for="(img, iindex) in item.data" :key="iindex" :src="img.image" mode="widthFix" style="width:100%;" />
        </view>
        <view v-if="item.type === 'goods'" class="padding-sm">
          <view class="text-bold margin-bottom-sm">{{ item.title || $t('mall.shop.recommendGoods') }}</view>
        </view>
        <view v-if="item.type === 'division'" class="padding-sm">
          <view class="solid-bottom"></view>
        </view>
        <view v-if="item.type === 'empty'" :style="{ height: item.height + 'rpx' }"></view>
      </view>
    </view>
    <view v-else class="empty-page">
      <text class="wanl-gray">{{ $t('mall.shop.decorating') }}</text>
    </view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    windowHeight: { type: Number, default: 0 },
    shopData: { type: Object, default: () => ({}) },
    pageModules: { type: Object, default: () => null }
  },
  methods: {
    toShopInfo() {
      if (this.shopData && this.shopData.id) {
        uni.navigateTo({ url: '/pages/shop/info?id=' + this.shopData.id })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-page-container {
  background-color: #f9f9f9;
}
.shop-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.05);
  margin: 0 16rpx 16rpx 16rpx;
  .info {
    width: calc(100% - 260rpx);
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    height: 85rpx;
    .name {
      width: 90%;
    }
    .exponent {
      display: flex;
    }
  }
  .menu {
    text-align: right;
    width: 260rpx;
  }
}
.page-content {
  background-color: #f9f9f9;
}
.empty-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 200rpx 0;
  font-size: 28rpx;
}
</style>