<!-- 机构端 - 机构成长页(安读Tab4 -->
<template>
  <view class="growth-page">
    <scroll-view direction="vertical" class="growth-scroll" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">

      <!-- 成长等级卡片 -->
      <view class="level-card">
        <view class="level-header">
          <view class="level-info">
            <text class="level-label">机构服务等级</text>
            <view class="level-badge">
              <text class="level-text">{{ currentLevel.name }}</text>
            </view>
          </view>
          <text class="level-icon">{{ currentLevel.icon }}</text>
        </view>
        <view class="level-progress-wrap">
          <view class="level-progress-bar">
            <view class="level-progress-fill" :style="{ width: currentLevel.progress + '%' }"></view>
          </view>
          <text class="level-progress-text">{{ currentLevel.progress }}% · 距下一级还需 {{ currentLevel.nextTarget }}</text>
        </view>
        <view class="level-tips">
          <text class="level-tips-text">完善机构信息、发布服务、获得订单可提升等级</text>
        </view>
      </view>

      <!-- 流量获取方法 -->
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">📈 获客与转化建议</text>
        </view>
        <view class="tips-list">
          <view
            v-for="(tip, index) in trafficTips"
            :key="index"
            class="tip-item"
            @click="viewDetail(tip)"
          >
            <view class="tip-icon-wrap" :style="{ backgroundColor: tip.color + '22' }">
              <text class="tip-icon">{{ tip.icon }}</text>
            </view>
            <view class="tip-content">
              <text class="tip-title">{{ tip.title }}</text>
              <text class="tip-desc">{{ tip.desc }}</text>
            </view>
            <text class="tip-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- 经营指南 -->
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">📋 合规与运营指南</text>
        </view>
        <view class="guide-grid">
          <view
            v-for="(guide, index) in operationGuides"
            :key="index"
            class="guide-item"
            @click="viewDetail(guide)"
          >
            <text class="guide-icon">{{ guide.icon }}</text>
            <text class="guide-title">{{ guide.title }}</text>
          </view>
        </view>
      </view>

      <!-- 店铺经营建议 -->
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">💡 今日运营建议</text>
        </view>
        <view class="suggestion-list">
          <view
            v-for="(suggestion, index) in suggestions"
            :key="index"
            class="suggestion-item"
            :class="{ done: suggestion.done }"
            @click="toggleSuggestion(index)"
          >
            <view class="suggestion-check">
              <text class="check-icon">{{ suggestion.done ? '✅' : '⬜' }}</text>
            </view>
            <view class="suggestion-content">
              <text class="suggestion-title">{{ suggestion.title }}</text>
              <text class="suggestion-desc">{{ suggestion.desc }}</text>
            </view>
            <view class="suggestion-tag" :style="{ backgroundColor: suggestion.tagColor + '22', color: suggestion.tagColor }">
              <text class="tag-text">{{ suggestion.tag }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 学习中心入口 -->
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">🎓 培训中心</text>
        </view>
        <view class="learn-list">
          <view
            v-for="(course, index) in learnCourses"
            :key="index"
            class="learn-item"
            @click="viewDetail(course)"
          >
            <view class="learn-cover">
              <text class="learn-cover-icon">{{ course.icon }}</text>
            </view>
            <view class="learn-info">
              <text class="learn-title">{{ course.title }}</text>
              <text class="learn-subtitle">{{ course.subtitle }}</text>
              <view class="learn-meta">
                <text class="learn-tag">{{ course.tag }}</text>
                <text class="learn-duration">{{ course.duration }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部安全区（覆盖 tabbar） -->
      <view class="safe-bottom"></view>
    </scroll-view>

    <!-- 商家端自定义 TabBar -->
    <merchant-tab-bar :current="3"></merchant-tab-bar>
  </view>
</template>

<script lang="uts">
  import MerchantTabBar from '@/components/merchant-tabbar/MerchantTabBar.uvue'
  import { requireMerchantAuth } from '@/utils/merchantAuth.uts'

  type TipType = {
    icon: string
    title: string
    desc: string
    color: string
    link: string
  }

  type GuideType = {
    icon: string
    title: string
    link: string
  }

  type SuggestionType = {
    title: string
    desc: string
    tag: string
    tagColor: string
    done: boolean
  }

  type CourseType = {
    icon: string
    title: string
    subtitle: string
    tag: string
    duration: string
    link: string
  }

  type LevelType = {
    name: string
    icon: string
    progress: number
    nextTarget: string
  }

  export default {
    components: {
      MerchantTabBar
    },

    data() {
      return {
        refreshing: false,
        currentLevel: {
          name: '初入机构',
          icon: '🏥',
          progress: 30,
          nextTarget: '发布5项以上服务'
        } as LevelType,

        trafficTips: [
          {
            icon: '�',
            title: '优化服务标题与科室标签',
            desc: '精准标签可提升搜索曝光量 3-5 倍',
            color: '#ff5000',
            link: ''
          },
          {
            icon: '📷',
            title: '优化服务封面与机构展示图',
            desc: '高质量展示图点击率提升 40% 以上',
            color: '#09C39D',
            link: ''
          },
          {
            icon: '📊',
            title: '配置护理套餐/康复优惠',
            desc: '套餐优惠期间订单量平均提升 60%',
            color: '#34C759',
            link: ''
          },
          {
            icon: '⭐',
            title: '提升服务满意度',
            desc: '好评率 >95% 可获得平台推荐流量',
            color: '#FF9500',
            link: ''
          },
          {
            icon: '📢',
            title: '参与平台关怀活动',
            desc: '报名关怀活动可获得额外曝光位置',
            color: '#AF52DE',
            link: ''
          }
        ] as TipType[],

        operationGuides: [
          { icon: '🏥', title: '服务/商品管理', link: '/pages/mall/merchant/products' },
          { icon: '🩺', title: '器械库存管理', link: '/pages/mall/merchant/inventory' },
          { icon: '📊', title: '关怀活动运营', link: '/pages/mall/merchant/promotions' },
          { icon: '💬', title: '和长者/家属沟通', link: '/pages/mall/merchant/chat' },
          { icon: '📊', title: '服务运营统计', link: '/pages/mall/merchant/statistics' },
          { icon: '💳', title: '结算中心', link: '/pages/mall/merchant/finance' }
        ] as GuideType[],

        suggestions: [
          {
            title: '完善机构基础信息',
            desc: '补充机构 Logo、简介、联系方式',
            tag: '紧急',
            tagColor: '#ff3b30',
            done: false
          },
          {
            title: '发布至少3项在售服务',
            desc: '充足的服务是获得流量的基础',
            tag: '重要',
            tagColor: '#ff9500',
            done: false
          },
          {
            title: '回复所有待回用户评价',
            desc: '及时回复可提升用户信任度',
            tag: '今日',
            tagColor: '#09C39D',
            done: false
          },
          {
            title: '检查器械低库存情况',
            desc: '库存不足会导致预约失败',
            tag: '常规',
            tagColor: '#34c759',
            done: false
          }
        ] as SuggestionType[],

        learnCourses: [
          {
            icon: '🏥',
            title: '新机构入驻必读',
            subtitle: '5分钟掌握入驻核心流程',
            tag: '入门',
            duration: '5 分钟',
            link: ''
          },
          {
            icon: '🤺',
            title: '陪诊服务标准流程',
            subtitle: '干顶面、等候、取号成功必读',
            tag: '进阶',
            duration: '8 分钟',
            link: ''
          },
          {
            icon: '🏠',
            title: '居家护理服务规范',
            subtitle: '上门服务标准与安全要求',
            tag: '进阶',
            duration: '12 分钟',
            link: ''
          },
          {
            icon: '🤖',
            title: 'AI和长者/家属咨询接待话术',
            subtitle: '用话术留住每一位和查用户',
            tag: '实战',
            duration: '10 分钟',
            link: ''
          },
          {
            icon: '📊',
            title: '慢病管理服务运营方法',
            subtitle: '慢病客户持续服务与复购指南',
            tag: '实战',
            duration: '15 分钟',
            link: ''
          }
        ] as CourseType[]
      }
    },

    onShow() {
      this.ensureMerchantAuth()
    },

    methods: {
      async ensureMerchantAuth(): Promise<boolean> {
        const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
        return result.ok
      },

      onRefresh() {
        this.refreshing = true
        // 预留：刷新成长数据
        setTimeout(() => {
          this.refreshing = false
        }, 1000)
      },

      toggleSuggestion(index: number) {
        this.suggestions[index].done = !this.suggestions[index].done
      },

      viewDetail(item: TipType | GuideType | CourseType) {
        if (item.link && item.link.length > 0) {
          uni.navigateTo({ url: item.link })
        } else {
          uni.showToast({ title: '内容即将上线，敬请期待', icon: 'none' })
        }
      }
    }
  }
</script>

<style>
  .growth-page {
    background-color: #f5f7fa;
    min-height: 100vh;
  }

  /* 微信小程序 Tab 页顶部导航 */
  .mp-tab-navbar {
    height: calc(88rpx + var(--status-bar-height));
    padding-top: var(--status-bar-height);
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-bottom-width: 1rpx;
    border-bottom-style: solid;
    border-bottom-color: #f0f0f0;
  }

  .mp-tab-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
  }

  .growth-scroll {
    flex: 1;
    padding: calc(24rpx + var(--status-bar-height)) 24rpx 24rpx;
  }

  /* 成长等级卡片 */
  .level-card {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
    border-radius: 24rpx;
    padding: 36rpx 32rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
  }

  .level-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28rpx;
  }

  .level-info {
    display: flex;
    flex-direction: column;
  }

  .level-label {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10rpx;
  }

  .level-badge {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 20rpx;
    padding-top: 8rpx;
    padding-bottom: 8rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;
    align-self: flex-start;
  }

  .level-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
  }

  .level-icon {
    font-size: 80rpx;
  }

  .level-progress-wrap {
    margin-bottom: 16rpx;
  }

  .level-progress-bar {
    height: 12rpx;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 6rpx;
    overflow: hidden;
    margin-bottom: 12rpx;
  }

  .level-progress-fill {
    height: 100%;
    background-color: #ffffff;
    border-radius: 6rpx;
  }

  .level-progress-text {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.85);
  }

  .level-tips {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 12rpx;
    padding: 16rpx 20rpx;
  }

  .level-tips-text {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.9);
  }

  /* 通用 section 卡片 */
  .section-card {
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 28rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  }

  .section-header {
    margin-bottom: 24rpx;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }

  /* 流量获取方法 */
  .tips-list {
    display: flex;
    flex-direction: column;
  }

  .tip-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    border-bottom-width: 1rpx;
    border-bottom-style: solid;
    border-bottom-color: #f5f5f5;
  }

  .tip-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .tip-icon-wrap {
    width: 72rpx;
    height: 72rpx;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    flex-shrink: 0;
  }

  .tip-icon {
    font-size: 36rpx;
  }

  .tip-content {
    flex: 1;
  }

  .tip-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 6rpx;
    display: block;
  }

  .tip-desc {
    font-size: 24rpx;
    color: #999999;
  }

  .tip-arrow {
    font-size: 40rpx;
    color: #cccccc;
    margin-left: 16rpx;
  }

  /* 经营指南宫格 */
  .guide-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .guide-item {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 24rpx;
    padding-bottom: 24rpx;
  }

  .guide-icon {
    font-size: 56rpx;
    margin-bottom: 12rpx;
  }

  .guide-title {
    font-size: 24rpx;
    color: #555555;
  }

  /* 今日经营建议 */
  .suggestion-list {
    display: flex;
    flex-direction: column;
  }

  .suggestion-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    border-bottom-width: 1rpx;
    border-bottom-style: solid;
    border-bottom-color: #f5f5f5;
  }

  .suggestion-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .suggestion-item.done .suggestion-title {
    color: #cccccc;
    text-decoration: line-through;
  }

  .suggestion-check {
    margin-right: 16rpx;
    flex-shrink: 0;
  }

  .check-icon {
    font-size: 36rpx;
  }

  .suggestion-content {
    flex: 1;
  }

  .suggestion-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 6rpx;
    display: block;
  }

  .suggestion-desc {
    font-size: 24rpx;
    color: #999999;
  }

  .suggestion-tag {
    margin-left: 16rpx;
    padding-top: 6rpx;
    padding-bottom: 6rpx;
    padding-left: 16rpx;
    padding-right: 16rpx;
    border-radius: 8rpx;
    flex-shrink: 0;
  }

  .tag-text {
    font-size: 22rpx;
    font-weight: 500;
  }

  /* 学习中心列表 */
  .learn-list {
    display: flex;
    flex-direction: column;
  }

  .learn-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    border-bottom-width: 1rpx;
    border-bottom-style: solid;
    border-bottom-color: #f5f5f5;
  }

  .learn-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .learn-cover {
    width: 100rpx;
    height: 80rpx;
    border-radius: 12rpx;
    background-color: #f5f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    flex-shrink: 0;
  }

  .learn-cover-icon {
    font-size: 44rpx;
  }

  .learn-info {
    flex: 1;
  }

  .learn-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8rpx;
    display: block;
  }

  .learn-subtitle {
    font-size: 24rpx;
    color: #999999;
    margin-bottom: 12rpx;
    display: block;
  }

  .learn-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .learn-tag {
    font-size: 22rpx;
    color: #ff5000;
    background-color: #fff3ef;
    padding-top: 4rpx;
    padding-bottom: 4rpx;
    padding-left: 12rpx;
    padding-right: 12rpx;
    border-radius: 6rpx;
    margin-right: 16rpx;
  }

  .learn-duration {
    font-size: 22rpx;
    color: #999999;
  }

  /* 底部安全区 */
  .safe-bottom {
    height: 160rpx;
  }
</style>
