<template>
  <div class="wrapper">
    <dof-minibar
      title="lottieView动效视图"
      background-color="#0092d7"
      text-color="#ffffff"
      :isImage="true"
      :left-button="leftButton"
    ></dof-minibar>
    <div class="lotter-range-wrapper">
      <catalog :title="lotterName"></catalog>
    </div>
    <scroller>
      <midea-lottie-view
        v-if="lottieData"
        ref="lottieView"
        class="lottie"
        :data="lottieData"
        :loop="true"
      ></midea-lottie-view>
      <div class="control-panel">
        <div class="list-item">
          <dof-button
            type="primary"
            text="play"
            :btnStyle="{ width: '150px', height: '50px', backgroundColor: '#00909a', borderRadius: '5px' }"
            @dofButtonClicked="lotteryControl('play')"
          ></dof-button>
        </div>
        <div class="list-item">
          <dof-button
            type="primary"
            text="pause"
            :btnStyle="{ width: '150px', height: '50px', backgroundColor: '#00909a', borderRadius: '5px' }"
            @dofButtonClicked="lotteryControl('pause')"
          ></dof-button>
        </div>
        <div class="list-item">
          <dof-button
            type="primary"
            text="resume"
            :btnStyle="{ width: '150px', height: '50px', backgroundColor: '#00909a', borderRadius: '5px' }"
            @dofButtonClicked="lotteryControl('resume')"
          ></dof-button>
        </div>
        <div class="list-item">
          <dof-button
            type="primary"
            text="stop"
            :btnStyle="{ width: '150px', height: '50px', backgroundColor: '#00909a', borderRadius: '5px' }"
            @dofButtonClicked="lotteryControl('stop')"
          ></dof-button>
        </div>
      </div>
      <div class="botton-group demo">
        <dof-grid-select
          :single="true"
          :cols="5"
          :customStyles="customStyles"
          :list="testData3"
          @select="onSelectLottery"
        >
        </dof-grid-select>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  padding-bottom: 50px;
}
.lottery-range-wrapper {
  border-width: 1px;
}
.lottieA {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 750px;
  border-width: 6px;
  border-style: solid;
  border-color: #bbbbbb;
}
.lottie {
  width: 750px;
  height: 750px;
}
.control-panel {
  flex-direction: row;
  justify-content: space-around;
}

.demo {
  padding-top: 24px;
  padding-right: 24px;
  padding-left: 24px;
}
.list-item {
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: center;
  align-items: center;
}
</style>
<script>
import base from 'src/mixins/base'
import { DofMinibar, DofGridSelect, DofButton } from 'dolphin-weex-ui'
import Catalog from 'src/_mods/catalog.vue'
import nativeService from 'src/service/nativeService'

import demo1 from '../../assets/lottie/play_button.json'
import demo2 from '../../assets/lottie/refresh.json'
import demo3 from '../../assets/lottie/WeAcceptInlineImage.json'
import demo4 from '../../assets/lottie/lottiefiles.com - Nudge.json'
// import demo5 from '../assets/lottie/greyorange.json',
import demo5 from '../../assets/lottie/bianpao_animate.json'
import demo6 from '../../assets/lottie/halo_orange.json'
const lottieModule = weex.requireModule('lottieModule')

export default {
  components: { DofMinibar, DofButton, DofGridSelect, Catalog },
  mixins: [base],
  data() {
    return {
      leftButton: '/assets/image/header/back_white@2x.png',
      lotterName: '动效名称',
      testData3: [
        {
          title: '播放'
        },
        {
          title: '开灯'
        },
        {
          title: '画廊'
        },
        {
          title: '日历'
        },
        {
          title: '过新年',
          checked: true
        },
        {
          title: '橙色波动背景'
        },
        {
          title: 'demo6',
          disabled: true
        },
        {
          title: 'demo7',
          disabled: true
        },
        {
          title: 'demo8',
          disabled: true
        },
        {
          title: 'demo9',
          disabled: true
        },
        {
          title: 'demo10',
          disabled: true
        },
        {
          title: 'demo11',
          disabled: true
        },
        {
          title: 'demo12',
          disabled: true
        },
        {
          title: 'demo13',
          disabled: true
        },
        {
          title: 'demo14',
          disabled: true
        }
      ],
      customStyles: {
        lineSpacing: '14px',
        width: '120px',
        icon: '',
        color: '#333333',
        checkedColor: '#ffffff',
        disabledColor: '#eeeeee',
        borderColor: '#666666',
        checkedBorderColor: '#0092d7',
        backgroundColor: '#ffffff',
        checkedBackgroundColor: '#0092d7'
      },
      lottieDemo: [demo1, demo2, demo3, demo4, demo5, demo6],
      lottieData: ''
    }
  },
  methods: {
    onSelectLottery(param) {
      // this.$alert(param)
      let index = param.selectIndex
      this.lottieData = JSON.stringify(this.lottieDemo[index])
      this.lotterName = param.checkedList[0].title
    },
    lotteryControl(api) {
      let lottieRef = this.$refs.lottieView
      let param = {
        api: api,
        params: {}
      }
      lottieModule.lottieInterface(
        lottieRef,
        param,
        function(success) {
          nativeService.toast('successful')
        },
        function(error) {
          nativeService.toast('error')
        }
      )
      nativeService.hapticFeedback()
    }
  },
  mounted() {
    this.lottieData = JSON.stringify(this.lottieDemo[4])
    this.lotterName = this.testData3[4].title
    testData3
  }
}
</script>