<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">
                    <div :style="'width:48px;height:48px;border-radius: 24px;background:'+hsl+';'"></div>
                </div>
                <div class="col-8 align-self-center">
                    <div class="row">
                        <span>
                            状态：{{status}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <a-modal v-model="visible" :title="device.displayName" :footer="null">
            <div class="row text-center">
                <img style="height:32px;margin:0 auto;" v-if="status==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="/platform/images/on.svg" />
                <img style="height:32px;margin:0 auto;" v-else v-on:click="execApi(device.number,'/Socket/On')" src="/platform/images/off.svg" />
            </div>
            <div class="row text-center">
                <table style="width:70%;margin:0 auto;">
                    <tr>
                        <td style="text-align:right;">色调：</td>
                        <td><input @change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="outline:none;height: 5px; margin: 5px auto; -webkit-appearance: none; background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);" /></td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">饱和度：</td>
                        <td><input @change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'outline:none;height:5px;margin:5px auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'" /></td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">亮度：</td>
                        <td><input @change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="outline: none; height: 5px; margin: 5px auto; -webkit-appearance: none; background: -webkit-linear-gradient(left, #000 0%, #fff 100%);" /></td>
                    </tr>
                </table>
            </div>
        </a-modal>
    </div>
</template>
<script>
    export default {
        props: ['device'],
        data: function () {
            return {
                visible: false
            }
        }, 
        methods: {
            changeHue: function (hue) {
                execApi(this.device.number, '/ColorLight/Change', 'hue=' + hue + '&saturation=' + 254 + '&brightness=' + this.brightness);
            },
            changeSaturation: function (saturation) {
                execApi(this.device.number, '/ColorLight/Change', 'hue=' + this.hue + '&saturation=' + saturation + '&brightness=' + this.brightness);
            },
            changeBrightness: function (brightness) {
                execApi(this.device.number, '/ColorLight/Change', 'hue=' + this.hue + '&saturation=' + this.saturation + '&brightness=' + brightness);
            }
        },
        computed: {
            status: function () {
                return getIoTDataValue(this.device, '状态') === '1' ? '开' : '关';
            },
            hue: function () {
                return getIoTDataValue(this.device, '色调');
            },
            saturation: function () {
                return getIoTDataValue(this.device, '饱和度');
            },
            brightness: function () {
                return getIoTDataValue(this.device, '亮度');
            },
            color: function () {
                var h = Math.round(parseInt(this.hue || 128) * 360 / 255);
                var result = 'hsl(' + h + ',100%,50%)';
                return result;
            },
            hsl: function () {
                var h = Math.round(parseInt(this.hue || 128) * 360 / 254);
                var s = Math.round(parseInt(this.saturation || 128) * 100 / 254);
                var l = Math.round(parseInt(this.brightness || 128) * 100 / 254);
                var result = 'hsl(' + h + ',' + s + '%,' + l + '%)';
                return result;
            },
            color: function () {
                var h = Math.round(parseInt(this.hue || 128) * 360 / 254);
                return 'hsl(' + h + ',100%,0%)';
            }
        }
    };
</script>