<template>
  <view class="Mall4j module-two-component">
    <!-- 当为空的时候显示默认 start -->
    <template v-if="currentForm">
      <view class="module-left">
        <view class="module-left-header">
          <view class="header-top">
            <view class="main-title">
              主标题
            </view>
            <view class="sub-title">
              副标题
            </view>
          </view>
          <view class="header-bottom">
            <text>立即抢购</text>
            <image src="@/static/images/more.png" />
          </view>
        </view>
        <view class="module-left-content">
          <image src="" />
        </view>
      </view>
      <view class="module-right">
        <view class="module-right-top">
          <view class="right-top-left">
            <view class="header-title">
              <view class="main-title">
                主标题
              </view>
              <view class="sub-title">
                副标题
              </view>
            </view>
            <view class="show-redirect">
              <text>立即抢购</text>
              <image src="@/static/images/more.png" />
            </view>
          </view>
          <view class="right-top-right">
            <image src="" />
          </view>
        </view>
        <view class="module-right-bottom">
          <view class="right-top-left">
            <view class="header-title">
              <view class="main-title">
                主标题
              </view>
              <view class="sub-title">
                副标题
              </view>
            </view>
            <view class="show-redirect">
              <text>立即抢购</text>
              <image src="@/static/images/more.png" />
            </view>
          </view>
          <view class="right-top-right">
            <image src="" />
          </view>
        </view>
      </view>
    </template>
    <!-- 当为空的时候显示默认 end -->
    <!-- 当不为空的时候显示内容 start -->
    <template v-else>
      <view class="module-left">
        <view class="module-left-header">
          <view class="header-top">
            <view
              class="main-title"
              :style="{
                'color': moduleForm.leftConfig.mainTitleColor,
                'font-size': moduleForm.leftConfig.mainTitleSize * 2 + 'rpx'
              }"
            >
              {{ moduleForm.leftConfig.mainTitle }}
            </view>
            <view
              class="sub-title"
              :style="{
                'color': moduleForm.leftConfig.subTitleColor,
                'font-size': moduleForm.leftConfig.subTitleSize * 2 + 'rpx'
              }"
            >
              {{ moduleForm.leftConfig.subTitle }}
            </view>
          </view>
          <view
            class="header-bottom"
            @tap="handleSnapp(moduleForm.leftConfig.path)"
          >
            <text>立即抢购</text>
            <image src="@/static/images/more.png" />
          </view>
        </view>
        <view class="module-left-content">
          <img-show
            :src="moduleForm.leftConfig.imgMessage.img"
            @handle-tap="()=>handleSnapp(moduleForm.leftConfig.imgMessage.path)"
          />
        </view>
      </view>
      <view class="module-right">
        <view class="module-right-top">
          <view class="right-top-left">
            <view class="header-title">
              <view
                class="main-title"
                :style="{
                  'color': moduleForm.topConfig.mainTitleColor,
                  'font-size': moduleForm.topConfig.mainTitleSize * 2 + 'rpx'
                }"
              >
                {{ moduleForm.topConfig.mainTitle }}
              </view>
              <view
                class="sub-title"
                :style="{
                  'color': moduleForm.topConfig.subTitleColor,
                  'font-size': moduleForm.topConfig.subTitleSize * 2 + 'rpx'
                }"
              >
                {{ moduleForm.topConfig.subTitle }}
              </view>
            </view>
            <view
              class="show-redirect"
              @tap="handleSnapp(moduleForm.topConfig.path)"
            >
              <text>立即抢购</text>
              <image src="@/static/images/more.png" />
            </view>
          </view>
          <view
            class="right-top-right"
            @tap="handleSnapp(moduleForm.topConfig.imgMessage.path)"
          >
            <img-show :src="moduleForm.topConfig.imgMessage.img" />
          </view>
        </view>
        <view class="module-right-bottom">
          <view class="right-top-left">
            <view class="header-title">
              <view
                class="main-title"
                :style="{
                  'color': moduleForm.bottomConfig.mainTitleColor,
                  'font-size': moduleForm.bottomConfig.mainTitleSize * 2 + 'rpx'
                }"
              >
                {{ moduleForm.bottomConfig.mainTitle }}
              </view>
              <view
                class="sub-title"
                :style="{
                  'color': moduleForm.bottomConfig.subTitleColor,
                  'font-size': moduleForm.bottomConfig.subTitleSize * 2 + 'rpx'
                }"
              >
                {{ moduleForm.bottomConfig.subTitle }}
              </view>
            </view>
            <view
              class="show-redirect"
              @tap="handleSnapp(moduleForm.bottomConfig.path)"
            >
              <text>立即抢购</text>
              <image src="@/static/images/more.png" />
            </view>
          </view>
          <view
            class="right-top-right"
            @tap="handleSnapp(moduleForm.bottomConfig.imgMessage.path)"
          >
            <img-show :src="moduleForm.bottomConfig.imgMessage.img" />
          </view>
        </view>
      </view>
    </template>
    <!-- 当不为空的时候显示内容 end -->
  </view>
