﻿<template>
    <div class="card device-component">
        <div class="card-header">
            <h3 class="card-title">
                {{device.displayName}}
                <i v-if="device.isOnline" class="text-success ion ion-ios-wifi"></i>
                <i v-else class="text-danger ion ion-ios-wifi"></i>
            </h3>
            <div class="card-tools" v-if="hasDevicePermission()">
                <span @click="visible = true" title="操作"><i class="ion ion-md-settings"></i></span>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-4 align-self-center">
                    <img class="device-image" :src="device.ioTProduct.image" style="width:48px;" />
                </div>
                <div class="col-8 align-self-center">
                    <div class="row">
                        <span>指令：{{getCustomButtons().length}}</span>
                    </div>
                </div>
            </div>
        </div>
        <a-modal v-model="visible" :title="device.displayName" :footer="null" width="60%">
            <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="操作">
                    <div class="row">
                        <div class="col-12">
                            <a-tabs default-active-key="1">
                                <a-tab-pane key="1" tab="空调">
                                    <table style="margin: 50px auto;">
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="power.value" @click="changePower($event.target.value)">电源</button>
                                            </td>
                                            <td></td>
                                            <td>{{power.name}}</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="pattern.value" @click="changePattern($event.target.value)">模式</button>
                                            </td>
                                            <td></td>
                                            <td>{{pattern.name}}</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="wind.value" @click="changeWind($event.target.value)">风速</button>
                                            </td>
                                            <td></td>
                                            <td>{{wind.name}}</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="direction.value" @click="changeDirection($event.target.value)">风向</button>
                                            </td>
                                            <td></td>
                                            <td>{{direction.name}}</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="temperature.value" @click="changeTemperature($event.target.value,-1)">-</button>
                                            </td>
                                            <td>
                                                {{temperature.name}}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="temperature.value" @click="changeTemperature($event.target.value,1)">+</button>
                                            </td>
                                        </tr>
                                    </table>
                                </a-tab-pane>
                                <a-tab-pane key="2" tab="电视">
                                    <table style="margin: 20px auto;">
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="1" @click="send($event.target.value,2)">电源</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="2" @click="send($event.target.value,2)">AV</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="15" @click="send($event.target.value,2)">静音</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="1" @click="send($event.target.value,2)">1</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="2" @click="send($event.target.value,2)">2</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="3" @click="send($event.target.value,2)">3</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="4" @click="send($event.target.value,2)">4</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="5" @click="send($event.target.value,2)">5</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="6" @click="send($event.target.value,2)">6</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="7" @click="send($event.target.value,2)">7</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="8" @click="send($event.target.value,2)">8</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="9" @click="send($event.target.value,2)">9</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="13" @click="send($event.target.value,2)">返回</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="0" @click="send($event.target.value,2)">0</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="14" @click="send($event.target.value,2)">退出</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="19" @click="send($event.target.value,2)">上</button>
                                            </td>
                                            <td>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="21" @click="send($event.target.value,2)">左</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="23" @click="send($event.target.value,2)">OK</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="22" @click="send($event.target.value,2)">右</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="8" @click="send($event.target.value,2)">下</button>
                                            </td>
                                            <td>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="17" @click="send($event.target.value,2)">+</button>
                                            </td>
                                            <td>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="24" @click="send($event.target.value,2)">↑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                音量
                                            </td>
                                            <td style="text-align: center;">
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="16" @click="send($event.target.value,2)">菜单</button>
                                            </td>
                                            <td style="text-align: center;">
                                                频道
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="18" @click="send($event.target.value,2)">-</button>
                                            </td>
                                            <td>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="25" @click="send($event.target.value,2)">↓</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="26" @click="send($event.target.value,2)">快退</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="28" @click="send($event.target.value,2)">播放</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="28" @click="send($event.target.value,2)">快进</button>
                                            </td>
                                        </tr>
                                    </table>
                                </a-tab-pane>
                                <a-tab-pane key="3" tab="机顶盒">
                                    <table style="margin: 20px auto;">
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="1" @click="send($event.target.value,3)">电源</button>
                                            </td>
                                            <td></td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="15" @click="send($event.target.value,3)">静音</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="1" @click="send($event.target.value,3)">1</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="2" @click="send($event.target.value,3)">2</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="3" @click="send($event.target.value,3)">3</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="4" @click="send($event.target.value,3)">4</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="5" @click="send($event.target.value,3)">5</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="6" @click="send($event.target.value,3)">6</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="7" @click="send($event.target.value,3)">7</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="8" @click="send($event.target.value,3)">8</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="9" @click="send($event.target.value,3)">9</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="13" @click="send($event.target.value,3)">返回</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="0" @click="send($event.target.value,3)">0</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="14" @click="send($event.target.value,3)">退出</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="19" @click="send($event.target.value,3)">上</button>
                                            </td>
                                            <td>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="21" @click="send($event.target.value,3)">左</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="23" @click="send($event.target.value,3)">OK</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="22" @click="send($event.target.value,3)">右</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="8" @click="send($event.target.value,3)">下</button>
                                            </td>
                                            <td>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="17" @click="send($event.target.value,3)">+</button>
                                            </td>
                                            <td>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="24" @click="send($event.target.value,3)">↑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                音量
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="16" @click="send($event.target.value,3)">菜单</button>
                                            </td>
                                            <td>
                                                频道
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="18" @click="send($event.target.value,3)">-</button>
                                            </td>
                                            <td>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="25" @click="send($event.target.value,3)">↓</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="26" @click="send($event.target.value,3)">快退</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="28" @click="send($event.target.value,3)">播放</button>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="28" @click="send($event.target.value,3)">快进</button>
                                            </td>
                                        </tr>
                                    </table>
                                </a-tab-pane>
                                <a-tab-pane key="4" tab="自定义">
                                    <div class="row">
                                        <div class="col-12">
                                            <button v-for="button in getCustomButtons()" type="button" class="btn btn-success px-2 m-2 btn-sm" :value="button.Value" @click="send($event.target.value,5)">{{button.Name}}</button>
                                        </div>
                                    </div>
                                </a-tab-pane>
                            </a-tabs>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="配置">
                    <div class="row">
                        <div class="col-12">
                            <button type="button" value="1" class="btn btn-success px-2 m-2 btn-sm" @click="execApi(device.number,'/Ir/Match1')">空调匹配</button>
                            <button type="button" value="2" class="btn btn-success px-2 m-2 btn-sm" @click="execApi(device.number,'/Ir/Match2')">电视匹配</button>
                            <button type="button" value="3" class="btn btn-success px-2 m-2 btn-sm" @click="execApi(device.number,'/Ir/Match3')">机顶盒匹配</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12" style="overflow:auto;text-align:left;">
                            <table class="table table-sm table-bordered">
                                <tr>
                                    <th>#</th>
                                    <th>名称</th>
                                    <th>序号</th>
                                    <th>按键</th>
                                    <th>删除</th>
                                </tr>
                                <tr v-for="(button,index) in getCustomButtons()">
                                    <td>{{index+1}}</td>
                                    <td>{{button.Order}}</td>
                                    <td>{{button.Name}}</td>
                                    <td>{{button.Value}}</td>
                                    <td><button class="btn btn-sm btn-success" @click="remove(button.name)">删除</button></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <form class="form-horizontal">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">序号</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="Order" value="100">
                                    </div>
                                </div><div class="form-group row">
                                    <label class="col-sm-2 col-form-label">名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="Name" value="指令名称">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">按键</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="Value" value="603">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-2"></div>
                                    <div class="col-sm-10" style="text-align:left;">
                                        <button class="btn btn-sm btn-success" @click.prevent="study">学习</button>
                                        <button class="btn btn-sm btn-success" @click.prevent="test">测试</button>
                                        <button class="btn btn-sm btn-success" @click.prevent="add">保存</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-modal>
    </div>
