<template>
  <view class="activityDescPopup">
    <wd-popup
      v-model="props.show"
      position="bottom"
      closable
      custom-style="height: 600rpx;border-radius:16rpx"
      @close="handleClose"
    >
      <view class="title">活动说明</view>
      <view class="content">
        <view v-for="(item, index) in description" :key="index">{{
          item
        }}</view>

        <!-- {{ description }} -->
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import { computed } from "vue";

import { useDraw } from "@/hooks/useDraw";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  description: {
    type: Array,
    default: () => [],
  },
});

// const descStr = computed(() => {
//   console.log("-----------------------", props.description.split("\n"));

//   return props.description.split("\n");
// });

const emit = defineEmits(["update:show"]);

const { handleClose } = useDraw(props, emit);
</script>

<style lang="scss" scoped>
.activityDescPopup {
  .title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-top: 32rpx;
  }
  .content {
    font-size: 24rpx;
    color: #666;
    width: 90%;
    margin: 50rpx auto;
    line-height: 34rpx;
  }
}
</style>
