<template>
  <div class="main" devTypeId="2">
    <iot-tab>
      <!-- 控制区块 -->
      <iot-tab-item label="控制">
        <push-group title="风速">
          <push-button
            v-for="(val, key) in list_windspeed"
            :key="key"
            v-model="model_windspeed"
            :range="val.range"
            :iconShow="false"
            :icon="val.icon"
            :label="val.label"
          ></push-button>
        </push-group>
        <push-group title="模式">
          <push-button
            v-for="(val, key) in list_mode"
            :key="key"
            v-model="model_mode"
            :range="val.range"
            :iconShow="false"
            :icon="val.icon"
            :label="val.label"
          ></push-button>
        </push-group>

        <slider
          title="目标温度"
          type=""
          v-model="model_targetTemperature"
          :min="16"
          :max="31"
          :step="1"
        ></slider>

        <slider
          title="开机时间"
          type=""
          v-model="model_openTime"
          :min="0"
          :max="1440"
          :step="1"
        ></slider>

        <slider
          title="关机时间"
          type=""
          v-model="model_closeTime"
          :min="0"
          :max="1440"
          :step="1"
        ></slider>

        <push-bar
          v-for="(val, key) in deviceStatus"
          v-bind:key="key"
          :data="val"
          :type="val.type"
          :check="val.check"
        >
        </push-bar>

        <!-- 组件区域 -->
      </iot-tab-item>
      <!-- 指令区域 -->
      <iot-tab-item label="指令">
        <function-corpus
          :list="functionCorpus"
          :loading="functionCorpusLoading"
        />
      </iot-tab-item>
    </iot-tab>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex'
import functionCorpus from './components/functionCorpus.vue'
import { IotTab, DeviceTop, IotTabItem, PushBar, Slider, PushButton, PushGroup } from 'genie-ui'

