<template>
  <div>
		<h2>Custom Accordion</h2>
		<Accordion style="height:250px">
			<AccordionPanel iconCls="icon-man" headerCls="hd">
				<template slot="header">
					<div class="panel-title panel-with-icon">Friends</div>
					<div class="right">
						<span class="count">124</span>
					</div>
				</template>
				<Tree :data="treeData"></Tree>
			</AccordionPanel>
			<AccordionPanel iconCls="icon-help" bodyCls="f-row">
				<template slot="header">
					<div class="panel-title panel-with-icon">Helps</div>
					<div class="right">
						<span class="count">1,024</span>
					</div>
				</template>
				<Tabs class="f-full" :border="false">
					<TabPanel :title="'Java'">
						<p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 135 million (excluding the 3.6 million on the island of Madura which is administered as part of the provinces of Java), Java is the world's most populous island, and one of the most densely populated places in the world.</p>
					</TabPanel>
					<TabPanel :title="'C#'">
						<p>C# is a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.</p>
					</TabPanel>
					<TabPanel :title="'Ruby'">
						<p>A dynamic, reflective, general-purpose object-oriented programming language.</p>
					</TabPanel>
					<TabPanel :title="'Fortran'">
						<p>Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing.</p>
					</TabPanel>
				</Tabs>
			</AccordionPanel>
			<AccordionPanel :title="'Printers'" iconCls="icon-print">
				<p>Printers Content</p>
			</AccordionPanel>
		</Accordion>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          text: "My Documents",
          children: [
            {
              id: 11,
              text: "Photos",
              children: [
                {
                  id: 111,
                  text: "Friend"
                },
                {
                  id: 112,
                  text: "Wife"
                },
                {
                  id: 113,
                  text: "Company"
                }
              ]
            },
            {
              id: 12,
              text: "Program Files",
              state: "closed",
              children: [
                {
                  id: 121,
                  text: "Intel"
                },
                {
                  id: 122,
                  text: "Java"
                },
                {
                  id: 123,
                  text: "Microsoft Office"
                },
                {
                  id: 124,
                  text: "Games"
                }
              ]
            },
            {
              id: 13,
              text: "index.html"
            },
            {
              id: 14,
              text: "about.html"
            },
            {
              id: 15,
              text: "welcome.html"
            }
          ]
        }
      ]
    };
  }
};
</script>
<style>
.right {
  position: absolute;
  right: 24px;
  height: 30px;
  top: 5px;
}
.count {
  display: inline-block;
  border-radius: 6px;
  background: #666;
  color: #fff;
  padding: 0 6px;
  font-size: 12px;
  line-height: 16px;
  height: 16px;
}
</style>