<template>
    <div class="pd10">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
                <el-button @click="handleAddClickAddType()" type="primary" icon="el-icon-plus">新增字典类型</el-button>
            </el-form-item>
            <el-form-item label="过滤筛选:">
                <el-input v-model="searchValue" placeholder="请输入名称或编码筛选"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="queryData()" type="primary" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="rest" type="primary" icon="el-icon-setting">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
            stripe
            :data="tableData"
            @header-click="sort"
            v-loading="loading"
            header-cell-class-name="table_header"
            highlight-current-row
            border
            :height="vh + 'px'"
        >
            <el-table-column min-width="60" align="center" sortable prop="sort" label="序号"></el-table-column>
            <el-table-column
                min-width="150"
                align="center"
                sortable
                prop="name"
                :show-overflow-tooltip="true"
                label="名称"
                column-key="date"
            ></el-table-column>
            <el-table-column min-width="180" align="center" sortable prop="code" label="编码"></el-table-column>
            <el-table-column min-width="100" align="center" prop="openLevel" label="开启等级">
                <template slot-scope="scope">
                    <span v-if="scope.row.openLevel === 0" type="primary" size="small">不开启</span>
                    <span v-if="scope.row.openLevel === 1" type="primary" size="small">开启</span>
                </template>
            </el-table-column>
            <el-table-column min-width="100" align="center" prop="openDescribe" label="开启算法">
                <template slot-scope="scope">
                    <span v-if="scope.row.openDescribe === 0" type="primary" size="small">不开启</span>
                    <span v-if="scope.row.openDescribe === 1" type="primary" size="small">开启</span>
                </template>
            </el-table-column>
            <el-table-column min-width="100" align="center" prop="state" label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state === 0" type="primary" size="small">删除</span>
                    <span v-if="scope.row.state === 1" type="primary" size="small">正常</span>
                </template>
            </el-table-column>
            <el-table-column
                min-width="150"
                align="center"
                prop="remark"
                label="字典描述"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
                min-width="150"
                align="center"
                prop="createTime"
                label="创建时间"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
                min-width="150"
                align="center"
                prop="updateTime"
                label="更新时间"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column align="center" label="操作" min-width="280">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-search" size="mini">
                        字典
                    </el-button>
                    <el-button @click="handleEditClick(scope.row)" type="primary" size="mini" icon="el-icon-edit">
                        编辑
                    </el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="danger" size="mini" icon="el-icon-delete">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            class="mt10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageData.pageNum"
            :page-sizes="[20, 25, 30, 50]"
            :page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
        ></el-pagination>
        <!--字典详情-->
        <el-dialog
            class="bangdinfg"
            :close-on-click-modal="false"
            :title="RowName + '详情信息'"
            :visible.sync="dialogTableVisible"
            style="padding: 0 0 0 0"
            width="77%"
        >
            <el-form :inline="true" :model="formdata" class="demo-form-inline">
                <el-form-item>
                    <el-button type="primary" @click="dataAdd" icon="el-icon-plus">新增</el-button>
                </el-form-item>
                <el-form-item label="过滤筛选:">
                    <el-input
                        style="width: 200px"
                        v-model="formdata.searchValuedata"
                        placeholder="请输入名称或编码进行筛选"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="querydatashu" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                stripe
                :data="gridData"
                @header-click="sortdata"
                v-loading="loading"
                highlight-current-row
                header-cell-class-name="table_header"
                border
                :height="vhh + 'px'"
            >
                <el-table-column
                    align="center"
                    sortable
                    prop="name"
                    label="名称"
                    column-key="date"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    align="center"
                    sortable
                    prop="code"
                    label="编码"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column align="center" sortable prop="sort" label="排序"></el-table-column>
                <el-table-column align="center" sortable prop="value" label="计算值"></el-table-column>

                <el-table-column align="center" v-if="row.openLevel === 1" prop="level" label="事件等级">
                    <template slot-scope="scope">
                        <span v-if="scope.row.level === 0" type="primary" size="small">普通</span>
                        <span v-if="scope.row.level === 1" type="primary" size="small">中等</span>
                        <span v-if="scope.row.level === 2" type="primary" size="small">严重</span>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="row.openDescribe == 1"
                    align="center"
                    prop="algoDescribe"
                    label="算法描述"
                ></el-table-column>
                <el-table-column align="center" prop="state" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state === 0" type="primary" size="small">删除</span>
                        <span v-if="scope.row.state === 1" type="primary" size="small">正常</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="EditClick(scope.row)" type="primary" size="mini" icon="el-icon-edit">
                            修改
                        </el-button>
                        <el-button @click="DeleteClick(scope.row)" type="danger" size="mini" icon="el-icon-delete">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="mt10"
                background
                @size-change="handleSizeChangedata"
                @current-change="handleCurrentChangedata"
                :current-page="pageData1.pageNum"
                :page-sizes="[20, 25, 30, 50]"
                :page-size="pageData1.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageData1.total"
            ></el-pagination>
        </el-dialog>
        <!--新增/修改-->
        <el-dialog
            :close-on-click-modal="false"
            :title="RowName"
            :visible.sync="dialogFormVisible1"
            width="30%"
            :before-close="closeDialog"
        >
            <!-- <el-row :gutter="10"> -->
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <!-- <el-col :span="24"> -->
                <el-form-item label="名称:" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="编码:" class="top" prop="code">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>

                <el-form-item label="排序:" class="top" prop="sort">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <!-- </el-col> -->
                <!-- <el-col :span="12"> -->

                <el-form-item label="开启等级:" class="top">
                    <el-select v-model="form.openLevel" placeholder="选择开启等级" style="width: 100%">
                        <el-option
                            v-for="item in OpenLevel"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开启算法:" class="top">
                    <el-select v-model="form.openDescribe" placeholder="选择开启算法" style="width: 100%">
                        <el-option
                            v-for="item in OpenDescribe"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字典描述:" class="top">
                    <el-input v-model="form.remark" type="textarea" :rows="2"></el-input>
                </el-form-item>
                <!-- </el-col> -->
            </el-form>
            <!-- </el-row> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submitEvent">确 定</el-button>
            </span>
        </el-dialog>
        <!--字典数据新增-->
        <el-dialog
            :close-on-click-modal="false"
            :title="dataName"
            :visible.sync="dialogFormVisible3"
            width="30%"
            :before-close="closeDialog"
        >
            <el-form ref="form2" :model="form1" :rules="rules" label-width="110px">
                <el-form-item label="父级类型:" prop="parentName">
                    <el-input v-model="parentName" disabled></el-input>
                </el-form-item>
                <el-form-item label="名称:" class="top" prop="name">
                    <el-input v-model="form1.name"></el-input>
                </el-form-item>
                <el-form-item label="计算值:" class="top">
                    <el-input v-model="form1.value"></el-input>
                </el-form-item>
                <el-form-item class="top" v-if="algoDescribeFalg == 1" label="对应算法:" prop="algoDescribe">
                    <el-input v-model="form1.algoDescribe" placeholder="请输入数字" :rows="1"></el-input>
                </el-form-item>
                <el-form-item class="top" label="编码:" prop="code">
                    <el-input v-model="form1.code"></el-input>
                </el-form-item>
                <el-form-item label="排序:" prop="sort" class="top">
                    <el-input v-model="form1.sort"></el-input>
                </el-form-item>

                <el-form-item v-if="levelFalg == 1" label="事件等级:">
                    <el-select v-model="form1.level" placeholder="选择开启等级">
                        <el-option
                            v-for="item in eventOpenLevel"
                            :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="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submitEvent">确 定</el-button>
            </span>
        </el-dialog>
        <!--详情修改-->
        <el-dialog
            :close-on-click-modal="false"
            :title="dataName"
            :visible.sync="dialogFormVisible2"
            width="30%"
            :before-close="closeDialog"
        >
            <el-form ref="form1" :model="formData" :rules="rules">
                <el-form-item
                    label="父级类型:"
                    prop="parentName"
                    :label-width="formLabelWidth"
                    style="margin-bottom: 20px"
                >
                    <el-input v-model="parentName" disabled></el-input>
                </el-form-item>

                <el-form-item
                    label="名称:"
                    class="top"
                    prop="name"
                    :label-width="formLabelWidth"
                    style="margin-bottom: 20px"
                >
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>

                <el-form-item label="计算值:" class="top" :label-width="formLabelWidth" style="margin-bottom: 20px">
                    <el-input v-model="formData.value"></el-input>
                </el-form-item>

                <el-form-item
                    class="top"
                    label="对应算法:"
                    v-if="algoDescribeFalg == 1"
                    prop="algoDescribe"
                    :label-width="formLabelWidth"
                    style="margin-bottom: 20px"
                >
                    <el-input v-model="formData.algoDescribe" placeholder="请输入数字"></el-input>
                </el-form-item>
                <el-form-item
                    class="top"
                    label="编码:"
                    prop="code"
                    :label-width="formLabelWidth"
                    style="margin-bottom: 20px"
                >
                    <el-input v-model="formData.code"></el-input>
                </el-form-item>
                <el-form-item
                    label="排序:"
                    class="top"
                    prop="sort"
                    :label-width="formLabelWidth"
                    style="margin-bottom: 20px"
                >
                    <el-input v-model="formData.sort"></el-input>
                </el-form-item>

                <el-form-item
                    class="top"
                    label="事件等级:"
                    v-if="levelFalg == 1"
                    :label-width="formLabelWidth"
                    style="margin-bottom: 20px"
                >
                    <el-select v-model="formData.level" placeholder="选择开启等级">
                        <el-option
                            v-for="item in eventOpenLevel"
                            :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="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submitEvent">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getheight } from '../../../../assets/commjs/common'
