<template>
    <div class="page-section active" id="page-consultation-form">
        <div class="page-padding">
            <div class="title-wrap">
                <h1 class="page-title">咨询表单</h1>
            </div>

            <div class="stats-grid">
                <div class="stats-card">
                    <p class="stats-label">总咨询量</p>
                    <p class="stats-value stats-value-dark">{{ formatCount(totalCount) }}</p>
                </div>
                <div class="stats-card">
                    <p class="stats-label">微信公众号渠道</p>
                    <p class="stats-value stats-value-green">{{ formatCount(wechatCount) }}</p>
                </div>
                <div class="stats-card">
                    <p class="stats-label">官网渠道</p>
                    <p class="stats-value stats-value-purple">{{ formatCount(webCount) }}</p>
                </div>
                <div class="stats-card">
                    <p class="stats-label">待回复</p>
                    <p class="stats-value stats-value-orange">{{ formatCount(pendingCount) }}</p>
                </div>
            </div>

            <div class="filter-card">
                <el-form :model="queryForm" inline class="filter-form">
                    <el-form-item label="姓名">
                        <el-input v-model.trim="queryForm.name" size="small" clearable placeholder="请输入姓名" @keyup.enter.native="handleSearch" />
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model.trim="queryForm.phone" size="small" clearable placeholder="请输入手机号" @keyup.enter.native="handleSearch" />
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model.trim="queryForm.email" size="small" clearable placeholder="请输入邮箱" @keyup.enter.native="handleSearch" />
                    </el-form-item>
                    <el-form-item label="渠道来源">
                        <el-select v-model="queryForm.source" size="small" clearable placeholder="全部渠道">
                            <el-option label="全部渠道" value="" />
                            <el-option v-for="item in sourceList" :key="item" :label="item" :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="回复状态">
                        <el-select v-model="queryForm.feedback" size="small" clearable placeholder="全部状态">
                            <el-option label="全部状态" value="" />
                            <el-option v-for="item in feedbackOptions" :key="item.id" :label="item.name" :value="String(item.id)" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
                        <el-button size="small" @click="resetSearch">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="action-bar">
                <div class="batch-actions">
                    <el-button
                        type="success"
                        icon="el-icon-download"
                        size="small"
                        :loading="exportLoading"
                        @click="getTableData('1')"
                    >
                        导出Excel
                    </el-button>
                    <el-button type="primary" size="small" :loading="actionLoading" :disabled="!selectedRows.length" @click="batchUpdateFeedback('1')">
                        批量标记沟通中
                    </el-button>
                    <el-button type="warning" size="small" :loading="actionLoading" :disabled="!selectedRows.length" @click="batchUpdateFeedback('0')">
                        批量标记待回复
                    </el-button>
                    <el-button type="danger" size="small" :loading="actionLoading" :disabled="!selectedRows.length" @click="batchDelete">
                        批量删除
                    </el-button>
                </div>
                <div class="record-count">共 {{ totalCount }} 条记录</div>
            </div>

            <div class="table-card">
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    class="consulting-table"
                    empty-text="暂无咨询数据"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="46" align="center" />
                    <el-table-column label="ID" width="80" align="center">
                        <template slot-scope="scope">
                            {{ getRowNo(scope.$index) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" min-width="90" />
                    <el-table-column prop="phone" label="手机号" min-width="120" />
                    <el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
                    <el-table-column label="公司名称/企业规模" min-width="180" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div class="company-cell">
                                <span class="company-name">{{ scope.row.company || '-' }}</span>
                                <span class="company-scale">企业规模：{{ scope.row.enterprise_type_name || '-' }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="咨询渠道" min-width="120" align="center">
                        <template slot-scope="scope">
                            <span :class="['source-tag', getSourceClass(scope.row.source)]">
                                {{ scope.row.source || '-' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="consult_direction_name" label="咨询方向" min-width="220" show-overflow-tooltip />
                    <el-table-column prop="content" label="需求描述" min-width="220" show-overflow-tooltip />
                    <el-table-column prop="update_time" label="提交时间" min-width="160" />
                    <el-table-column label="回复状态" min-width="110" align="center">
                        <template slot-scope="scope">
                            <el-tag
                                size="mini"
                                effect="plain"
                                class="feedback-tag"
                                :type="feedbackTagType(scope.row.feedback)"
                                @click="toggleFeedback(scope.row)"
                            >
                                {{ feedbackText(scope.row) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="110" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="viewUser(scope.row)">详情</el-button>
                            <el-button type="text" size="small" text="warning" @click="openRemark(scope.row)">备注</el-button>
                            <!-- <el-button type="text" size="small" class="danger-text" @click="deleteRows([scope.row])">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="pager-wrap">
                <div class="pager-info">显示 {{ pageStart }}-{{ pageEnd }} 条，共 {{ totalCount }} 条</div>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="totalCount"
                    :page-size="pageSize"
                    :current-page.sync="page"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>

        <el-dialog
            title="咨询详情"
            :visible.sync="detailVisible"
            width="600px"
            
            append-to-body
            custom-class="detail-dialog"
            top="8vh"
        >
            <div v-if="currentRow" class="detail-panel">
                <div class="detail-grid">
                    <div class="detail-item">
                        <span class="detail-label">姓名</span>
                        <strong>{{ currentRow.name || '-' }}</strong>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">联系电话</span>
                        <strong>{{ currentRow.phone || '-' }}</strong>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">邮箱</span>
                        <strong>{{ currentRow.email || '-' }}</strong>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">公司名称</span>
                        <strong>{{ currentRow.company || '-' }}</strong>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">企业类型</span>
                        <strong>{{ currentRow.enterprise_type_name || currentRow.custom_type_name || '-' }}</strong>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">咨询渠道</span>
                        <strong>{{ currentRow.source || '-' }}</strong>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">提交时间</span>
                        <strong>{{ currentRow.update_time || currentRow.create_at || '-' }}</strong>
                    </div>
                </div>

                <div class="detail-section">
                    <span class="detail-label">咨询方向</span>
                    <strong>{{ currentRow.consult_direction_name || '-' }}</strong>
                </div>

                <div class="detail-section">
                    <span class="detail-label">需求描述/留言</span>
                    <div class="detail-content-box">{{ currentRow.content || '-' }}</div>
                </div>

                <div class="detail-divider"></div>

                <div class="detail-section">
                    <span class="detail-label">回复状态</span>
                    <el-tag size="small" effect="plain" :type="feedbackTagType(currentRow.feedback)">
                        {{ feedbackText(currentRow) }}
                    </el-tag>
                </div>

                <div class="detail-section">
                    <span class="detail-label">备注信息</span>
                    <div class="detail-content-box detail-remark-text">{{ currentRow.remark || '暂无备注' }}</div>
                    <div class="detail-remark-row">
                        <el-input
                            v-model.trim="detailRemarkText"
                            maxlength="300"
                            placeholder="添加备注..."
                            @keyup.enter.native="saveDetailRemark"
                        />
                        <el-button type="primary" class="detail-save-btn" :loading="actionLoading" @click="saveDetailRemark">
                            保存
                        </el-button>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            title="添加备注"
            :visible.sync="remarkVisible"
            width="520px"
            append-to-body
            custom-class="remark-dialog"
            :close-on-click-modal="true"
            @close="saveRemarkOnClose"
        >
            <div class="remark-content">
                <label class="remark-label">备注内容</label>
                <el-input
                    v-model.trim="remarkText"
                    type="textarea"
                    :rows="6"
                    maxlength="300"
                    show-word-limit
                    placeholder="请输入备注信息..."
                />
                <p class="remark-tip">点击弹窗外任意位置或关闭弹窗，将自动保存备注。</p>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { reqSearchUserInquiry, reqUserInquiryDelete, reqUserInquiryStatusSwitch } from '@/api/ncmatch'
import XLSX from 'xlsx'

export default {
    name: 'ConsultingMangement',
    data() {
        return {
            tableData: [],
            tableLoading: false,
            exportLoading: false,
            actionLoading: false,
            page: 1,
            pageSize: 10,
            totalCount: 0,
            selectedRows: [],
            detailVisible: false,
            remarkVisible: false,
            remarkText: '',
            detailRemarkText: '',
            originalRemarkText: '',
            currentRow: null,
            sourceList: [],
            queryForm: {
                name: '',
                phone: '',
                email: '',
                source: '',
                feedback: ''
            },
            feedbackOptions: [
                { id: 0, name: '待回复' },
                { id: 1, name: '沟通中' },
                { id: 2, name: '已关闭' },
                { id: 3, name: '号码错误' }
            ]
        }
    },
    computed: {
        pageStart() {
            if (!this.tableData.length) return 0
            return (this.page - 1) * this.pageSize + 1
        },
        pageEnd() {
            if (!this.tableData.length) return 0
            return (this.page - 1) * this.pageSize + this.tableData.length
        },
        wechatCount() {
            return this.tableData.filter(item => /微信|云宝/.test(String(item.source || ''))).length
        },
        webCount() {
            return this.tableData.filter(item => !/微信|云宝/.test(String(item.source || ''))).length
        },
        pendingCount() {
            return this.tableData.filter(item => String(item.feedback) === '0').length
        }
    },
    created() {
        this.getTableData('0')
    },
    methods: {
        formatCount(value) {
            return Number(value || 0).toLocaleString('en-US')
        },
        feedbackText(row) {
            if (row.feedback_name) return row.feedback_name
            const found = this.feedbackOptions.find(item => String(item.id) === String(row.feedback))
            return found ? found.name : '待回复'
        },
        feedbackTagType(feedback) {
            const value = String(feedback)
            if (value === '2') return 'success'
            if (value === '1') return ''
            if (value === '3') return 'info'
            return 'warning'
        },
        getSourceClass(source) {
            const value = String(source || '')
            if (value.includes('公众号')) return 'source-tag-green'
            if (value.includes('官网')) return 'source-tag-blue'
            return 'source-tag-gray'
        },
        getRowId(row) {
            return row && (row.id || row.inquiry_id || row.user_inquiry_id)
        },
        buildIds(rows) {
            return JSON.stringify(rows.map(row => this.getRowId(row)).filter(Boolean))
        },
        getRowNo(index) {
            return (this.page - 1) * this.pageSize + index + 1
        },
        buildSearchParams(to_excel) {
            return {
                url_link: window.location.href.split('#')[0] || window.location.href,
                to_excel: String(to_excel),
                page: String(this.page),
                page_size: String(this.pageSize),
                name: (this.queryForm.name || '').trim(),
                phone: (this.queryForm.phone || '').trim(),
                email: (this.queryForm.email || '').trim(),
                source: this.queryForm.source || '',
                feedback: this.queryForm.feedback === null || this.queryForm.feedback === undefined
                    ? ''
                    : String(this.queryForm.feedback)
            }
        },
        extractRows(res) {
            const data = (res && res.data) || {}
            if (Array.isArray(res && res.data)) return res.data
            if (Array.isArray(data.list)) return data.list
            if (Array.isArray(data.data)) return data.data
            if (Array.isArray(data.rows)) return data.rows
            if (Array.isArray(data.records)) return data.records
            return []
        },
        extractTotal(res, listLength) {
            const data = (res && res.data) || {}
            const total = Number(
                data.total_count ||
                data.total ||
                data.count ||
                data.totalCount ||
                res.total_count ||
                res.total ||
                res.count
            )
            return Number.isFinite(total) && total >= 0 ? total : listLength
        },
        extractSourceList(res, rows = []) {
            const data = (res && res.data) || {}
            const fromApi = data.source_list || data.sourceList || res.source_list || res.sourceList
            const apiList = Array.isArray(fromApi) ? fromApi : []
            const rowList = rows.map(item => item.source)
            return [...new Set(
                [...this.sourceList, ...apiList, ...rowList]
                    .map(item => String(item || '').trim())
                    .filter(Boolean)
            )]
        },
        getTableData(to_excel) {
            const params = this.buildSearchParams(to_excel)
            if (to_excel === '0') this.tableLoading = true
            if (to_excel === '1') this.exportLoading = true

            reqSearchUserInquiry(params).then(res => {
                if (!res || !res.status) {
                    this.$message.warning((res && res.msg) || '暂无咨询数据')
                    return
                }

                const rows = this.extractRows(res)

                if (to_excel === '0') {
                    this.tableData = rows
                    this.totalCount = this.extractTotal(res, rows.length)
                    this.sourceList = this.extractSourceList(res, rows)
                    this.selectedRows = []
                    return
                }

                if (!rows.length) {
                    this.$message.warning('暂无可导出的数据')
                    return
                }

                const wb = XLSX.utils.book_new()
                const ws1 = XLSX.utils.json_to_sheet(rows)
                XLSX.utils.book_append_sheet(wb, ws1, 'sheet1')
                XLSX.writeFile(wb, '咨询列表.xlsx')
                this.$message.success('导出成功')
            }).catch(() => {
                this.$message.error('咨询列表加载失败，请稍后重试')
            }).finally(() => {
                this.tableLoading = false
                this.exportLoading = false
            })
        },
        handleSearch() {
            this.page = 1
            this.getTableData('0')
        },
        resetSearch() {
            this.queryForm = {
                name: '',
                phone: '',
                email: '',
                source: '',
                feedback: ''
            }
            this.page = 1
            this.getTableData('0')
        },
        handleCurrentChange(page) {
            this.page = page
            this.getTableData('0')
        },
        handleSelectionChange(rows) {
            this.selectedRows = rows
        },
        async updateInquiryStatus(rows, feedback, remark) {
            const ids = this.buildIds(rows)
            if (!ids || ids === '[]') {
                this.$message.warning('请选择有效数据')
                return false
            }

            const params = {
                ids,
                feedback: String(feedback)
            }
            if (remark !== undefined) params.remark = remark

            this.actionLoading = true
            try {
                const res = await reqUserInquiryStatusSwitch(params)
                if (res && res.status) {
                    this.$message.success('操作成功')
                    this.getTableData('0')
                    return true
                }
                this.$message.error((res && res.msg) || '操作失败')
                return false
            } catch (error) {
                this.$message.error('操作失败，请稍后重试')
                return false
            } finally {
                this.actionLoading = false
            }
        },
        toggleFeedback(row) {
            const nextFeedback = String(row.feedback) === '0' ? '1' : '0'
            this.updateInquiryStatus([row], nextFeedback)
        },
        batchUpdateFeedback(feedback) {
            this.updateInquiryStatus(this.selectedRows, feedback)
        },
        async deleteRows(rows) {
            const ids = this.buildIds(rows)
            if (!ids || ids === '[]') {
                this.$message.warning('请选择有效数据')
                return
            }

            try {
                await this.$confirm('确认删除选中的咨询记录吗？', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
            } catch (error) {
                return
            }

            this.actionLoading = true
            try {
                const res = await reqUserInquiryDelete({ ids })
                if (res && res.status) {
                    this.$message.success('删除成功')
                    this.getTableData('0')
                    return
                }
                this.$message.error((res && res.msg) || '删除失败')
            } catch (error) {
                this.$message.error('删除失败，请稍后重试')
            } finally {
                this.actionLoading = false
            }
        },
        batchDelete() {
            this.deleteRows(this.selectedRows)
        },
        viewUser(row) {
            this.currentRow = row
            this.detailRemarkText = row.remark || ''
            this.detailVisible = true
        },
        openRemark(row) {
            this.currentRow = row
            this.remarkText = row.remark || ''
            this.originalRemarkText = this.remarkText
            this.remarkVisible = true
        },
        saveRemarkOnClose() {
            if (!this.currentRow) return
            if (this.remarkText === this.originalRemarkText) return

            this.updateInquiryStatus(
                [this.currentRow],
                this.currentRow.feedback === undefined || this.currentRow.feedback === null ? '0' : this.currentRow.feedback,
                this.remarkText
            )
        },
        async saveDetailRemark() {
            if (!this.currentRow) return
            const success = await this.updateInquiryStatus(
                [this.currentRow],
                this.currentRow.feedback === undefined || this.currentRow.feedback === null ? '0' : this.currentRow.feedback,
                this.detailRemarkText
            )
            if (success) {
                this.currentRow.remark = this.detailRemarkText
            }
        }
    }
}
</script>

<style scoped>
.page-section {
    min-height: calc(100vh - 84px);
    background: #eef3f9;
}

.page-padding {
    padding: 24px;
}

.title-wrap {
    margin-bottom: 24px;
}

.page-title {
    margin: 0;
    color: #1f2937;
    font-size: 30px;
    font-weight: 700;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stats-card {
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    padding: 16px;
}

.stats-label {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.stats-value {
    margin: 6px 0 0;
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
}

.stats-value-dark {
    color: #1f2937;
}

.stats-value-green {
    color: #16a34a;
}

.stats-value-purple {
    color: #9333ea;
}

.stats-value-orange {
    color: #ea580c;
}

.filter-card {
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 24px;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-form ::v-deep .el-form-item {
    margin-right: 14px;
    margin-bottom: 0;
}

.filter-form ::v-deep .el-form-item__label {
    color: #4b5563;
    font-size: 13px;
}

.filter-form ::v-deep .el-input,
.filter-form ::v-deep .el-select {
    width: 180px;
}

.filter-form ::v-deep .el-input__inner {
    border-radius: 10px;
}

.filter-form ::v-deep .el-button {
    border-radius: 10px;
}

.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.batch-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.batch-actions ::v-deep .el-button + .el-button {
    margin-left: 0;
}

.record-count {
    color: #6b7280;
    font-size: 13px;
}

.table-card {
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    overflow: hidden;
}

.consulting-table ::v-deep .el-table__header th {
    background: #f9fafb;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
}

.consulting-table ::v-deep .el-table__body td {
    color: #374151;
    font-size: 13px;
}

.consulting-table ::v-deep .el-table__body tr:hover > td {
    background: #f9fafb;
}

.company-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.company-name {
    color: #1f2937;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-scale {
    color: #8a94a6;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
}

.source-tag-green {
    color: #15803d;
    background: #dcfce7;
}

.source-tag-blue {
    color: #1d4ed8;
    background: #dbeafe;
}

.source-tag-gray {
    color: #64748b;
    background: #f1f5f9;
}

.feedback-tag {
    cursor: pointer;
    user-select: none;
}

.danger-text {
    color: #f56c6c;
}

::v-deep .detail-dialog {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

::v-deep .detail-dialog .el-dialog__header {
    padding: 28px 34px 22px;
    border-bottom: 1px solid #eef2f7;
}

::v-deep .detail-dialog .el-dialog__title {
    color: #111827;
    font-size: 24px;
    font-weight: 700;
}

::v-deep .detail-dialog .el-dialog__headerbtn {
    top: 30px;
    right: 34px;
    font-size: 22px;
}

::v-deep .detail-dialog .el-dialog__body {
    padding: 28px 34px 30px;
}

.detail-panel {
    color: #111827;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 72px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    word-break: break-word;
}

.detail-label {
    display: block;
    margin-bottom: 8px;
    color: #8a94a6;
    font-size: 14px;
    line-height: 1.4;
}

.detail-item strong,
.detail-section strong {
    color: #111827;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
}

.detail-section {
    margin-top: 28px;
}

.detail-content-box {
    min-height: 42px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f8fafc;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.7;
    word-break: break-word;
}

.detail-remark-text {
    color: #d97706;
}

.detail-divider {
    height: 1px;
    margin: 24px 0;
    background: #edf1f7;
}

.detail-remark-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-remark-row ::v-deep .el-input__inner {
    height: 42px;
    border-radius: 8px;
}

.detail-save-btn {
    width: 72px;
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: #9333ea;
    font-weight: 600;
}

::v-deep .remark-dialog {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

::v-deep .remark-dialog .el-dialog__header {
    padding: 28px 34px 22px;
    border-bottom: 1px solid #eef2f7;
}

::v-deep .remark-dialog .el-dialog__title {
    color: #111827;
    font-size: 24px;
    font-weight: 700;
}

::v-deep .remark-dialog .el-dialog__headerbtn {
    top: 30px;
    right: 34px;
    font-size: 22px;
}

::v-deep .remark-dialog .el-dialog__body {
    padding: 28px 34px 30px;
}

.remark-content {
    display: flex;
    flex-direction: column;
}

.remark-label {
    margin-bottom: 12px;
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
}

.remark-content ::v-deep .el-textarea__inner {
    min-height: 150px !important;
    padding: 16px 18px;
    border: 1px solid #dfe6f0;
    border-radius: 12px;
    color: #111827;
    font-size: 15px;
    line-height: 1.7;
    resize: vertical;
}

.remark-content ::v-deep .el-textarea__inner::placeholder {
    color: #a0aec0;
}

.remark-content ::v-deep .el-input__count {
    right: 14px;
    bottom: 10px;
    color: #9ca3af;
    background: transparent;
}

.remark-tip {
    margin: 12px 0 0;
    color: #8a94a6;
    font-size: 13px;
    line-height: 1.6;
}

.pager-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

.pager-info {
    color: #6b7280;
    font-size: 13px;
}

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-padding {
        padding: 12px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .pager-wrap {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}
</style>