<template>
    <div>
        <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
            <el-row>
                <el-form-item class="query-form-item">
                    <el-input
                        style="width: 400px"
                        v-model="filterQuery.name"
                        placeholder="部门名称"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button-group>
                        <el-button
                            type="primary"
                            icon="el-icon-refresh"
                            @click="onReset"
                        ></el-button>
                        <el-button type="primary" icon="search" @click="onSubmit"
                        >查询
                        </el-button
                        >

                        <el-button type="primary" icon="search" @click="addDeptDialog"
                        >添加
                        </el-button
                        >
                    </el-button-group>
                </el-form-item>
            </el-row>
        </el-form>

        <el-table v-loading="loading" :data="list" style="width: 100%">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column
                label="部门编码"
                prop="code"
                width="230"
            ></el-table-column>
            <el-table-column
                label="部门名称"
                prop="name"
                width="230"
            ></el-table-column>

            <el-table-column label="状态" prop="flage" width="120">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.flag | statusFilterType">{{
                            scope.row.flag | statusFilterName
                        }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="备注" prop="remark" width="120">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="120">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="updateDeptDialog(scope.row)"
                    >编辑
                    </el-button
                    >

                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="deleteDialog(scope.row)"
                    >删除
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="formMap[formName]" :visible.sync="formVisible" width="60%">
            <el-form :model="formData" ref="dataForm">
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="部门名称" prop="name">
                                <el-input
                                    v-model="formData.name"
                                    style="width: 60%"
                                    size="small"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="text item">
                                <el-form-item label="备注" prop="remark">
                                    <el-input
                                        v-model="formData.remark"
                                        size="small"
                                        style="width: 60%"
                                    ></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                </el-row>


                <el-form-item label="状态：" prop="flag">
                    <el-radio-group v-model="formData.flag">
                        <el-radio :label="0">禁用</el-radio>
                        <el-radio :label="1">正常</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="cancelDialog" size="small">取消</el-button>
                <el-button type="primary" size="small" @click.native="formSubmit()"
                >提交
                </el-button
                >
            </div>
        </el-dialog>


        <el-pagination
            :page-size="filterQuery.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
            :current-page="filterQuery.page"
        ></el-pagination>
    </div>
</template>

<script>
import {filterDepts, addDept, updateDept, deleteDept} from "../../api/auth/authDept";

export default {
    data() {
        return {
            filterQuery: {
                companyName: "",
                checkType: "",
                page: 1,
                limit: 10,
            },
            total: 0,
            loading: false,
            formVisible: false,
            userflag: {
                0: "禁用",
                1: "正常",
                2: "未验证",
            },
            list: [],
            isTip: {
                0: "否",
                1: "是",
            },
            formData: {},
            formMap: {
                add: "新增",
                edit: "编辑",
            },
            formName: null,

        };
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                0: "gray",
                1: "success",
                2: "danger",
            };
            return statusMap[status];
        },
        statusFilterName(status) {
            const statusMap = {
                0: "禁用",
                1: "正常",
                2: "未验证",
            };
            return statusMap[status];
        },
    },
    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.filterQuery = {
                name: "",
                page: 1,
                limit: 10,
            };
            this.getList();
        },
        formSubmit() {

            if (this.$isBlank(this.formData.name)) {
                this.$message.error("部门名称不能为空！");
                return;
            }


            if (this.formName == "add") {

                addDept(this.formData)
                    .then((response) => {
                        this.loading = false;
                        this.cancelDialog();
                        this.getList();
                        if (response.code === 20000) {
                            this.$message({
                                type: "success",
                                message: "添加成功！",
                            });
                        } else {
                            this.$message.warning("添加失败!");
                        }
                    })
                    .catch(() => {
                        this.cancelDialog();
                        this.loading = false;
                    });


            } else if (this.formName == "edit") {
                updateDept(this.formData)
                    .then((response) => {
                        this.loading = false;
                        this.cancelDialog();
                        this.getList();
                        if (response.code === 20000) {
                            this.$message({
                                type: "success",
                                message: "更新成功！",
                            });
                        } else {
                            this.$message.warning("更新失败");
                        }
                    })
                    .catch(() => {
                        this.cancelDialog();
                        this.loading = false;
                    });
            }


        },
        onSubmit() {
            this.getList();
        },


        addDeptDialog() {
            this.formName = "add";
            this.formVisible = true;
            this.formData = {
                name: "",
                flag: 1,
                remark: "",
            };
        },


        updateDeptDialog(row) {
            this.formName = "edit";
            this.formVisible = true;
            this.formData = row;

        },
        getList() {
            this.loading = true;
            filterDepts(this.filterQuery)
                .then((response) => {
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        cancelDialog() {
            this.formVisible = false;
        },

        handleSizeChange(val) {
            this.filterQuery.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },

        closeCustomerDialog() {
            this.currentCustomer = null;
        },

        deleteDialog(row) {
            this.$confirm("是否删除该部门?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let tQuery = {
                        id: row.id,
                    };
                    deleteDept(tQuery).then(() => {

                        this.filterQuery = {
                            name: "",
                            page: 1,
                            limit: 10,
                        };
                        this.getList();
                    });
                })
                .catch(() => {
                });
        },

    },
    components: {},
    mounted() {
    },
    created() {
        this.getList();
    },
};
</script>
