<template>
  <div>
    <div class="add-block">
      <el-button class="add-btn">+新增课时</el-button>
    </div>
    <el-card v-for="data in list" :key="data.id" class="box-card">
      <div class="id">
        <img :src="data.cover">
      </div>
      <div class="btn">
        <el-button
          type=""
          icon="el-icon-arrow-down"
          circle size="mini"
          @click="downLesson()">
        </el-button>
        <el-button
          type=""
          icon="el-icon-arrow-up"
          circle size="mini"
          @click="upLesson()">
        </el-button>
        <el-button
          type=""
          icon="el-icon-edit"
          circle size="mini"
          @click="editLesson()">
        </el-button>
        <el-button
          type=""
          icon="el-icon-delete"
          circle size="mini"
          @click="delLseeon()">
        </el-button>
      </div>
      <div class="name">
        {{data.title}}
        <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>
    </el-card>
  </div>
</template>

<script>
  import {getCateListApi} from "../../service/api";
  export default {
    name: "list",
    props:[
      'id'
    ],
    data(){
      return {
        list:[]
      }
    },
    created(){
      if(this.id !== '' && this.id !== null)this.getList()
    },
    methods:{
      getList(){
        console.log(this.id)
        getCateListApi(this.id).then(res=>{
          this.list = res.list
        })
      },
      delLseeon(){

      },
    },
    watch:{
      id(value){
        if(value !== '' && value !== null)this.getList()
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .box-card{
    margin: 10px 0;
    cursor: pointer;
    padding: 0;
    &:hover{
      background: #3a8ee6;
      color: white;
    }
    .id{
      margin-right: 20px;
      width: 4em;
      text-align: center;
      float: left;
      img{
        width: 100%;
      }
    }
    .btn{
      float: right;
    }
    .name{
      span{
        display: inline-block;
        text-align: center;

      }
    }
  }
  .add-block{
    .clear-both;
    .add-btn{
      float: right;
    }
  }

</style>
