<template>
    <div class="userManagement">
        <div class="form-header">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="租户名称">
                    <el-input v-model="formInline.user" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleData()">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="form-box">
            <el-table :data="tableData" height="350px" style="width: 100%" border>
                <el-table-column label="序号" type="index" width="80" align="center">
                </el-table-column>
                <el-table-column label="租户类型" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.tenantType == 1">企业</span>
                        <span v-else-if="scope.row.tenantType == 2">个人</span>
                    </template>
                </el-table-column>
                <el-table-column label="租户名称" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="id" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="284px" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" @click="handleXQ(scope.row.id)">详情</el-button>
                        <el-button size="mini" type="primary" @click="handleXG(scope.row.id)">修改</el-button>
                        <el-button size="mini" type="danger" @click="handleDE(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 第四步绑定自定义属性 -->
            <pagination :total="obj.total" @handleSize="handleSizeChange" @handleCurrent="handleCurrentChange">
            </pagination>
        </div>

        <!-- 弹出框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form ref="gridData" :model="gridData" :rules="rules">
                <el-form-item label="租户类型" :label-width="formLabelWidth" prop="tenantType">
                    <el-select v-model="gridData.tenantType" placeholder="请选择租户类型" style="width: 100%;"
                        :disabled="title == '租户信息详情'">
                        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="租户名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="gridData.name" autocomplete="off" :disabled="title == '租户信息详情'"></el-input>
                </el-form-item>
                <el-form-item label="主键id" :label-width="formLabelWidth" v-if="title == '租户信息详情'">
                    <el-input v-model="gridData.id" autocomplete="off" :disabled="title == '租户信息详情'"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click=handleAdd1(1) v-if="title == '新增租户'">确 定</el-button>
                <el-button type="primary" @click=handleAdd1(2) v-if="title == '编辑租户'">确 定</el-button>
            </div>


        </el-dialog>



    </div>



</template>
<script>
// 第一步引入组件
import pagination from "../pagination/pagination.vue";
import apiServe from "@/utils/api.js";

export default {
    // 第二步 注册组件
    components: {
        pagination,
    },
    data() {
        return {
            // 详情弹出框
            dialogFormVisible: false,
            // 详情数据tabledata
            gridData: {
                tenantType: "",
                name: "",
                id: "",

            },
            title: "",
            // 新增选项
            types: [{
                value: 1,
                label: '企业'
            }, {
                value: 2,
                label: '个人'
            }],
            XG: "",
            rules: {
                tenantType: [
                    { required: true, message: "请选择租户类型", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "请输入租户名称", trigger: "blur" },
                ],

            },
            tenantId: "",
            data: [],
            // 查询
            formInline: {
                shipname: "",
            },
            tableData: [],

            obj: {
                // 页码
                page: 1,
                // 每页多少条
                rows: 10,
                // 默认选中哪一页
                currentPage: 1,
                // 定义总条数
                total: null,
            },
            formLabelWidth: '120px'
        }
    },
    methods: {
        handleData() {
            let data = {
                pageNo: this.obj.page,
                pageSize: this.obj.rows,
                tenantld: 1,
            };
            apiServe.Tenant("get", data).then((res) => {
                console.log(res);
                // 将请求成功的数据赋值给表格
                if (res) {
                    this.data = res.data;
                    this.tableData = res.data.list;
                    this.obj.total = Number(res.data.total)
                    console.log(this.obj.total);

                }
            });
        },
        // 详情
        handleXQ(id) {
            this.title = "租户信息详情";
            this.dialogFormVisible = true;
            apiServe.TenantXQ("get", {
                id: id,
            }).then((res) => {
                console.log(res);
                // 将请求成功的数据赋值给表格
                if (res) {
                    console.log(res.data);
                    this.gridData = res.data;

                }
            })
        },
        // 新增
        handleAdd() {
            this.title = "新增租户";
            this.dialogFormVisible = true;
            // 清空验证并清空内容
            this.$nextTick(() => {
                this.$refs.gridData.resetFields();
            });

        },
        // 编辑
        handleXG(id) {
            this.XG = id
            this.title = "编辑租户";
            this.dialogFormVisible = true;
            apiServe.TenantXQ("get", {
                id: id,
            }).then((res) => {
                console.log(res);
                // 将请求成功的数据赋值给表格
                if (res) {
                    console.log(res.data);
                    this.gridData = res.data;

                }
            })

        },
        // 新增确定
        handleAdd1(val) {
            this.$refs.gridData.validate((valid) => {
                if (valid) {
                    if (val == 1) {
                        let data = {
                            name: this.gridData.name,
                            type: this.gridData.tenantType,
                        };
                        apiServe.TenantXZ("post", data).then((res) => {
                            console.log(res);
                        })
                        console.log(data);
                        this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                        this.handleData()
                        // 清空验证并清空内容
                        this.$nextTick(() => {
                            this.$refs.gridData.resetFields();
                        });
                    } else {
                        let data = {
                            name: this.gridData.name,
                            tenantType: this.gridData.tenantType,
                            tenantId: this.XG,
                        };
                        apiServe.TenantXG("put", data).then((res) => {
                            console.log(res);
                            this.handleData()
                        })
                        console.log(data);
                        this.$message({
                            message: '恭喜你，修改成功',
                            type: 'success'
                        });
                    }

                    this.dialogFormVisible = false;
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });

        },
        handleDE(ids) {
            // 如果传入的 ids 不是数组，转换为数组
            if (!Array.isArray(ids)) {
                ids = [ids];
            }
            this.$confirm(`此操作将永久删除选中的 ${ids.length} 个文件, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                apiServe.TenantDE("delete", ids).then((res) => {
                    if (res) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.handleData(); // 刷新数据
                    }
                }).catch((error) => {
                    this.$message({
                        type: 'error',
                        message: '删除失败: ' + (error.message || '未知错误')
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 分页开始
        handleSizeChange(val) {
            console.log(val, "接收");
            // 当我点击每页多少条的时候赋值并重新渲染页面
            this.obj.rows = val;
            this.handleData();
        },
        handleCurrentChange(val) {
            console.log(val, "接收");
            // 当我点击页码的时候将页码赋值给变量并重新渲染页面
            this.obj.page = val;
            this.handleData();
        },
        // 分页结束

    },
    mounted() {
        // 从本地读取数据
        this.tenantId = localStorage.getItem("tenantId")
        console.log(this.tenantId)
        this.handleData()
    }
}
</script>
<style lang="scss" scoped>
.userManagement::v-deep {
    .form-header {
        box-shadow: 0 0 5px #d0d0d0;
        border-radius: 5px;
        text-align: left;
        background-color: #fff;
        padding: 10px;

        .el-form-item {
            margin-bottom: 0;
        }
    }

    .form-box {
        margin-top: 10px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 0 0 5px #d0d0d0;
        border-radius: 5px;
        /* // calc():高度时100%-超出的部分 */
        height: calc(100vh - 235px);
    }

    .pagination {
        padding-top: 10px;
        text-align: center;
    }

    //

}
</style>