<template>
    <div>
        <el-row>
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true">
                    <el-button type="primary" @click="getDataList" icon="el-icon-search">查询</el-button>
                    <el-button type="success" @click="showAddDialog" icon="el-icon-document">新增</el-button>
                </el-form>
            </el-col>
        </el-row>
        <el-table :data="tableList"
                  tooltip-effect="dark"
                  style="border-radius: 10px 10px 0px 0px;line-height: 25px"
                  height="600px"
                  :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
                  border>
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-form label-position="left" label-width="80px" class="demo-table-expand" :inline="true">
                        <el-form-item label="创建时间" style="margin-left: 20px">
                            <span>{{ scope.row.create_time }}</span>
                        </el-form-item>
                        <el-form-item label="更新时间" style="margin-left: -250px">
                            <span>{{ scope.row.update_time }}</span>
                        </el-form-item>
                        <el-form-item label="创建人" style="margin-left: 20px">
                            <span>{{ scope.row.create_user }}</span>
                        </el-form-item>
                        <el-form-item label="接口描述" style="margin-left: -250px">
                            <span>{{ scope.row.perm_des }}</span>
                        </el-form-item>
                        <el-form-item label="路由ID" style="margin-left: 20px">
                            <span>{{ scope.row.permission_id }}</span>
                        </el-form-item>
                        <el-form-item label="路由地址" style="margin-left: -250px">
                            <span>{{ scope.row.path }}</span>
                        </el-form-item>
                        <el-form-item label="路由名称" style="margin-left: 20px">
                            <span>{{ scope.row.interface_name }}</span>
                        </el-form-item>
                        <el-form-item label="服务名称" style="margin-left: -250px">
                            <span>{{ scope.row.service_name }}</span>
                        </el-form-item>
                        <el-form-item label="列条件" style="margin-left: 20px">
                            <span>{{ scope.row.cols_list }}</span>
                        </el-form-item>
                        <el-form-item label="服务描述" style="margin-left: -250px">
                            <span>{{ scope.row.service_name_des }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <!-- 表格列配置 -->
            <el-table-column prop="data_perm_id" label="ID" fixed="left"></el-table-column>
            <el-table-column prop="perm_name" label="名称" width="200px"></el-table-column>
            <el-table-column prop="perm_sort" label="排序" width="50px"></el-table-column>
            <el-table-column prop="row_condition" label="行条件"></el-table-column>
            <el-table-column prop="row_condition_property" label="属性名"></el-table-column>
            <el-table-column prop="cols_list" label="列条件" show-overflow-tooltip></el-table-column>
            <el-table-column prop="perm_keyword" label="关键字"></el-table-column>
            <el-table-column prop="perm_type" label="权限类别"></el-table-column>
            <el-table-column prop="perm_status" label="禁用状态">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="!scope.row.perm_status">正常</el-tag>
                    <el-tag type="danger" v-else>禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.data_perm_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
                :current-page="form.pageNum"
                :page-sizes="[10, 50, 100, 500]"
                :page-size="form.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!-- 新增/编辑对话框 -->
        <el-dialog :title="dialogMap[dialogStatus]" :visible.sync="dialogVisible" width="90%">
            <el-form ref="dataForm" :model="formData" label-width="100px" :inline="true">
<!--                <div>-->
<!--                    &lt;!&ndash; 其他内容 &ndash;&gt;-->
<!--                    <pre>{{ formData }}</pre>-->
<!--                    &lt;!&ndash; 其他内容 &ndash;&gt;-->
<!--                </div>-->
                <el-row>
                    <el-col :span="6" v-for="(item, index) in dynamicFormItems" :key="index">
                        <!-- 根据表格字段动态生成表单项 -->
                        <el-form-item  label=" " :prop="item.prop">
                            <!-- 根据不同的数据类型渲染不同的输入组件 -->
                            <template v-if="item.type === 'text'">
                                <el-input v-model="formData[item.prop]" :placeholder="item.placeholder" :disabled="item.disabled">
                                    <template slot="prepend">{{item.label}}</template>
                                </el-input>
                            </template>
                            <template v-else-if="item.type === 'textarea'">
                                <div class="my-text-area">
                                    <div class="el-input-group__prepend prepand">{{item.label}}</div>
                                    <el-input type="textarea"
                                              v-model="formData[item.prop]"
                                              autosize
                                              style="float: left;width:calc(100% - 110px)">
                                    </el-input>
                                </div>
                            </template>
                            <template v-else-if="item.type === 'select'">
                                <div class="my-text-area">
                                    <div class="el-input-group__prepend prepand">{{item.label}}</div>
                                    <el-select v-model="formData[item.prop]">
                                        <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
                                    </el-select>
                                </div>

                            </template>
                            <!-- 其他类型的输入组件可以根据需要添加 -->
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveData">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getList, addDataPerm, deleteDataPerm, updateDataPerm } from '@/api/user/data_perm_api.js'
    import {loginedUserInfo} from "@/api/user.js";
    import jsutil from "@/common/js/util";
    export default {
        data() {
            return {
                tableList: [],
                total: 0,
                form: {
                    pageNum: 1,
                    pageSize: 10
                },
                dialogTitle: '',
                currentUserInfo:{},
                dialogVisible: false,
                formData: {},
                dialogMap: {
                    update: '编辑',
                    create: '新增',
                    find: '查看',
                },
                dialogStatus: 'create',
                dynamicFormItems: [
                    // 直接映射到表单项的字段,todo:增加区域界线,并用横线进行区域录入区分
                    { label: 'ID', prop: 'data_perm_id', type: 'text',placeholder:'' ,disabled:true},
                    { label: '权限名称', prop: 'perm_name', type: 'text',placeholder:'如:用户列表数据权限' },
                    { label: '排序', prop: 'perm_sort', type: 'text' ,placeholder:'如:1'},
                    { label: '行条件', prop: 'row_condition', type: 'text',placeholder:'如:username' },
                    { label: '属性名', prop: 'row_condition_property', type: 'text' ,placeholder:'如:username'},
                    { label: '列条件', prop: 'cols_list', type: 'text' ,placeholder:'如:[username,age,tel]为json格式数组'},
                    { label: '关键字', prop: 'perm_keyword', type: 'text' ,placeholder:'如:用户'},
                    { label: '权限类别', prop: 'perm_type', type: 'text' ,placeholder:''},
                    { label: '路由ID', prop: 'permission_id', type: 'text' ,placeholder:'如: 35'},
                    { label: '路由地址', prop: 'path', type: 'text' ,placeholder:'如:/user/list'},
                    { label: '路由名称', prop: 'interface_name', type: 'text' ,placeholder:'如:用户列表接口'},
                    { label: '服务名称', prop: 'service_name', type: 'text' ,placeholder:'如:user-center'},
                    { label: '服务描述', prop: 'service_name_des', type: 'text' ,placeholder:'如:用户管理服务'},
                    // 需要特殊处理的字段
                    {
                        label: '禁用状态',
                        prop: 'perm_status',
                        type: 'select',
                        placeholder: '请选择状态',
                        options: [
                            { value: false, label: '正常' },
                            { value: true, label: '禁用' }
                        ]
                    },
                    { label: '创建人', prop: 'create_user', type: 'text' ,placeholder: '',disabled:true},
                    { label: '权限描述', prop: 'perm_des', type: 'textarea' }
                    // 其他特殊处理的字段可以在这里添加
                ]
            }
        },
        mounted() {
            this.getDataList();
            this.getCurrentUserInfo();
        },
        methods: {
            getCurrentUserInfo(){
                let userinfo = loginedUserInfo();
                if (!jsutil.checkNull(userinfo) && !jsutil.checkNull(userinfo.username)){
                    this.$message.error("获取用户信息出错")
                }else{
                    this.currentUserInfo = userinfo
                }
            },
            getDataList() {
                getList({
                    pageNum: this.form.pageNum,
                    pageSize: this.form.pageSize
                }).then(res => {
                    this.$message.success('获取列表成功')
                    this.tableList = res.list
                    this.total = res.total
                }).catch(error => {
                    this.$message.error(error)
                })
            },
            handleSizeChange(size) {
                this.form.pageSize = size
                this.getDataList()
            },
            handleCurrentChange(page) {
                this.form.pageNum = page
                this.getDataList()
            },
            showAddDialog() {
                this.dialogStatus= 'create'
                this.formData = {}
                this.formData.create_user = this.currentUserInfo.username
                this.dialogVisible = true
            },
            handleEdit(row) {
                this.dialogStatus= 'update'
                this.formData = { ...row }
                this.dialogVisible = true
            },
            saveData() {
                this.$refs.dataForm.validate(valid => {
                    if (valid) {
                        if (this.formData.data_perm_id) {
                            // 编辑操作
                            updateDataPerm(this.formData.data_perm_id, this.formData)
                                .then(() => {
                                    this.$message.success('编辑成功')
                                    this.dialogVisible = false
                                    this.getDataList()
                                })
                                .catch(error => {
                                    this.$message.error(error)
                                })
                        } else {
                            // 新增操作
                            addDataPerm(this.formData)
                                .then(() => {
                                    this.$message.success('新增成功')
                                    this.dialogVisible = false
                                    this.getDataList()
                                })
                                .catch(error => {
                                    this.$message.error(error)
                                })
                        }
                    }
                })
            },
            handleDelete(id) {
                this.$confirm('确认删除该数据权限吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteDataPerm(id)
                        .then(() => {
                            this.$message.success('删除成功')
                            this.getDataList()
                        })
                        .catch(error => {
                            this.$message.error(error)
                        })
                }).catch(() => {
                    this.$message.info('已取消删除')
                })
            }
        }
    }
</script>

<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .my-text-area .el-textarea__inner{
        min-height: 28px;
        height: 28px;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
</style>

<style scoped>
    .my-text-area .prepand{
        float: left;
        width:89px;
        height: 28px;
        font-size: 12px;
        line-height: 28px;
    }
</style>