<template>
    <div>
        <!-- <el-switch style="margin-bottom:0.5%"
      v-model="value"
      active-text="企业系统" 
      inactive-text="省级系统"   
    >
    </el-switch> -->
        <!-- <span style="margin-left:1%;font-weight:;font-size:14px">过滤筛选: </span> <el-input v-model="searchValue" placeholder="请输入名称或编码进行筛选" style="width:200px"></el-input>
  <el-button  @click="queryData()" type="primary" size="mini" style="margin-left:1%;"  icon="el-icon-search">查询</el-button> -->
        <el-button v-if="long" @click="AddTypeClick" type="primary" size="mini" icon="el-icon-plus">新增</el-button>
        <!-- <el-button  @click="AddTypeClick" type="primary" size="mini" icon="el-icon-plus">新增</el-button>      -->
        <el-select
            v-show="false"
            v-model="ExpandedNum"
            @change="handleExpandNumChange"
            placeholder="选择展开级别"
            size="mini"
            style="left: 0; width: 100px"
        >
            <el-option label="不展开" :value="0"></el-option>
            <el-option label="展开1" :value="1"></el-option>
            <el-option label="展开2" :value="2"></el-option>
            <el-option label="展开3" :value="3"></el-option>
        </el-select>

        <el-table
            stripe
            @header-click="sort"
            :data="tableData"
            highlight-current-row
            :height="tableheight + 'px'"
            v-loading="loading"
            row-key="id"
            :expand-row-keys="expandID"
            header-cell-class-name="table_header"
            border
            lazy
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column
                min-width="150"
                prop="name"
                label="部门名称"
                width="230"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <!-- <el-table-column prop="parentNodeID" align="center" label="父节点"></el-table-column> -->
            <!-- <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column> -->
            <el-table-column min-width="100" prop="areaName" align="center" label="区域"></el-table-column>
            <el-table-column min-width="100" prop="type" align="center" label="部门类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.type === 0" type="primary" size="small">非自定义</span>
                    <span v-if="scope.row.type === 1" type="primary" size="small">web自定义</span>
                    <span v-if="scope.row.type === 2" type="primary" size="small">App自定义</span>
                    <span v-if="scope.row.type === 3" type="primary" size="small">Web测试</span>
                </template>
            </el-table-column>
            <el-table-column
                min-width="150"
                prop="remark"
                align="center"
                label="部门描述"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column min-width="80" prop="state" align="center" 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="400">
                <template slot-scope="scope">
                    <!-- <el-button @click="relationClick(scope.row)" :disabled="scope.row.children.length !=0" type="primary" size="mini" icon="el-icon-paperclip">绑定监测点</el-button> -->
                    <el-button @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 @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%">
            <el-row :gutter="10">
                <el-form :model="formData">
                    <el-col :span="24">
                        <el-form-item v-if="t === 'add'" label="父级节点:" :label-width="formLabelWidth">
                            <el-input v-model="parentName" disabled placeholder="请输入父级节点"></el-input>
                        </el-form-item>
                        <el-form-item label="部门编号:" :label-width="formLabelWidth">
                            <el-input v-model="formData.code" :disabled="fff" placeholder="请输入部门编号"></el-input>
                        </el-form-item>
                        <el-form-item label="部门名称:" :label-width="formLabelWidth">
                            <el-input v-model="formData.name" placeholder="请输入部门名称"></el-input>
                        </el-form-item>
                        <el-form-item label="部门类型:" :label-width="formLabelWidth">
                            <el-select
                                v-model="formData.type"
                                @change="changtype"
                                :disabled="customDeptOptionflag"
                                placeholder="选择部门类型"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in customDeptOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="子类型:" :label-width="formLabelWidth">
                            <el-select v-model="formData.specialType" placeholder="选择子类型" style="width: 100%">
                                <el-option
                                    v-for="item in ziDeptOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <!--  :disabled="buquyu"-->
                        <el-form-item label="部门区域:" :label-width="formLabelWidth">
                            <el-select
                                style="width: 100%"
                                ref="selectTree1"
                                v-model="deptName"
                                placeholder="请选择所属部门"
                            >
                                <el-option :value="deptId" style="height: auto">
                                    <el-tree
                                        ref="tree"
                                        :data="treeData"
                                        node-key="id"
                                        accordion
                                        :default-expanded-keys="idArr"
                                        :props="defaultProps"
                                        @node-click="handleNodeClick"
                                    >
                                        <span class="span-ellipsis" slot-scope="{ node, data }">
                                            <span :title="data.name">{{ data.name }}</span>
                                        </span>
                                    </el-tree>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="绑定区域:" :label-width="formLabelWidth">
                            <el-input v-model="areaName" disabled placeholder="绑定的区域"></el-input>
                        </el-form-item>
                        <el-form-item label="部门排序:" :label-width="formLabelWidth">
                            <el-input v-model="formData.sort" placeholder="请输入部门排序"></el-input>
                        </el-form-item>
                        <el-form-item label="部门描述:" :label-width="formLabelWidth">
                            <el-input
                                v-model="formData.remark"
                                :rows="2"
                                type="textarea"
                                placeholder="请输入部门描述"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEvent" :disabled="panduan">确 定</el-button>
            </span>
        </el-dialog>
        <!--绑定监测测点-->
        <el-dialog :close-on-click-modal="false" :title="RowName" :visible.sync="dialogFormVisible3" width="60%">
            <el-row :gutter="10">
                <el-form :model="areaData">
                    <el-col :span="8">
                        <!-- <el-form-item :label="name" :label-width="formLabelWidth"> -->
                        <span style="font-weight: bold">{{ name }}:</span>
                        <el-button
                            @click="noReationB"
                            style="margin-left: 10%"
                            type="primary"
                            size="mini"
                            icon="el-icon-paperclip"
                        >
                            未绑定
                        </el-button>
                        <el-button @click="relationB" type="primary" size="mini" icon="el-icon-paperclip">
                            其他绑定
                        </el-button>
                        <el-col
                            v-if="flag"
                            style="border: 2px solid #ccc; border-radius: 10px 10px 10px 10px"
                            :span="24"
                        >
                            <el-input
                                style="margin-top: 2%"
                                placeholder="输入关键字进行过滤1"
                                v-model="filterText"
                            ></el-input>
                            <el-tree
                                :props="defaultProps1"
                                ref="tree"
                                :data="unTreeData"
                                style="height: 60vh"
                                show-checkbox
                                node-key="id"
                                :default-expanded-keys="unexpandedIds"
                                :filter-node-method="filterNode"
                            >
                                <span class="span-ellipsis" slot-scope="{ node, data }">
                                    <span :title="data.label">{{ data.label }}</span>
                                </span>
                            </el-tree>
                        </el-col>

                        <el-col
                            v-if="flag1"
                            style="border: 2px solid #ccc; border-radius: 10px 10px 10px 10px"
                            :span="24"
                        >
                            <el-input
                                style="margin-top: 2%"
                                placeholder="输入关键字进行过滤2"
                                v-model="filterText2"
                            ></el-input>
                            <el-tree
                                ref="tree1"
                                :props="defaultProps"
                                :data="treeData2"
                                style="height: 60vh"
                                show-checkbox
                                node-key="id"
                                :default-expanded-keys="[2, 3]"
                                :default-checked-keys="[5]"
                                :filter-node-method="filterNode"
                            >
                                <span class="span-ellipsis" slot-scope="{ node, data }">
                                    <span :title="data.label">{{ data.label }}</span>
                                </span>
                            </el-tree>
                        </el-col>

                        <!-- </el-row> -->
                        <!-- </el-form-item> -->
                    </el-col>
                    <el-col :span="8">
                        <div style="margin-top: 60%; margin-right: 10%">
                            <el-form-item label="所属部门:" :label-width="formLabelWidth" style="top: 10%">
                                <el-input disabled v-model="areaData.name" placeholder="所属部门"></el-input>
                            </el-form-item>
                            <el-form-item label="部门区域:" :label-width="formLabelWidth">
                                <el-input disabled v-model="areaData.area" placeholder="所属部门区域"></el-input>
                            </el-form-item>
                            <el-form-item label="部门类型:" :label-width="formLabelWidth">
                                <el-select
                                    v-model="areaData.type"
                                    disabled
                                    placeholder="选择部门类型"
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in customDeptOption"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>

                            <el-col :span="24" :offset="2">
                                <el-button @click="gotoRight" style="margin-left: 40%" type="primary" size="mini">
                                    进行绑定 》
                                </el-button>
                            </el-col>
                            <el-col :span="24" :offset="2">
                                <el-button
                                    @click="gotoLeft"
                                    style="margin-top: 2%; margin-left: 40%"
                                    type="primary"
                                    size="mini"
                                >
                                    《 解除绑定
                                </el-button>
                            </el-col>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <span style="font-weight: bold">目标监测点:</span>
                        <el-row :gutter="10">
                            <el-col
                                style="
                                    margin-top: 2%;
                                    margin-right: 10%;
                                    border: 2px solid #ccc;
                                    border-radius: 10px 10px 10px 10px;
                                "
                                :span="24"
                            >
                                <el-input
                                    style="margin-top: 2%"
                                    placeholder="输入关键字进行过滤"
                                    v-model="filterText"
                                ></el-input>
                                <el-tree
                                    ref="tree2"
                                    :data="TargetTreeData"
                                    style="height: 60vh"
                                    show-checkbox
                                    node-key="id"
                                    :default-expanded-keys="TargetIds"
                                >
                                    <span class="span-ellipsis" slot-scope="{ node, data }">
                                        <span :title="data.label">{{ data.label }}</span>
                                    </span>
                                </el-tree>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="submitEvent2">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" :title="RowName" :visible.sync="dialogFormVisible1" width="60%">
            <el-col :span="5" style="position: absolute; margin-top: 7%; margin-left: 36%">
                <el-form :model="messageInfo">
                    <el-form-item label="所属部门:" :label-width="formLabelWidth" style="top: 10%">
                        <el-input disabled v-model="messageInfo.name" placeholder="所属部门"></el-input>
                    </el-form-item>
                    <el-form-item label="部门区域:" :label-width="formLabelWidth">
                        <el-input disabled v-model="messageInfo.area" placeholder="所属部门区域"></el-input>
                    </el-form-item>
                    <el-form-item label="部门类型:" :label-width="formLabelWidth">
                        <el-select v-model="messageInfo.type" disabled placeholder="选择部门类型" style="width: 100%">
                            <el-option
                                v-for="item in customDeptOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>

            <div class="box">
                <tree-transfer
                    :from_data="fromData2"
                    :areaData="messageInfo"
                    :to_data="toData"
                    :title="['未绑定的监测点', '已绑定的监测点']"
                    :button_text="['绑定测点', '解除绑定']"
                    :defaultProps="{ label: 'name', children: 'children' }"
                    @add-btn="add"
                    @remove-btn="remove"
                    :mode="mode"
                    :renderContentLeft="renderContentLeft"
                    :renderContentRight="renderContentRight"
                    :defaultExpandedKeys="defaultExpandedKeys"
                    :render-content="renderContent"
                    height="540px"
                    filter
                ></tree-transfer>
                <!-- <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
    </tree-transfer> -->
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="submitArrayLine">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
//import treeTransfer from "/src/views/sys/user-boot/dept/transfer-extend"; // 源码位置
import treeTransfer from 'el-tree-transfer' // 引入
import {
    deptTree,
    getAreaTree,
    getPidAreaByAreaId,
    addDetp,
    updateDetp,
    selectPid,
    deleteDept,
    getDeptBindDeptLineTree,
    deptBindLine,
    deptDeleteBindLine
} from '@/api/admin/dept'
//import pagination  from '../../../components/pagination/index'
import treeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    components: {
        //pagination,
        treeSelect,
        treeTransfer
    },

    data() {
        return {
            panduan: false,
            buquyu: false,
            butype: false,
            fff: false,
            deptId: '',
            deptName: '',
            messageInfo: {},
            linefalg: false,
            searchValue: '',
            tableheight: undefined,
            customDeptOptionflag: false,
            ziDeptOption: [
                {
                    label: '非本部',
                    value: 0
                },
                {
                    label: '本部',
                    value: 1
                }
            ],

            // node_key:'id',
            // 自定义 pid参数名
            // pid: "pid",
            // id:'id',
            defaultExpandedKeys: [],
            formData: {
                area: '',
                name: '',
                pid: -1,
                remark: '',
                sort: 0,
                type: 0,
                code: '',
                specialType: 0
            },
            ExpandedNum: 1,
            showTable: true,
            expandID: [],
            idArr: [],
            areaName: '',
            filterText: '',
            filterText2: '',
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            expandedIds: [],
            checkedIds: [],
            dialogFormVisible: false,
            dialogFormVisible1: false,
            dialogFormVisible3: false,
            loading: false,
            flag: true,
            flag1: false,
            t: '',
            name: '基础监测点',
            areaData: {
                id: undefined,
                deptsName: '',
                customDept: '',
                area: ''
            },
            formLabelWidth: '120px',
            parentName: '',
            value: undefined,
            type: 0,
            row: undefined,
            RowName: '',
            treeData: [],
            unexpandedIds: [],
            uncheckedIds: [],
            defaultProps1: {
                children: 'children',
                label: 'label'
            },
            unTreeData: [
                {
                    id: 1,
                    pid: 0,
                    label: '测试节点1',
                    children: [
                        {
                            id: 33,
                            pid: 1,
                            label: '二级 2-3',
                            children: [
                                {
                                    id: 333,
                                    pid: 33,
                                    label: '三级 3-3-1',
                                    children: []
                                },
                                {
                                    id: 334,
                                    pid: 33,
                                    label: '三级 3-3-2',
                                    children: []
                                },
                                {
                                    id: 335,
                                    pid: 33,
                                    label: '三级 3-3-3',
                                    children: []
                                }
                            ]
                        }
                    ]
                }
            ],
            TargetIds: [],
            TargetTreeData: [
                {
                    id: 1,
                    pid: 0,
                    label: '测试节点2',
                    children: [
                        {
                            id: 11,
                            pid: 1,
                            label: '二级 2-1',
                            children: [
                                {
                                    id: 111,
                                    pid: 11,
                                    label: '三级 3-1-1',
                                    children: []
                                },
                                {
                                    id: 112,
                                    pid: 11,
                                    label: '三级 3-1-2',
                                    children: []
                                },
                                {
                                    id: 113,
                                    pid: 11,
                                    label: '三级 3-1-3',
                                    children: []
                                }
                            ]
                        },
                        {
                            id: 22,
                            pid: 1,
                            label: '二级 2-2',
                            children: [
                                {
                                    id: 222,
                                    pid: 22,
                                    label: '三级 3-2-1',
                                    children: []
                                },
                                {
                                    id: 223,
                                    pid: 22,
                                    label: '三级 3-2-2',
                                    children: []
                                },
                                {
                                    id: 224,
                                    pid: 22,
                                    label: '三级 3-2-3',
                                    children: []
                                }
                            ]
                        },
                        {
                            id: 33,
                            pid: 1,
                            label: '二级 2-2',
                            children: [
                                {
                                    id: 333,
                                    pid: 33,
                                    label: '三级 3-2-1',
                                    children: []
                                }
                            ]
                        }
                    ]
                }
            ],
            long: true,
            formData: {
                area: undefined,
                name: '',
                type: 0,
                remark: '',
                pid: undefined,
                sort: 0
            },
            customDeptOption: [
                { value: 0, label: '非自定义' },
                { value: 1, label: 'web自定义' },
                { value: 2, label: 'App自定义' },
                { value: 3, label: 'web测试' }
            ],
            pageData: {
                pageNum: 3,
                pageSize: 15,
                total: 0
            },
            tableData: [],
            parentNode: [],
            ids: [],
            nodes: [],
            rightIds: [],
            rightNode: [],
            binId: '',
            mode: 'transfer', // transfer addressList
            fromData2: [], // 穿梭框 - 源数据 - 树形
            toData: [], // 穿梭框 - 目标数据 - 树形
            binData: {
                deptId: undefined,
                deptType: undefined,
                id: '',
                type: 0
            }
        }
    },
    watch: {
        value(val, newval) {
            if (val) {
                this.type = 1
                // this.tableData=[]
            } else {
                this.type = 0
                //  this.tableData=[]
            }
        },
        filterText(val) {
            this.$refs.tree.filter(val)
        },
        filterText2(val) {
            this.$refs.tree1.filter(val)
        },
        ExpandedNum: {
            deep: true,
            handler(val) {
                this.ExpandedNum = val
            }
        }
    },
    created() {
        // this.tableheight = (getheight()*2.18)
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.queryData()
        // this.treeLevel()
        //this.queryTreeData()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.tableheight = window.sessionStorage.getItem('appheight') - 81
        },
        changeMode() {
            if (this.mode == 'transfer') {
                this.mode = 'addressList'
            } else {
                this.mode = 'transfer'
            }
        },
        changtype(val) {
            if (val !== 0) {
                this.buquyu = true
            } else {
                this.buquyu = false
            }
        },
        sort(column, event) {
            this.orderBy = column.order
            this.sortBy = column.property
            // console.log(this.orderBy+'============='+this.sortBy)
            this.queryData()
        },
        //树层级
        treeLevel() {
            //
            var data = [
                {
                    id: '6a4367d2b2d9d283bf54f6cd7161d83c',
                    pid: 0,
                    level: 0,
                    name: '测试项目',
                    sort: 0,
                    children: [
                        {
                            id: '3d0b4692e4964fdb96f76834e20726fb',
                            pid: '6a4367d2b2d9d283bf54f6cd7161d83c',
                            level: 1,
                            name: '河北省',
                            sort: 0,
                            children: [
                                {
                                    id: '4468aadc0aa18707bee0824585b7641a',
                                    pid: '3d0b4692e4964fdb96f76834e20726fb',
                                    level: 2,
                                    name: '测试供电公司',
                                    sort: 0,
                                    children: [
                                        {
                                            id: '47f0fc154f05bce409395ee81927d9ef',
                                            pid: '4468aadc0aa18707bee0824585b7641a',
                                            level: 3,
                                            name: '测试变电站',
                                            sort: 0,
                                            children: [
                                                {
                                                    id: '47547da32c593166bcad93114f7e3df3',
                                                    pid: '47f0fc154f05bce409395ee81927d9ef',
                                                    level: 6,
                                                    name: '测试母线_测试监测点1',
                                                    sort: 0,
                                                    children: []
                                                },
                                                {
                                                    id: '47547da32c593166bcad93114f7e3ba2',
                                                    pid: '47f0fc154f05bce409395ee81927d9ef',
                                                    level: 6,
                                                    name: '测试母线_测试监测点2',
                                                    sort: 0,
                                                    children: []
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
            this.fromData2 = data
            this.TargetTreeData.forEach(m => {
                m.children.forEach(n => {
                    n.children.forEach(d => {
                        this.TargetIds.push(d.id)
                    })
                })
            })
        },

        //未绑定树设置已勾选的id数组
        setCheckedNodes(nodes) {
            this.uncheckedIds = nodes
        },
        getCheckedKeys(data, keys, key) {},
        //递归未绑定树
        dgtTeeData(n, data) {
            //遍历树  获取id数组
            for (var i = 0; i < data.length; i++) {
                if (data[i].id === n) {
                    data.splice(i, 1)
                }
                if (data[i].children) {
                    this.dgtTeeData(n, data[i].children)
                }
            }
            return data
        },

        // 获取选中的未绑定树的节点的id-左
        getChildrenNodesL() {
            this.nodes = this.$refs.tree.getCheckedNodes()
            this.parentNode = this.$refs.tree.getHalfCheckedNodes()
            this.nodes.forEach(item => {
                this.ids.push(item.id)
            })
        },
        // 删除未绑定树方法-左
        deletedId(data, ids) {
            //debugger
            for (var m = 0, n = data.length; m < n; m++) {
                for (var i = 0, j = ids.length; i < j; i++) {
                    if (data[m] && data[m].id === ids[i]) {
                        data.splice(m, 1)
                    }
                }
                if (data[m] && data[m].children.length > 0) {
                    this.deletedId(data[m].children, ids)
                }
            }
            return data
        },
        // 未绑定树添加到右边树方法-左
        addId(data, nodes) {
            //debugger
            for (var m = 0, n = data.length; m < n; m++) {
                for (var i = 0, j = nodes.length; i < j; i++) {
                    //父级节点相同添加其字节点
                    if (data[m] && data[m].pid === nodes[i].pid) {
                        if (data[m] && data[m].children.length > 0) {
                            data.push(nodes[i].children)
                        }
                    }
                    //父节点不同直接添加其节点
                    if (data[m] && data[m].pid != nodes[i].pid) {
                        data.push(nodes[i])
                    }
                }
                if (data[m] && data[m].children.length > 0) {
                    this.addId(data[m].children, nodes)
                }
            }
            return data
        },

        // 获取选中的目标绑定树的节点的id-右
        getChildrenNodesR() {
            this.rightNode = this.$refs.tree2.getCheckedNodes()
            this.rightNode.forEach(item => {
                this.rightIds.push(item.id)
            })
        },
        // 删除解除绑定树方法-右
        deletedId(data, rightIds) {
            //debugger
            for (var m = 0, n = data.length; m < n; m++) {
                for (var i = 0, j = rightIds.length; i < j; i++) {
                    if (data[m] && data[m].id === rightIds[i]) {
                        data.splice(m, 1)
                    }
                }
                if (data[m] && data[m].children.length > 0) {
                    this.deletedId(data[m].children, rightIds)
                }
            }
            return data
        },
        // 点击绑定按钮右移动=删除
        gotoRight() {
            this.getChildrenNodesL()
            // console.log(this.nodes)
            this.unTreeData = this.deletedId(this.unTreeData, this.ids)
            this.TargetTreeData = this.addId(this.TargetTreeData, this.nodes)
        },
        //接除绑定
        gotoLeft() {
            this.getChildrenNodesR()
            this.TargetTreeData = this.deletedId(this.TargetTreeData, this.rightIds)
        },
        submitEvent2() {
            //this.uncheckedIds = this.$refs.tree.getCheckedNodes(false, true).map(node => node.id)
        },
        //获取部门树
        queryData() {
            deptTree().then(response => {
                if (response.code == 'A0000') {
                    if (response.data.length > 0) {
                        this.long = false
                        // response.data.forEach(m=>{
                        //   if(m.children && m.type==0){
                        //     this.linefalg = true
                        //   }else{
                        //     this.linefalg = false
                        //   }
                        //   m.children.forEach(n=>{
                        //     if(n.children && n.type==0){
                        //      this.linefalg = true
                        //     }else{
                        //       this.linefalg = false
                        //     }
                        //   })
                        // })
                        this.tableData = response.data
                        this.handleExpandNumChange()
                        let id = '0'
                        this.queryTreeData(id)
                    }
                }
                if (response.code == 'A0001') {
                    this.long = true
                    this.tableData = []
                    this.handleExpandNumChange()
                    let id = '0'
                    this.queryTreeData(id)
                }
            })
        },
        //获取最全区域树
        queryTreeData(id) {
            const data = { id: id, type: 0 }
            getAreaTree(data).then(response => {
                if (response.code == 'A0000') {
                    this.treeData = response.data
                    this.treeData.forEach(m => {
                        this.idArr.push(m.id)
                    })
                }
            })
        },
        getAreaId(id) {
            const data = { id: id, type: 0 }
            getPidAreaByAreaId(data).then(response => {
                if (response.code == 'A0000') {
                    this.treeData = response.data
                    this.treeData.forEach(m => {
                        this.idArr.push(m.id)
                    })
                }
            })
        },
        //部门绑定区域触发区域树节点
        handleNodeClick(data, node) {
            this.panduan = false
            // console.log(node,data)
            this.deptId = data
            this.$refs.selectTree1.blur()
            this.deptName = data.name
            this.deptId = data.id
            //未绑定的
            if (data.isFalse == 0) {
                this.areaName = data.name
                this.formData.area = data.id
            }
            //已绑定的
            if (data.isFalse == 1) {
                this.$message({
                    message: '该区域已经绑定了部门',
                    type: 'warning'
                })
                this.panduan = true
            }
        },
        //绑定监测点
        relationClick(row) {
            this.panduan = false
            this.binId = row.id
            this.dialogFormVisible1 = true
            this.RowName = row.name + '绑定监测点'
            this.messageInfo = {
                area: row.areaName,
                type: row.type,
                name: row.name
            }
            this.binData = {
                deptId: row.id,
                deptType: row.type,
                id: row.area,
                type: 0
            }
            this.getDeptBinTree()
        },
        //新增
        AddTypeClick() {
            this.panduan = false
            this.dialogFormVisible = true
            this.areaName = ''
            this.formData.pid = -1
            this.RowName = '部门新增'
            this.parentName = '根节点'
            this.t = 'add'
            this.fff = false
            let id = '0'
            this.queryTreeData(id)
        },
        //行内新增
        AddClick(row) {
            this.fff = false
            if (row.type !== 0) {
                this.buquyu = true
                this.formData.area = row.area
            } else {
                this.buquyu = false
            }
            this.deptName = ''
            this.panduan = false
            this.customDeptOption = [
                { value: 0, label: '非自定义' },
                { value: 1, label: 'web自定义' },
                { value: 2, label: 'App自定义' },
                { value: 3, label: 'web测试' }
            ]
            let id = row.area
            this.queryTreeData(id)
            this.customDeptOptionflag = false
            this.row = row
            this.formData.type = 0
            this.dialogFormVisible = true
            this.areaName = ''
            this.formData.name = ''
            this.formData.remark = ''
            this.RowName = row.name + '部门新增'
            this.formData.pid = row.id
            this.formData.area = row.area
            this.parentName = row.name
            this.formData.code = ''
            this.t = 'add'
            const data = { id: row.pid, type: 0 }
            this.idArr = []
            // getAreaTree(data).then((response) => {
            //   if (response.code == "A0000") {
            //     this.treeData = response.data;
            //     this.treeData.forEach((m) => {
            //       this.idArr.push(m.id);
            //     });
            //   }
            // });
        },
        //修改
        EditClick(row) {
            this.getAreaId(row.area)
            this.fff = false
            this.panduan = false
            if (row.type !== 0) {
                this.customDeptOptionflag = true
                this.customDeptOption = [
                    { value: 0, label: '非自定义' },
                    { value: 1, label: 'web自定义' },
                    { value: 2, label: 'App自定义' },
                    { value: 3, label: 'web测试' }
                ]
            } else {
                this.customDeptOptionflag = false
                this.customDeptOption = [
                    { value: 1, label: 'web自定义' },
                    { value: 2, label: 'App自定义' },
                    { value: 3, label: 'web测试' }
                ]
            }
            this.dialogFormVisible = true
            this.RowName = row.name + '部门修改'
            this.parentName = row.name
            this.areaName = row.areaName
            this.deptName = row.name
            this.deptId = row.area
            this.t = 'edit'
            this.formData = {
                area: row.area,
                id: row.id,
                pid: row.pid,
                name: row.name,
                type: row.type,
                remark: row.remark,
                sort: row.sort,
                code: row.code,
                specialType: row.specialType
            }
            let id = row.area
            this.queryTreeData(id)
        },
        //删除
        DeleteClick(row) {
            var p = row.id
            var arr = []
            arr.push(p)
            arr = JSON.stringify(arr)
            selectPid(arr).then(response => {
                this.$confirm(response.message + '是否确认删除', '提示', {
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        deleteDept(arr).then(response => {
                            if (response.code == 'A0000') {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功'
                                })
                                this.queryData()
                            }
                        })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            })
        },
        //新增修改提交
        submitEvent() {
            if (this.t == 'add') {
                addDetp(this.formData).then(response => {
                    if (response.code == 'A0000') {
                        this.$message({
                            type: 'success',
                            message: '新增成功'
                        })
                        this.queryData()
                    }
                })
            }
            if (this.t == 'edit') {
                updateDetp(this.formData).then(response => {
                    if (response.code == 'A0000') {
                        this.$message({
                            type: 'success',
                            message: '修改成功'
                        })
                        this.queryData()
                    }
                })
            }
            this.dialogFormVisible = false
        },
        //获取下来行政区域或企业部门
        getTreeData() {},
        //获取列表
        getQueryDataList() {},
        //未绑定
        noReationB() {
            this.flag1 = false
            this.flag = true
            this.name = '基础监测点'
        },
        //其他绑定
        relationB() {
            this.flag1 = true
            this.flag = false
            this.name = '其他监测点'
        },
        //过滤树节点
        filterNode(value, treeData) {
            if (!value) return true
            return treeData.label.indexOf(value) !== -1
        },

        showManageDetail(row, expandedRows) {
            //   console.log("---------------------------")
            //  console.log(expandedRows)
            //   console.log("---------------------------")
            if (expandedRows) {
                // alert(22222)
                // alert('触发展开事件')
                // console.log("---------------------------")
                // console.log(event)
                //  console.log("---------------------------")
            } else {
                // alert('触发关闭事件')
            }
        },
        //判断需要展开层级
        handleExpandNumChange() {
            if (this.ExpandedNum > 0) {
                this.setExpandKeys(this.tableData)
            }
        },
        //层级展开递归方法
        setExpandKeys(dataList, n) {
            //debugger
            if (!n) n = 1
            for (let i = 0; i < dataList.length; i++) {
                if (n <= this.ExpandedNum) {
                    //this.expandID=[]
                    this.expandID.push(`${dataList[i].id}`)
                    if (dataList[i].hasOwnProperty('children')) {
                        const children = dataList[i].children
                        this.setExpandKeys(children, n + 1)
                    }
                }
            }
        },
        submitArrayLine() {
            var arrids = []
            this.toData.forEach(m => {
                m.children.forEach(n => {
                    n.children.forEach(d => {
                        d.children.forEach(f => {
                            f.children.forEach(p => {
                                arrids.push(p.id)
                            })
                        })
                    })
                })
            })
            let data = {
                id: this.binId,
                ids: arrids
            }
            deptBindLine(data).then(response => {
                if (response.code == 'A0000') {
                    this.$message.success('部门绑定监测点成功')
                    this.dialogFormVisible1 = false
                }
            })
        },
        // 添加按钮
        add(fromData2, toData, obj) {
            // console.log('绑定')
            // console.log("fromData2:", fromData2);
            // console.log("toData:", toData);
            // console.log("obj:", obj);
        },
        // 移除按钮
        remove(fromData2, toData, obj) {
            //  console.log('解除绑定')
            // console.log("fromData2:", fromData2);
            // console.log("toData:", toData);
            // console.log("obj:", obj);
        },
        renderContent(h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                    <span>{node.name}</span>
                    <span>
                        <el-button size="mini" type="text" on-click={() => this.append(data)}>
                            Append
                        </el-button>
                        <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>
                            Delete
                        </el-button>
                    </span>
                </span>
            )
        },
        renderContentLeft(h, { data, node }) {
            return (
                <span class="span-ellipsis">
                    <span title={data.name}>{data.name}</span>
                </span>
            )
        },
        renderContentRight(h, { data, node }) {
            return (
                <span class="span-ellipsis">
                    <span title={data.name}>{data.name}</span>
                </span>
            )
        },
        getDeptBinTree() {
            getDeptBindDeptLineTree(this.binData).then(response => {
                if (response.code == 'A0000') {
                    var nothingBindTree = response.data[0].nothingBindTree
                    nothingBindTree[0].pid = 0
                    // console.log(nothingBindTree)
                    this.fromData2 = nothingBindTree
                    var myselfBindTree = response.data[0].myselfBindTree
                    myselfBindTree[0].pid = 0
                    // console.log(myselfBindTree)
                    this.toData = myselfBindTree
                    this.fromData2.forEach(m => {
                        m.children.forEach(n => {
                            n.children.forEach(d => {
                                this.defaultExpandedKeys.push(d.id)
                            })
                        })
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped></style>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-tree {
    width: 100% !important ;
    overflow: hidden;
    // overflow: scroll;
}
::v-deep .el-tree > .el-tree-node {
    display: block !important;
    min-width: 100% !important;
    padding: 0 !important;
}
::v-deep .el-tree-node {
    white-space: nowrap !important;
    outline: 0 !important;
}
</style>
