<template>
  <div>
    <div class="home-top">
      <div class="home-top-left"> <img src="@/assets/2-主界面/logo.png" alt=""> </div>
      <div class="home-top-mid"><img src="@/assets/rms/mianoverview.png" alt=""></div>
      <div class="home-top-right"><img class="home-top-right-img" src="@/assets/2-主界面/关闭.png" alt=""></div>
    </div>
    <div class="content-container-text">
      <div class="title"><div class="return" @click="$router.push('/')"><i class="el-icon-arrow-left" /> 返回</div>快捷方式设置</div>
      <div class="content">
        <div class="content-item">
          <div class="sub-title">已选择快捷方式 <span class="sub-title-num">（已选7/7）</span></div>
          <draggable :list="items" class="items">
            <li v-for="(item,index) in items" :key="item.id" class="item">
              <div class="item-container">
                <svg-icon icon-class="关闭" class="opt-icon" @click="handleDel(index)" />
                <div class="item-img">
                  <img src="@/assets/2-主界面/库存盘点.png" alt="">
                </div>
                <el-tooltip :content="item.name" :disabled="item.name.length < 5" placement="top" effect="light">
                  <div class="item-title">{{ item.name }}</div>
                </el-tooltip>
              </div>
            </li>
          </draggable>
          <div class="bottom">
            <div class="bottom-desc">按住拖拽，调整顺序</div>
            <div class="bottom-opt"><el-button type="primary" @click="handleEnable">应用</el-button></div>
          </div>
        </div>
        <div class="content-item item-right">
          <div v-for="(item,index) in itemList" :key="item.id + 'l'">
            <div class="sub-title">{{ item.title }}</div>
            <ul class="items-right">
              <li v-for="(it,idx) in item.items" :key="idx +'' + index" class="item">
                <div class="item-container">
                  <svg-icon icon-class="加号" class="opt-icon opt-right" @click="handleAdd(index,idx)" />
                  <div class="item-img">
                    <img src="@/assets/2-主界面/库存盘点.png" alt="">
                  </div>
                  <el-tooltip :content="it.name" :disabled="it.name.length < 5" placement="top" effect="light">
                    <div class="item-title">{{ it.name }}</div>
                  </el-tooltip>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'Shortcut',
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { name: '试剂入库', id: 0 },
        { name: '试剂领用', id: 1 },
        { name: '试剂管理', id: 2 }
      ],
      itemList: [
        {
          id: 0,
          title: '试剂管理',
          items: [
            { name: '试剂入库试', id: 0 },
            { name: '试剂领用', id: 1 },
            { name: '试剂管理', id: 2 },
            { name: '试剂入库', id: 0 },
            { name: '试剂领用', id: 1 },
            { name: '试剂管理', id: 2 }
          ]
        },
        {
          id: 1,
          title: '标准品管理',
          items: [
            { name: '试剂入库', id: 0 },
            { name: '试剂领用', id: 1 },
            { name: '试剂管理', id: 2 }
          ]
        },
        {
          id: 2,
          title: '用户管理',
          items: [
            { name: '试剂入库', id: 0 },
            { name: '试剂领用', id: 1 },
            { name: '试剂管理', id: 2 }
          ]
        }

      ]
    }
  },
  methods: {
    handleEnable() {
      console.log(this.items)
    },
    handleAdd(index, idx) {
      const item = this.itemList[index].items.splice(idx, 1)
      this.items.push(...item)
    },
    handleDel(index) {
      const item = this.items.splice(index, 1)
      const idx = 0
      this.itemList[idx].items.push(...item)
    }
  }
}
</script>

<style scoped>
.title{
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  text-align: center;
}
.content-container-text{
  padding: 2rem 1rem 2rem 1rem;
  height: calc(100vh - 6rem);
  background: linear-gradient(180deg, #F3F5F9 0%, #D3D9E7 100%);
}
.return {
  font-size: 20px;
  font-weight: 400;
  color: #303133;
  float: left;
}
.content{
  display: flex;
  /*height: calc( 100vh - 200px) ;*/
  height: 77vh;
  margin-top: 2rem;
}
.content-item{
  margin: 1rem;
  width: 50%;
  background: rgba(255,255,255,0.0800);
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  opacity: 1;
  border: 0.0625rem solid #FFFFFF;
  padding: 2rem;
}
.sub-title{
  font-size: 1.25rem;
  font-weight: bold;
  color: #303133;
  line-height: 0;
}
.sub-title-num{
  font-size: 1rem;
  font-weight: 400;
  color: #909399;
}
.items{
  /*height: calc( 100vh - 270px);*/
  height: 60vh;
  margin-top: 2rem;
  list-style: none;
  overflow-y: auto;
  padding: 0;
}
.bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-img img{
  height: 5rem;
}
.item-title{
  font-size: 20px;
  font-weight: 400;
  color: #606266;
  margin-top: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-container{
  margin: 0 1rem 1rem 1rem;
  text-align: center;
}
.item{
  float: left;
  background: rgba(255,255,255,0.2000);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 2px solid #FFFFFF;
  height: 9.5rem;
  width: 7.5rem;
  margin: 1rem;
}
.opt-icon{
  position: relative;
  top: -10px;
  right: -55px;
  background: #C0C4CC;
  border-radius: 50%;
  padding: 0.1rem;
}
.item-right {
  overflow-y: auto;
}
.items-right{
  margin-top: 2rem;
  list-style: none;
  overflow-y: auto;
  padding: 0;
}
.opt-right{
  background: #409EFF;
}
</style>
<style lang="scss" scoped>
.home-top{
  height: 6rem;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 2rem;
  margin-left: 2rem;
  .home-top-left{
    img{
      height: 6rem;
    }
  }
  .home-top-mid{
    margin-right: 11.25rem;
    img{
      width: 31.25rem;
    }
  }
  .home-top-right{
    img{
      height: 2.5rem;
    }
  }
}
.bottom-desc{
  font-size: 16px;
  font-weight: 400;
  color: #909399;
}
</style>
