<template>
    <div class="app-container">
        <el-card class="table-card" shadow="hover">
            <div slot="header" class="card-header">
                <span>App版本管理</span>
            </div>
            <div class="table-container">
                <!-- 操作按钮 -->
                <div class="toolbar">
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="small"
                        @click="handleAdd"
                    >
                        新增
                    </el-button>
                </div>

                <!-- 表格 -->
                <el-table
                    v-loading="loading"
                    :data="appVersionList"
                    border
                    fit
                    highlight-current-row
                    style="width: 100%"
                    :max-height="tableHeight"
                >
                    <el-table-column
                        label="序号"
                        align="center"
                        width="80"
                        type="index"
                    >
                        <template slot-scope="scope">
                            <span>{{
                                (queryParams.pageNum - 1) *
                                    queryParams.pageSize +
                                scope.$index +
                                1
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="版本号"
                        align="center"
                        prop="version"
                        min-width="120"
                        :show-overflow-tooltip="true"
                    />

                    <el-table-column
                        label="更新内容"
                        align="center"
                        prop="updateContent"
                        min-width="300"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="更新时间"
                        align="center"
                        prop="updateTime"
                        width="180"
                    >
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.updateTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        class-name="small-padding fixed-width"
                        width="180"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                            >
                                修改
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />
            </div>
        </el-card>

        <!-- 新增/编辑对话框 -->
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="600px"
            @close="handleDialogClose"
        >
            <el-form
                ref="appVersionForm"
                :model="formData"
                :rules="formRules"
                label-width="100px"
            >
                <el-form-item label="版本号" prop="version">
                    <el-input
                        maxlength="20"
                        v-model="formData.version"
                        placeholder="请输入版本号，如：1.0.0"
                    />
                </el-form-item>

                <el-form-item label="更新内容" prop="updateContent">
                    <el-input
                        type="textarea"
                        maxlength="500"
                        show-word-limit
                        placeholder="请输入更新内容"
                        v-model="formData.updateContent"
                        :autosize="{ minRows: 4, maxRows: 8 }"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listAppVersion,
    getAppVersion,
    addAppVersion,
    updateAppVersion,
    delAppVersion,
} from '@/api/system/appManage'
import Pagination from '@/components/Pagination'

/**
 * App版本管理组件
 * 业务背景：用于管理移动端App的版本信息，记录每次更新的内容和版本号，支持Android和iOS平台的自动更新
 * 设计决策：采用简单的列表+表单模式，不依赖封装的TableModel组件，保持代码简洁
 */
export default {
    name: 'AppManage',
    components: {
        Pagination,
    },
    data() {
        return {
            // 加载状态
            loading: false,
            // 表格数据
            appVersionList: [],
            // 总数
            total: 0,
            // 表格高度
            tableHeight: 600,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 对话框显示状态
            dialogVisible: false,
            // 对话框标题
            dialogTitle: '新增版本',
            // 是否为新增模式
            isAdd: true,
            // 表单数据
            formData: {
                id: null,
                version: '',
                platform: '',
                updateContent: '',
            },
            // 表单校验规则
            formRules: {
                version: [
                    {
                        required: true,
                        message: '请输入版本号',
                        trigger: 'blur',
                    },
                ],
                platform: [
                    {
                        required: true,
                        message: '请选择平台类型',
                        trigger: 'change',
                    },
                ],
                updateContent: [
                    {
                        required: true,
                        message: '请输入更新内容',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    created() {
        this.getList()
    },
    methods: {
        /**
         * 获取列表数据
         * 业务背景：加载App版本列表，支持分页查询
         */
        getList() {
            this.loading = true
            listAppVersion(this.queryParams)
                .then((res) => {
                    if (res.code === 200) {
                        this.appVersionList = res.rows || []
                        this.total = res.total || 0
                    }
                })
                .catch(() => {})
                .finally(() => {
                    this.loading = false
                })
        },
        /**
         * 新增版本
         * 业务背景：打开新增对话框，初始化表单数据
         */
        handleAdd() {
            this.isAdd = true
            this.dialogTitle = '新增版本'
            this.dialogVisible = true
            this.resetForm()
        },
        /**
         * 修改版本
         * 业务背景：打开编辑对话框，加载当前版本数据
         * @param {Object} row - 当前行数据
         */
        handleUpdate(row) {
            this.isAdd = false
            this.dialogTitle = '修改版本'
            this.dialogVisible = true
            getAppVersion(row.id)
                .then((res) => {
                    if (res.code === 200) {
                        this.formData = {
                            id: res.data.id,
                            version: res.data.version,
                            platform: res.data.platform,
                            updateContent: res.data.updateContent,
                        }
                    }
                })
                .catch(() => {})
        },
        /**
         * 删除版本
         * 业务背景：删除指定的App版本记录
         * @param {Object} row - 当前行数据
         */
        handleDelete(row) {
            this.$modal
                .confirm('确定要删除该版本记录吗？')
                .then(() => {
                    delAppVersion(row.id)
                        .then((res) => {
                            if (res.code === 200) {
                                this.$modal.msgSuccess('删除成功')
                                this.getList()
                            }
                        })
                        .catch(() => {})
                })
                .catch(() => {})
        },
        /**
         * 提交表单
         * 业务背景：保存新增或修改的版本信息
         */
        handleSubmit() {
            this.$refs.appVersionForm.validate((valid) => {
                if (valid) {
                    const api = this.isAdd ? addAppVersion : updateAppVersion
                    api(this.formData)
                        .then((res) => {
                            if (res.code === 200) {
                                this.$modal.msgSuccess(
                                    this.isAdd ? '新增成功' : '修改成功',
                                )
                                this.dialogVisible = false
                                this.getList()
                            }
                        })
                        .catch(() => {})
                }
            })
        },
        /**
         * 重置表单
         * 业务背景：清空表单数据，用于新增或关闭对话框时
         */
        resetForm() {
            this.formData = {
                id: null,
                version: '',
                platform: '',
                updateContent: '',
            }
            if (this.$refs.appVersionForm) {
                this.$refs.appVersionForm.resetFields()
            }
        },
        /**
         * 对话框关闭事件
         * 业务背景：关闭对话框时重置表单，避免数据残留
         */
        handleDialogClose() {
            this.resetForm()
        },
    },
}
</script>

<style scoped lang="scss">
.app-container {
    padding: 20px;
}

.table-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;

    ::v-deep .el-card__body {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 20px;
        min-height: 0;
    }

    .card-header {
        font-weight: 600;
        font-size: 16px;
    }
}

.table-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
}

.toolbar {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-footer {
    text-align: right;
}
</style>
