<template>
  <div class="dof-demo">
    <dof-minibar
      title="Panel"
      background-color="#267AFF"
      text-color="#ffffff"
      :left-button="leftButton"
    >
      <div slot="right" class="right-img-wrapper">
        <dof-icon
          :iconStyle="{ fontSize: '32px', color: '#fff' }"
          name="refresh"
          @dofIconClicked="reloadHandler"
        ></dof-icon>
      </div>
    </dof-minibar>
    <dof-catalog
      :avatar-icon="dolphinIcon"
      title="dof-panel"
      background-color="#ffffff"
    ></dof-catalog>
    <scroller class="scroll-view">
      <dof-catalog title="类型样式"></dof-catalog>
      <div class="content">
        <div class="widget">
          <dof-panel
            :list-data="panelData1"
            @dofBottomBarClicked="checkLogHandler"
          ></dof-panel>
        </div>
        <div class="widget">
          <dof-panel
            :list-data="panelData1"
            :has-bottom-bar="false"
          ></dof-panel>
        </div>

        <div class="widget">
          <dof-panel
            :list-data="panelData3"
            @dofBottomBarClicked="checkLogHandler"
          ></dof-panel>
        </div>
        <div class="widget">
          <dof-panel
            :list-data="panelData3"
            :has-bottom-bar="false"
          ></dof-panel>
        </div>
        <div class="widget">
          <dof-panel
            :list-data="panelData2"
            :has-bottom-bar="false"
          ></dof-panel>
        </div>
      </div>
      <dof-catalog
        title="九种主题颜色"
        background-color="#daf9ca"
        :has-margin="true"
      ></dof-catalog>
      <div class="widget">
        <dof-panel
          theme="primary"
          :list-data="panelData1"
          @dofBottomBarClicked="checkLogHandler"
        ></dof-panel>
      </div>
      <div class="widget">
        <dof-panel
          theme="purple"
          :list-data="panelData1"
          @dofBottomBarClicked="checkLogHandler"
        ></dof-panel>
      </div>
      <div class="widget">
        <dof-panel
          theme="slate"
          :list-data="panelData1"
          @dofBottomBarClicked="checkLogHandler"
        ></dof-panel>
      </div>
      <div class="widget">
        <dof-panel
          theme="aqua"
          :list-data="panelData1"
          @dofBottomBarClicked="checkLogHandler"
        ></dof-panel>
      </div>
      <div class="widget">
        <dof-panel
          theme="aqua"
          :list-data="panelData1"
          @dofBottomBarClicked="checkLogHandler"
        ></dof-panel>
      </div>
      <div class="widget">
        <dof-panel
          theme="turquoise"
          :list-data="panelData1"
          @dofBottomBarClicked="checkLogHandler"
        ></dof-panel>
      </div>
      <div class="widget">
        <dof-panel
          theme="yellow"
          :list-data="panelData1"
          @dofBottomBarClicked="checkLogHandler"
        ></dof-panel>
      </div>
      <div class="widget">
        <dof-panel
          theme="orange"
          :list-data="panelData1"
          @dofBottomBarClicked="checkLogHandler"
        ></dof-panel>
      </div>
      <div class="widget">
        <dof-panel
          theme="tomato"
          :list-data="panelData1"
          btn-text="激活"
          @dofBottomBarClicked="checkLogHandler"
        ></dof-panel>
      </div>
      <div class="widget">
        <dof-panel
          theme="gray"
          :list-data="panelData1"
          btn-text="离线日志"
          @dofBottomBarClicked="checkLogHandler"
        ></dof-panel>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.right-img-wrapper {
  padding: 5px 0;
}
.dof-demo {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #f9f9f9;
}
.scroll-view {
  padding-top: 15px;
}
.content {
  align-items: center;
}
.widget {
  margin: 20px 0;
}
</style>

<script>
import { DofPanel, DofMinibar, DofIcon, DofCatalog } from 'dolphin-weex-ui'

export default {
  components: { DofPanel, DofMinibar, DofIcon, DofCatalog },
  data: () => ({
    leftButton:
      'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/back_white@3x.png',
    dolphinIcon:
      'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/dolphin.png',
    panelData1: [
      [
        {
          title: '小美已陪伴您',
          value: '234',
          unit: '天'
        },
        {
          title: '累计省用电',
          value: '326',
          unit: '度'
        },
        {
          title: '减少二氧化碳',
          value: '326',
          unit: '吨'
        }
      ]
    ],
    panelData2: [
      [
        {
          title: '小美已陪伴您',
          value: '234',
          unit: '天'
        },
        {
          title: '累计省用电',
          value: '326',
          unit: '度'
        }
      ],
      [
        {
          title: '小美已陪伴您',
          value: '234',
          unit: '天'
        },
        {
          title: '累计省用电',
          value: '326',
          unit: '度'
        }
      ]
    ],
    panelData3: [
      [
        {
          title: '小美已陪伴您',
          value: '234',
          unit: '天'
        },
        {
          title: '累计省用电',
          value: '326',
          unit: '度'
        }
      ]
    ]
  }),
  computed: {},
  created() {},
  methods: {
    reloadHandler() {
      this.$reload()
    },
    checkLogHandler() {
      this.$toast('查看日志')
    }
  }
}
</script>