<template>
  <div>
    <el-container class="dk-link">
      <el-aside width="150px">
        <div class="group">
          <ul class="link_group">
            <li v-for="(item,key) in linkList" :key="key" :class="{active:key===chooseKey}" @click="handleClickGroup(key)">{{ item.group_name }}</li>
          </ul>
        </div>
      </el-aside>
      <el-container>
        <div v-if="linkList[chooseKey]" :key="chooseKey" class="container">
          <template v-for="(item,key) in linkList[chooseKey].children">
            <div :key="key">
              <template v-if="item.children">
                <p><i class="el-icon-link" />{{ item.title }}</p>
                <div class="u-m-b-20 u-m-t-20">
                  <template v-for="(link,index) in item.children">
                    <el-tag
                      :key="index"
                      size="small"
                      :type="link.type"
                      class="u-m-r-10"
                      @click="handleClickLink(link)"
                    >{{ link.title }}
                    </el-tag>
                  </template>
                </div>
              </template>
            </div>
          </template>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'DkLinkContainer',
  props: {
    linkList: {
      default: () => {
      },
      type: [Array]
    }
  },
  data() {
    return {
      chooseGroupLink: {},
      chooseKey: 0
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    handleClickGroup(key) {
      // this.chooseGroupLink = this.linkList[key].children
      this.chooseKey = key
    },
    handleClickLink(link) {
      this.$emit('choose', link)
    }
  }
}
</script>

<style scoped lang="scss">
.dk-link {
  height: 300px;
  .group {
    border: 1px solid #e4e7ed;
    height: 298px;
    padding: 10px;
    margin-right: 10px;
    overflow: auto;
    li {
      font-size: 12px;
      border-bottom: 1px solid #e4e7ed;
      cursor: pointer;
      padding: 10px;
      &:hover,&.active {
        background: #dcecff;
        color: #409EFF;
      }
    }
  }

  .container {
    overflow: auto;
    border: 1px solid #e4e7ed;
    width: 100%;
    padding: 10px;
    p {
      //padding: 20px 0;
      color: #888;

      i {
        color: #409EFF;
        margin-right: 5px;
      }
    }

    .u-m-r-10 {
      cursor: pointer;
    }
  }
}

</style>
