<template >
    <div class="patrol_spot">
        <el-container style="padding:0px;height:77.6vh;">
            <el-aside width='333px' style='height:85vh'>
                <el-card class="treeCard tree-container" :body-style="{ padding: '0px' }">
                    <div class="monitor_point_left_top">
                        <div class="title-bold monitor_point_left_topL" slot='header'>资源点列表</div>
                        <div class="monitor_point_left_topR">
                            <el-input suffix-icon="el-icon-search" size="mini" @keyup.enter.native="initTreeStationMap" v-model="searchInput" clearable></el-input>
                        </div>
                    </div>
                    <div class="tree-container">
                        <el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true'
                                           :highlight-current='true' :props="defaultProps" :default-expand-all='false'
                                           @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys'
                                           :filter-node-method="filterNode"
                                           :node-key='nodeKey'>
                              <span class="custom-tree-node" style='width:85%;line-height: 18px;' slot-scope="{ node, data }">
                                <span v-if="node.data.level != 6 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon"></span>
                                <span v-if="node.data.level != 6 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon"></span>
                                <span v-if="node.data.level == 6 && node.data.type=='枪机'" class="el-icon-wq-treeQiang xa-icon"></span>
                                <span v-if="node.data.level == 6 && node.data.type!='枪机'" class="el-icon-wq-treeQiu xa-icon"></span>
                                <span>&nbsp;{{node.label}}</span>
                                <span v-if=" node.data.iconB" class='el-icon-my-treeFlag'></span>

                              </span>
                        </el-tree>
                    </div>
                </el-card>
            </el-aside>

            <el-container class="el_container-style">
                <el-header class="el_header-style">
                    <span class="title-bold title-left-color">预置点维护</span>
                    <el-popover placement="bottom" width="150" >
                            <el-button slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)'> 筛选</el-button>
                            <el-checkbox-group v-model="checkList">
                                <el-col :span="24">
                                    <el-checkbox v-for="(item,index) in tableHeader" :label="item" :key="index"  >
                                     {{item.label}}
                                    </el-checkbox>
                                </el-col>
                            </el-checkbox-group>
                    </el-popover>
                    <div style="float:right; margin-right:5px;">
                        <el-button type="primary" size="mini" @click="addClick" v-if="isAuth('sys:preset:add')" icon='el-icon-plus'
                                   style="float:left;margin-top:6px">新增
                        </el-button>
                    </div>
                </el-header>
                <el-main class="box_main" onselectstart="return false;">
                    <el-card class="tableCard" style="background:#ffffff !important;">
                        <!-- <el-table :data="dataList" v-loading="dataListLoading" :stripe="true"
                                  highlight-current-row
                                  :header-cell-style="{background:'#EEF8FF',color:'#333333'}" style="width: 100%;"
                                  @sort-change="sortChange">
                            <el-table-column type="index" header-align="center" align="center" width='80' label="序号">
                                <template scope="scope"><span>{{scope.$index+(pageIndex - 1) * pageSize + 1}} </span></template>
                            </el-table-column>
                            <el-table-column prop="resourceName" header-align="center" align="center"
                                             label="资源名称"></el-table-column>
                            <el-table-column prop="resourceCode" header-align="center" align="center"
                                             label="资源编号"></el-table-column>
                            <el-table-column prop="name" header-align="center" align="center" label="预置点名称"
                                             sortable='custom'></el-table-column>
                            <el-table-column prop="orderNum" header-align="center" align="center" label="预置点编号"
                                             sortable='custom'></el-table-column>
                            <el-table-column header-align="center" align="center" label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="editClick(scope.row)">编辑</el-button>
                                    <el-button type="text" @click="removeClick(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table> -->
                        <drag-table :data="dataList" :header="checkList" :option="tableOption"  @getDataList="getDataList" v-loading="dataListLoading"  :operationNum="3"  :isShowOperate="true">
                            <!-- 插槽  -->
                        <el-table-column slot="fixed"  fixed  prop=""  label="序号"  width="80"  header-align="center" align="center" >
                            <template slot-scope="scope">
                                  {{scope.$index+(pageIndex - 1) * pageSize + 1}}
                            </template>
                        </el-table-column>

                        <!-- 操作项 -->
                        <template slot-scope="scope">
                            <el-button type="text" v-if="isAuth('sys:preset:update')" @click="editClick(scope.row)">编辑</el-button>
                            <el-button type="text" v-if="isAuth('sys:preset:delete')" @click="removeClick(scope.row)">删除</el-button>
                        </template>

                        </drag-table>
                    </el-card>
                </el-main>
                <el-footer class="box_footer">
                    <el-pagination background @size-change="sizeChangeHandle"
                                   @current-change="currentChangeHandle"
                                   :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]"
                                   :page-size="pageSize" :total="totalPage"
                                   layout="total, sizes, prev, pager, next, jumper"></el-pagination>
                </el-footer>
            </el-container>

            <query-detail ref='queryDetail' @closeQ="closeQueryDetailVisible"></query-detail>
        </el-container>
    </div>

