<template>
    <div class="pd10">
        <el-table
            stripe
            :data="tableData"
            border
            row-key="id"
            highlight-current-row
            header-cell-class-name="table_header"
            :height="tableheight + 'px'"
            style="width: 100%"
            :default-expand-all="true"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column prop="name" label="功能组件名称" :show-overflow-tooltip="true"></el-table-column>
            <!-- <el-table-column align="center" prop="name" label="功能组件名称"></el-table-column> -->
            <el-table-column align="center" prop="code" label="组件标识"></el-table-column>
            <el-table-column align="center" prop="functionGroup" :formatter="gName" label="组件子功能">
                <template slot-scope="scope">
                    <span
                        v-if="
                            scope.row.functionGroup[0] === 0 ||
                            scope.row.functionGroup[1] === 0 ||
                            scope.row.functionGroup[2] === 0
                        "
                        type="primary"
                        size="small"
                    >
                        切换组件功能
                    </span>
                    <span
                        v-if="
                            scope.row.functionGroup[0] === 1 ||
                            scope.row.functionGroup[1] === 1 ||
                            scope.row.functionGroup[2] === 1
                        "
                        type="primary"
                        size="small"
                    >
                        进入该功能
                    </span>
                    <span
                        v-if="
                            scope.row.functionGroup[0] === 2 ||
                            scope.row.functionGroup[1] === 2 ||
                            scope.row.functionGroup[2] === 2
                        "
                        type="primary"
                        size="small"
                    >
                        最大化
                    </span>
                    <span v-if="scope.row.functionGroup == null" type="primary" size="small">/</span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="path"
                label="组件路径"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <!-- <el-table-column align="center" prop="state" label="组件状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0" type="delete" size="small"
            >删除</span
          >
          <span v-if="scope.row.state === 1" type="success" size="small"
            >正常</span
          >
          <span v-if="scope.row.state === null" type="primary" size="small"
            >/</span
          >
        </template>
      </el-table-column> -->
            <!-- <el-table-column
        align="center"
        prop="sort"
        label="排序"
      ></el-table-column> -->
            <el-table-column align="center" label="操作" width="220">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.state == 0"
                        @click="AddClick(scope.row)"
                        type="primary"
                        size="mini"
                        icon="el-icon-plus"
                    >
                        新增
                    </el-button>
                    <el-button @click="EditClick(scope.row)" type="primary" size="mini" icon="el-icon-edit">
                        修改
                    </el-button>
                    <el-button
                        v-if="scope.row.state == 1"
                        @click="DeleteClick(scope.row)"
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
        <!--新增-->
        <el-dialog
            :close-on-click-modal="false"
            :title="RowName"
            :visible.sync="dialogFormVisible"
            width="30%"
            :before-close="closedf"
        >
            <el-row :gutter="10">
                <el-form :model="formData" ref="form" :rules="rules" label-width="100px">
                    <el-col :span="24">
                        <el-form-item label="组件菜单选取:" prop="title" :label-width="formLabelWidth">
                            <el-select
                                ref="selectTree1"
                                v-model="form.title"
                                placeholder="请选择所属组件路径"
                                style="width: 100%"
                            >
                                <el-option :value="menuPathId" style="height: auto">
                                    <el-tree
                                        ref="tree"
                                        :data="pathOptions"
                                        node-key="id"
                                        accordion
                                        :default-expanded-keys="idArr2"
                                        :props="defaultProps4"
                                        @node-click="handNodeClick1"
                                    >
                                        <span class="span-ellipsis" slot-scope="{ node, data }">
                                            <span :title="data.title">{{ data.title }}</span>
                                        </span>
                                    </el-tree>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="系统类型:"
                            prop="systemType"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-select
                                v-model="formData.systemType"
                                placeholder="选择系统类型"
                                @change="getchild"
                                class="options"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in SystemTypeoption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="父组件节点:"
                            prop="pid"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-select
                                v-model="formData.pid"
                                placeholder="选择父组件节点"
                                class="options"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in pidOption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="组件名称:"
                            prop="name"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-input v-model="formData.name" placeholder="请输组件名称"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="组件标识"
                            prop="code"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-input v-model="formData.code" placeholder="请输入组件标识"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="组件路径:"
                            prop="path"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-input v-model="formData.path" placeholder="请输入组件排序"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="组件排序:"
                            prop="sort"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-input v-model="formData.sort" placeholder="请输入组件排序"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="组件子功能:"
                            prop="functionGroup"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-select
                                multiple
                                collapse-tags
                                v-model="formData.functionGroup"
                                placeholder="选择子组件功能"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in functionGroupOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closedf">取 消</el-button>
                <el-button type="primary" @click="submitEvent">确 定</el-button>
            </span>
        </el-dialog>
        <!--修改-->
        <el-dialog
            :close-on-click-modal="false"
            :title="RowName"
            :visible.sync="dialogFormVisible1"
            :before-close="closedf"
            width="30%"
        >
            <el-row :gutter="10">
                <el-form :model="editData" ref="form2" :rules="rules" label-width="100px">
                    <el-col :span="24">
                        <el-form-item label="菜单路径选取:" prop="title" :label-width="formLabelWidth">
                            <el-select
                                ref="selectTree"
                                v-model="editData.title"
                                placeholder="请选择所属组件路径"
                                style="width: 100%"
                            >
                                <el-option
                                    :value="editData.functionId"
                                    :label="editData.title"
                                    style="height: auto"
                                    class="options"
                                >
                                    <el-tree
                                        ref="tree"
                                        :data="pathOptions"
                                        node-key="id"
                                        accordion
                                        :default-expanded-keys="idArr2"
                                        :props="defaultProps4"
                                        @node-click="handNodeClick2"
                                    >
                                        <span slot-scope="{ node, data }">
                                            <i
                                                :class="[data.color != null ? 'ification_col' : '']"
                                                :style="{ 'background-color': data.color }"
                                            ></i>
                                            &nbsp;&nbsp;{{ data.title }}
                                        </span>
                                    </el-tree>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="系统类型:"
                            prop="systemType"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-select
                                v-model="editData.systemType"
                                placeholder="选择系统类型"
                                @change="getchilde"
                                class="options"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in SystemTypeoption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="父组件节点:"
                            prop="pid"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-select v-model="editData.pid" placeholder="选择父组件节点" style="width: 100%">
                                <el-option
                                    v-for="item in pidOption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="组件名称:"
                            prop="name"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-input v-model="editData.name" placeholder="请输组件名称"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="组件标识"
                            prop="code"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-input v-model="editData.code" placeholder="请输入组件标识"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="组件路径:"
                            prop="path"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-input v-model="editData.path" placeholder="请输入组件排序"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="组件排序:"
                            prop="sort"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-input v-model="editData.sort" placeholder="请输入组件排序"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="组件子功能:"
                            prop="functionGroup"
                            style="margin-top: 20px"
                            :label-width="formLabelWidth"
                        >
                            <el-select
                                multiple
                                collapse-tags
                                v-model="editData.functionGroup"
                                placeholder="选择子组件功能"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in functionGroupOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closedf">取 消</el-button>
                <el-button type="primary" @click="submitEvent">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getheight } from '../../../../assets/commjs/common'
