<template>
    <div>
        <el-card>


            <el-table v-loading="loading" :data="list" style="width: 100%">
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column label="参数名" prop="paramName" width="200"></el-table-column>
                <el-table-column label="参数键" prop="paramKey" width="200"></el-table-column>
                <el-table-column label="参数值" prop="paramValue" width="300"></el-table-column>
                <el-table-column label="参数说明" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.paramExplain }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.native="handleForm(scope.$index, scope.row)"
                        >设置
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

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

            <!--表单-->
            <el-dialog
                :title="formMap[formName]"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :visible.sync="formVisible"
                :before-close="hideForm"
                width="85%"
                top="5vh"
            >
                <el-form :model="formData" :rules="formRules" ref="dataForm">
                    <el-form-item label="参数名" prop="paramName">
                        <el-input v-model="formData.paramName" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="参数键" prop="paramKey">
                        <el-input v-model="formData.paramKey" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="参数值" prop="paramValue">
                        <el-input
                            type=""
                            v-model="formData.paramValue"
                            auto-complete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="参数说明">
                        <el-input type="textarea" v-model="formData.paramExplain" :disabled="true" rows=6></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click.native="hideForm">取消</el-button>
                    <el-button
                        type="primary"
                        @click.native="formSubmit()"
                        :loading="formLoading"
                    >提交
                    </el-button
                    >
                </div>
            </el-dialog>

        </el-card>
    </div>
</template>

<script>
import {
    systemParamConfigList,
    systemParamConfigSave
} from "../../../api/param/systemParamConfig";

const formJson = {
    id: "",
    parentId: "",
    paramName: "",
    paramKey: "",
    paramValue: "",
    paramStatus: 1,
    paramType: 1,
    paramExplain: "",
    force: false,
};
export default {
    data() {
        return {
            query: {
                paramName: "",
                paramStatus: 1,
                page: 1,
                limit: 20
            },
            list: [],
            total: 0,
            loading: true,
            index: null,
            formName: null,
            formMap: {
                add: "新增",
                update: "设置"
            },
            formLoading: false,
            formVisible: false,
            formData: formJson,
            formRules: {
                paramValue: [
                    {required: true, message: "请输入参数值", trigger: "blur"}
                ]
                // ,
                // paramStatus: [
                //     {required: true, message: "请选择参数状态", trigger: "change"}
                // ]
            },
            deleteLoading: false
        };
    },
    methods: {
        onReset() {
            this.$router.push({
                path: ""
            });
            this.query = {
                paramName: "",
                paramStatus: 1,
                page: 1,
                limit: 20
            };
            this.getList();
        },
        onSubmit() {
            this.getList();
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        },
        getList() {
            this.loading = true;
            systemParamConfigList(this.query)
                .then(response => {
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                    console.log('------------')
                    console.log(response)
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        // 刷新表单
        resetForm() {
            if (this.$refs["dataForm"]) {
                // 清空验证信息表单
                this.$refs["dataForm"].clearValidate();
                // 刷新表单
                this.$refs["dataForm"].resetFields();
                this.getList();
            }
        },
        // 隐藏表单
        hideForm() {
            // 更改值
            this.formVisible = !this.formVisible;
            return true;
        },
        // 显示表单
        handleForm(index, row) {
            this.formVisible = true;
            this.formData = JSON.parse(JSON.stringify(formJson));
            if (row !== null) {
                this.formData = Object.assign({}, row);
            }
            this.formName = "add";
            if (index !== null) {
                this.index = index;
                this.formName = "update";
            }
        },
        formSubmit() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    this.formLoading = true;
                    let data = Object.assign({}, this.formData);
                    console.log('------2------')
                    data.paramValue = data.paramValue.trim();
                    systemParamConfigSave(data, this.formName)
                        .then(response => {
                            console.log(response)
                            this.formData.force = false;
                            this.formLoading = false;
                            if (response.code == 20000) {
                                this.$message.success("操作成功");
                                this.formVisible = false;
                                if (this.formName === "add") {
                                    // 向头部添加数据
                                    if (response.data && response.data.id) {
                                        data.id = response.data.id;
                                        this.list.unshift(data);
                                    }
                                } else {
                                    this.list.splice(this.index, 1, data);
                                }
                                // 刷新表单
                                this.resetForm();
                                this.getList();
                            } else {
                                if (response.code == 510) {
                                    this.formData.force = true;
                                    this.$confirm(response.message, "提示", {
                                        confirmButtonText: "确定",
                                        cancelButtonText: "取消",
                                        type: "warning",
                                    })
                                        .then(() => {
                                            this.formSubmit();
                                        })
                                        .catch(() => {
                                        });
                                } else if (response.code == 530) {
                                    this.formData.force = true;
                                    this.$confirm(response.message, "提示", {
                                        confirmButtonText: "确定",
                                        cancelButtonText: "取消",
                                        type: "warning",
                                    })
                                        .then(() => {
                                            this.formSubmit();
                                        })
                                        .catch(() => {
                                        });
                                } else
                                    this.$message.error(response.message);
                                return false;
                            }
                        })
                        .catch(() => {
                            this.formLoading = false;
                        });
                }
            });
        },
    },
    filters: {
        paramStatusFilterType(paramStatus) {
            const paramStatusMap = {
                0: "gray",
                1: "success"
            };
            return paramStatusMap[paramStatus];
        },
        paramStatusFilterName(paramStatus) {
            const paramStatusMap = {
                0: "禁用",
                1: "正常"
            };
            return paramStatusMap[paramStatus];
        }
    },
    mounted() {
    },
    created() {
        // 加载表格数据
        this.getList();
    }
};
</script>

<style type="text/scss" lang="scss">
</style>