</template>

<script>
    import QueryDetail from './query-detail'
    // import { getUUID } from '@/util'
    import Vue from 'vue'
    import dragTable from '../../components/tab'

    export default {
        name: 'sys-user',
        filters: {
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 20) {
                    return value.slice(0, 20) + '...'
                }
                return value
            }
        },
        data() {
            return {
                checkList: [], //筛选数据
                tableHeader: [
                    { label: '资源名称', prop: 'resourceName', sort: false },
                    { label: '资源编号', prop: 'resourceCode', sort: false },
                    { label: '预置点名称', prop: 'name' },
                    { label: '预置点编号', prop: 'orderNum' }
                ],
                tableOption: {
                    border: false, //是否边框
                    maxHeight: 500 //高度
                },
                transformationSta: 1,
                isCollapse: true,
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                queryDetailVisible: false,
                treeData: [],
                defaultExpandedKeys: [],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    level1: 'level'
                },
                nodeKey: 'id',
                station: {}, //当前选择的站点
                mapList: [], //当前站点的所有层
                stationMap: {}, //当前选择的层
                resource: {}, //当前选择的资源点
                checkedData: {
                    lineId: '',
                    lineName: '',
                    stationId: '',
                    stationName: '',
                    subSystem: '',
                    tierId: '',
                    tierName: '',
                    resourceId: '',
                    sId: localStorage.getItem('stationId'),
                    subCode: '02',
                    layerId: ''
                },
                currentNode: {},
                activeName: '1',
                searchInput: '',
                treeOnList: null

            }
        },
        components: {
            QueryDetail,
            dragTable
        },
        watch: {
            searchInput(val) {
                this.$refs.tree.filter(val)
            },
            totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
                let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
                //总页数小于当前页数则重新加载列表数据
                if (pages < this.pageIndex) {
                    this.pageIndex = pages || 1
                    this.getDataList()//获取表格数据的方法
                }
            }
        },
        created() {
            this.initTreeStationMap()
            this.checkList = [...this.tableHeader]
        },
        methods: {
            handleClick(tab) { //左侧tab切换
                if (tab) {
                    this.activeName = tab
                }
                if (this.activeName == 1) {
                    this.initTreeStationMap()
                }
            },
            // 树节点过滤
            filterNode(value, data) {
                if (!value) return true
                return data.name.indexOf(value) !== -1
            },
            //初始化站点下的资源点
            initTreeStationMap() {
                this.$http({
                    url: this.$http.adornUrlEq('/liResource/getSphericalCameraStationMap'),
                    method: 'post',
                    data: {
                        stationId: this.checkedData.sId,
                        resourceName: this.searchInput
                    }
                }).then(data => {
                    if (data && data.code === 0) {
                        this.treeData = data.nodes
                        console.log(this.treeData, 'treeData')
                        if (this.treeData && this.treeData.length > 0) {
                            Vue.set(this.treeData[0], 'iconB', true)
                        }
                    }
                }).then(() => {
                    if (!this.treeData || this.treeData.length <= 0) {
                        return
                    }
                        this.defaultExpandedKeys = [this.treeData[0].id]
                        this.$nextTick(() => {
                        this.$refs.tree.setCurrentNode(this.treeData[0])
                        })
                    // if (this.checkedData.sId) {
                    //     this.defaultExpandedKeys = [this.treeData[0].id]
                    //     this.$refs.tree.setCurrentNode(this.treeData[0])
                    // }
                })
            },
            getDataList(sort, order) {
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl('/sysPreset/list'),
                    method: 'post',
                    data: {
                        sort: sort || '',
                        order: order || '',
                        resourceId: this.treeOnList.id,
                        page: this.pageIndex,
                        rows: this.pageSize,
                        stationId: this.checkedData.sId
                    }
                }).then(data => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.rows
                        this.totalPage = data.page.total
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            isFlag(data, id) {
                data.forEach(res => {
                    if (res.id === id) {
                        Vue.set(res, 'iconB', true)
                    } else {
                        Vue.set(res, 'iconB', false)
                    }
                    if (res.children) {
                        this.isFlag(res.children, id)
                    }
                })
            },
            //线路资源点树节点点击事件
            handleNodeClick(node) {
                this.currentNode = node
                let name = node.name
                let id = node.id
                this.isFlag(this.treeData, id)

                // this.treeData.forEach(res => {
                //     if (res.id === id) {
                //         Vue.set(res, 'iconB', true)
                //     } else {
                //         Vue.set(res, 'iconB', false)
                //     }
                // })

                if (node.level === 4) { //子系统
                    this.treeOnList = null
                } else if (node.level === 6) { //资源点1
                    this.treeOnList = node
                    this.getDataList()
                }
            },

            //详情
            closeQueryDetailVisible(now) {
                this.getDataList()
            },

            addClick() {
                if (!this.treeOnList) {
                    this.$message.warning('请选择设备')
                    return false
                }
                this.$refs.queryDetail.init(this.treeOnList)
            },
            editClick(row) {
                this.$refs.queryDetail.init(this.treeOnList, JSON.parse(JSON.stringify(row)))
            },
            removeClick(row) {
                this.$confirm('确认删除该预置点', '删除预置点', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/sysPreset/delete'),
                        method: 'get',
                        params: {
                          id: row.id,
                          stationId: this.checkedData.sId
                        }
                    }).then(data => {
                        if (data && data.code === 0) {
                            this.$message.success('删除成功')
                            this.getDataList()
                        }
                    })
                })
            },

            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            sortChange(node) {
                console.log(node)
                let obj = {
                    resourceName: 'resource_name',
                    resourceCode: 'resource_code',
                    orderNum: 'order_num',
                    name: 'name'
                }
                let sort = obj[node.prop]
                let order = ''
                if (node.order) {
                    order = node.order == 'ascending' ? 'ASC' : 'DESC'
                }
                this.getDataList(sort, order)
            }
        }

    }
