<template>
    <div class="zy-template">
        <div class="left">
            <div class="zy-main-title">基本信息</div>
            <div class="left__baseInfo zy-module">
                <el-form label-width="140px">
                    <el-form-item label="设备号：" class="form-item">
                        {{device.num}}
                    </el-form-item>
                    <el-form-item label="设备ID：" class="form-item">
                        {{device.clientId}}
                    </el-form-item>
                    <el-form-item label="状态：" class="form-item">
                        {{device.status===1?'在线':'离线'}}
                    </el-form-item>
                    <el-form-item label="上一次在线时间：" class="form-item">
                        {{device.lastOnlineTime}}
                    </el-form-item>
                </el-form>
            </div>

            <div class="zy-main-title">设备调试</div>
            <el-collapse accordion class="left__set zy-module" value="1">
                <el-collapse-item title="基础设置" name="1">
                    <el-form label-width="80px">
                        <el-form-item label="自动接听:">
                            <el-switch v-model="baseSet.autoAnswer" active-color="#13ce66" inactive-color="#ff4949"
                                       active-text="开" inactive-text="关" :active-value="1" :inactive-value="0"
                                       @change="setAutoAnswer">
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="连续定位:">
                            <el-switch v-model="baseSet.highFreq" active-color="#13ce66" inactive-color="#ff4949"
                                       active-text="开" inactive-text="关" :active-value="1" :inactive-value="0"
                                       @change="setContinue">
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="定位频率:">
                            <el-input v-model="baseSet.gpsRate" size="small" class="input"/>
                        </el-form-item>
                        <el-button type="primary" size="small" class="button" @click="setGpsRate"
                                   :disabled="submitFlag">保存
                        </el-button>
                    </el-form>
                </el-collapse-item>

                <el-collapse-item title="音量设置" name="2">
                    <el-form label-width="80px">
                        <el-form-item label="通话音量:">
                            <el-slider v-model="baseSet.phoneVol" :max="7" :marks="marks" style="width: 350px;"/>
                        </el-form-item>
                        <el-form-item label="系统音量:">
                            <el-slider v-model="baseSet.msgVol" :max="7" :marks="marks" style="width: 350px;"/>
                        </el-form-item>
                        <el-form-item label="铃声音量:">
                            <el-slider v-model="baseSet.ringVol" :max="7" :marks="marks" style="width: 350px;"/>
                        </el-form-item>
                        <el-button type="primary" size="small" class="button" @click="setVolume" :disabled="submitFlag">
                            保存
                        </el-button>
                    </el-form>
                </el-collapse-item>

                <el-collapse-item title="联系人设置" name="3">
                    <el-form label-width="80px">
                        <h3>SOS按键</h3>
                        <el-form-item label="姓名:">
                            <el-input v-model="baseSet.key0Name" size="small" class="input"/>
                        </el-form-item>
                        <el-form-item label="手机号码:">
                            <el-input v-model="baseSet.key0Phone" size="small" class="input"/>
                        </el-form-item>
                        <h3>按键1</h3>
                        <el-form-item label="姓名:">
                            <el-input v-model="baseSet.key1Name" size="small" class="input"/>
                        </el-form-item>
                        <el-form-item label="手机号码:">
                            <el-input v-model="baseSet.key1Phone" size="small" class="input"/>
                        </el-form-item>
                        <h3>按键2</h3>
                        <el-form-item label="姓名:">
                            <el-input v-model="baseSet.key2Name" size="small" class="input"/>
                        </el-form-item>
                        <el-form-item label="手机号码:">
                            <el-input v-model="baseSet.key2Phone" size="small" class="input"/>
                        </el-form-item>
                        <el-button type="primary" size="small" class="button" @click="setSos" :disabled="submitFlag">保存
                        </el-button>
                    </el-form>
                </el-collapse-item>

                <el-collapse-item title="语音播报" name="5">
                    <el-form label-width="80px">
                        <el-form-item label="播报类型:">
                            <el-select placeholder="请选择" size="small" v-model="message.newsType" value="">
                                <el-option value="1" label="实时播报"/>
                                <el-option value="0" label="固定播报"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="播报时间:" v-if="message.newsType===0">
                            <el-input v-model="message.newsTime" size="small" class="input"/>
                        </el-form-item>
                        <el-form-item label="播报内容:">
                            <el-input type="textarea" v-model="message.news" style="width: 250px"/>
                        </el-form-item>
                        <el-button type="primary" size="small" class="button" @click="setNews" :disabled="submitFlag">保存
                        </el-button>
                    </el-form>
                </el-collapse-item>
            </el-collapse>

        </div>

        <div class="right">
            <div class="zy-main-title">控制台日志</div>
            <div class="right__console">
                <div v-for="log in logs" class="right__console__message">
                    <p>{{log.time}}</p>
                    <p>{{log.message}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                device: {}, //当前设备信息
                baseSet: {//当前设备设置信息
                    autoAnswer: 0,
                    highFreq: 0,
                    gpsRate: 0,
                    phoneVol: 0,
                    ringVol: 0,
                    msgVol: 0,
                    key0Name: "",
                    key0Phone: "",
                    key1Name: "",
                    key1Phone: "",
                    key2Name: "",
                    key2Phone: "",
                },
                message: {}, //语音播报消息
                marks: {
                    0: '0',
                    1: '1',
                    2: '2',
                    3: '3',
                    4: '4',
                    5: '5',
                    6: '6',
                    7: '7',
                },
                submitFlag: false, //阻止重复提交表单
                logs: [], //mqtt接收日志
            };
        },
        activated() {
            const deviceId = this.$route.params.id;
            this.initWebSocket(deviceId);
            this.getDeviceDetail(deviceId);
            this.getDeviceBaseSet(deviceId);
        },
        methods: {

            /** 重复提交锁
             * @param {Object} flag 0 解锁 1 加锁
             */
            lock: function (flag) {
                this.submitFlag = flag === 1;
            },

            /**
             * 查询设备详情
             */
            getDeviceDetail: function (clientId) {
                const param = {
                    clientId: clientId,
                };
                this.$http.Get(this.$global.getDeviceDetail, param).then(res => {
                    this.device = res.data;
                })
            },

            /**
             * 获取设备
             */
            getDeviceBaseSet: function (clientId) {
                const param = {
                    deviceId: clientId,
                };
                this.$http.Get(this.$global.getBaseSet, param).then(res => {
                    console.log(res.data);
                    this.baseSet = res.data;
                })
            },

            /**
             * 设置音量
             */
            setVolume: function () {
                const param = {
                    deviceId: this.device.clientId,
                    msgVol: this.baseSet.msgVol,
                    ringVol: this.baseSet.ringVol,
                    phoneVol: this.baseSet.phoneVol
                };
                this.postGeneral(this.$global.setVolume, param);
            },
            /**
             * 自动接听
             */
            setAutoAnswer: function (tag) {
                const param = {
                    deviceId: this.device.clientId,
                    autoAnswer: tag
                };
                this.postGeneral(this.$global.setAutoAnswer, param);
            },

            /**
             * 定位频率
             */
            setGpsRate: function () {
                const param = {
                    deviceId: this.device.clientId,
                    gpsRate: this.baseSet.gpsRate
                };
                this.postGeneral(this.$global.setGpsRate, param);
            },

            /**
             * 连续定位
             */
            setContinue: function (tag) {
                const param = {
                    deviceId: this.device.clientId,
                    highFreq: tag
                };
                this.postGeneral(this.$global.setContinue, param);
            },

            /**
             * 紧急呼叫
             */
            setSos: function () {
                const param = {
                    deviceId: this.device.clientId,
                    key0Name: this.baseSet.key0Name,
                    key0Phone: this.baseSet.key0Phone,
                    key1Name: this.baseSet.key1Name,
                    key1Phone: this.baseSet.key1Phone,
                    key2Name: this.baseSet.key2Name,
                    key2Phone: this.baseSet.key2Phone,
                };
                this.postGeneral(this.$global.setSos, param);
            },

            /**
             *  语音播报
             */
            setNews: function () {
                const param = {
                    deviceId: this.device.clientId,
                    newsType: this.message.newsType,
                    newsTime: this.message.newsTime,
                    news: this.message.news,
                };
                this.lock(1);
                this.$http.Post(this.$global.setNews, param).then(() => {
                    this.message = {};
                }).finally(() => {
                    this.lock(0);
                })
            },

            /**
             * 通用发送设置请求
             */
            postGeneral(url, param) {
                this.lock(1);
                this.$http.Post(url, param).then(() => {
                    this.getDeviceBaseSet(param.deviceId);
                }).finally(() => {
                    this.lock(0);
                })
            },

            /**
             * 初始化WebSocket连接
             */
            initWebSocket: function (clientId) {
                const that = this;
                const socket = new WebSocket(this.$global.webSocket + clientId);
                socket.onmessage = function (evt) {
                    const jsonObj = JSON.parse(evt.data);
                    const message = {
                        m: jsonObj.m,
                        r: jsonObj.r,
                        t: jsonObj.t,
                        data: jsonObj.data
                    };
                    const object = {
                        time: that.formatDate(new Date()),
                        message: JSON.stringify(message, null, 4)
                    };
                    that.logs.push(object);
                }
            },
            /**
             * 格式化时间
             */
            formatDate: function (date) {
                const d = new Date(date);
                const y = d.getFullYear(); // 年份
                const m = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份
                const r = d.getDate().toString().padStart(2, '0'); // 日
                const hh = d.getHours().toString().padStart(2, '0'); // 小时
                const mm = d.getMinutes().toString().padStart(2, '0'); // 分钟
                const ss = d.getSeconds().toString().padStart(2, '0'); // 秒
                return `${y}-${m}-${r} ${hh}:${mm}:${ss}` // es6 字符串模板
            }
        },

    }
</script>

<style scoped lang="scss">
    .zy-template {
        overflow: hidden;
        height: 100%;

        .left {
            width: 49%;
            float: left;
            height: 100%;
            overflow-y: scroll;

            &__baseInfo {
                & .el-form-item {
                    margin-bottom: 10px;
                    width: 300px;
                }
            }

            &__set {
                & .input {
                    width: 230px;
                }

                & .el-form-item {
                    margin-bottom: 10px;
                }

                & .el-slider {
                    margin-left: 10px;
                }
            }

            & .button {
                margin-left: 80px;
                margin-top: 20px;
            }
        }

        .right {
            width: 49%;
            float: right;
            height: 100%;

            &__console {
                box-sizing: border-box;
                padding: 10px;
                overflow-x: hidden;
                overflow-y: scroll;
                word-wrap: break-word;
                background-color: white;
                width: 100%;
                height: 100%;
                border-radius: 5px;

                &__message {
                    font-size: 14px;
                    width: 100%;
                    margin-bottom: 10px;

                    & p {
                        white-space: pre-wrap;
                        margin: 5px 0;
                    }

                    & p:first-child {
                        color: #39b54a;
                    }
                }
            }
        }
    }
</style>