export default {
  name: 'Main',
  components: { functionCorpus, IotTab, DeviceTop, IotTabItem, PushBar, Slider, PushButton, PushGroup },
  data () {
    return {
      // 指令
      functionCorpus: [],
      functionCorpusLoading: true
    }
  },
  computed: {
    model_targetTemperature: {
      get () {
        return this.$store.state.publicInfo.attr['targetTemperature']
      },
      set (val) {
        this.$store.dispatch('setDeviceStatus', {
          targetTemperature: val
        })
      }
    },
    model_openTime: {
      get () {
        return this.$store.state.publicInfo.attr['openTime']
      },
      set (val) {
        this.$store.dispatch('setDeviceStatus', {
          openTime: val
        })
      }
    },
    model_closeTime: {
      get () {
        return this.$store.state.publicInfo.attr['closeTime']
      },
      set (val) {
        this.$store.dispatch('setDeviceStatus', {
          closeTime: val
        })
      }
    },
    model_windspeed: {
      get: function () {
        return this.$store.state.publicInfo.attr['windspeed']
      },
      set: function (val) {
        this.$store.dispatch('setDeviceStatus', {
          windspeed: val
        })
      }
    },
    model_mode: {
      get: function () {
        return this.$store.state.publicInfo.attr['mode']
      },
      set: function (val) {
        this.$store.dispatch('setDeviceStatus', {
          mode: val
        })
      }
    },

    ...mapState({

      deviceStatus (state) {
        const attr = state.publicInfo.attr
        const angleAutoLROnOff = attr.angleAutoLROnOff === 1
        const angleAutoUDOnOff = attr.angleAutoUDOnOff === 1
        const sleepOnOff = attr.sleepOnOff === 1
        const anionOnOff = attr.anionOnOff === 1
        const powerstate = attr.powerstate === 1

        return [

          {
            check: angleAutoLROnOff,
            text: '左右旋转/摇头/摆风',
            type: 'switch',
            clickBack: val => {
              this.$store.dispatch('setDeviceStatus', {
                angleAutoLROnOff: val.check ? 0 : 1
              })
            }
          },
          {
            check: angleAutoUDOnOff,
            text: '上下旋转/摇头/摆风',
            type: 'switch',
            clickBack: val => {
              this.$store.dispatch('setDeviceStatus', {
                angleAutoUDOnOff: val.check ? 0 : 1
              })
            }
          },
          {
            check: sleepOnOff,
            text: '睡眠功能',
            type: 'switch',
            clickBack: val => {
              this.$store.dispatch('setDeviceStatus', {
                sleepOnOff: val.check ? 0 : 1
              })
            }
          },
          {
            check: anionOnOff,
            text: '负离子功能',
            type: 'switch',
            clickBack: val => {
              this.$store.dispatch('setDeviceStatus', {
                anionOnOff: val.check ? 0 : 1
              })
            }
          },
          {
            check: powerstate,
            text: '开关',
            type: 'switch',
            clickBack: val => {
              this.$store.dispatch('setDeviceStatus', {
                powerstate: val.check ? 0 : 1
              })
            }
          }
        ]
      },

      list_windspeed (state) {
        return [

          {
            range: [{
              value: 151, // 取值
              disabledStyle: {}, // 禁用样式
              iconStyle: {}, // icon样式
              buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
              active: true // 选中样式快捷书写，当v-model的值和range中的值一致时，样式为选中，常用于互斥
            }],
            label: '低档', // 文字
            icon: ''
          },
          {
            range: [{
              value: 155, // 取值
              disabledStyle: {}, // 禁用样式
              iconStyle: {}, // icon样式
              buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
              active: true // 选中样式快捷书写，当v-model的值和range中的值一致时，样式为选中，常用于互斥
            }],
            label: '高档', // 文字
            icon: ''
          },
          {
            range: [{
              value: 153, // 取值
              disabledStyle: {}, // 禁用样式
              iconStyle: {}, // icon样式
              buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
              active: true // 选中样式快捷书写，当v-model的值和range中的值一致时，样式为选中，常用于互斥
            }],
            label: '中档', // 文字
            icon: ''
          }
        ]
      },
      list_mode (state) {
        return [

          {
            range: [{
              value: 10, // 取值
              disabledStyle: {}, // 禁用样式
              iconStyle: {}, // icon样式
              buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
              active: true // 选中样式快捷书写，当v-model的值和range中的值一致时，样式为选中，常用于互斥
            }],
            label: '制热模式', // 文字
            icon: ''
          },
          {
            range: [{
              value: 12, // 取值
              disabledStyle: {}, // 禁用样式
              iconStyle: {}, // icon样式
              buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
              active: true // 选中样式快捷书写，当v-model的值和range中的值一致时，样式为选中，常用于互斥
            }],
            label: '送风模式', // 文字
            icon: ''
          },
          {
            range: [{
              value: 13, // 取值
              disabledStyle: {}, // 禁用样式
              iconStyle: {}, // icon样式
              buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
              active: true // 选中样式快捷书写，当v-model的值和range中的值一致时，样式为选中，常用于互斥
            }],
            label: '除湿模式', // 文字
            icon: ''
          },
          {
            range: [{
              value: 9, // 取值
              disabledStyle: {}, // 禁用样式
              iconStyle: {}, // icon样式
              buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
              active: true // 选中样式快捷书写，当v-model的值和range中的值一致时，样式为选中，常用于互斥
            }],
            label: '制冷模式', // 文字
            icon: ''
          }
        ]
      },

      showStatus (state) {
        const attrStatus = state.publicInfo.attr
        var showStatusName = ''
        if (attrStatus.powerstate == 0) {
          showStatusName = '关闭'
        } else if (attrStatus.powerstate == 1) {
          showStatusName = '开启中'
        }
        return showStatusName
      },
      showList (state) {
        const attr = state.publicInfo.attr
        return [
          {
            title: '状态',
            val: attr.onlinestate === 'online' ? '在线' : '离线',
            unit: ''
          },

          {
            title: '目标温度',
            val: attr.targetTemperature,
            unit: '°C'
          },
          {
            title: '开机时间',
            val: attr.openTime,
            unit: 'min'
          },
          {
            title: '关机时间',
            val: attr.closeTime,
            unit: 'min'
          }
        ]
      },
      // 产品信息详情
      productInfo: state => {
        return state.base.productInfo
      }
    })
  },
  created () {
    console.log('this.$route.query：', this.$route.query)
    this.$nextTick(() => {
      this.setNavbar() // 设置topbar

      // 获取语料
      this.getProductFunctionCorpus()
    })
  },
  beforeDestroy () {
    AI.allListenRemove() // 页面兼听事件取消
  },
  methods: {
    // 设置topbar
    setNavbar () {
      AI.setNavbar({
        title: this.productInfo.title
      })
    },

    // 获取语料
    getProductFunctionCorpus () {
      AI.getProductFunctionCorpus().then((resp) => {
        this.functionCorpus = resp.model
        this.functionCorpusLoading = false
      }).catch((res) => {
        this.functionCorpusLoading = false
        console.log('失败返回', res)
      })
    }
  }
}
</script>
