<template>
    <div class="mainContainer">
        <div class="lt" v-show="showLeft">
            <div class="sum-title">
                控制台
            </div>
            <div class="cube">
                <Region :region-list="regionList" @GetInfoClick="ClickGetInfo"></Region>
            </div>
            <div class="cube">
                <Detecter :detecter-list="detectorList"></Detecter>
            </div>
            <div class="cube">
                <Task></Task>
            </div>
        </div>
        <div :class="[{'md':true},{'bigMd':!showLeft}]">
            <div class="cube">
                <signMap></signMap>
            </div>
            <div class="cube">
                <WifiSign :wifi-rs="WifiRs"></WifiSign>
            </div>
            <div class="cube">
                <Scan :scan-rs="ScanRs"></Scan>
            </div>
        </div>
        <div class="rt">
            <div class="cube">
                <BigRader :total-rs="totalRs"></BigRader>
            </div>
            <transition name="el-zoom-in-center">
                <div class="cube">
                    <HistoryRecord :history-rs="historyRs"></HistoryRecord>
                </div>
            </transition>
            <transition name="el-zoom-in-center">
                <div class="cube">
                    <HistoryRecord :history-rs="historyRs"></HistoryRecord>
                </div>
            </transition>
            <transition name="el-zoom-in-center">
                <div class="cube">
                    <HistoryRecord :history-rs="historyRs"></HistoryRecord>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import signMap from '@/components/signMap.vue'
    import Region from '@/components/Region.vue'
    import Detecter from '@/components/Detecter.vue'
    import Task from '@/components/Task.vue'
    import WifiSign from '@/components/WifiSign.vue'
    import Scan from '@/components/Scan.vue'
    import HistoryRecord from '@/components/HistoryRecord.vue'
    import EquipInfo from '@/components/EquipInfo.vue'
    import runTimeRecord from '@/components/runTimeRecord.vue'
    import BigRader from '@/components/BigRader.vue'
    import {
        getLoftInfo,
        RegionList,
        DetectorList,
    } from '../api/getApiRes.js'
    import {mapGetters, mapActions, mapState} from "vuex";
    import Global from "../Global"

    let qs = require('qs');
    export default {
        data() {
            return {
                WifiRs: {},
                ScanRs: {},
                historyRs: [],
                totalRs: [],
                equipRs: [],
                regionList: [],
                detectorList: [],
                showLeft: true,
                regionId: '',
            }
        },
        mounted() {
            this.init();
            this.showLeft = parseInt(this.$store.state.status.count) % 2 == 0
        },
        computed: {
            ...mapGetters({
                'getCount': 'status/getCount'
            })
        },
        watch: {
            '$route': function (val) {
                if (val.path == '/') {
                    this.init()
                }
            },
            '$store.state.status.count': function (val) {
                this.showLeft = parseInt(val) % 2 == 0
            },
        },
        methods: {
            init() {
                this.getDate();
                this.test()
            },
            test() {
                this.WifiRs = {
                    Rs: [
                        {'X': '信道1', 'Y': 12},
                        {'X': '信道2', 'Y': 32},
                        {'X': '信道3', 'Y': 41},
                        {'X': '信道4', 'Y': 111},
                        {'X': '信道5', 'Y': 411}, {'X': '信道1', 'Y': 12},
                        {'X': '信道2', 'Y': 32},
                        {'X': '信道3', 'Y': 41},
                        {'X': '信道4', 'Y': 111},
                        {'X': '信道5', 'Y': 411}, {'X': '信道1', 'Y': 12},
                        {'X': '信道2', 'Y': 32},
                        {'X': '信道3', 'Y': 41},
                        {'X': '信道4', 'Y': 111},
                        {'X': '信道5', 'Y': 411},
                    ]
                };
                this.ScanRs = {
                    Rs: [
                        {'X': '1M', 'Y': 311},
                        {'X': '2M', 'Y': 32},
                        {'X': '3M', 'Y': 241},
                        {'X': '4M', 'Y': 111},
                        {'X': '5M', 'Y': 411},
                        {'X': '6M', 'Y': 311},
                        {'X': '7M', 'Y': 32},
                        {'X': '8M', 'Y': 241},
                        {'X': '9M', 'Y': 111},
                        {'X': '10M', 'Y': 411},
                        {'X': '11M', 'Y': 311},
                        {'X': '12M', 'Y': 32},
                        {'X': '13M', 'Y': 241},
                        {'X': '14M', 'Y': 111},
                        {'X': '15M', 'Y': 411},
                    ]
                }
            },
            getDate() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                that.regionList = [];
                RegionList(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.regionList = json.Rs;
                        // 默认加载第一个区域
                        if (json.Rs) {
                            this.getDetectorList(json.Rs[0].Id);
                        }
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            getDetectorList(regionId) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionId: regionId,
                };
                let postdata = qs.stringify(param);
                that.detectorList = [];
                DetectorList(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.detectorList = json.Rs
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // Wifi柱状图信息传入探测器Id
            getDetectorWifixyInfolist(postdata) {
                let that = this;
                DetectorWifixyInfolist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        // that.WifiRs = json;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            ClickGetInfo(Id) {
                this.regionId = Id;
                this.getDetectorList(Id);
            }
        },
        components: {
            signMap,
            Region,
            Detecter,
            WifiSign,
            Scan,
            HistoryRecord,
            EquipInfo,
            runTimeRecord,
            Task,
            BigRader,
        }
    }
</script>

<style scoped>
    @import "../assets/css/cube.css";

    .mainContainer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .mainContainer .lt {
        width: 20%;
        float: left;
        border: 1px solid rgba(0, 147, 253, 0.24);
        overflow: hidden;
        padding-bottom: 10px;
        background: rgba(0, 130, 255, 0.05);
        margin-right: 10px;
    }

    .mainContainer .md {
        width: 52%;
        float: left;
        overflow: hidden;
        padding-bottom: 10px;
        margin-right: 10px;
    }

    .mainContainer .bigMd {
        width: 72.5%;
    }

    .bigMd /deep/ .histogram div {
        width: 100% !important;
    }

    .bigMd /deep/ .histogram canvas {
        width: 100% !important;
    }

    .bigMd /deep/ .ve-line div {
        width: 100% !important;
    }

    .bigMd /deep/ .ve-line canvas {
        width: 100% !important;
    }

    .mainContainer .md .cube {
        border: 1px solid rgba(0, 147, 253, 0.24);
        background: rgba(0, 130, 255, 0.05);
        margin-bottom: 5px;
    }

    .mainContainer .rt {
        width: 26.5%;
        float: right;
    }

    .rt .cube {
        border: 1px solid rgba(0, 147, 253, 0.24);
        background: rgba(0, 130, 255, 0.05);
        margin-bottom: 5px;
    }

    .sum-title {
        width: 150px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
        color: #6DC1FF;
        margin: 0 auto;
        text-align: center;
        background: url("../assets/img/main/tit.png") top center no-repeat;
        background-size: 100%;
    }

</style>
