<template>
  <div class="box-index">
    <box-type-list @changeCategoryId="changeCategoryId"/>
    <div class="add-block">
      <el-button class="add-btn" type="success">+新增盒子</el-button>
    </div>
    <el-row>
      <el-col :span="4" v-for="(data, index) in list" :key="o">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <img v-if="data.cover !== ''" :src="defaultImgPath + data.cover" class="image">
          <div style="padding: 14px;">
            <span>
              {{data.title}}
            </span>

            <div class="bottom clearfix">
              <el-tag size="mini">level{{data.min_level}}-level{{data.max_level}}</el-tag>
              <el-tag type="success" size="mini">{{data.min_age}}-{{data.max_age}}岁</el-tag>
              <div class="btn-block">
              <el-button type="primary" icon="el-icon-search" circle plain size="mini"></el-button>
              <el-button type="warning" icon="el-icon-edit" circle plain size="mini"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle plain size="mini"></el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getBoxListApi } from "../../service/api";
  import BoxTypeList from './boxTypeList'
  export default {
    name: "index",
    components:{
      BoxTypeList
    },
    data(){
      return {
        category_id:'',
        defaultImgPath:process.env.IMAGE_URL_HEAD ,
        list:[]
      }
    },
    mounted(){

    },
    methods: {
      initPage (id){
        getBoxListApi(id).then(res=>{
          this.list = res.list
        })
      },
      changeCategoryId(data){
        this.category_id = data
      }
    },
    watch:{
      category_id(value){
        this.initPage(value)
      }
    }
  }
</script>

<style scoped lang="less">
  .box-index{
    overflow: hidden;
    padding: 20px;
    display: block;
    .add-block{
      display: block;
      text-align: right;
      margin: 10px 0;

    }

  }
</style>