import { componentlists, componentAdd, componentEdit, componentDel } from '../../../../api/admin/user'
import { list, baseData } from '../../../../api/admin/menu'
import { dicData } from '@/assets/commjs/dictypeData'
import pagination from '../../../components/pagination/index'
//import treeSelect from '@riophae/vue-treeselect'
//import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    name: 'componentmanage',
    components: {
        pagination
        // treeSelect
    },
    data() {
        return {
            form: {
                title: ''
            },
            defaultProps4: {
                children: 'children',
                label: 'title'
            },
            SystemTypeoption: [],
            idArr2: [],
            pathOptions: [],
            menuPathId: undefined,
            tableheight: undefined,
            dialogFormVisible: false,
            dialogFormVisible1: false,
            formLabelWidth: '120px',
            treeData: [],
            treeData1: [],
            defaultProps1: {
                children: 'children',
                label: 'label'
            },
            RowName: '',
            pidOption: [],
            functionGroupOption: [
                { value: 0, label: '切换组件功能' },
                { value: 1, label: '进入该功能' },
                { value: 2, label: '放大' }
            ],
            formData: {
                systemType: '',
                code: '',
                functionId: '',
                pid: null,
                name: '',
                path: '',
                code: '',
                id: null,
                sort: 0,
                functionGroup: [0, 1]
            },
            group: undefined,
            editData: {
                systemType: '',
                pid: null,
                name: '',
                code: '',
                path: '',
                id: null,
                sort: 0,
                title: '',
                functionId: '',
                functionGroup: []
            },
            pageData: {
                pageNum: 3,
                pageSize: 15,
                total: 100
            },
            tableData: [],
            defaultProps: {
                children: 'children',
                label: 'parentName'
            },
            t: undefined,
            rules: {
                title: [{ required: true, message: '请选择组件菜单', trigger: 'blur' }],
                systemType: [{ required: true, message: '请选择系统类型', trigger: 'blur' }],
                pid: [{ required: true, message: '请选择父组件节点', trigger: 'blur' }],
                name: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
                code: [{ required: true, message: '请输入组件标识', trigger: 'blur' }],
                path: [{ required: true, message: '请选择组件路径', trigger: 'blur' }],
                sort: [{ required: true, message: '请输入组件排序', trigger: 'blur' }],
                functionGroup: [{ required: true, message: '请选择子功能', trigger: 'blur' }]
            }
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.getSystemType()
        this.queryData()
        this.getTreeData()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.tableheight = window.sessionStorage.getItem('appheight') - 10
        },
        closedf() {
            this.dialogFormVisible = false
            this.dialogFormVisible1 = false
            this.resetForm()
        },
        resetForm() {
            if (this.$refs['form']) {
                this.$refs['form'].resetFields()
            }
            if (this.$refs['form2']) {
                this.editData = {}
                this.$refs['form2'].resetFields()
            }
        },
        handNodeClick1(data, node) {
            //console.log(data,node,'++++++++++++++++++++++++++++++++++=')
            this.menuPathId = data.id
            this.form.title = data.title
            this.form.id = data.id
            this.formData.functionId = data.id
            this.formData.path = data.routePath
            this.$refs.selectTree1.blur()
        },
        handNodeClick2(data, node) {
            //console.log(data,node,'++++++++++++++++++++++++++++++++++=')
            //this.menuPathId = data.id;
            this.editData.title = data.title
            this.form.id = data.id
            this.editData.functionId = data.id
            this.formData.path = data.routePath
            this.editData.path = data.routePath
            this.$refs.selectTree.blur()
        },
        gName(row, column) {
            if (row.functionGroup !== null) {
                var gNamelist = []
                for (var i = 0; i < row.functionGroup.length; i++) {
                    gNamelist.push(row.functionGroup[i])
                }
                return gNamelist.join(',')
            } else {
                gNamelist = []
                return gNamelist
            }
        },
        //获取组件列表
        queryData() {
            componentlists().then(response => {
                if (response.code == 'A0000') {
                    response.data.forEach(m => {
                        m.state = 0
                        m.code = ''
                        m.functionGroup = []
                        m.functionId = '23'
                        m.path = ''
                        m.pid = 0
                        m.sort = ''
                        m.systemType = 0
                        m.children.forEach(n => {
                            n.state = 0
                            n.children.forEach(d => {
                                d.state = 1
                            })
                        })
                    })
                    this.tableData = response.data
                }
            })
        },
        getchild() {
            this.getbaseData()
        },
        getchilde() {
            this.getbaseData1()
        },
        //获取功能分类
        getbaseData() {
            let data = {
                systemType: this.formData.systemType
            }
            baseData(data).then(response => {
                if (response.code == 'A0000') {
                    this.pidOption = response.data
                }
            })
        },
        //获取功能分类
        getbaseData1() {
            let data = {
                systemType: this.editData.systemType
            }
            baseData(data).then(response => {
                if (response.code == 'A0000') {
                    this.pidOption = response.data
                }
            })
        },
        //获取树菜单
        getTreeData() {
            list().then(response => {
                if (response.code == 'A0000') {
                    var data = response.data
                    data.forEach(m => {
                        m.children.forEach(n => {
                            n.children.forEach(d => {
                                delete d.children
                            })
                        })
                    })
                    this.switchDataVersonName(data)
                    this.pathOptions = data
                }
            })
        },

        // 递归过滤
        switchDataVersonName(data) {
            // column 是表格数据， text是判断是否是含税//  先过滤第一层
            let arr = data.filter(item => !item.type == 1) // 得到新的数组，但只是第一层的过滤，需要再次循环然后 判断有children的时候 在调用一次本函数 传入 x.children，还有判断条件
            arr.forEach(x => x.children && (x.children = this.switchDataVersonName(x.children))) // 最后把新数组 return 出去
            return arr
        },
        changePageNum(data) {
            this.pageData.pageNum = data
            // alert("父组件当前页" + this.pageData.pageNum);
        },
        changePageSize(data) {
            this.pageData.pageSize = data
            // alert("父组件当前条数" + this.pageData.pageSize);
        },
        //新增
        AddClick(row) {
            this.getTreeData()
            this.form.title = ''
            this.RowName = row.name + '组件新增'
            this.dialogFormVisible = true
            this.t = 'add'
            this.formData.functionId = this.form.id
            // this.formData.pid=row.id
        },
        //修改
        EditClick(row) {
            this.dialogFormVisible1 = true
            this.t = 'edit'
            this.RowName = row.name + '组件修改'
            this.menuPathId = row.functionId
            this.editData = {
                systemType: row.systemType,
                pid: row.pid,
                name: row.name,
                code: row.code,
                path: row.path,
                id: row.id,
                sort: row.sort,
                functionId: row.functionId,
                functionGroup: row.functionGroup
            }
            this.sysbase(row.systemType)
            this.seachTreeDta(this.pathOptions, row)
        },

        seachTreeDta(data, row) {
            //console.log("++++++++++++++++++++++=",data,row.path)
            if (data.length) {
                data.forEach(item => {
                    // console.log("++++++++++++++++++++++=",item.routePath,row.path)
                    if (item.routePath === row.path) {
                        this.editData.title = item.title
                    }
                    if (item.children) {
                        this.seachTreeDta(item.children, row)
                    }
                })
            }
        },
        //删除
        DeleteClick(row) {
            this.$confirm('请确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var data = {
                        id: row.id
                    }
                    componentDel(data).then(response => {
                        if (response.code == 'A0000') {
                            this.$message.success('删除成功')
                            this.queryData()
                        }
                    })
                })
                .catch(() => {})

            //alert('删除'+row.id)
        },
        //提交
        submitEvent() {
            if (this.t == 'add') {
                // this.formData.functionGroup=this.group
                componentAdd(this.formData).then(response => {
                    if (response.code == 'A0000') {
                        this.$message.success('新增成功')
                        this.dialogFormVisible = false
                        this.queryData()
                    }
                })
            }
            if (this.t == 'edit') {
                componentEdit(this.editData).then(response => {
                    if (response.code == 'A0000') {
                        this.$message.success('修改成功')
                        this.dialogFormVisible1 = false
                        this.queryData()
                    }
                })
            }
        },
        //字典获取数据干扰源类型
        getSystemType() {
            //debugger
            var code = 'System_Type'
            this.SystemTypeoption = dicData(code, [])
            this.formData.systemType = this.SystemTypeoption
        },
        sysbase(systemType) {
            let data = {
                systemType: systemType
            }
            baseData(data).then(response => {
                if (response.code == 'A0000') {
                    this.pidOption = response.data
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #79878769;
}
.el-form-item--small.el-form-item {
    margin-bottom: 20px;
}
</style>
