<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;" type="text">新增类型</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"></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>
      </el-card>
    </el-card>
  </div>
</template>

<script>
  import {getBoxTypeListApi} from "../../service/api";
  export default {
    name: "boxTypeList",
    data () {
      return {
        list:[],
        nowId:'',
        close:false
      }
    },
    components:{
    },
    mounted(){
      this.getBoxTypeList()
    },
    methods: {
      getBoxTypeList(){
        getBoxTypeListApi().then(res=>{
          this.list = res;
          if(this.nowId === '') {
            this.changeCateGory(res[0].id)
          }
        })
      },
      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>
