<template>
    <Page>
        <div class="device-manage">
            <DeviceTree showCheckbox @check-change="checkChange" :default-checked-keys="defaultCheckedKeys" />
            <el-table
                highlight-current-row
                style="flex: 1"
                :data="tableData"
                height='calc(100vh - 135px)'
                bordervth
                stripe
                v-loading="loading"
                :header-cell-style="{
                    //background:'#5E95E8',
                    //color:'#FFFFFF',
                    height: '25px',
                    padding: '0px'
                }"
                header-cell-class-name="table_header"
                :row-style="{ height: '28px' }"
                :cell-style="{ padding: '0px' }"
                algin="center"
            >
                <el-table-column prop="enginerName" label="工程名称" align="center"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
                <el-table-column prop="deviceName" label="装置名称" align="center"></el-table-column>
                <!--            <el-table-column label="操作" width="240px">-->
                <!--              <template slot-scope="scope">-->
                <!--                <div class="table-operation">-->
                <!--                  <el-button size="mini" type="danger" @click="deleteVisitorConfig(scope.row)">移除</el-button>-->
                <!--                </div>-->
                <!--              </template>-->
                <!--            </el-table-column>-->
            </el-table>
        </div>
    </Page>
</template>
<script>
import { getVisitorConfig, updateVisitorConfig } from '@/api/app/device'
import DeviceTree from '../components/deviceTree'
import energyTree from '@/views/components/tree/energyTree.vue'

export default {
    name: 'GovernDeviceTourist',
    components: { energyTree, DeviceTree },
    data() {
        return {
            loading: false,
            //   tabHeight: 'calc(100vh - 118px)',
            defaultCheckedKeys: [],
            timeout: null,
            tableData: []
        }
    },
    computed: {
        vth() {
            return window.sessionStorage.getItem('appheight') - 10
        }
    },
    created() {
        this.getVisitorConfig()
    },
    mounted() {},
    methods: {
        checkChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate)
            if (data.level === 2) {
                if (checked) {
                    this.defaultCheckedKeys.push(data.id)
                } else {
                    this.defaultCheckedKeys.splice(this.defaultCheckedKeys.indexOf(data.id), 1)
                }
                clearTimeout(this.timeout)
                this.timeout = setTimeout(this.updateVisitorConfig, 100)
            }
        },
        updateVisitorConfig() {
            const result = Array.from(new Set(this.defaultCheckedKeys))
            updateVisitorConfig(
                result.map(item => {
                    return {
                        deviceId: item
                    }
                })
            ).then(res => {
                if (res.code === 'A0000') {
                    this.getVisitorConfig()
                }
            })
        },
        getVisitorConfig() {
            getVisitorConfig().then(res => {
                console.log(res)
                if (res.code === 'A0000') {
                    this.tableData = res.data
                    if (this.defaultCheckedKeys.length > 0) return
                    this.defaultCheckedKeys = [] // 清空
                    res.data.forEach(item => {
                        this.defaultCheckedKeys.push(item.deviceId)
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss">
.el-tree {
    font-size: 14px;
}
.device-manage{
    display: flex;
}
</style>
