<template>
  <view class="test-poster-page">
    <view class="mb-4">
      <text class="text-lg font-bold">海报圆角测试</text>
    </view>
    
    <!-- 测试按钮 -->
    <view class="flex flex-col gap-4 mb-6">
      <nut-button @click="generateNormalPoster" type="primary">
        生成普通海报（无圆角）
      </nut-button>
      <nut-button @click="generateRoundPoster" type="success">
        生成圆角海报（统一圆角）
      </nut-button>
      <nut-button @click="generateCustomRoundPoster" type="warning">
        生成自定义圆角海报（四角不同）
      </nut-button>
    </view>
    
    <!-- 海报生成组件 -->
    <PosterBuilder
      v-if="showPoster"
      :config="posterConfig"
      :show-loading="true"
      @success="onPosterSuccess"
      @fail="onPosterFail"
    />
    
    <!-- 生成的海报预览 -->
    <view v-if="posterUrl" class="mt-6">
      <text class="text-base font-semibold mb-2">生成的海报：</text>
      <image 
        :src="posterUrl" 
        mode="widthFix" 
        class="w-full max-w-xs mx-auto block"
      />
    </view>
  </view>
</template>

<script>
import { defineComponent, ref } from 'vue'
import Taro from '@tarojs/taro'
import PosterBuilder from '../../components/PosterBuilder/index.vue'

export default defineComponent({
  name: 'TestPoster',
  components: {
    PosterBuilder
  },
  setup() {
    const showPoster = ref(false)
    const posterUrl = ref('')
    const posterConfig = ref({})

    /**
     * 生成普通海报（无圆角）
     */
    const generateNormalPoster = () => {
      posterConfig.value = {
        width: 600,
        height: 800,
        backgroundColor: '#4F46E5',
        texts: [
          {
            text: '普通海报测试',
            x: 300,
            y: 100,
            fontSize: 32,
            color: '#FFFFFF',
            textAlign: 'center',
            fontWeight: 'bold'
          },
          {
            text: '这是一个没有圆角的海报',
            x: 300,
            y: 200,
            fontSize: 24,
            color: '#E5E7EB',
            textAlign: 'center'
          }
        ],
        blocks: [
          {
            x: 50,
            y: 300,
            width: 500,
            height: 200,
            backgroundColor: '#FFFFFF',
            borderRadius: 0
          }
        ]
      }
      showPoster.value = true
    }

    /**
     * 生成圆角海报（统一圆角）
     */
    const generateRoundPoster = () => {
      posterConfig.value = {
        width: 600,
        height: 800,
        backgroundColor: '#10B981',
        borderRadius: 30, // 统一圆角
        texts: [
          {
            text: '圆角海报测试',
            x: 300,
            y: 100,
            fontSize: 32,
            color: '#FFFFFF',
            textAlign: 'center',
            fontWeight: 'bold'
          },
          {
            text: '这是一个有统一圆角的海报',
            x: 300,
            y: 200,
            fontSize: 24,
            color: '#E5E7EB',
            textAlign: 'center'
          }
        ],
        blocks: [
          {
            x: 50,
            y: 300,
            width: 500,
            height: 200,
            backgroundColor: '#FFFFFF',
            borderRadius: 20
          }
        ]
      }
      showPoster.value = true
    }

    /**
     * 生成自定义圆角海报（四角不同）
     */
    const generateCustomRoundPoster = () => {
      posterConfig.value = {
        width: 600,
        height: 800,
        backgroundColor: '#F59E0B',
        borderRadiusGroup: [50, 20, 50, 20], // 左上、右上、右下、左下
        texts: [
          {
            text: '自定义圆角海报',
            x: 300,
            y: 100,
            fontSize: 32,
            color: '#FFFFFF',
            textAlign: 'center',
            fontWeight: 'bold'
          },
          {
            text: '四个角有不同的圆角半径',
            x: 300,
            y: 200,
            fontSize: 24,
            color: '#1F2937',
            textAlign: 'center'
          }
        ],
        blocks: [
          {
            x: 50,
            y: 300,
            width: 500,
            height: 200,
            backgroundColor: '#FFFFFF',
            borderRadiusGroup: [30, 10, 30, 10]
          }
        ]
      }
      showPoster.value = true
    }

    /**
     * 海报生成成功回调
     */
    const onPosterSuccess = (result) => {
      console.log('海报生成成功:', result)
      posterUrl.value = result.tempFilePath
      showPoster.value = false
      Taro.showToast({
        title: '海报生成成功',
        icon: 'success'
      })
    }

    /**
     * 海报生成失败回调
     */
    const onPosterFail = (error) => {
      console.error('海报生成失败:', error)
      showPoster.value = false
      Taro.showToast({
        title: '海报生成失败',
        icon: 'error'
      })
    }

    return {
      showPoster,
      posterUrl,
      posterConfig,
      generateNormalPoster,
      generateRoundPoster,
      generateCustomRoundPoster,
      onPosterSuccess,
      onPosterFail
    }
  }
})
</script>

<style lang="less" scoped>
.test-poster-page {
    padding: 32rpx;
    min-height: 100vh;
    background-color: #f5f5f5;
}
</style>