<template>
  <view class="admin-page message-management">
      <view class="admin-sections">
        <view class="admin-card">
          <!-- 标签页 -->
          <view class="tabs-container">
            <view class="tabs-bar">
              <view 
                class="tab-item" 
                :class="{ active: currentTab === 0 }" 
                @click="currentTab = 0"
              >
                <text class="tab-text">会员通知</text>
                <view class="tab-line" v-if="currentTab === 0"></view>
              </view>
              <view 
                class="tab-item" 
                :class="{ active: currentTab === 1 }" 
                @click="currentTab = 1"
              >
                <text class="tab-text">平台通知</text>
                <view class="tab-line" v-if="currentTab === 1"></view>
              </view>
              <view 
                class="tab-item" 
                :class="{ active: currentTab === 2 }" 
                @click="currentTab = 2"
              >
                <text class="tab-text">自定义通知</text>
                <view class="tab-line" v-if="currentTab === 2"></view>
              </view>
            </view>
          </view>

          <!-- 顶部操作 -->
          <view class="top-actions">
            <button class="btn btn-primary" @click="syncMiniProgram">同步小程序订阅消息</button>
            <button class="btn btn-primary ml-10" @click="syncWechat">同步微信模板消息</button>
          </view>

          <!-- 提示信息 -->
          <view class="alert-info">
            <text class="alert-title">小程序订阅消息</text>
            <text class="alert-desc">登录微信小程序后台，基本设置，服务类目增加《生活服务 > 百货/超市/便利店》（否则同步小程序订阅消息会报错）</text>
            <text class="alert-desc">同步小程序订阅消息，是在小程序后台未添加订阅消息模板的前提下使用的，会新增一个模板消息并把信息同步过来，并非本项目数据库。</text>
          </view>

          <!-- 数据表格 -->
          <view class="table-container">
            <view class="table-header">
              <view class="table-cell" style="flex: 0 0 60px;">ID</view>
              <view class="table-cell" style="flex: 2;">通知类型</view>
              <view class="table-cell" style="flex: 3;">通知场景说明</view>
              <view class="table-cell" style="flex: 1;">站内信</view>
              <view class="table-cell" style="flex: 1.5;">公众号模板</view>
              <view class="table-cell" style="flex: 1;">发送短信</view>
              <view class="table-cell" style="flex: 1.5;">小程序订阅</view>
              <view class="table-cell action-cell" style="flex: 1;">操作</view>
            </view>
            <view class="table-body">
              <view class="table-row" v-for="(item, index) in messageList" :key="index">
                <view class="table-cell" style="flex: 0 0 60px;">{{ item.id }}</view>
                <view class="table-cell" style="flex: 2;">{{ item.type }}</view>
                <view class="table-cell" style="flex: 3;">{{ item.desc }}</view>
                <view class="table-cell" style="flex: 1;">
                  <switch color="#1890ff" :checked="item.is_msg" style="transform: scale(0.7);" />
                </view>
                <view class="table-cell" style="flex: 1.5;">
                  <switch color="#1890ff" :checked="item.is_wechat" style="transform: scale(0.7);" />
                </view>
                <view class="table-cell" style="flex: 1;">
                  <switch color="#1890ff" :checked="item.is_sms" style="transform: scale(0.7);" />
                </view>
                <view class="table-cell" style="flex: 1.5;">
                  <switch color="#1890ff" :checked="item.is_mini" style="transform: scale(0.7);" />
                </view>
                <view class="table-cell action-cell" style="flex: 1;">
                  <text class="action-link" @click="handleSet(item)">设置</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view></template>
<script setup lang="uts">
import { ref } from 'vue'

const currentTab = ref(0)
const messageList = ref([
  { id: 1, type: '短信验证码', desc: '短信验证码', is_msg: false, is_wechat: false, is_sms: true, is_mini: false },
  { id: 2, type: '绑定推广关系消息', desc: '绑定推广关系消息', is_msg: true, is_wechat: false, is_sms: false, is_mini: false },
  { id: 3, type: '支付成功提醒消息', desc: '支付成功提醒消息', is_msg: true, is_wechat: true, is_sms: true, is_mini: true },
  { id: 4, type: '发货提醒消息', desc: '发货提醒消息', is_msg: true, is_wechat: true, is_sms: true, is_mini: true },
  { id: 5, type: '送货提醒消息', desc: '送货提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true },
  { id: 6, type: '确认收货提醒消息', desc: '确认收货提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true },
  { id: 7, type: '退款成功提醒消息', desc: '退款成功提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true },
  { id: 8, type: '退款失败提醒消息', desc: '退款失败提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true },
  { id: 9, type: '改价提醒消息', desc: '改价提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true },
  { id: 10, type: '未付款提醒消息', desc: '未付款提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true }
])

function syncMiniProgram() {
  uni.showToast({ title: '同步小程序订阅消息', icon: 'none' })
}

function syncWechat() {
  uni.showToast({ title: '同步微信模板消息', icon: 'none' })
}

function handleSet(item: any) {
  uni.showToast({ title: '设置: ' + item.type, icon: 'none' })
}
</script>

<style scoped>
.message-management {
  /* 使用 AdminLayout 的统一内边距和背景色 */
}

.admin-card {
  background-color: #fff;
  padding: var(--admin-card-padding);
  border-radius: 8px;
}

.tabs-container {
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.tabs-bar {
  display: flex;
  flex-direction: row;
}

.tab-item {
  padding: 12px 20px;
  position: relative;
  cursor: pointer;
}

.tab-item.active {
  color: #1890ff;
}

.tab-text {
  font-size: 14px;
}

.tab-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1890ff;
}

.top-actions {
  margin-bottom: 20px;
}

.btn {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  padding: 0 15px;
  border-radius: 4px;
  border: none;
}

.btn-primary {
  background-color: #1890ff;
  color: #fff;
}

.alert-info {
  background-color: #fff7e6;
  border: 1px solid #ffd591;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.alert-title {
  color: #fa8c16;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
}

.alert-desc {
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}

.table-container {
  border: 1px solid #f0f0f0;
}

.table-header {
  display: flex;
  flex-direction: row;
  background-color: #f8f8f9;
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 0;
}

.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 0;
  align-items: center;
}

.table-cell {
  font-size: 13px;
  color: #666;
  padding: 0 10px;
  text-align: center;
}

.action-link {
  color: #1890ff;
  cursor: pointer;
}

.ml-10 {
  margin-left: 10px;
}
</style>

