<template>
  <div class="wrapper">
    <dof-minibar
      title="Tab-page"
      background-color="#267AFF"
      text-color="#ffffff"
      :left-button="leftButton"
      @dofMinibarRightButtonClicked="reloadHandler"
    >
      <div slot="right" class="right-img-wrapper">
        <dof-icon :iconStyle="{ fontSize: '32px', color: '#fff' }" name="refresh"></dof-icon>
      </div>
    </dof-minibar>
    <scroller class="content-container">
      <div class="split-gap"></div>
      <dof-catalog title="样式一" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <dof-minibar class="minibar-demo" :right-button="rightButtonBlack" @dofMinibarRightButtonClicked="reloadHandler">
        <dof-tab-page
          type="primary"
          slot="middle"
          :is-slot="true"
          ref="dof-tab-page"
          :tab-titles="navTabTitles"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
      </dof-minibar>
      <div class="split-gap"></div>
      <dof-minibar
        background-color="#267AFF"
        text-color="#ffffff"
        :left-button="leftButton"
        :right-button="rightButton"
        @dofMinibarRightButtonClicked="reloadHandler"
      >
        <dof-tab-page
          type="primary"
          slot="middle"
          :is-slot="true"
          ref="dof-tab-page"
          :tab-titles="navTabTitles"
          :tab-styles="tabStyles2"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
      </dof-minibar>

      <dof-catalog title="样式二" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <dof-tab-page
        v-for="(item, index) in secondaryTabTitle"
        :key="index"
        ref="dof-tab-page"
        :tab-titles="item"
        :has-margin="true"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>
      <dof-tab-page
        v-for="(item, index) in secondaryTabTitle"
        :key="index"
        ref="dof-tab-page"
        theme="primary"
        :tab-titles="item"
        :has-margin="true"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>

      <dof-catalog title="样式三" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <dof-tab-page
        ref="dof-tab-page"
        type="third"
        :tab-titles="thirdTabTitles1"
        :tab-checked-index="0"
        :has-margin="true"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>
      <dof-tab-page
        v-for="(item, index) in colorArray" :key="index"
        ref="dof-tab-page"
        type="third"
        :tab-titles="thirdTabTitles1"
        :tab-styles="TrendStyle(index)"
        :tab-checked-index="0"
        :has-margin="true"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>
      <dof-catalog title="样式三 有图标" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <dof-tab-page
        ref="dof-tab-page"
        type="third"
        :tab-titles="thirdTabTitles2"
        tab-checked-index="0"
        :has-margin="true"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>
      <dof-tab-page
        v-for="(item, index) in colorArray" :key="index"
        ref="dof-tab-page"
        type="third"
        :tab-titles="createTabTitles(index)"
        :tab-styles="TrendStyle(index)"
        tab-checked-index="0"
        :has-margin="true"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>

      <div class="split-gap"></div>
      <dof-catalog title="样式四" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <dof-tab-page
        theme="default"
        type="third-group"
        :tab-checked-index="0"
        :tabTitles="btnGroup[0]"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>
      <div v-for="(theme, index) in themeArray" :key="index">
        <dof-tab-page
          :theme="theme"
          type="third-group"
          :tab-checked-index="0"
          :tabTitles="btnGroup[0]"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
        <div class="split-gap"></div>
      </div>

      <div class="split-gap"></div>
      <dof-catalog title="叠加使用示例一" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <dof-minibar
        background-color="#FFFFFF"
        text-color="#000000"
        :right-button="rightButtonBlack"
        @dofMinibarRightButtonClicked="reloadHandler"
      >
      </dof-minibar>
      <dof-tab-page
        type="secondary"
        ref="dof-tab-page"
        :tab-titles="navTabTitles"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>
      <div class="split-gap"></div>
      <div v-for="(item, index) in colorArray" :key="index">
        <dof-minibar
          :background-color="item"
          text-color="#ffffff"
          :left-button="leftButton"
          :right-button="rightButton"
          @dofMinibarRightButtonClicked="reloadHandler"
        >
        </dof-minibar>
        <dof-tab-page
          type="secondary"
          :theme="themeArray[index]"
          ref="dof-tab-page"
          :tab-titles="navTabTitles"
          :tab-styles="tabStyles2"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
        <div class="split-gap"></div>
      </div>
      <dof-catalog title="叠加使用示例二" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <dof-minibar
        background-color="#FFFFFF"
        text-color="#000000"
        :right-button="rightButtonBlack"
        @dofMinibarRightButtonClicked="reloadHandler"
      >
      </dof-minibar>
      <dof-tab-page
        ref="dof-tab-page"
        type="third"
        :tab-titles="thirdTabTitles1"
        :tab-checked-index="0"
        :has-margin="true"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>
      <div v-for="(item, index) in colorArray" :key="index">
        <dof-minibar
          :background-color="item"
          text-color="#ffffff"
          :left-button="leftButton"
          :right-button="rightButton"
          @dofMinibarRightButtonClicked="reloadHandler"
        >
        </dof-minibar>
        <dof-tab-page
          ref="dof-tab-page"
          type="third"
          :tab-titles="thirdTabTitles1"
          :tab-styles="TrendStyle(index)"
          :tab-checked-index="0"
          :has-margin="true"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
      </div>
      
      <div class="split-gap"></div>
      <dof-catalog title="叠加使用示例三" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <div v-for="(item, index) in btnGroup" :key="index">
        <dof-minibar :right-button="rightButtonBlack" @dofMinibarRightButtonClicked="reloadHandler">
          <dof-tab-page
            type="primary"
            slot="middle"
            :is-slot="true"
            ref="dof-tab-page"
            :tab-titles="navTabTitles"
            @dofTabSelected="tabChangeHandler"
          ></dof-tab-page>
        </dof-minibar>
        <dof-tab-page
          theme="default"
          type="third-group"
          :tab-checked-index="0"
          :tabTitles="item"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
        <div class="split-gap"></div>
      </div>
      <div v-for="(item, index) in btnGroup" :key="index">
        <dof-minibar :background-color="bgColor" :left-button="leftButton" :right-button="rightButton" @dofMinibarRightButtonClicked="reloadHandler">
          <dof-tab-page
            type="primary"
            :theme="theme"
            slot="middle"
            :is-slot="true"
            ref="dof-tab-page"
            :tab-titles="navTabTitles"
            @dofTabSelected="tabChangeHandler"
          ></dof-tab-page>
        </dof-minibar>
        <dof-tab-page
          :theme="theme"
          type="third-group"
          :tab-checked-index="0"
          :tabTitles="item"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
        <div class="split-gap"></div>
      </div>
      <dof-button type="primary" class="changeBtn" pattern="plain" text="切换主题" @dofButtonClicked="dofButtonClicked"></dof-button>

      <div class="split-gap"></div>
      <dof-catalog title="叠加使用示例四" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <dof-minibar :right-button="rightButtonBlack" @dofMinibarRightButtonClicked="reloadHandler">
        <dof-tab-page
          type="primary"
          slot="middle"
          :is-slot="true"
          ref="dof-tab-page"
          :tab-titles="navTabTitles"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
      </dof-minibar>
      <dof-tab-page
        ref="dof-tab-page"
        type="third"
        :tab-titles="thirdTabTitles1"
        :tab-checked-index="0"
        :has-margin="true"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>
      <div v-for="(color, index) in colorArray" :key="index">
        <dof-minibar
          :background-color="color"
          text-color="#ffffff"
          :left-button="leftButton"
          :right-button="rightButton"
          @dofMinibarRightButtonClicked="reloadHandler"
        >
        <dof-tab-page
            type="primary"
            slot="middle"
            theme="themeArray(index)"
            :is-slot="true"
            ref="dof-tab-page"
            :tab-titles="navTabTitles"
            @dofTabSelected="tabChangeHandler"
          ></dof-tab-page>
        </dof-minibar>
        <dof-tab-page
          ref="dof-tab-page"
          type="third"
          :tab-titles="thirdTabTitles1"
          :tab-styles="TrendStyle(index)"
          :tab-checked-index="0"
          :has-margin="true"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
      </div>

      <dof-tab-page
        ref="dof-tab-page"
        type="third"
        :tab-titles="thirdTabTitles3"
        :tab-checked-index="currentTabIndex"
        :has-margin="true"
        @dofTabSelected="tabChangeHandler"
      ></dof-tab-page>
      <div class="btn-container">
        <dof-button text="切换 Tab" @dofButtonClicked="tabTrigger"></dof-button>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #f9f9f9;
}
.split-gap {
  padding: 8px 0;
}
.minibar-demo {
  margin-bottom: 16px;
}
.btn-container {
  padding: 20px;
  justify-content: center;
  align-items: center;
}
.changeBtn{
  margin-top: 48px;
  margin-bottom: 48px;
  margin-left: 32px;
}
</style>
<script>
import { DofMinibar, DofTabPage, DofIcon, DofCatalog, DofButton, Utils, Core } from 'dolphin-weex-ui'

