<template>
  <div id="game_record_container">
    <div class="padding">
      <!--    头部-->
      <div class="header text-center">
        <view class="padding">
          <text class="title">
            1小时23分12秒
          </text>
        </view>
        <view>
          <text class="sub-title">
            今日累计时长
          </text>
        </view>
      </div>

      <!--    小titles -->
      <div class="line_container">
        <div>
          <text class="title">设备使用记录</text>
          <van-divider customStyle="border:.1px solid;margin:0px;"/>
        </div>
      </div>

      <!--    列表模块-->
      <van-cell-group>
        <van-cell is-link :title="item.toy"
                  :value="item.time"
                  v-for="(item,index) in items"
                  :key="index"
                  @click="to_report(item.id)"/>
      </van-cell-group>
    </div>

    <!--    标签筛选-->
    <van-tabs :active="active_date" @change="change_date" class="filter_date">
      <van-tab :title="date" v-for="(date,index) in dates" :key="index"></van-tab>
    </van-tabs>
  </div>
</template>

<script>


export default {
  name: "game_record_container",
  components: {},
  data() {
    return {
      items: [
        {
          id: 1,
          toy: "喷雾恐龙",
          time: "35分12秒"
        },
        {
          id: 2,
          toy: "喷水音箱",
          time: "20分02秒"
        },
        {
          id: 3,
          toy: "飞行器",
          time: "35分12秒"
        },
        {
          id: 4,
          toy: "飞行器",
          time: "35分12秒"
        },
      ],
      dates: [
        '今天',
        '昨天',
        '9月12日',
        '9月10日',
        '9月9日',
        '9月8日',
        '9月7日',
      ],
      active_date: 0
    }
  },
  methods: {
    change_date($event) {
      let $date = $event.mp.detail
      console.log($date)
    },
    to_report($event){
      console.log($event)
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
@import "index.css";
</style>
