<template>
  <div class="page-expansion-panel">
    <typo-text variant="title-bold">Expansion Panel</typo-text>
    <hr class="my-3" />
    <expansion-panel v-model="show" expandId="expandTest">
      <template #header>
        <typo-text variant="body-1-bold">
          Header Expansion
        </typo-text>
        <base-icon iconName="expand_more" color="#505154" />
      </template>
      <template #content>
        <div class="py-2">{{ dataText }}</div>
      </template>
    </expansion-panel>
    <div class="wrap-content mt-10">
      <code>
        <pre>{{ textCode }}</pre>
      </code>
    </div>
  </div>
</template>

<script>
import TypoText from "@/components/Typography/TypoText";
import ExpansionPanel from "@/components/ExpansionPanel";
import BaseIcon from "@/components/Base/BaseIcon";

export default {
  components: {
    TypoText,
    ExpansionPanel,
    BaseIcon
  },
  data() {
    return {
      show: true,
      dataText: "",
      textCode: `<expansion-panel v-model="show" expandId="expandTest">
  <template #header>
    <typo-text variant="body-1-bold">
      Header Expansion
    </typo-text>
    <base-icon iconName="expand_more" color="#505154" />
  </template>
  <template #content>
    <div class="py-2">
      Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. 
      Nunc ut urna sem. Maecenas eu blandit nibh. 
      Quisque fringilla magna quis lacus volutpat interdum. 
      Nullam at tincidunt diam, id venenatis nibh. 
      Vivamus varius arcu sit amet sagittis dapibus. 
      Duis ullamcorper diam quis tellus fringilla, in mollis felis porta. 
      Fusce id aliquam dolor.
    </div>
  </template>
</expansion-panel>`
    }
  },
  mounted() {
    this.dataText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut urna sem. Maecenas eu blandit nibh. Quisque fringilla magna quis lacus volutpat interdum. Nullam at tincidunt diam, id venenatis nibh. Vivamus varius arcu sit amet sagittis dapibus. Duis ullamcorper diam quis tellus fringilla, in mollis felis porta. Fusce id aliquam dolor.
  
  Donec nec scelerisque risus. Nunc nec felis ac mauris feugiat sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut hendrerit sit amet velit at interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc malesuada ex quis lorem ultricies, id elementum felis scelerisque. Integer aliquet nunc congue mi tempus egestas. Fusce viverra ullamcorper dapibus. Nunc in laoreet metus. Ut et lobortis tortor.
  
  Morbi in eleifend nisi. Ut ornare odio id tincidunt consequat. Nunc efficitur laoreet eros eu sodales. Curabitur laoreet faucibus commodo. Vestibulum libero erat, finibus quis pulvinar non, mollis vitae mi. Duis commodo rhoncus diam, vel varius leo sodales vitae. Proin ultricies porta mattis. Ut vel orci non neque maximus porttitor vel at diam. Donec urna magna, consectetur ac leo non, molestie tristique dui.
  
  Suspendisse sagittis turpis nec lacus placerat, ut congue risus posuere. Etiam non ligula elit. Sed ac egestas dui. Mauris a sagittis ligula. Vestibulum auctor ligula ac viverra tristique. Fusce id eros augue. Nulla in vehicula sapien. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Quisque at sem at tellus porttitor feugiat. Aliquam diam velit, pharetra vel ligula sit amet, imperdiet scelerisque magna. Cras nibh purus, malesuada eget magna ac, molestie consectetur dolor. Nam et blandit nulla, non finibus nunc.
        `
  },
}
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.wrap-content {
  background: $neutral-1;
  padding: 32px 44px;
}
</style>