<template>
    <div>
        <el-tabs v-model.trim="activeName" type="border-card">
            <el-tab-pane label="报告字典管理" name="first" :style="'height:' + vh + 'px;'" style="position: relative">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <div class="grid-content bg-purple">
                            <el-tree
                                :style="'height:' + (vh - 5) + 'px;  overflow-y: auto;'"
                                @node-click="clickNode"
                                :expand-on-click-node="false"
                                :highlight-current="true"
                                :data="TreeData"
                                node-key="id"
                                :default-expanded-keys="treeExpandData"
                                :props="defaultProps"
                                ref="tree"
                            ></el-tree>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <!-- <el-button
                type="primary"
                icon="el-icon-notebook-2"
                @click="$emit('flag')"
                >报告字典管理</el-button
              > -->
                        <el-form :inline="true" :model="formData">
                            <el-form-item label="筛选数据:">
                                <el-input
                                    v-model="formData.searchValue"
                                    placeholder="请输入筛选数据"
                                    clearable=""
                                ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="info">查询</el-button>
                            </el-form-item>
                            <el-form-item style="float: right">
                                <el-button type="primary" icon="el-icon-plus" @click="addTemplate">
                                    新增配置项
                                </el-button>
                                <!-- <el-button type="primary" icon="el-icon-upload2">导出</el-button> -->
                            </el-form-item>
                        </el-form>
                        <el-table
                            stripe
                            v-loading="loading"
                            :data="tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
                            header-cell-class-name="table_header"
                            highlight-current-row
                            style="width: 100%"
                            border
                            :height="vh - 85 + 'px'"
                        >
                            <el-table-column prop="name" label="配置项名称"></el-table-column>
                            <el-table-column prop="reportDescribe" label="配置项描述"></el-table-column>
                            <el-table-column prop="pidName" label="上级节点">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.pid == '0' ? '无' : scope.row.pidName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        type="primary"
                                        size="mini"
                                        icon="el-icon-edit"
                                        @click="modify(scope.row)"
                                    >
                                        修改
                                    </el-button>
                                    <el-button
                                        type="danger"
                                        size="mini"
                                        icon="el-icon-delete"
                                        @click="deletes(scope.row)"
                                    >
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            background
                            align="right"
                            class="mt10"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[20, 30, 40, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
        <svg-icon class="back" icon-class="back" @click="$emit('flag')" />

        <!-- 新增 -->
        <el-dialog
            :close-on-click-modal="false"
            title="新增配置项"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="closeDialog"
        >
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="父节点:" prop="pid">
                    <el-select v-model="form.pid" style="width: 100%" placeholder="请选择父节点" clearable>
                        <el-option
                            v-for="item in secondLevelNode"
                            :key="item.id"
                            :label="item.reportDescribe"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称:" prop="name" class="top">
                    <el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="描述:" prop="reportDescribe" class="top">
                    <el-input type="textarea" placeholder="请输入描述" v-model.trim="form.reportDescribe"></el-input>
                </el-form-item>
                <!-- <el-form-item label="一级节点:" style="margin-top: 25px" class="box">
          <el-select
            v-model="pid1"
            placeholder="请选择一级节点"
            clearable
            @change="changeFn"
          >
            <el-option
              v-for="item in data"
              :key="item.id"
              :label="item.reportDescribe"
              :value="item.id"
            >
            </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="addFn">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog :close-on-click-modal="false" title="修改配置项信息" :visible.sync="dialogVisible1" width="30%">
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="名称:" prop="name" style="margin-bottom: 20px !important">
                    <el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="描述:" prop="reportDescribe" style="margin-bottom: 20px !important">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入描述"
                        v-model.trim="form.reportDescribe"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="updateFn">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {
    getDictTree,
    getReportDictList,
    addDict,
    updateDict,
    deleteDict
} from '@/api/BusinessAdministrator/ReportTemplate/MonitoringPoint'
export default {
    components: {},
    props: {
        type: {
            type: Number,
            default: undefined
        }
    },
    data() {
        return {
            formData: {
                searchValue: '',
                id: '0',
                type: this.type
            },
            pageNum: 1,
            pageSize: 20,
            total: 10,
            form: {
                name: '',
                reportDescribe: '',
                pid: '',
                sort: 0,
                type: this.type
            },
            pid1: '',
            rules: {
                name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
                reportDescribe: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
                pid: [{ required: true, message: '请选择父节点', trigger: 'change' }]
            },
            activeName: 'first',
            vh: undefined,
            treeExpandData: [],
            TreeData: [],
            // data: [],
            firstLevelNode: [],
            secondLevelNode: [],
            loading: true,
            tableData: [],
            dialogVisible: false,
            dialogVisible1: false,
            defaultProps: {
                children: 'children',
                label: 'reportDescribe'
            }
        }
    },
    created() {
        this.Onsubmit()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(1)
        })
        // console.log(this.type);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 70
        },
        closeDialog() {
            this.dialogVisible = false
            this.resetForm()
        },
        // 表单重置
        resetForm() {
            if (this.$refs['form']) {
                this.$refs['form'].resetFields()
            }
        },
        //查询数据
        info() {
            this.loading = true
            getReportDictList(this.formData).then(res => {
                this.tableData = res.data
                this.total = this.tableData.length
                this.loading = false
            })
        },
        //字典树
        Onsubmit() {
            getDictTree(this.formData).then(res => {
                this.TreeData = res.data
                // this.data = this.TreeData;
                this.formData.id = this.TreeData[0].id
                // this.form.pid = this.data[0].id
                this.info()
                this.TreeData.forEach(item => {
                    this.treeExpandData.push(item.id)
                })
            })
        },
        // changeFn(val) {
        //   console.log(val);
        //   this.secondLevelNode = [];
        //   // val.forEach((item) => {
        //   //   this.secondLevelNode.push(item);
        //   // });
        //   this.data.forEach((item) => {
        //     console.log(item);
        //     if (val == item.id) {
        //       this.secondLevelNode = item.children;
        //     }
        //     if(item.children.length == 0){
        //       this.form.pid = item.id
        //     }else{
        //       item.children.forEach((item1) => {
        //       console.log(item1);
        //       if (val == item1.id) {
        //         this.secondLevelNode = item.children;
        //       }
        //     });
        //     }
        //   });
        // },
        // 点击属于节点
        clickNode(data) {
            // this.secondLevelNode = []
            //console.log(data);
            this.secondLevelNode[0] = data
            this.formData.id = data.id
            this.info()
        },
        // 新增
        addTemplate() {
            this.title = '新增模板'
            this.dialogVisible = true
            this.pid1 = ''
            this.form = {
                name: '',
                reportDescribe: '',
                pid: '',
                sort: 0,
                type: this.type
            }
        },
        //新增确定
        addFn() {
            this.$refs.form.validate(value => {
                // console.log(value);
                if (value == true) {
                    this.$confirm('是否确认新增?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            addDict(this.form).then(res => {
                                if (res.code == 'A0000') {
                                    this.$message({
                                        message: res.message,
                                        type: 'success'
                                    })
                                }
                                this.dialogVisible = false
                                this.Onsubmit()
                            })
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消新增'
                            })
                        })
                }
            })
        },
        // 修改
        modify(row) {
            this.title = '修改模板'
            ;(this.form = {
                name: row.name,
                type: row.type,
                reportDescribe: row.reportDescribe,
                id: row.id,
                pid: row.pid,
                sort: row.sort
            }),
                (this.dialogVisible1 = true)
        },
        //修改确定
        updateFn() {
            this.$refs.form.validate(value => {
                // console.log(value);
                if (value == true) {
                    this.$confirm('是否确认修改?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            updateDict(this.form).then(res => {
                                if (res.code == 'A0000') {
                                    this.$message({
                                        message: res.message,
                                        type: 'success'
                                    })
                                }
                                this.dialogVisible1 = false
                                this.Onsubmit()
                            })
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消修改'
                            })
                        })
                }
            })
        },
        // 删除
        deletes(row) {
            this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let data = {
                        id: row.id
                    }
                    deleteDict(data).then(res => {
                        if ((res.code == 'A0000')) {
                            this.$message({
                                type: 'success',
                                message: res.message
                            })
                        }
                        this.Onsubmit()
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.info()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.info()
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
</style>
<style lang="scss" scoped>
.back {
    position: absolute;
    top: 15px;
    right: 15px;
    margin-right: 10px;
    margin-left: auto;
    font-size: 29px;
    line-height: 32px;
    color: $themeColor;
    cursor: pointer;
    &:hover {
        color: $themeColor;
        opacity: 0.9;
    }
}
::v-deep textarea {
    resize: none;
}
::v-deep .box {
    overflow: inherit;
    .el-input {
        width: 283px;
    }
}
</style>
