<template>
  <mu-container class="demo-container is-stripe">
    <mu-appbar style="width: 100%" color="primary">
      <mu-button icon slot="left">
        <mu-icon value="menu"></mu-icon>
      </mu-button>
      一件事一次办

      <!-- <mu-button flat slot="right">LOGIN</mu-button> -->
    </mu-appbar>
    <mu-list toggle-nested>
      <mu-list-item
        v-for="item in topiclist"
        button
        :key="item.id"
        :ripple="false"
        nested
        :open="open === true"
        @toggle-nested="open = true"
      >
        <mu-list-item-action>
          <mu-icon value="drafts"></mu-icon>
        </mu-list-item-action>
        <mu-list-item-title>{{ item.name }}</mu-list-item-title>
        <mu-list-item-action v-if="item.children">
          <mu-icon
            class="toggle-icon"
            size="24"
            value="keyboard_arrow_down"
          ></mu-icon>
        </mu-list-item-action>
        <mu-list-item
          v-for="pack in item.children"
          :key="pack.id"
          button
          @click="handlePack(pack)"
          slot="nested"
        >
          <mu-list-item-title>{{ pack.name }}</mu-list-item-title>
        </mu-list-item>
      </mu-list-item>
    </mu-list>


    <!-- 底部导航栏 -->
    <div id="nav">
      <mu-divider></mu-divider>
      <mu-bottom-nav>
        <mu-bottom-nav-item title="个人服务" icon="person"></mu-bottom-nav-item>
        <mu-bottom-nav-item title="企业服务" icon="group"></mu-bottom-nav-item>
        <mu-bottom-nav-item
          title="我的办理"
          icon="location_on"
        ></mu-bottom-nav-item> </mu-bottom-nav
      >'
    </div>
  </mu-container>
</template>


<script>
export default {
  components: {
  },
  created() {
    this.$post("/zwfw/proced/thing/oneTopiclist", {
      type: "1",
    })
      .then((res) => {
        if (res && res.code && res.code == 1) {
          console.log(res);

          res.data.map((item) => this.topiclist.push(item));
        }
      })
      .catch((error) => {
        this.$message.error(error.message);
      });
  },
  methods: {
    handlePack(data) {
      console.log("主题包点击", data);

      this.$router.push("/question")

    },
    build() {
      const data = parser(this.text);
      this.form = form(data);
      this.table = table(data);
    },
  },
  data() {
    return {
      topiclist: [],
      text: "",
      form: "",
      table: "",
    };
  },
};
</script>


<style lang="less">
// 固定底部导航栏位置
#nav {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
}
</style>