<template>
    <div>
        <div class="headerbox">
            <el-form size="small" :inline="true" label-width="7rem">
                <el-row style="margin-top: 1rem;">
                    <el-col :span="6">
                        <el-form-item label="关键要素" style="width: 100%;">
                            <el-input placeholder="请输入关键要素" clearable style="width: 14rem;"
                                v-model="searchForm.keyElement" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="具体指标" style="width: 100%;">
                            <el-input placeholder="请输入具体指标" clearable style="width: 14rem;"
                                v-model="searchForm.specificIndicator" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item style="margin-left: 2.5rem;">
                            <el-button type="primary" icon="el-icon-search" size="mini"
                                @click="fetchElements">查询</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetSearchForm">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="tablebox" style="margin: .5rem;">
            <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true; resetForm()">新增要素</el-button>
            <!-- 渲染所有要素 -->
            <div v-for="(element, index) in tableData" :key="index" class="tablebox">
                <div class="boxheader">
                    <div class="headerone">
                        <!-- 关键要素/重要要素 -->
                        <div>{{ element.type === 1 ? '关键要素' : '重要要素' }}：</div>
                        <!-- 关键要素/重要要素的名称 -->
                        <div>{{ element.name }}</div>
                    </div>
                    <!-- 对要素的类型和名称进行编辑 -->
                    <div class="headertwo">
                        <el-button type="primary" icon="el-icon-edit" size="mini"
                            @click="handleUpdate(element)">编辑要素</el-button>
                        <el-button type="primary" icon="el-icon-edit"
                            @click="showAddIndicatorDialog(element)">新增指标</el-button>
                    </div>
                </div>
                <!-- 每个要素对应的指标和详细要求的展示，这里编辑和删除只是删除这个指标（不删除要素） -->
                <el-table :data="element.indicators" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="180"></el-table-column>
                    <el-table-column prop="jtzb" label="具体指标" width="180"></el-table-column>
                    <el-table-column prop="xxyq" label="详细要求" width="950"></el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="handleUpdateIndicator(scope.row)"
                                v-hasPermi="['system:post:edit']">编辑指标</el-button>
                            <el-button size="mini" type="text" @click="handleDelete(scope.row)"
                                style="color: #F25353;" v-hasPermi="['system:post:remove']">删除指标</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- 这是新增要素/编辑要素弹窗 -->
        <el-dialog :title="form.id ? '编辑要素' : '新增要素'" :visible.sync="dialogVisible" width="30%">
            <el-form :model="form" label-width="80px">
                <el-form-item label="类型">
                    <el-select v-model="form.type" placeholder="请选择类型">
                        <el-option v-for="dict in dict.type.yslx" :key="dict.value" :label="dict.label"
                            :value="parseInt(dict.value)"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddElement">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 这是新增指标/编辑指标弹窗 -->
        <el-dialog :title="indicatorForm.id ? '编辑指标' : '新增指标'" :visible.sync="indicatorDialogVisible" width="30%">
            <el-form :model="indicatorForm" label-width="80px">
                <el-form-item label="具体指标">
                    <el-input v-model="indicatorForm.jtzb" placeholder="请输入具体指标"></el-input>
                </el-form-item>
                <el-form-item label="详细内容">
                    <el-input v-model="indicatorForm.xxyq" placeholder="请输入详细要求"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="indicatorDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddIndicator">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addElement, getAllElements } from '@/api/ManageApi/index'; 

export default {
    dicts: ['yslx'],
    data() {
        return {
            searchForm: {
                keyElement: '',
                specificIndicator: ''
            },
            tableData: [], // 表格数据
            dialogVisible: false, // 控制新增/编辑要素弹窗的显示
            indicatorDialogVisible: false, // 控制新增/编辑指标弹窗的显示
            form: {
                id: null,
                type: '',
                name: ''
            },
            indicatorForm: {
                id: null,
                jtzb: '',
                xxyq: '',
                elementId: null 
            }
        };
    },
    methods: {
        // 查询要素
        fetchElements() {
            getAllElements(this.searchForm).then(response => {
                this.tableData = response.data;
            });
        },
        // 重置查询表单
        resetSearchForm() {
            this.searchForm = {
                keyElement: '',
                specificIndicator: ''
            };
            this.fetchElements();
        },
        // 重置表单
        resetForm() {
            this.form = {
                id: null,
                type: '',
                name: ''
            };
        },
        // 新增或编辑要素
        handleAddElement() {
            addElement(this.form).then(response => {
                this.$message.success('操作成功');
                this.dialogVisible = false;
                this.fetchElements();
            });
        },
        // 编辑要素
        handleUpdate(element) {
            this.form = { ...element };
            this.dialogVisible = true;
        },
        // 显示新增指标弹窗
        showAddIndicatorDialog(element) {
            this.indicatorForm.elementId = element.id;
            this.indicatorDialogVisible = true;
        },
        // 新增或编辑指标
        handleAddIndicator() {
            // 这里调用新增指标的接口
            this.$message.success('操作成功');
            this.indicatorDialogVisible = false;
            this.fetchElements();
        },
        // 编辑指标
        handleUpdateIndicator(indicator) {
            this.indicatorForm = { ...indicator };
            this.indicatorDialogVisible = true;
        },
        // 删除指标
        handleDelete(indicator) {
            this.$confirm('确定删除该指标吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 这里调用删除指标的接口
                this.$message.success('删除成功');
                this.fetchElements();
            });
        }
    },
    mounted() {
        this.fetchElements();
    }
};
</script>

<style scoped>
.headerbox {
    background-color: #fff;
    border-radius: 0.5rem;
    margin: 0.5rem;
    border: 1px solid #eee;
}

.tablebox {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0.5rem;
    border: 1px solid #eee;
}

.boxheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
    background-color: #F5F7FE;
}

.headerone {
    color: #000000;
    font-weight: bold;
    display: flex;
}

.headertwo {
    display: flex;
}
</style>