<template>
  <div :class="{'box-type-list':true,'closed':close}">
    <div class="close-btn" @click="close = !close">
      <i class="el-icon-arrow-right" v-if="!close"></i>
      <i class="el-icon-arrow-left" v-if="close"></i>
    </div>
    <el-card class="box-card">
      <div slot="header">
        <span>主题类别</span>
        <el-button style="float: right; padding: 3px 0;" @click="onAddType" type="text" v-if="!$store.state.readonly">新增</el-button>
      </div>
      <el-card v-for="o in list" shadow="hover" :key="o.id" :class="{text:true,'now-card':o.id === nowId}">
        <div class="name" @click="changeCateGory(o.id)">
          {{o.name}}
        </div>
        <div class="btn-block">
          <el-button type="primary" icon="el-icon-search" circle plain size="mini" v-if="!$store.state.readonly"></el-button>
          <el-button type="warning" icon="el-icon-edit" circle plain size="mini" v-if="!$store.state.readonly"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle plain size="mini" v-if="$store.state.deletePermission && !$store.state.readonly"></el-button>
        </div>
      </el-card>
    </el-card>
    <el-dialog title="主题类别" :visible.sync="dialogVisible" :modal="false" v-if="!$store.state.readonly">
      <el-form label-width="100px">
        <el-form-item label="名称">
          <el-input v-model="form.name" placeholder="规则：课程类别－主题－教具"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBoxType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getBoxTypeListApi,addBoxTypeApi} from "../../service/api";
  export default {
    name: "boxTypeList",
    data () {
      return {
        list:[],
        nowId:'',
        form:{
          name:'',
          pid:0,
          cover:'',
        },
        dialogVisible:false,
        close:false
      }
    },
    components:{
    },
    mounted(){
      this.getBoxTypeList()
    },
    methods: {
      getBoxTypeList(){
        getBoxTypeListApi().then(res=>{
          this.list = res ?  res : [];
          if(this.nowId === '' && res) {
            this.changeCateGory(res[0].id)
          }
        })
      },
      onAddType(){
        this.dialogVisible=true;
        this.form={
          name:'',
            pid:0,
            cover:'',
        }
      },
      saveBoxType(){
        addBoxTypeApi(this.form).then(res=>{
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.dialogVisible = false;
          this.getBoxTypeList()
        })
      },
      changeCateGory(id){
        this.nowId = id;
        this.$emit('changeCategoryId',id)
      }
    }
  }
</script>

<style scoped lang="less">
  .box-type-list{
    position: absolute;
    top: 0;
    right: -270px;
    bottom: 0;
    width: 280px;
    border-left: 1px solid #aae0ff;
    padding: 0;
    margin: 0;
    transition: all .3s;
    z-index: 10;
    &:hover{
      right: 0;
    }
    .close-btn{
      height: 80px;
      line-height: 80px;
      width: 20px;
      background: #aae0ff;
      color: white;
      position: absolute;
      top: 50%;
      cursor: pointer;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      margin-top: -40px;
      text-align: center;
      left: -20px;
    }
    .box-card{
      height: 100%;
      margin: 0;
      border: none;
      box-shadow: none;
      padding: 0;
      display: block;
      overflow: auto;
      .text{
        margin: 5px 0;
        position: relative;
        height: 65px;
        cursor: pointer;
        &.now-card{
          background: #409EFF;
          color: white;
        }
        .name{
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 100px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          padding: 20px;
        }
        .btn-block{
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          padding: 20px;
          z-index: 2;
          .el-button{
            margin: 0;
          }
        }
      }
    }
  }
</style>