import {
    list,
    add,
    addData,
    updateType,
    deleteType,
    getTypeIdData,
    updateData,
    deleteData
} from '../../../../api/admin/dict'
import pagination from '../../../components/pagination/index'
export default {
    name: 'dictanagement',
    data() {
        return {
            formdata: {
                searchValuedata: undefined
            },
            formInline: {},
            vh: null,
            algoDescribeFalg: undefined,
            levelFalg: '',
            dialogTableVisible: false,
            dialogFormVisible1: false,
            dialogFormVisible2: false,
            dialogFormVisible3: false,
            loading: true,
            rowName: '',
            RowName: '',
            row: '',
            tableheight: undefined,
            dataName: '',
            parentName: '',
            typeId: '',
            searchValue: '',
            sortBy: '',
            orderBy: '',
            sortBdata: '',
            orderBydata: '',
            pageData: {
                pageNum: 1,
                pageSize: 25,
                total: 0
            },
            pageData1: {
                pageNum: 1,
                pageSize: 25,
                total: 0
            },
            tableData: [],
            gridData: [],
            t: undefined,
            form: {
                openLevel: 0,
                openDescribe: 0,
                remark: undefined,
                name: '',
                code: '',
                sort: 0
            },
            form1: {
                algoDescribe: undefined,
                code: '',
                level: 0,
                name: '',
                value: '',
                sort: 0,
                typeId: ''
            },
            formData: {
                level: undefined,
                algoDescribe: undefined,
                name: '',
                code: '',
                value: '',
                sort: undefined,
                typeId: undefined
            },
            OpenLevel: [
                { value: 0, label: '不开启' },
                { value: 1, label: '开启' }
            ],
            OpenDescribe: [
                { value: 0, label: '不开启' },
                { value: 1, label: '开启' }
            ],
            StateOption: [
                { value: 0, label: '删除' },
                { value: 1, label: '正常' }
            ],
            eventOpenLevel: [
                { value: 0, label: '普通' },
                { value: 1, label: '中等' },
                { value: 2, label: '严重' }
            ],
            formLabelWidth: '90px',
            rules: {
                algoDescribe: [
                    { required: false, message: '对应算法不能为空', trigger: 'blur' },
                    {
                        pattern: /^\d+$|^\d+[.]?\d+$/,
                        message: '请您数字对应算法',
                        trigger: 'blur'
                    }
                ],
                code: [
                    { required: false, message: '对应算法不能为空', trigger: 'blur' },
                    {
                        pattern: /^[a-zA-Z_]{1}[a-zA-Z0-9_]{2,25}$/,
                        message: '请输入英文',
                        trigger: 'blur'
                    }
                ],
                parentName: [{ required: true, message: '父级类型不能为空', trigger: 'blur' }],
                name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
                sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
            }
        }
    },
    components: {},
    created() {
        this.queryData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 106
            this.vhh = window.sessionStorage.getItem('appheight') - 420
        },
        //重置按钮
        rest() {
            this.form = {
                openLevel: 0,
                openDescribe: 0,
                remark: undefined,
                name: '',
                code: '',
                sort: 0
            }
            this.formData = {
                level: undefined,
                algoDescribe: undefined,
                name: '',
                code: '',
                sort: undefined,
                typeId: undefined
            }
            this.form1 = {
                algoDescribe: undefined,
                code: '',
                level: 0,
                name: '',
                value: '',
                sort: 0,
                typeId: ''
            }
            this.searchValue = ''
        },
        resetForm() {
            if (this.$refs['form']) {
                this.$refs['form'].resetFields()
            }
            if (this.$refs['form1']) {
                this.$refs['form1'].resetFields()
            }
            if (this.$refs['form2']) {
                this.$refs['form2'].resetFields()
            }
        },
        closeDialog() {
            this.resetForm()
            this.dialogFormVisible1 = false
            this.dialogFormVisible2 = false
            this.dialogFormVisible3 = false
        },
        //点击获取字典类型表头字段等属性
        sort(column, event) {
            this.orderBy = column.order
            this.sortBy = column.property
            // console.log(this.orderBy + "=============" + this.sortBy);
            this.queryData()
        },
        //点击获取字典类型表头字段等属性
        sortdata(column, event) {
            this.orderBydata = column.order
            this.sortBydata = column.property
            // console.log(this.orderBy + "=============" + this.sortBy);
            this.querydatashu()
        },
        handleSizeChange(val) {
            this.pageData.pageSize = val
            this.queryData()
        },
        handleCurrentChange(val) {
            this.pageData.pageNum = val
            this.queryData()
        },
        handleSizeChangedata(val) {
            this.pageData1.pageSize = val
            this.querydatashu()
        },
        handleCurrentChangedata(val) {
            this.pageData1.pageNum = val
            this.querydatashu()
        },
        //新增字典类型
        handleAddClickAddType() {
            this.form = {
                openLevel: 0,
                openDescribe: 0,
                remark: undefined,
                name: '',
                code: '',
                sort: 100
            }
            this.RowName = '字典类型新增'
            this.dialogFormVisible1 = true
            this.t = 'add'
        },
        //查询字典列表
        queryData() {
            if (this.searchValue == '') {
                var data = {
                    orderBy: this.orderBy,
                    pageNum: this.pageData.pageNum,
                    pageSize: this.pageData.pageSize,
                    searchBeginTime: '',
                    searchEndTime: '',
                    searchState: 0,
                    searchValue: this.searchValue,
                    sortBy: this.sortBy
                }
            } else {
                var data = {
                    orderBy: this.orderBy,
                    pageNum: 1,
                    pageSize: this.pageData.pageSize,
                    searchBeginTime: '',
                    searchEndTime: '',
                    searchState: 0,
                    searchValue: this.searchValue,
                    sortBy: this.sortBy
                }
            }
            list(data).then(response => {
                if (response.code === 'A0000') {
                    this.tableData = response.data.records
                    window.sessionStorage.setItem('dicData', JSON.stringify(response.data.records))
                    this.pageData.total = response.data.total
                    this.loading = false
                }
            })
        },
        //字典类型查看
        handleClick(row) {
            this.levelFalg = row.openLevel
            this.algoDescribeFalg = row.openDescribe
            this.row = row
            this.typeId = row.id
            this.RowName = row.name
            this.dialogTableVisible = true
            this.typeId = row.id
            this.querydatashu()
        },
        //字典详细数据查询
        querydatashu() {
            let data = {
                orderBy: this.orderBydata,
                pageNum: this.pageData1.pageNum,
                pageSize: this.pageData1.pageSize,
                searchBeginTime: '',
                searchEndTime: '',
                searchState: 0,
                searchValue: this.formdata.searchValuedata,
                sortBy: this.sortBydata,
                typeId: this.typeId
            }
            getTypeIdData(data).then(response => {
                this.gridData = response.data.records
                this.pageData1.total = response.data.total
            })
        },
        //字典数据新增
        dataAdd() {
            this.dataName = this.row.name + '数据新增'
            this.parentName = this.row.name
            this.form1.typeId = this.row.id
            this.dialogFormVisible3 = true
            this.t = 'add'
        },
        //字典类型修改
        handleEditClick(row) {
            this.RowName = '字典类型修改'
            this.dialogFormVisible1 = true
            let editData = {
                id: row.id,
                openLevel: row.openLevel,
                openDescribe: row.openDescribe,
                value: row.value,
                remark: row.remark,
                name: row.name,
                code: row.code,
                sort: row.sort
            }
            this.form = editData
            this.parentName = this.row.name
            this.t = 'edit'
        },
        //字典类型删除
        handleDeleteClick(row) {
            var p = row.id
            var arrId = []
            arrId.push(p)
            arrId = JSON.stringify(arrId)
            this.$confirm('是否确认删除', '提示', {
                confirmButtonText: '确认删除',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deleteType(arrId).then(response => {
                        if (response.code == 'A0000') {
                            this.$message.success('删除成功')
                            this.queryData()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        //详情修改
        EditClick(row) {
            // this.typeId=row.id
            this.dataName = row.name + '详情修改'
            this.dialogFormVisible2 = true
            let editData = {
                id: row.id,
                typeId: this.typeId,
                level: row.level,
                algoDescribe: row.algoDescribe,
                state: row.state,
                value: row.value,
                name: row.name,
                code: row.code,
                sort: row.sort
            }
            this.formData = editData
            this.parentName = this.row.name
            this.t = 'edit'
        },
        //详情删除
        DeleteClick(row) {
            var p = row.id
            var arrId = []
            arrId.push(p)
            arrId = JSON.stringify(arrId)
            this.$confirm('是否确认删除', '提示', {
                confirmButtonText: '确认删除',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deleteData(arrId).then(response => {
                        if (response.code == 'A0000') {
                            this.$message.success('删除成功')
                            this.querydatashu()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        //操作提交
        submitEvent() {
            if (this.t == 'add' && this.dialogFormVisible1) {
                add(this.form).then(response => {
                    if (response.code == 'A0000') {
                        this.$message.success('新增类型成功')
                        this.dialogFormVisible1 = false
                        this.queryData()
                        this.form = {}
                    }
                })
            } else if (this.t == 'add' && this.dialogFormVisible3) {
                addData(this.form1).then(response => {
                    if (response.code == 'A0000') {
                        this.$message.success('新增数据成功')
                        this.form1 = {}
                        this.dialogFormVisible3 = false
                        this.querydatashu()
                    }
                })
            }
            if (this.t == 'edit' && this.dialogFormVisible1) {
                updateType(this.form).then(response => {
                    if (response.code == 'A0000') {
                        this.$message.success('修改成功')
                        this.form = {}
                        this.dialogFormVisible1 = false
                        this.queryData()
                    }
                })
            } else if (this.t == 'edit' && this.dialogFormVisible2) {
                updateData(this.formData).then(response => {
                    if (response.code == 'A0000') {
                        this.$message.success('修改成功')
                        this.dialogFormVisible2 = false
                        let data = {
                            orderBy: '',
                            pageNum: 1,
                            pageSize: 25,
                            searchBeginTime: '',
                            searchEndTime: '',
                            searchState: 0,
                            searchValue: '',
                            sortBy: '',
                            typeId: this.typeId
                        }
                        getTypeIdData(data).then(response => {
                            this.gridData = response.data.records
                        })
                    }
                })
            }
        }
    },
    //多选
    handleSelectionChange() {}
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    //height: 32px;
}
::v-deep .el-select {
    width: 150px;
}
</style>
<style lang="scss" scoped>
::v-deep .bangdinfg .el-dialog .el-dialog__body {
    max-height: 70vh;
    padding: 10px !important;
    // overflow-y: auto;
}
</style>