</template>

<script setup>
import util from '@/utils/util.js'

const props = defineProps({
  config: { // 配置信息
    type: Object,
    default: () => {}
  },
  shopId: {
    type: [Number, String],
    default: 0
  }
})

const moduleForm = ref({})

const currentForm = computed(() => {
  return JSON.stringify(moduleForm.value) === '{}'
})

watch(() => props.config,
  (newVal) => {
    moduleForm.value = {
      ...newVal
    }
  },
  {
    immediate: true,
    deep: true
  }
)

// 立即抢购
const handleSnapp = (item) => {
  util.toRedirectLink(item.type, item.link, props.shopId)
}
</script>

<style lang="scss" scoped>
.module-two-component {
  width: 100%;
  display: flex;
  overflow: hidden;
  .module-left {
    width: 50%;
    height: 100%;
    .module-left-header {
      overflow: hidden;
    }
  }
}
.module-left {
  .module-left-header {
    .header-top {
      margin: 24rpx 0 8rpx 24rpx;
      display: flex;
      align-items: center;
      line-height: 1;
      .main-title {
        font-family: PingFang SC,serif;
        font-weight: bold;
        font-size: 30rpx;
        white-space: nowrap;
        max-width: calc(50% - 5px);
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      .sub-title {
        font-size: 24rpx;
        margin-left: 16rpx;
        white-space: nowrap;
        max-width: calc(50% - 5px);
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
    .header-bottom {
      margin: 6rpx 0 0 24rpx;
      display: flex;
      align-items: center;
      text {
        color: #999;
        font-size: 22rpx;
        font-family: PingFang SC,serif;
        display: inline-block;
      }
      image {
        width: 18.8rpx;
        height: 18.8rpx;
        margin-left: 2rpx;
      }
    }
  }
  :deep(.module-left-content) {
    margin-left: 48rpx;
    margin-top: 34rpx;
    image {
      width: 232rpx;
      height: 220rpx;
      background: rgba(243, 245, 247, 0.39);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.module-right {
  width: 50%;
  border-left: 2rpx solid #F9F9FB;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .module-right-top {
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #F9F9FB;
    display: flex;
    .right-top-left {
      width: 50%;
      padding-left: 14rpx;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .header-title {
        margin-top: 24rpx;
      }
      .main-title {
        font-family: PingFang SC,serif;
        font-weight: bold;
        white-space: nowrap;
        font-size: 30rpx;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .sub-title {
        margin-top: 4rpx;
        white-space: nowrap;
        font-size: 22rpx;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .show-redirect {
        margin-bottom: 22rpx;
        margin-top: 36rpx;
        display: flex;
        align-items: center;
        text {
          font-size: 24rpx;
          color: #999;
        }
        image {
          width: 18.8rpx;
          height: 18.8rpx;
          color: #999;
          margin-left: 2rpx;
        }
      }
    }
    .right-top-right {
      width: 50%;
      padding: 50rpx 0 0 7.5rpx;
      image {
        width: 128rpx;
        height: 128rpx;
        background: rgba(243, 245, 247, 0.39);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .module-right-bottom {
    width: 100%;
    overflow: hidden;
    display: flex;
    .right-top-left {
      width: 50%;
      padding-left: 14rpx;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .header-title {
        margin-top: 24rpx;
        .main-title {
          font-size: 30rpx;
          font-family: PingFang SC,serif;
          font-weight: bold;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .sub-title {
          font-size: 22rpx;
          margin-top: 4rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .show-redirect {
        margin-bottom: 22rpx;
        margin-top: 36rpx;
        display: flex;
        align-items: center;
        text {
          font-size: 24rpx;
          color: #999;
        }
        image {
          width: 18.8rpx;
          height: 18.8rpx;
          margin-left: 2rpx;
          color: #999;
        }
      }
    }
    .right-top-right {
      width: 50%;
      padding: 40rpx 0 0 7.5rpx;
      image {
        width: 128rpx;
        height: 128rpx;
        background: rgba(243, 245, 247, 0.39);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
