<template>
  <div class="help">
    <div class="help-content">
      <div class="menu">
        <el-menu :default-openeds="openeds" :default-active="defaultActive" class="el-menu-vertical-demo" @select="select">
          <el-submenu :index="String(i)" v-for="(v,i) in helpList" :key="i">
            <template slot="title">
              <span>{{v.firstColumnNames}}</span>
            </template>
            <el-menu-item-group v-for="(item,index) in v.helpSeconds" :key="index">
              <el-menu-item :index="i+'-'+index">{{item.secondColumnNames}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div class="content">
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="(v,i) in detailList" :key="i" :label="v.title" :name="v.title" v-html="v.content"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <template>
      <el-backtop>返回顶部</el-backtop>
    </template>
  </div>
</template>

<script>
import { helpList, helpDetail } from "../api/help.js";
export default {
  name: "help",
  data() {
    return {
      helpList: [],
      detailList: [],
      openeds: [],
      activeName: "",
      defaultActive: "0",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getHelpList();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    getHelpList() {
      helpList().then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.helpList = res.data;
          this.openeds = this.helpList.map((v, i) => {
            return String(i);
          });
          this.getDetail(this.helpList[0].helpSeconds[0].secondColumnId);
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    getDetail(secondColumnId) {
      helpDetail({ secondColumnId }).then((res) => {
        if (res.code === 200) {
          this.detailList = res.data;
          this.activeName = this.detailList.length
            ? this.detailList[0].title
            : "";
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    select() {
      console.log("object", arguments);
      let nums = arguments[0].split("-");
      let num1 = Number(nums[0]);
      let num2 = Number(nums[1]);
      let id = this.helpList[num1].helpSeconds[num2].secondColumnId;
      this.getDetail(id);
    },
  },
};
</script>

<style lang="scss" scoped  type="text/css">
.help {
  height: 100%;
  .help-content {
    display: flex;
    justify-content: space-between;
    height: 100%;
    .menu {
      height: 100%;
      width: 250px;
      /deep/ ul {
        height: 100%;
        overflow: auto;
      }
      .title {
        cursor: pointer;
      }
    }
    .content {
      width: calc(100% - 260px);
      background: #fff;
      overflow: auto;
      /deep/ .el-tabs__item {
        padding-left: 20px;
      }
      /deep/ .el-tab-pane {
        padding: 0 20px;
      }
    }
  }
}
</style>