<template>
    <div class="pd10">
        <el-button
            size="small"
            icon="el-icon-plus"
            type="primary"
            style="float: right; margin-bottom: 10px"
            @click="addtype"
        >
            新增类型
        </el-button>
        <el-table
            stripe
            class="xshou"
            :data="tableData"
            row-key="id"
            id="rebateSetTable"
            border
            :height="tableheight + 'px'"
            header-cell-class-name="table_header"
            highlight-current-row
            v-loading="loading"
            element-loading-text="数据加载中"
            :default-expand-all="false"
        >
            <el-table-column align="center" prop="type" label="系统类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 0">省级系统</span>
                    <span v-if="scope.row.type == 1">企业系统</span>
                    <span v-if="scope.row.type == 2">数据中心</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="dataReport" label="数据上报"></el-table-column>
            <el-table-column
                align="center"
                prop="logSize"
                min-width="140"
                label="审计日志大小(M)"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
                align="center"
                prop="logTime"
                label="审计日志存储时间(月)"
                min-width="120"
            ></el-table-column>
            <el-table-column align="center" prop="state" label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.state == 1">已激活</el-tag>
                    <el-tag v-if="scope.row.state == 0">未激活</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="createBy" label="创建用户" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.createBy == null">/</span>
                    <span v-if="scope.row.createBy !== null">{{ scope.row.createBy }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间" min-width="120"></el-table-column>
            <el-table-column align="center" prop="updateBy" label="更新用户" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.updateBy == null">/</span>
                    <span v-if="scope.row.updateBy !== null">{{ scope.row.updateBy }}</span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="updateTime"
                label="更新时间"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column align="center" label="操作" min-width="180">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.state == 0"
                        type="primary"
                        size="mini"
                        icon="el-icon-share"
                        @click="active(scope.row)"
                    >
                        激活
                    </el-button>
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="deletedata(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            :close-on-click-modal="false"
            :title="t"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <el-form ref="form" :model="form" :rules="rules2" label-width="140px">
                <el-form-item label="系统类型:" prop="type">
                    <el-select v-model="form.type" placeholder="请选择系统类型" style="width: 100%">
                        <el-option
                            v-for="item in typeoption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据上报:" prop="dataReport" class="top">
                    <el-input style="width: 100%" v-model="form.dataReport" placeholder="请输入数据上报"></el-input>
                </el-form-item>
                <el-form-item label="审计日志大小(M):" prop="logSize" class="top">
                    <el-input-number
                        style="width: 100%"
                        type="number"
                        v-model="form.logSize"
                        :min="1024"
                        :max="20480"
                        placeholder="请输入审计日志大小"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="日志储存时间(月):" prop="logTime" class="top">
                    <el-input-number
                        style="width: 100%"
                        type="number"
                        v-model="form.logTime"
                        :min="1"
                        :max="6"
                        placeholder="请输入日志储存时间不能大于6个月"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="激活状态:" class="top" prop="state">
                    <el-select
                        v-model="form.state"
                        :disabled="flagtyoe == 'add' ? false : true"
                        placeholder="请选择"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in stateoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getheight } from '@/assets/commjs/common'