import Config, { demo1, demo1x, demo2, demo2x, demo3, demo4, demo5, demo6, demo7, demo8 } from './config'

export default {
  components: {
    DofTabPage,
    DofMinibar,
    DofIcon,
    DofCatalog,
    DofButton
  },
  data: () => ({
    leftButton: './assets/image/header/icon_back_white@3x.png',
    rightButton: './assets/image/header/title_more_icon_white.png',
    rightButtonBlack: './assets/image/header/icon_more_black@3x.png',
    dolphinIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/dolphin.png',
    tabStyles: Config.tabStyles,
    tabStyles2: {
      bgColor: '#267aff',
      titleColor: 'rgba(255,255,255,0.7)',
      activeTitleColor: '#ffffff',
      isActiveTitleBold: true,
      activeBottomColor: '#ffffff'
    },
    tabTitles: demo1,
    navTabTitles: demo1,
    secondaryTabTitles: demo2,
    secondaryTabTitles2: demo3,
    secondaryTabTitles3: demo4,
    thirdTabTitles1: demo5,
    thirdTabTitles2: demo6,
    thirdTabTitles3: demo7,
    thirdTabTitles4: demo8,
    currentTabIndex: 0,
    secondaryTabTitle:[demo1x, demo2, demo2x, demo3, demo4],
    btnGroup:[
      ['左灶', '右灶'],['左灶', '中灶', '右灶'], ['一灶', '二灶', '三灶', '四灶']
    ],
    colorArray:["#267AFF","#995EFC","#4F62FF","#29C3FF","#00CBB8","#FFAA10 ","#FF8225","#FF6A4C","#7C879B"],
    themeArray:["primary","purple","slate","aqua","turquoise","tomato","orange","yellow","gray"],
    bgColor:"#267aff",
    theme:"primary",
    index:0,
    titleType:[]
  }),
  created() {},
  mounted(){
    console.log("secondaryTabTitle",this.secondaryTabTitle)
  },
  methods: {
    tabChangeHandler(e) {
      const self = this
      const { index } = e
      this.$toast(index)
    },
    reloadHandler() {
      this.$reload()
    },
    tabTrigger() {
      this.currentTabIndex > 6 ? (this.currentTabIndex = 0) : this.currentTabIndex++
    },
    dofButtonClicked(){
      let { index, colorArray, themeArray } = this
      index<colorArray.length-1?this.index++:this.index=0
      this.bgColor = this.colorArray[index]
      this.theme = this.themeArray[index]
    },
    // 按钮组事件
    groupButtonClicked(index){
      Core.toast(`btn:${index}`)
    },

    TrendStyle(i){
      let bColor;
      switch (i) {
        case 0: bColor = '267AFF'; break;
        case 1: bColor = '995EFC'; break;
        case 2: bColor = '4F62FF'; break;
        case 3: bColor = '29C3FF'; break;
        case 4: bColor = '00CBB8'; break;
        case 5: bColor = 'FFAA10'; break;
        case 6: bColor = 'FF8225'; break;
        case 7: bColor = 'FF6A4C'; break;
        case 8: bColor = '7C879B'; break;
        default:bColor = 'FFFFFF';
          break;
      }
      return {
        bgColor: `#${bColor}`,
        titleColor: 'rgba(255,255,255,0.7)',
        activeTitleColor: `#${bColor}`,
        isActiveTitleBold: true,
        activeBottomColor: '#ffffff',
        boxBgColor: 'rgba(255,255,255,0.1)',
        activeBoxBgColor: '#ffffff'
      }
    },
    // 创建动态title 带有不同颜色图标的tabtitle
    createTabTitles(i){
      let currentUIColor;
      switch (i) {
        case 0: currentUIColor="blue"; break;
        case 1: currentUIColor="violet"; break;
        case 2: currentUIColor="bluish"; break;
        case 3: currentUIColor="sky"; break;
        case 4: currentUIColor="green"; break;
        case 5: currentUIColor="yellow"; break;
        case 6: currentUIColor="orange"; break;
        case 7: currentUIColor="red"; break;
        default: currentUIColor="gray";
          break;
      }
      return [
        {
          title: '起居',
          icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_living_visited@3x.png',
          activeIcon: `./assets/image/tabpage/icon_scene_living_${currentUIColor}@3x.png`
        },
        {
          title: '厨房',
          icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_kitchen_visited@3x.png',
          activeIcon: `./assets/image/tabpage/icon_scene_kitchen_${currentUIColor}@3x.png`
        },
        {
          title: '安防',
          icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_security_visited@3x.png',
          activeIcon: `./assets/image/tabpage/icon_scene_security_${currentUIColor}@3x.png`
        },
        {
          title: '卫浴',
          icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/scene/icon_scene_bathroom_visited@3x.png',
          activeIcon: `./assets/image/tabpage/icon_scene_bathroom_${currentUIColor}@3x.png`
        }
      ]
    }
  }
}
</script>