<template>
  <div>
		<h2>Dynamic Accordion</h2>
		<div style="margin-bottom:10px">
			<LinkButton iconCls="icon-add" @click="add()">Add</LinkButton>
			<LinkButton iconCls="icon-remove" @click="remove()">Remove</LinkButton>
		</div>
		<Accordion ref="acc" :selectedIndex="selectedIndex" style="height:250px">
			<AccordionPanel v-for="p in panels" :title="p.title" :key="p.title">
				<p>{{p.content}}</p>
			</AccordionPanel>
		</Accordion>
  </div>
</template>

<script>
export default {
  data() {
    return {
      panelIndex: 4,
      selectedIndex: 0,
      panels: [
        { title: "Title1", content: "Content1" },
        { title: "Title2", content: "Content2" },
        { title: "Title3", content: "Content3" }
      ]
    };
  },
  methods: {
    add() {
      if (this.panels.length >= 6) {
        return;
      }
      this.panels.push({
        title: "Title" + this.panelIndex,
        content: "Content" + this.panelIndex
      });
      this.$nextTick(() => {
        this.selectedIndex = this.panels.length - 1;
        this.panelIndex++;
      });
    },
    remove() {
      let index = this.$refs.acc.getSelectedIndex();
      this.panels.splice(index, 1);
      this.selectedIndex = 0;
    }
  }
};
</script>