<template>
  <div class="box-index">
    <box-type-list @changeCategoryId="changeCategoryId"/>
    <div class="add-block">
      <el-button class="add-btn" type="success" @click="onAdd()" v-if="!$store.state.readonly">+新增盒子</el-button>
    </div>
    <el-row>
      <el-col :span="5" v-for="(data, index) in list" :key="index" class="card-col">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" class="card">
          <img v-if="data.cover !== ''" :src="defaultImgPath + data.cover" class="image">
          <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="warning" icon="el-icon-edit" circle plain size="mini" v-if="!$store.state.readonly" @click="onEdit(data.id)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle plain size="mini" v-if="!$store.state.readonly" @click="delBox(data.id)"></el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <box-dialog :boxDialogObj="boxDialogObj" @reflash="initPage"/>
  </div>
</template>

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

    },
    methods: {
      initPage (id){
        getBoxListApi(id).then(res=>{
          this.list = res.list
        })
      },
      onEdit(id){
        this.boxDialogObj = {
          show:true,
          type:1,
          title:'修改盒子',
          id:id,
          category_id:this.category_id
        }
      },
      onAdd(){
        this.boxDialogObj = {
          show:true,
          type:0,
          title:'添加盒子',
          category_id:this.category_id
        }
      },
      changeCategoryId(data){
        this.category_id = data
      },
      delBox(id){
        this.$confirm('此操作将删除该盒子?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delBoxApi(id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          });
          this.initPage(this.category_id)
        });
      }
    },
    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;
    }
    .card-col{
      padding: 15px;
    }
    .card{
      cursor: pointer;
      .image{
        width: 100%;
        height: 300px;
        background: #f0f0f0;
        display: inline-block;
      }
      .bottom {
        height: 30px;
        line-height: 30px;
        .btn-block {
          float: right;
          .el-button {
            margin: 0;
          }
        }
      }
    }

  }
</style>