node-red-contrib-ewelink-cube
Version:
Node-RED integration with eWeLink Cube
82 lines (81 loc) • 2.52 kB
JavaScript
export const VerticalSwing = {
template: `
<div class="card">
<div class="card-header">
<span>{{title}}</span>
<el-switch
v-model="switchValue"
inactive-color="#cccc"
="changeSwitch"
>
</el-switch>
</div>
<el-select v-model="verticalSwingValue" class="power-select" v-if="switchValue" ="changeSelect">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
`,
props: ['nodeRed', 'state', 'deviceData'],
data() {
return {
title: this.nodeRed._('control-device.label.vertical_swing'),
options: [
{
value: 'on',
label: this.nodeRed._('control-device.SelectOption.on'),
},
{
value: 'off',
label: this.nodeRed._('control-device.SelectOption.off'),
},
],
verticalSwingValue: '',
switchValue: false,
defaultValue:'on'
};
},
watch:{
state: {
handler(newVal) {
if (Object.keys(newVal).length === 0){
this.reset();
}
},
immediate: true,
deep: true,
},
},
methods: {
callBack(state, deleteFlag) {
const data = {
'vertical-swing': {
powerState: state,
},
};
this.$emit('call-back', data, deleteFlag);
},
changeSwitch(value) {
this.verticalSwingValue = this.defaultValue;
this.callBack(this.defaultValue, !value);
},
changeSelect(value) {
this.callBack(value, false);
},
reset(){
this.switchValue = false;
this.verticalSwingValue = this.defaultValue;
}
},
mounted() {
if (this.state['vertical-swing']) {
this.switchValue = true;
this.verticalSwingValue = this.state['vertical-swing'].powerState;
}
},
};