</script>
<style>

    .inputWidth {
        width: 210px;
    }

</style>
<style lang='scss' scoped>
    .dic_tree {
        background: #f4f4f4;
        font-size: 14px;
        transform: translateX(-6px);
        margin-top: 20px;
    }
    .dic_tree /deep/ .el-tree-node__content {
        padding-left: 0px !important;
    }

    .dic_tree /deep/ .el-tree-node {
        position: relative;
        padding-left: 16px;
    }

    .dic_tree /deep/ .el-tree-node__children {
        padding-left: 8px;
    }

    .dic_tree /deep/ .el-tree-node :last-child:before {
        height: 38px;
    }

    .dic_tree /deep/ .el-tree > .el-tree-node:before {
        border-left: none;
    }

    .tree-container /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .dic_tree /deep/ .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:before {
        border-left: 1px dashed #bfbfbf;
        bottom: 0px;
        height: 100%;
        top: -26px;
        width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:after {
        border-top: 1px dashed #bfbfbf;
        height: 20px;
        top: 12px;
        width: 36px;
    }
    .tree-container /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .tree-container {
        /* 树的parent，样式自定 */
    }
    .dic_tree /deep/ .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    .dic_tree /deep/ .el-icon-caret-right:before {
        background: url("../../../assets/images/add.png");
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        font-size: 18px;
        background-size: 18px;
    }
    .dic_tree
    /deep/
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        background: url("../../../assets/images/sub.png");
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        font-size: 18px;
        background-size: 18px;
    }
.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon{
  padding:0 2px 0 0;
}
    .dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
        opacity: 0;
    }
    .dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
        // margin-left: -15px !important;
    }
