/**
 * 通讯渠道配置组件
 */
app.component('channels-config-page', {
    props: ['config'],
    emits: ['save'],
    setup(props, { emit }) {
        const { ref, reactive, watch } = Vue;
        
        const activeTab = ref('wework');
        
        // 表单数据
        const form = reactive({
            wework: {
                enabled: false,
                corp_id: '',
                agent_id: '',
                secret: '',
                token: '',
                encoding_aes_key: ''
            },
            feishu: {
                enabled: false,
                app_id: '',
                app_secret: '',
                verification_token: '',
                encrypt_key: ''
            }
        });
        
        // 监听 props 变化
        watch(() => props.config, (newVal) => {
            if (newVal) {
                if (newVal.wework) Object.assign(form.wework, newVal.wework);
                if (newVal.feishu) Object.assign(form.feishu, newVal.feishu);
            }
        }, { immediate: true, deep: true });
        
        // 保存配置
        function handleSave() {
            emit('save', { ...form });
        }
        
        return {
            activeTab,
            form,
            handleSave
        };
    },
    template: `
        <div class="channels-config">
            <el-tabs v-model="activeTab" type="border-card">
                <!-- 企业微信 -->
                <el-tab-pane label="企业微信" name="wework">
                    <el-card class="config-card" shadow="never">
                        <template #header>
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <span>企业微信配置</span>
                                <el-switch v-model="form.wework.enabled" active-text="启用" inactive-text="禁用" />
                            </div>
                        </template>
                        
                        <el-alert
                            title="配置说明"
                            type="info"
                            :closable="false"
                            show-icon
                            style="margin-bottom: 20px"
                        >
                            <template #default>
                                <ol style="margin: 8px 0 0 20px; padding: 0;">
                                    <li>登录企业微信管理后台 → 应用管理 → 创建应用</li>
                                    <li>获取 CorpID、AgentID、Secret</li>
                                    <li>在「接收消息」中配置 URL、Token、EncodingAESKey</li>
                                    <li>Webhook URL: <code>https://your-domain.com/webhook/wework</code></li>
                                </ol>
                            </template>
                        </el-alert>
                        
                        <el-form :model="form.wework" label-width="160px" :disabled="!form.wework.enabled">
                            <el-form-item label="企业 ID (CorpID)">
                                <el-input v-model="form.wework.corp_id" placeholder="ww..." style="width: 400px" />
                            </el-form-item>
                            <el-form-item label="应用 ID (AgentID)">
                                <el-input v-model="form.wework.agent_id" placeholder="1000001" style="width: 400px" />
                            </el-form-item>
                            <el-form-item label="应用 Secret">
                                <el-input v-model="form.wework.secret" type="password" show-password style="width: 400px" />
                            </el-form-item>
                            <el-form-item label="Token">
                                <el-input v-model="form.wework.token" style="width: 400px" />
                                <template #extra>
                                    <span style="color: #909399; font-size: 12px;">用于验证消息签名</span>
                                </template>
                            </el-form-item>
                            <el-form-item label="EncodingAESKey">
                                <el-input v-model="form.wework.encoding_aes_key" style="width: 400px" />
                                <template #extra>
                                    <span style="color: #909399; font-size: 12px;">43位字符，用于消息加解密</span>
                                </template>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-tab-pane>
                
                <!-- 飞书 -->
                <el-tab-pane label="飞书" name="feishu">
                    <el-card class="config-card" shadow="never">
                        <template #header>
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <span>飞书配置</span>
                                <el-switch v-model="form.feishu.enabled" active-text="启用" inactive-text="禁用" />
                            </div>
                        </template>
                        
                        <el-alert
                            title="配置说明"
                            type="info"
                            :closable="false"
                            show-icon
                            style="margin-bottom: 20px"
                        >
                            <template #default>
                                <ol style="margin: 8px 0 0 20px; padding: 0;">
                                    <li>登录飞书开放平台 → 创建企业自建应用</li>
                                    <li>获取 App ID 和 App Secret</li>
                                    <li>在「事件订阅」中配置请求地址和 Token</li>
                                    <li>Webhook URL: <code>https://your-domain.com/webhook/feishu</code></li>
                                </ol>
                            </template>
                        </el-alert>
                        
                        <el-form :model="form.feishu" label-width="160px" :disabled="!form.feishu.enabled">
                            <el-form-item label="App ID">
                                <el-input v-model="form.feishu.app_id" placeholder="cli_xxx" style="width: 400px" />
                            </el-form-item>
                            <el-form-item label="App Secret">
                                <el-input v-model="form.feishu.app_secret" type="password" show-password style="width: 400px" />
                            </el-form-item>
                            <el-form-item label="Verification Token">
                                <el-input v-model="form.feishu.verification_token" style="width: 400px" />
                                <template #extra>
                                    <span style="color: #909399; font-size: 12px;">用于验证事件来源</span>
                                </template>
                            </el-form-item>
                            <el-form-item label="Encrypt Key">
                                <el-input v-model="form.feishu.encrypt_key" style="width: 400px" />
                                <template #extra>
                                    <span style="color: #909399; font-size: 12px;">可选，用于消息加密</span>
                                </template>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
            
            <div style="margin-top: 20px;">
                <el-button type="primary" @click="handleSave">保存配置</el-button>
            </div>
        </div>
    `
});