<template>
  <div class="pushButton">
    <div>开关按钮+链接按钮+常规按钮+切换按钮</div>
    <br/>**<br/>
    <push-button :range="range2" v-model="attr.val2" icon="icon-ejiazengrong" label="E+增容" @change="onChange" :disabled="attr.val1 === 0" ></push-button>
    <br/>**<br/>
    <push-button :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
    <br/>**<br/>
    <br/><br/>
    <!-- <push-group :rowLen="1">
      <push-button :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
    </push-group>
    <push-group :rowLen="2">
      <push-button :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
      <push-button icon="icon-yuyue" label="预约" @change="onChange"></push-button>
      <push-button :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
      <push-button icon="icon-yuyue" label="预约" @change="onChange"></push-button>
      <push-button :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
      <push-button icon="icon-yuyue" label="预约" @change="onChange"></push-button>
      <push-button :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
      <push-button icon="icon-yuyue" label="预约" @change="onChange"></push-button>
    </push-group> -->
    <!-- <push-group :rowLen="4" title="天文学知识" :firstLen="2" :allDisabled="allDisabled">
      <push-button :firstButton="true" :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
      <push-button :firstButton="true" icon="icon-yuyue" label="预约" @change="onChange"></push-button>
      <push-button :range="range2" v-model="attr.val2" icon="icon-ejiazengrong" label="E+增容" @change="onChange" :disabled="attr.val1 === 0" ></push-button>
      <push-button :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
      <push-button icon="icon-yuyue" label="预约" @change="onChange"></push-button>
      <push-button :range="range2" v-model="attr.val2" icon="icon-ejiazengrong" label="E+增容" @change="onChange" :disabled="attr.val1 === 0" ></push-button>
      <push-button :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
      <push-button icon="icon-yuyue" label="预约" @change="onChange"></push-button>
      <push-button :range="range2" v-model="attr.val2" icon="icon-ejiazengrong" label="E+增容" @change="onChange" :disabled="attr.val1 === 0" ></push-button>
    </push-group> -->
    <push-group :rowLen="5">
      <push-button :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
      <push-button icon="icon-yuyue" label="预约" @change="onChange"></push-button>
      <push-button :range="range2" v-model="attr.val2" icon="icon-ejiazengrong" label="E+增容" @change="onChange" :disabled="attr.val1 === 0" ></push-button>
      <push-button :range="range3" v-model="attr.val3" label="变频速热" @change="onChange" :disabled="attr.val1 === 0" ></push-button>
      <push-button :range="range1" v-model="attr.val1" icon="icon-set" @change="onChange"></push-button>
      <push-button icon="icon-yuyue" label="预约" @change="onChange"></push-button>
      <push-button :range="range2" v-model="attr.val2" icon="icon-ejiazengrong" label="E+增容" @change="onChange" :disabled="attr.val1 === 0" ></push-button>
      <push-button :range="range3" v-model="attr.val3" label="变频速热" @change="onChange" :disabled="attr.val1 === 0" ></push-button>
    </push-group>
    <!-- icon="icon-kaiguan" -->
    <!--  -->
    <!-- <br/>
    <div>多远按扭</div>
    <push-group>
      <push-button :range="range5" v-model="attr.val5" label="1档" theme-color="#FFA43D"
        @change="onChange" :disabled="attr.val4 === 0"
      ></push-button>
      <push-button :range="range6" v-model="attr.val5" label="2档" theme-color="#FFA43D"
        @change="onChange" :disabled="attr.val4 === 0"
      ></push-button>
      <push-button :range="range7" v-model="attr.val5" label="2档" theme-color="#FFA43D"
        @change="onChange" :disabled="attr.val4 === 0"
      ></push-button>
      <push-button :range="range8" v-model="attr.val5" label="2档" theme-color="#FFA43D"
        @change="onChange" :disabled="attr.val4 === 0"
      ></push-button>
    </push-group>
    <div style="margin-top:10px;">互斥按钮^</div> -->

    <div @click="allDisabled = !allDisabled">change it</div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { PushButton, PushGroup } from '../../tunas'
import loadjs from 'xp-loadjs'

export default Vue.extend({
  components: {
    PushButton,
    PushGroup
  },
  data () {
    return {
      allDisabled: false,
      attr: {
        val1: 1,
        val2: 0,
        val3: 0,
        val4: 1,
        val5: 0
      },
      range1: [
        { value: 0, label: '开机', iconStyle: { color: '#EA4335' }, themeColor: 'red' },
        { value: 1, label: '关机' }
      ],
      range2: [0, { value: 1, special: true }],
      range3: [{ value: 0, icon: 'icon-3kw' }, { value: 1, icon: 'icon-2kw', active: true }],
      range4: [
        { value: 0, label: '开机', icon: 'icon-ejiazengrong', iconStyle: { color: '#EA4335' } },
        { value: 1, label: '关机' }
      ],
      // icon: 'icon-2kw',
      range5: [{ value: 0, icon: 'icon-ejiazengrong',
        buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
        iconStyle: { color: 'blue' }
      }],
      // icon: 'icon-3kw',
      range6: [{ value: 1, icon: 'icon-ejiazengrong',
        buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
        iconStyle: { color: 'blue' }
      }],
      // icon: 'icon-3kw',
      range7: [{ value: 2, icon: 'icon-ejiazengrong',
        buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
        iconStyle: { color: 'blue' }
      }],
      // icon: 'icon-3kw',
      range8: [{ value: 3, icon: 'icon-ejiazengrong',
        buttonStyle: { color: '#fff', background: '#FFA43D', borderColor: '#FFA43D' },
        iconStyle: { color: 'blue' }
      }]
    }
  },

  methods: {
    pushChecker(v){
      // console.log('new pushChecker')
    },
    onChange (v) {
      console.log('change', v)
    }
  },

  created () {
    // 引入iconfont
    loadjs('//at.alicdn.com/t/font_705057_d0egemnyyim.js')
  },
  mounted () {
    // setTimeout(() => {
    //   this.mode = 2
    // }, 3000)
  }
})
</script>