</template>
<script>
    export default {
        name: 'control',
        props: ['device'],
        data: function () {
            return {
                visible: false,
                currentType: this.type
            };
        },
        computed: {
            pattern: function () {
                var code = parseInt(getIoTDataValue(this.device, "空调按键"));
                var pattern = { name: '制冷', value: 0 };
                if (code > 480 + 2) {
                    pattern = { name: '通风', value: 480 };
                }
                else if (code > 360 + 2) {
                    pattern = { name: '抽湿', value: 360 };
                }
                else if (code > 240 + 2) {
                    pattern = { name: '制热', value: 240 };
                }
                else if (code > 120 + 2) {
                    pattern = { name: '自动', value: 120 };
                }
                return pattern;
            },
            direction: function () {
                var code1 = parseInt(getIoTDataValue(this.device, "空调按键"));
                var code = code1 - this.pattern.value;
                var direction = { name: '自动', value: 0 };;
                if (code > 60 + 2) {
                    direction = { name: '手动', value: 60 };
                }
                return direction;
            },
            wind: function () {
                var code1 = parseInt(getIoTDataValue(this.device, "空调按键"));
                var code = code1 - this.pattern.value - this.direction.value;
                var wind = { name: '自动', value: 0 };
                if (code > 45 + 2) {
                    wind = { name: '低', value: 45 };
                }
                else if (code > 30 + 2) {
                    wind = { name: '中', value: 30 };
                }
                else if (code > 15 + 2) {
                    wind = { name: '高', value: 15 };
                }
                return wind;
            },
            power: function () {
                var code1 = parseInt(getIoTDataValue(this.device, "空调按键"));
                var code = code1 - this.pattern.value - this.direction.value - this.wind.value;
                var power = { name: '关', value: 1 };
                if (code > 1) {
                    power = { name: '开', value: 2 };
                }
                return power;
            },
            temperature: function () {
                var code1 = parseInt(getIoTDataValue(this.device, "空调按键"));
                var code = code1 - this.pattern.value - this.direction.value - this.wind.value - this.power.value;
                var temperature = { name: '16℃', value: 1 };
                if (code > 1) {
                    temperature = { name: parseInt(code + 15) + '℃', value: code };
                }
                return temperature;
            }
        },
        methods: {
            getCustomButtons: function () {
                return Enumerable.from(JSON.parse(getIoTDataValue(this.device, "指令")))
                    .orderBy(function (o) { return o.Order; })
                    .toArray();
            },
            changePattern: function (v) {
                this.change(v, 0, 480, 120);
            },
            changeDirection(v) {
                this.change(v, 0, 60, 60);
            },
            changeWind(v) {
                this.change(v, 0, 45, 15);
            },
            changePower: function (v) {
                var oldValue = parseInt(v);
                if (oldValue === 1) {
                    this.send(3, 1);
                }
                else if (oldValue === 2) {
                    this.send(1, 1);
                }
            },
            changeTemperature: function (v, step) {
                var oldValue = parseInt(v);
                var min = 1;
                var max = 15;
                var newValue = oldValue + step;
                if (step > 0 && newValue > max) {
                    newValue = max;
                }
                else if (step < 0 && newValue < min) {
                    newValue = min;
                }
                var code = parseInt(getIoTDataValue(this.device, "空调按键"));
                var newCode = code - oldValue + newValue;
                this.send(newCode, 1);
            },
            send: function (value, type) {
                execApi(this.device.number, '/Ir/Send', 'type=' + type + '&code=' + value);
            },
            change: function (v, min, max, step) {
                var oldValue = parseInt(v);
                var newValue = oldValue + step;
                if (newValue > max) {
                    newValue = min;
                }
                var code = parseInt(getIoTDataValue(this.device, "空调按键"));
                var newCode = code - oldValue + newValue;
                this.send(newCode, 1);
            },
            add: function () {
                var array = $(event.target).parents('form').serializeArray();
                var button = {};
                $.map(array, function (n, i) {
                    button[n['name']] = n['value'];
                });
                var list = this.getCustomButtons();
                list.push(button);
                var value = JSON.stringify(list);
                execApi(this.device.number, '/Ir/Buttons', 'buttons=' + value);
            },
            remove: function (name) {
                var buttons = this.getCustomButtons();
                for (var i = buttons.length - 1; i >= 0; i--) {
                    if (buttons[i].name === name) {
                        buttons.splice(i, 1);
                        break;
                    }
                }
                var value = JSON.stringify(buttons);
                execApi(this.device.number, '/Ir/Buttons', 'buttons=' + value);
            },
            test: function (event) {
                var code = $(event.target).parents('form').find("input[name='Value']").val();
                execApi(this.device.number, '/Ir/Send', 'type=5&code=' + code);
            },
            study: function (event) {
                var code = $(event.target).parents('form').find("input[name='Value']").val();
                execApi(this.device.number, '/Ir/Study', 'type=' + 5 + '&code=' + code);
            }
        }
    };
</script>