<template>
  <section class="sliderNav">
    <div class="item" v-for="menu in menus" :key="menu.id">
      <el-row class="pad-w10" align="middle" @click="menu.expand=!menu.expand">
        <i class="iconfont icon-shujuqingxi"/>
        <div class="fill" v-text="menu.label"/>
        <el-icon :size="20">
          <component :is="arrow(menu.expand)"/>
        </el-icon>
      </el-row>
      <template v-if="menu.expand">
        <div class="app" v-for="app in menu.children" :key="app.id" v-text="app.label" :class="{active:app.id==12}"/>
      </template>
    </div>
  </section>
</template>

<script>
import {ArrowDownBold, ArrowUpBold, Histogram} from "@element-plus/icons-vue";

export default {
  name: "sliderNav",
  components: {Histogram, ArrowUpBold, ArrowDownBold},
  data() {
    return {
      menus: [
        {
          id: 1,
          label: "基础数据库",
          icon: "",
          expand: false,
          children: [{id: 11, label: "人口数据"}, {id: 12, label: "党员数据"}, {id: 13, label: "党组织数据"}]
        },
        {
          id: 2,
          label: "专题数据库",
          icon: "",
          expand: false,
          children: [{id: 14, label: "办公考勤数据"}, {id: 15, label: "信访数据"}, {id: 21, label: "矛盾调解数据"}]
        },
      ]
    }
  },
  methods: {
    arrow(expand) {
      return expand ? ArrowUpBold : ArrowDownBold
    }
  }
}
</script>

<style lang="scss" scoped>
.sliderNav {
  width: 200px;
  flex-shrink: 0;
  background: var(--background-color);
  font-family: PingFang SC-Regular, PingFang SC;

  .item {
    color: var(--el-color-primary);
    margin-bottom: 20px;
    line-height: 50px;
    cursor: pointer;

    .fill {
      margin-left: 12px;
    }
  }

  .app {
    padding-left: 28px;
    cursor: pointer;
    margin: 0 10px 0;

    &:hover {
      color: rgba(#fff, .8);
    }

    &.active {
      color: #fff;
      background: var(--el-color-primary);
      border-radius: 4px 4px 4px 4px;
    }
  }
}
</style>