<template>
  <div class="sliderassembly">

        <el-input v-model="input" placeholder="请填写搜索内容" />

    <el-collapse v-model="activeNames">
      <el-collapse-item
        :title="items.title"
        :name="index + 1"
        v-for="(items, index) in datas"
        :key="index"
      >
        <template v-if="items.type==1">
           <template v-if="subItem.length>0">

              <div
                class="componList"
                draggable="true"
                v-for="(item, ind) in subItem"
                :key="ind"
                @dragstart="drag($event)"
                @dragend="dragends($event)"
                :data-name="item.name"
              >
                <i class="iconfont" :class="item.icon"  v-if="item.icon" />
                  <van-icon :name="item.vanIcon" v-else />
                  <p>{{ item.text }}</p>
              </div>
              <div style="font-size:12px; color: #155bd4;width:100%;text-align:right;cursor:pointer;" @click="onResetItem">返回上一层</div>
           </template>
           <template v-else>
              <div
                class="componList"
                v-for="(item, ind) in items.comList"
                :data-name="item.name"
                :key="ind"
                @click="onShowNext(item.subList)"
              >
                <i class="iconfont" :class="item.icon"  v-if="item.icon" />
                <van-icon :name="item.vanIcon" v-else />
                <p>{{ item.text }}</p>
              </div>
           </template>

        </template>

        <template v-else>
            <div
              class="componList"
              draggable="true"
              @dragstart="drag($event)"
              @dragend="dragends($event)"
              :data-name="item.name"
              v-for="(item, ind) in items.comList"
              :key="ind"
            >
              <i class="iconfont" :class="item.icon"  v-if="item.icon" />
              <van-icon :name="item.vanIcon" v-else />
              <p>{{ item.text }}</p>
            </div>
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'sliderassembly',
  props: {
    pointer: Object,
  },
  data() {
    return {
      activeNames: [1, 2, 3] /* 侧边栏组件显示 */,

      input:'',
      subItem:[],
      datas: [
        {
          title: '系统模板',
          type:1,
          comList: [
            {
              text: '分类1',
              type: '1-1',
              icon: 'icon-shangpinsousuo',
              name: 'commoditysearch',
              subList:[
                {
                  text: '机床说明',
                  type: '1-3',
                  icon: 'icon-tupianguanggao',
                  name: 'pictureads',
                },
                {
                  text: '机床说明',
                  type: '1-3',
                  icon: 'icon-tupianguanggao',
                  name: 'pictureads',
                },

              ]
            },
            {
              text: '分类2',
              type: '1-3',
              icon: 'icon-shangpinsousuo',
              name: 'captiontext',
            },
          ],
        },
        {
          title: '产品系列',
          type:3,
          comList:[],
        },
        {
          title: '业务组件',
          type:2,
          comList: [
            {
              text: '短文本',
              type: '2-2',
              icon: 'icon-dianpubijikapian',
              name: 'notice',
            },
            {
              text: '长文本',
              type: '2-3',
              vanIcon: 'orders-o',
              name: 'richtext',
            },
            {
              text: '图文',
              type: '2-3',
              vanIcon: 'orders-o',
              name: 'storenotecard',
            },
            {
              text: '图表',
              type: '2-3',
              vanIcon: 'orders-o',
              name: 'custommodule',
            }
          ]
        },

      ],
    }
  },
  methods: {

    onShowNext(e){
      let _this=this;
      _this.subItem=e;
    },
    onResetItem(){
      this.subItem=[];
    },
    /**
     * 当用户开始拖动元素或选择文本时触发此事件
     *
     * @param {Object} event event对象
     */
    drag(event) {
      /* 开启穿透 */
      this.pointer.show = true
      /* 传递参数 */
      event.dataTransfer.setData('componentName', event.target.dataset.name)
    },

    /**
     * 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
     *
     * @param {Object} event event对象
     */
    dragends() {
      /* 关闭穿透 */
      this.pointer.show = false
    },
  },
}
</script>

<style scoped lang="scss">
/* 组件 */
.sliderassembly {
  width: 275px;
  height: 100%;
  overflow-y: scroll;
  border-right: 1px solid #ebedf0;
  box-sizing: border-box;
  padding: 0 12px;
  background: #fff;
  padding-top:10px;
  /* 滚动条 */
  &::-webkit-scrollbar {
    width: 1px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #155bd4;
  }
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    border-bottom: 0 !important;
  }

  /* 组件列表 */
  .componList {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    width: 80px;
    height: 88px;
    margin-bottom: 8px;
    align-items: center;
    cursor: all-scroll;
    transition: all 0.3s;
    &:hover {
      background: #155bd4;
      border-radius: 2px;
      font-weight: 700;
      i,
      p,
      span {
        color: #fff;
      }
    }
    /* 图标 */
    i {
      font-size: 32px;
      width: 32px;
      height: 32px;
      line-height: 32px;
      color: #b0a8a8;
      margin-top: 4px;
    }
    /* 标题 */
    p {
      font-size: 12px;
      color: #323233;
      margin-top: 4px;
    }
    /* 数量 */
    span {
      color: #7d7e80;
      margin-top: 4px;
      font-size: 10px;
    }
  }
}
</style>
