<template>
  <div class="poster-generator-container">
    <!-- 表单选择区域 -->
    <div class="input-section">
      <van-field
        v-model="selectedActivityTitle"
        label="选择活动"
        placeholder="请选择活动"
        readonly
        :label-width="60"
        @click="showActivityPicker = true"
      />

      <van-field
        v-model="sponsorName"
        label="主办方"
        placeholder="请选择主办方"
        readonly
        :label-width="60"
        @click="showSponsorPicker = true"
      />

      <!-- 活动选择弹窗 -->
      <van-popup
        v-model="showActivityPicker"
        position="bottom"
        round
        class="activity-popup"
      >
        <div class="activity-picker-header">
          <span class="cancel-btn" @click="showActivityPicker = false">取消</span>
          <span class="title">选择活动</span>
          <span class="confirm-btn" @click="showActivityPicker = false">确定</span>
        </div>
        <div class="scroll-wrapper">
          <van-list
            v-model="listLoading"
            :finished="listFinished"
            finished-text="没有更多活动了"
            @load="onLoadMore"
          >
            <div
              v-for="item in activityList"
              :key="item.id"
              class="activity-item"
              @click="onSelectActivity(item)"
            >
              <div class="activity-title">{{ item.title }}</div>
              <div class="activity-time">
                {{ item.Subtitle }} | {{ formatDateToShow(item.end_time) }}
              </div>
            </div>
          </van-list>
        </div>
      </van-popup>

      <!-- 主办方选择弹窗 -->
      <van-popup
        v-model="showSponsorPicker"
        position="bottom"
        round
        class="activity-popup"
      >
        <div class="activity-picker-header">
          <span class="cancel-btn" @click="showSponsorPicker = false">取消</span>
          <span class="title">选择主办方</span>
          <span class="confirm-btn" @click="showSponsorPicker = false">确定</span>
        </div>
        <div class="scroll-wrapper">
          <div
            v-for="(item, index) in sponsorList"
            :key="index"
            class="activity-item"
            @click="onSelectSponsor(item)"
          >
            <div class="activity-title">{{ item }}</div>
          </div>
        </div>
      </van-popup>
    </div>

    <!-- 海报生成容器（隐藏布局） -->
    <div ref="posterRef" class="poster-wrapper hidden-poster">
      <div class="poster-card">
        <div class="poster-content">
          <img
            src="https://images.health.ufutx.com/202604/13/8fa1b3080a60f97ef3f75e1370a6217c.jpeg"
            alt="海报背景"
          />
          <div class="poster-content-wrapper">
            <div class="poster-title">
              <p class="poster-title-text">{{ selectedActivity?.Subtitle || '河南·襄城站' }}</p>
            </div>
            <div class="sponsor-name">
              <p class="name">主办：{{ sponsorName }}</p>
            </div>

            <div class="poster-qrcode">
              <canvas ref="qrcodeCanvas" class="poster-qrcode-image"></canvas>
            </div>

            <div class="poster-time-wrap">
              <div class="poster-date">{{ formatDateToChinese(selectedActivity?.end_time) }}</div>
              <div class="poster-time">
                <span class="start-time">{{ formatTime(selectedActivity?.start_time) }}</span>
                <span class="end-time">{{ formatTime(selectedActivity?.end_time) }}</span>
              </div>
            </div>
            <div class="poster-address">
              <div class="_text-warp">
                <div class="_title">活动地点：</div>
                <div class="_text">{{ selectedActivity?.address || '广东省深圳市南山区阳光科创' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="btn-group">
      <button
        class="btn btn-primary"
        :disabled="isGenerating"
        @click="generatePoster"
      >
        <span v-if="!isGenerating">生成海报</span>
        <span v-else>生成中...</span>
      </button>
      <button
        v-if="posterImg"
        class="btn btn-secondary"
        @click="downloadPoster"
      >
        下载海报
      </button>
    </div>

    <!-- 海报预览 -->
    <div v-if="posterImg" class="generated-poster-preview">
      <h4 class="preview-title">海报生成成功（长按保存/点击预览）</h4>
      <img :src="posterImg" class="preview-img" @click="showImagePreview" />
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import QRCode from 'qrcode'
import axios from 'axios'

export default {
  name: 'ActivityPoster',
  data() {
    return {
      // 主办方配置
      sponsorName: '友福同享（襄城县）智能科技有限公司',
      sponsorList: [
        '友福同享（深圳）智能科技有限公司',
        '友福粤越（惠州）智能科技有限公司',
        '友福同享（南昌）智能科技有限公司',
        '友福同享（天津）智能科技有限公司',
        '友福同享（襄城县）智能科技有限公司',
        '友福同享（哈尔滨）智能科技有限公司'
      ],
      showSponsorPicker: false,

      // 活动相关
      activityList: [],
      selectedActivity: null,
      selectedActivityTitle: '',
      showActivityPicker: false,
      listLoading: false,
      listFinished: false,

      // 海报相关
      posterImg: '',
      isGenerating: false,
      isWeChatEnv: false
    }
  },
  mounted() {
    this.detectWeChatEnv()
    this.getActivityList()
  },
  watch: {
    selectedActivity: {
      handler: async function(val) {
        if (val && val.id && this.$refs.qrcodeCanvas) {
          const openId = localStorage.getItem('openid') || ''
          const link = `https://love.ufutx.cn/api/official/live/wechat/FamilyAuth?merchant_id=44&serve_tab=&from_openid=${openId}&url=https%3A%2F%2Flove.ufutx.cn%2Fpu%2F%23%2FactivityDetails%2F${val.id}`
          await QRCode.toCanvas(this.$refs.qrcodeCanvas, link, {
            width: 76,
            margin: 1,
            color: { dark: '#000000', light: '#ffffff' }
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取活动列表
    async getActivityList() {
      this.listLoading = true
      try {
        const res = await axios({
          url: '/sh5/uftx/community/activity/list',
          method: 'get'
        })
        if (res.code === 0 && Array.isArray(res.data)) {
          this.activityList = res.data
        } else {
          this.$toast('活动列表获取失败')
        }
      } catch (err) {
        console.error(err)
        this.$toast('网络异常，请重试')
      } finally {
        this.listLoading = false
        this.listFinished = true
      }
    },
    // 选择活动
    onSelectActivity(item) {
      this.selectedActivity = item
      this.selectedActivityTitle = item.title
      this.showActivityPicker = false
    },
    // 选择主办方
    onSelectSponsor(item) {
      this.sponsorName = item
      this.showSponsorPicker = false
    },
    onLoadMore() {
      this.listFinished = true
    },

    // 时间格式化
    formatDateToShow(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}年${month}月${day}日`
    },
    formatDateToChinese(timeStr) {
      if (!timeStr) {
        const now = new Date()
        const year = now.getFullYear()
        const month = String(now.getMonth() + 1).padStart(2, '0')
        const day = String(now.getDate()).padStart(2, '0')
        return `${year}/${month}/${day}`
      }
      const [datePart] = timeStr.split(' ')
      const [year, month, day] = datePart.split('-')
      return `${year}/${month}/${day}`
    },
    formatTime(timeStr) {
      if (!timeStr) return '14:00'
      const [, timePart] = timeStr.split(' ')
      return timePart.slice(0, 5)
    },

    // 微信环境检测
    detectWeChatEnv() {
      this.isWeChatEnv = /micromessenger/.test(navigator.userAgent.toLowerCase())
    },
    // 图片预览
    showImagePreview() {
      window.open(this.posterImg)
    },

    // 生成海报
    async generatePoster() {
      if (!this.selectedActivity) {
        this.$dialog.alert({ message: '请先选择活动！' })
        return
      }

      try {
        this.isGenerating = true
        await this.$nextTick()
        const canvas = await html2canvas(this.$refs.posterRef, {
          useCORS: true,
          scale: 3,
          backgroundColor: null,
          logging: false
        })
        this.posterImg = canvas.toDataURL('image/png')
        this.$toast('海报生成成功')
      } catch (err) {
        console.error(err)
        this.$dialog.alert({ message: '生成失败，请重试' })
      } finally {
        this.isGenerating = false
      }
    },

    // 下载海报
    downloadPoster() {
      const link = document.createElement('a')
      link.href = this.posterImg
      const fileName = `${this.selectedActivity.title || '活动'}海报.png`
      link.download = fileName.replace(/[^a-zA-Z0-9_\u4e00-\u9fa5]/g, '')
      link.click()
    }
  }
}
</script>

<style scoped lang="scss">
/* 基础样式 */
.poster-generator-container {
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  background: #f5f7fa;
  box-sizing: border-box;
}

.input-section {
  margin-bottom: 30px;
}

/* 弹窗样式 */
.activity-popup {
  height: 80vh;
  display: flex;
  flex-direction: column;
}

.activity-picker-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.scroll-wrapper {
  flex: 1;
  overflow-y: auto;
}

.cancel-btn {
  color: #999;
  font-size: 14px;
}

.confirm-btn {
  color: #18ca6e;
  font-size: 14px;
  font-weight: 500;
}

.title {
  font-size: 16px;
  color: #2c3e50;
}

.activity-item {
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;

  &:active {
    background: #f5f7fa;
  }
}

.activity-title {
  font-size: 15px;
  color: #2c3e50;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

/* 海报隐藏容器 */
.poster-wrapper {
  width: 375px;
  height: 788px;
  overflow: hidden;
}

.hidden-poster {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: -1;
}

.poster-card {
  width: 100%;
  height: 100%;
  position: relative;
}

.poster-content {
  width: 100%;
  height: 100%;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 海报文字样式 */
.poster-title {
  position: absolute;
  left: 0;
  top: 262px;
  width: 100%;
  text-align: center;
}

.poster-title-text {
  color: #0d2f73;
  font-size: 20px;
  width: 300px;
  margin: 0 auto;
}

.sponsor-name {
  position: absolute;
  left: 0;
  top: 446px;
  width: 100%;
  text-align: center;
  color: #0e2965;
  font-size: 14px;
}

.poster-qrcode {
  position: absolute;
  left: 0;
  top: 532px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.poster-qrcode-image {
  width: 76px;
  height: 76px;
  background: #fff;
  padding: 3px;
  border-radius: 8px;
}

.poster-time-wrap {
  position: absolute;
  left: 0;
  top: 630px;
  width: 100%;
  text-align: center;
  color: #0e2866;
}

.poster-date {
  font-size: 24px;
}

.poster-time {
  font-size: 22px;
  margin-top: 14px;

  .start-time {
    margin-right: 30px;
  }
}

.poster-address {
  position: absolute;
  left: 0;
  top: 720px;
  width: 100%;
  display: flex;
  justify-content: center;
}

._text-warp {
  max-width: 80%;
  background: #fff;
  padding: 4px 16px;
  border-radius: 32px;
  color: #0f2967;
  display: flex;
}

._title {
  width: 76px;
  flex-shrink: 0;
}

/* 按钮样式 */
.btn-group {
  display: flex;
  gap: 15px;
  margin: 30px 0;
}

.btn {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

.btn-primary {
  background: #18ca6e;

  &:disabled {
    background: #95d8b7;
    cursor: not-allowed;
  }
}

.btn-secondary {
  background: #2c3e50;
}

/* 预览区域 */
.generated-poster-preview {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

.preview-title {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 16px;
}

.preview-img {
  width: 100%;
  border-radius: 8px;
}
</style>
