<template>
    <Page>
        <div class="device-manage">
            <DeviceTree @selectDevice="selectDevice" />
            <div class="device-manage-right" v-if="deviceData" v-loading="loading">
                <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
                    <template slot="extra">
                        <el-button
                            type="primary"
                            icon="el-icon-share"
                            size="small"
                            @click="openGroup"
                            :loading="getGroupLoading"
                        >
                            设备模版分组
                        </el-button>
                    </template>
                    <el-descriptions-item>
                        <template slot="label">名称</template>
                        {{ deviceData.name }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">类型</template>
                        {{
                            devTypeOptions.filter(item => item.value == deviceData.devType)[0] &&
                            devTypeOptions.filter(item => item.value == deviceData.devType)[0].label
                        }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">接入方式</template>
                        {{ deviceData.devAccessMethod }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">识别码</template>
                        {{ deviceData.ndid }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">型号</template>
                        {{
                            devModelOptions.filter(item => item.value == deviceData.devModel)[0] &&
                            devModelOptions.filter(item => item.value == deviceData.devModel)[0].label
                        }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">接入时间</template>
                        {{ deviceData.time }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-tabs v-model="dataSet" type="card" class="device-manage-box-card" @tab-click="handleClick">
                    <el-tab-pane
                        lazy
                        :label="item.name"
                        :name="item.id"
                        v-for="item in deviceData.dataSetList"
                        :key="item.id"
                    ></el-tab-pane>
                    <el-table
                        stripe
                        :header-cell-style="{ height: '24px', padding: '0px' }"
                        highlight-current-row
                        header-cell-class-name="table_header"
                        :data="tableData"
                        height="calc(100vh - 320px)"
                        border
                        style="width: 100%"
                    >
                        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                        <el-table-column prop="name" label="数据名称" align="center"></el-table-column>
                        <el-table-column prop="phasic" label="相别" align="center"></el-table-column>
                        <el-table-column prop="type" label="数据类型" align="center"></el-table-column>
                        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                        <el-table-column prop="startTimes" label="开始次数" align="center"></el-table-column>
                        <el-table-column prop="endTimes" label="结束次数" align="center"></el-table-column>
                    </el-table>
                </el-tabs>
                <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" class="dfghs">
                    <el-descriptions class="mb10" :column="3" border>
                        <el-descriptions-item>
                            <template slot="label">名称</template>
                            {{ deviceData.name }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">识别码</template>
                            {{ deviceData.ndid }}
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions :title="'数据集名称: ' + dataSetName" size="mini" :column="2" border>
                        <template slot="extra">
                            <template v-if="newGroupVisible">
                                <el-input
                                    v-model="form.name"
                                    autocomplete="off"
                                    clearable
                                    placeholder="请输入分组名称"
                                ></el-input>
                                <el-button class="mt10" type="primary" size="mini" @click="newGroupVisible = false">
                                    取消
                                </el-button>
                                <el-button class="mt10 ml10" type="primary" size="mini" @click="addNewGroup">
                                    完成
                                </el-button>
                            </template>
                            <template v-else>
                                <el-button type="primary" size="mini" @click="selectGroup">
                                    {{ selectAll ? '取消全选' : '全选' }}
                                </el-button>
                                <el-button type="primary" size="mini" @click="newGroupVisible = true">
                                    新增分组
                                </el-button>
                            </template>
                        </template>
                    </el-descriptions>
                    <div style="height: 40vh; overflow: auto">
                        <el-tree
                            :data="treeData"
                            node-key="id"
                            draggable
                            :allow-drop="allowDrop"
                            :allow-drag="allowDrag"
                        >
                            <div class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ node.label }}</span>
                                <div v-if="node.level == 1">
                                    <el-popconfirm
                                        style="margin-right: 20px"
                                        :title="'确定删除' + node.label + '吗?'"
                                        @confirm="deleteGroup(node)"
                                    >
                                        <i class="el-icon-delete" slot="reference"></i>
                                    </el-popconfirm>
                                    <el-checkbox v-model="data.isShow" @click.stop.native=""></el-checkbox>
                                </div>
                            </div>
                        </el-tree>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </Page>
</template>
<script>
import { getDeviceData, getTargetById, getGroup, updateGroArr } from '@/api/app/device.js'
import { queryByCode, queryCsDictTree, queryByid } from '@/api/app/setting.js'
import DeviceTree from '../components/deviceTree'

export default {
    name: 'GovernDeviceManage',
    components: { DeviceTree },
    data() {
        return {
            selectAll: false,
            dialogFormVisible: false,
            getGroupLoading: false,
            newGroupVisible: false,
            formLabelWidth: '68px',
            dialogTitle: '设备模版分组',
            deviceData: null,
            dataSet: '',
            loading: false,
            devTypeOptions: [],
            devModelOptions: [],
            tableData: [],

            form: {
                name: ''
            },
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    computed: {
        dataSetName() {
            if (this.deviceData && this.deviceData.dataSetList && this.deviceData.dataSetList.length > 0) {
                return this.deviceData.dataSetList.filter(item => item.id == this.dataSet)[0].name
            }
        }
    },
    created() {
        queryByCode('Device_Type').then(res => {
            queryCsDictTree(res.data.id).then(res => {
                this.devTypeOptions = res.data.map(item => {
                    return {
                        value: item.id,
                        label: item.name,
                        ...item
                    }
                })
            })
            queryByid(res.data.id).then(res => {
                this.devModelOptions = res.data.map(item => {
                    return {
                        value: item.id,
                        label: item.name,
                        ...item
                    }
                })
            })
        })
    },
    mounted() {},
    methods: {
        deleteGroup(node) {
            console.log(node)
            if (node.data.children && node.data.children.length > 0) {
                this.$message.error('该分组下有指标，不能删除')
                return
            }
            let index = this.treeData.findIndex(item => item.id === node.data.id || item.name === node.data.name)
            this.treeData.splice(index, 1)
        },
        selectGroup() {
            if (this.selectAll) {
                this.treeData.forEach(item => {
                    item.isShow = false
                })
                this.selectAll = false
            } else {
                this.treeData.forEach(item => {
                    item.isShow = true
                })
                this.selectAll = true
            }
        },
        addNewGroup() {
            if (this.form.name === '') {
                this.$message.error('请输入分组名称')
                return
            }
            if (this.treeData.some(item => item.name === this.form.name)) {
                this.$message.error('分组名称已存在')
                return
            }
            this.newGroupVisible = false
            this.treeData.splice(0, 0, {
                id: '',
                label: this.form.name,
                name: this.form.name,
                isShow: true,
                children: []
            })
            this.form.name = ''
        },
        submit() {
            let data = JSON.parse(JSON.stringify(this.treeData))
            const call = data => {
                data.forEach(item => {
                    item.isShow = item.isShow ? 1 : 0
                    delete item.label
                    if (item.children && item.children.length > 0) {
                        call(item.children)
                    }
                })
            }
            call(data)
            data.forEach(item => {
                item.children = item.children.map(item => item.id)
            })
            updateGroArr({
                setId: this.dataSet,
                data: data
            }).then(res => {
                if (res.code == 'A0000') {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                    this.dialogFormVisible = false
                }
            })
        },
        openGroup() {
            if (!this.dataSet) {
                return this.$message.error('暂无数据')
            }
            this.getGroupLoading = true
            getGroup(this.dataSet).then(res => {
                const call = data => {
                    data.forEach(item => {
                        item.label = item.name
                        item.isShow = item.isShow == 1
                        if (item.children && item.children.length > 0) {
                            call(item.children)
                        }
                    })
                }
                call(res.data)
                this.treeData = res.data
                this.selectAll = this.treeData.every(item => item.isShow)
                this.dialogFormVisible = true
                this.getGroupLoading = false
            })
        },
        selectDevice(e) {
            this.loading = true
            console.log(e, 123)
            getDeviceData(e.id, 'rt').then(res => {
                this.deviceData = res.data
                this.loading = false
                if (res.data.dataSetList.length === 0) {
                    this.dataSet = ''
                    this.tableData = []
                } else {
                    this.dataSet = res.data.dataSetList[0].id
                    this.handleClick()
                }
            })
        },
        handleClick(tab, event) {
            this.tableData = []
            getTargetById(this.dataSet).then(res => {
                console.log(res)
                this.tableData = res.data
            })
        },
        allowDrop(draggingNode, dropNode, type) {
            console.log(dropNode)
            return (dropNode.level === 2 && type !== 'inner') || (dropNode.level === 1 && type === 'inner')
        },
        allowDrag(draggingNode) {
            console.log(draggingNode)
            return draggingNode.level === 2
        }
    }
}
</script>
<style lang="scss">

.device-manage {
    display: flex;
    .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: $hoverf !important;
    }
    .el-dialog__body {
        max-height: 70vh !important;
        padding: 10px !important;
        .el-descriptions__title {
            font-size: 14px;
        }

        .el-descriptions__extra {
            height: 36px;
            align-items: center;
            display: flex;
        }

        .el-form {
            padding-right: 0;
        }
    }
    .el-descriptions--small.is-bordered .el-descriptions-item__cell {
        padding: 8px 10px !important;
    }

    .device-manage-right {
        overflow: hidden;
        flex: 1;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
}
</style>
