<!--
 * @Description: 我的任务左侧菜单
 * @Author: ymz
 * @Date: 2021-12-02 17:25:39
 * @LastEditTime: 2021-12-09 17:15:05
 * @LastEditors: ymz
 * @Reference: 
-->
<template>
<div class="left-info">
  <div class="search">
    <el-input
      class="search-inp"
      placeholder="请输入任务名称"
      v-model="taskTypeName" @input="search">
      <i slot="prefix" class="el-input__icon el-icon-search search-icon"></i>
    </el-input>
  </div>
    <div class="content-box">
        <div class="box-title" @click="isShow = !isShow">
          <span>
            我的任务
          </span>
          <span>
              <i class='el-icon-caret-bottom' :class="{'is-hide':!isShow}"></i>
          </span>
        </div>
      
        <div class="info-box"  v-if="!nodata" v-show="isShow">
            <div class="list head-title" @click="clearSelect">
              <div class="list-title" >
                <span>全部任务</span>
              </div>
            </div>
          <div class="list" v-for="(item,index) in typeTree" :key="index">
            <div class="list-title" @click.stop.prevent="isShowClick(index)">
              <i :class="{'is-hide':isShowList.includes(index)}" class="el-icon-caret-bottom"></i>
              <span>{{item.label}}</span>
            </div>
           <el-collapse-transition>
            <ul v-show="!isShowList.includes(index)">
              <li v-for="(iten,indey) in item.children" :key="indey" 
                @click.stop.prevent="clickInfo(iten)"
                :class="{act:checkName === iten.taskTypeName}">
                {{iten.taskTypeName}}
              </li>
            </ul>
            </el-collapse-transition>
          </div>
        </div>
        <div class="no-data" v-else>
          <p>暂无数据</p>
        </div>
    </div>
    <div class="bottom">
        <p>其他任务暂无权限</p>
        <p>请联系管理员开启</p>
    </div>
  </div>
</template>

<script>
import {getTypeTree} from '@/api/taskManagement/myTask'
import {debounce} from '@/util/util'
export default {
components:{
},
props:{},
data(){
//这里存数据
    return{
      taskTypeName:'',
      isShow:true,
      isShowList:[],
      nodata:false,
      typeTree:[],
      checkName:''
  };
},
//计算属性
computed: {
},
//监控data中数据变化
watch: {
  taskTypeName:"search"
},
//方法
methods: {
  // 获取数据
  async getTypeTree(){
    let obj = {
      taskTypeName:this.taskTypeName
    }
    const res = await getTypeTree(obj)
    if(res.data.code === 0){
      this.typeTree = res.data.data
      if(res.data.data.length === 0){
        this.nodata = true
      }else{
        this.nodata = false
      }
      // this.init()
    }
  },
  // 搜索
  search: debounce(function() {
          this.isShow = []
          this.typeTree = []
          this.getTypeTree()
          },1000),
  // 折叠展开
  isShowClick(index){
    let i = this.isShowList.findIndex(item => item === index)
    if(i === -1){
      this.isShowList.push(index)
    }else{
      this.isShowList.splice(i,1)
    }
  },
  // 点击
  clickInfo(info){
    if(this.checkName === info.taskTypeName){
      return
    }
    this.checkName = info.taskTypeName
    this.$emit('clickInfo',info.taskTypeName)
  },
  // 清除选择
  clearSelect(){
    this.taskTypeName = ''
    this.checkName = ''
    this.$emit('clickInfo','')
  }
},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.getTypeTree()
},
};
</script>

<style scoped lang='scss'>
.left-info{
  position: relative;
  min-width: 220px;
  width: 15%;
  background-color: #f2f2f2;
  height: calc(100vh - 350px);
  padding: 10px 0;
  .search{
    margin: 0 10px;
    margin-bottom: 15px;

    ::v-deep.el-input__inner {
      height: 35px;
      font-size: 16px;
      padding-left: 35px;
    }
    .search-icon{
      line-height: 35px;
      font-size: 20px;
    }
  }
  .content-box{
    margin-top: 15px;
   
    .box-title{
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
        cursor: pointer;
      span{
        color: #aaaaaa;
        font-weight: 600;
        i{
          margin-right: 10px;
          font-size: 18px;
          transition: transform .3s ease-in-out;
        }
      }
    }
    .info-box{
      overflow: auto;
      height: calc(100vh - 520px);
      &::-webkit-scrollbar {
          width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
          height: 1px;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius   : 10px;
          background-color: #ccc;
        }
        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
          background   : #ededed;
          border-radius: 10px;
        }
      .list{
        margin-top: 5px;
        .list-title{
          padding: 0 30px;
          cursor: pointer;
          i{
            font-size: 16px;
            color: #c0c4cc;
            transition: transform .3s ease-in-out;
          }
          
          span{
            font-size: 12px;
            margin-left: 10px;
          }
        }
        ul{
          li{
              cursor: pointer;
              padding-left: 70px;
              line-height: 23px;
              height: 23px;
              font-size: 12px;
              &.act{
              background-color: #7f7f7f;
              }
            }
          }
      }
      .head-title{
        .list-title{
          span{
            padding-left: 0;
            line-height: 20px;
            font-size: 13px;
          }
        }
      }
    }
  }
}

.is-hide{
    transform: rotate(-90deg);
  }
.no-data{
  margin-top: 150px;
  text-align: center;
  color: #ccc;
  font-size: 16px;
}
.bottom{
  margin-top: 15px;
  text-align: center;
  line-height: 25px;
  font-size: 16px;
  font-weight: 600;
  color: #ccc;
  position: absolute;
  width: 100%;
  bottom: 10px;
 }
</style>

