<template>
  <view>
    <!-- 私域引流 -->
    <up-popup
      :show="showPreview"
      mode="center"
      round="16rpx"
      closeOnClickOverlay
      @close="close"
      :safeAreaInsetBottom="false"
    >
      <view class="preview-box">
        <view class="u-flex" style="align-items: stretch">
          <view
            class="u-flex-1 u-p-r-24 u-flex u-flex-col"
            style="align-items: start; justify-content: space-between"
          >
            <view>
              <view class="font-14 font-bold color-333">{{
                drainageConfig.title
              }}</view>
              <view class="u-m-t-16 font-12 color-666">{{
                drainageConfig.content
              }}</view>
            </view>

            <view class="color-999 font-12 u-m-t-16">{{
              drainageConfig.note
            }}</view>
          </view>

          <image
            :show-menu-by-longpress="true"
            :src="drainageConfig.qrCode"
            style="width: 240rpx; height: 240rpx"
            mode="aspectFit"
          ></image>
        </view>

        <view class="close" @click="close">
          <up-icon name="close-circle" size="34" color="#fff"></up-icon>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import * as drainageConfigApi from "@/common/api/market/drainageConfig.js";
import { ref, reactive, computed, watch, onMounted } from "vue";

const showPreview = defineModel({
  type: Boolean,
  default: false,
});
const emit = defineEmits(["close"]);

function close() {
  showPreview.value = false;
  emit("close");
}
const drainageConfig = ref({});
onMounted(async () => {
  const shopId = uni.cache.get("shopId");
  const drainageConfigRes = await drainageConfigApi.config({
    shopId: shopId,
  });
  drainageConfig.value = drainageConfigRes;
  if (drainageConfig.value.isEnable) {
    showPreview.value = true;
  } else {
    close();
  }
});
</script>

<style scoped lang="scss">
.u-flex-col {
  flex-direction: column;
}
.preview {
  padding: 8rpx 32rpx;
  border-radius: 12rpx;
  background: $my-main-color;
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 40rpx;
}
.preview-box {
  width: 700rpx;
  padding: 32rpx 28rpx;
  position: relative;
  .close {
    position: absolute;
    left: 50%;
    bottom: -100rpx;
    transform: translateX(-50%);
  }
}
</style>