</style>
<style >
.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content
  .custom-tree-node {
  background-color: #33b0f6 !important;
  color: aliceblue;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color:transparent;
}
</style>
<style lang='scss' scoped>
    .inputWidth {
        width: 130px;
    }

    .resource-container {
        width: 100%;
        height: 100%;
        position: relative;
        border: 0px solid black;
        overflow: auto;

        .span-box {
            height: 48px;
            width: 60px;
            font-size: 12px;
            border-radius: 5px;
            /* border: 1px solid red; */
            position: absolute;
            // left: 0;
            // top: 0;
        }

        .span-box.el-icon-wq-qiangji1 {
            height: 60px;
            width: 72px;
        }

        .span-box.el-icon-wq-qiuji1 {
            height: 60px;
            width: 72px;
        }

        .pointer {
            cursor: pointer !important;
        }
    }

    .tier-btn {
        .active-tier {
            background-color: #409eff;
            color: #ffffff;
        }
    }

    .patrol_spot {
        .el-tree {
            background: #f4f4f4;
            font-size: 12px;
        }

        .el-card {
            height: 99%;
            background: #f4f4f4;
        }

        .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
            background-color: #f4f4f4 !important;
            color: #fff !important;

            .el-button--text {
                color: #fff;
            }

            .custom-tree-node {
                background-color: #35aff8 !important;
            }
        }

        .patrol_spot_left_top {
            height: 50px;
            background: #e1edf4;
            padding-left: 10px;

            .patrol_spot_left_topL {
                height: 40px;
                padding-top: 10px;
                float: left;

                div {
                    height: 40px;
                    float: left;
                    padding: 0 10px 0 10px;
                    line-height: 40px;
                    cursor: pointer;
                    font-size: 14px;

                    span {
                        color: #35aff8;
                    }
                }

                div.on {
                    background: #fff;
                    border: 1px solid #c3c3c3;
                    border-bottom: none;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                }
            }

            .patrol_spot_left_topR {
                float: right;
                margin-top: 10px;

                .el-input {
                    width: 109px;
                }
            }
        }

        .patrol_spot_right_button {
            height: 50px;
            width: 100%;
            background: #e3e4e6;

            h1 {
                font-size: 16px;
                line-height: 42px;
                height: 42px;
                margin: 0;
                font-family: Adobe Heiti Std;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
                float: left;
            }

            .span {
                width: 5px;
                height: 16px;
                background: rgba(33, 172, 252, 1);
                float: left;
                margin: 13px 10px 0 20px;
            }

            patrol_spot_right_button_l {
                margin-left: 20px;
            }

            .el-button--primary.is-plain {
                margin-top: 10px;
                background: #ced1d6;
                border: none;
                color: #656565;
            }

            .tier-btn .active-tier {
                background-color: #409eff;
                color: #ffffff;
            }

            .el-button.is-plain:hover {
                background: #FFF;
                border-color: #32A5EA;
                color: #32A5EA;
            }

            .patrol_spot_right_button_r {
                float: right;
                margin-top: 10px;
                width: 95px;
                height: 26px;
                font-size: 12px;
                line-height: 25px;
                overflow: hidden;
                border-radius: 13px;
                background: #ced1d6;
                border: 1px solid rgba(0, 0, 0, 0.2);
                box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25), 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

                div {
                    width: 46px;
                    height: 24px;
                    float: left;
                    text-align: center;
                    cursor: pointer;
                }

                div.on {
                    background: #45b5f8;
                    color: #fff;
                    border-radius: 13px;
                    border: 1px solid rgba(23, 41, 71, 0.5);
                    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3), 0px 2px 0px 0px rgba(255, 255, 255, 0.15);
                }
            }
        }
    }

    .monitor_point_left_top {
        height: 42px;
        background: #e1edf4;
        padding-left: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .monitor_point_left_topL {
            height: 40px;
            padding-top: 10px;
            float: left;
            div {
                height: 40px;
                float: left;
                padding: 0 10px 0 10px;
                line-height: 40px;
                cursor: pointer;
                font-family: Microsoft YaHei;
                font-size: 14px;
                span {
                    color: #35aff8;
                }
            }
            div.on {
                background: #fff;
                border: 1px solid #c3c3c3;
                border-bottom: none;
                font-family: Microsoft YaHei;
                font-weight: 400;
            }
        }
        .monitor_point_left_topR {
            // float: right;
            margin-right: 20px;
            // margin-top: 10px;
            .el-input {
                width: 109px;
            }
            /deep/ .el-input--mini .el-icon-search {
                line-height: 28px;
                color: #35aff8;
                font-weight: bold;
            }
        }
    }

</style>