import api from '@/api/admin/sysconfig'
export default {
    name: 'sysmanage',
    data() {
        return {
            rules2: {
                type: [{ required: true, message: '系统类型不能为空', trigger: 'blur' }],
                dataReport: [{ required: true, message: '数据上报不能为空', trigger: 'blur' }],
                logSize: [{ required: true, message: '审计日志大小不能为空', trigger: 'blur' }],
                logTime: [{ required: true, message: '日志储存时间不能为空', trigger: 'blur' }]
                // state:[{ required: true, message: "状态不能为空", trigger: "blur" }],
            },
            form: {
                type: 0,
                logSize: 0,
                logTime: 0,
                dataReport: '',
                state: 0
            },
            t: '',
            tableheight: undefined,
            dialogVisible: false,
            loading: false,
            tableData: [],
            stateoptions: [
                {
                    value: 0,
                    label: '未激活'
                },
                {
                    value: 1,
                    label: '已激活'
                }
            ],
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                maytype: [{ required: true, message: '请选择地图类型', trigger: 'change' }],
                centerlng: [
                    {
                        type: 'date',
                        required: true,
                        message: '请输入中心点经度',
                        trigger: 'change'
                    }
                ],
                centerlat: [
                    {
                        type: 'date',
                        required: true,
                        message: '请输入中心点纬度',
                        trigger: 'change'
                    }
                ],
                minindex: [
                    {
                        type: 'array',
                        required: true,
                        message: '请填写当前最小缩放层级',
                        trigger: 'change'
                    }
                ],
                maxindex: [
                    {
                        required: true,
                        message: '请填写当前最大缩放层级',
                        trigger: 'change'
                    }
                ],
                nowurl: [{ required: true, message: '请填写瓦片访问地址', trigger: 'change' }],
                nowindex: [{ required: true, message: '请填写当前缩放层级', trigger: 'blur' }]
            },
            dataForm: {
                name: '',
                unitId: '',
                teamCode: '',
                guid: '',
                scaleName: '',
                totalCapacity: ''
            },
            typeoption: [
                {
                    label: '省级系统',
                    value: 0
                },
                {
                    label: '企业系统',
                    value: 1
                },
                {
                    label: '数据中心',
                    value: 2
                }
            ],
            unitId: [],
            flagtyoe: ''
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.queryData()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.tableheight = window.sessionStorage.getItem('appheight') - 55
        },
        //获取系统类型列表
        queryData() {
            this.loading = true
            api.getSysconfig().then(res => {
                if (res.code == 'A0000') {
                    this.tableData = res.data
                    this.loading = false
                } else if ((res.data = null)) {
                    this.loading = false
                }
            })
        },
        //新增
        addtype() {
            this.form = {}
            this.dialogVisible = true
            this.flagtyoe = 'add'
            // this.form.type = this.type
            // this.form.state = this.state
            this.t = '新增系统类型'
        },
        handleClose() {
            this.dialogVisible = false
            this.resetForm()
        },
        // 表单重置
        resetForm() {
            this.form = {}
            if (this.$refs['form']) {
                this.$refs['form'].resetFields()
            }
        },
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.flagtyoe == 'add') {
                        api.getaddSysconfig(this.form).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '新增系统类型成功',
                                    type: 'success'
                                })
                                this.dialogVisible = false
                                this.queryData()
                            }
                        })
                    } else if (this.flagtyoe == 'edit') {
                        api.getupSysconfig(this.form).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '修改系统类型成功',
                                    type: 'success'
                                })
                                this.dialogVisible = false
                                this.queryData()
                            }
                        })
                    }
                }
            })
        },
        // resetForm(formName) {
        //   this.$refs[formName].resetFields();
        // },
        // 切换选项
        handleNodeClick(node) {
            this.unitId = []
            // console.log(node);
            this.$refs.selectTree1.blur()
            this.form.valueTitle = node.areaName
            this.form.defaultExpandedKey = []
            this.unitId.push(node.id)
        },
        //修改
        edit(row) {
            this.flagtyoe = 'edit'
            this.t = '修改系统类型'
            this.dialogVisible = true
            this.form.id = row.id
            this.form.type = row.type
            this.form.logSize = row.logSize
            this.form.logTime = row.logTime
            this.form.dataReport = row.dataReport
            this.form.state = row.state
        },
        //删除
        deletedata(row) {
            let data = {
                id: row.id
            }
            this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    api.getdelSysconfig(data).then(res => {
                        if (res.code == 'A0000') {
                            this.$message({
                                message: '删除系统类型成功',
                                type: 'success'
                            })
                            this.dialogVisible = false
                            this.queryData()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },

        //激活
        active(row) {
            let data = {
                id: row.id,
                type: row.type,
                logSize: row.logSize,
                logTime: row.logTime,
                dataReport: row.dataReport,
                state: 1
            }
            api.getupSysconfig(data).then(res => {
                if (res.code == 'A0000') {
                    this.$message({
                        message: '激活成功',
                        type: 'success'
                    })
                    //this.dialogVisible = false;
                    this.queryData()
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
</style>
