<template>
  <div class="page-collapse">
    <co-header fixed title="Collapse">
      <fallback slot="left"></fallback>
    </co-header>

    <section class="co-wrapper page-collapse-container page-content-main">
      <dl class="main-list">
        <dt class="list-title"><span>基础示例</span></dt>
        <dd class="list-info">默认可以同时展开多个面板，可以设置默认展开第几个</dd>
        <dd class="list-example">
          <co-collapse :value="value1" @on-change='setVal'>
            <co-panel>
              0号面板
              <p slot="content">Nothing is left here</p>
            </co-panel>
            <co-panel>
              1号面板
              <p slot="content">I am not the First</p>
            </co-panel>
          </co-collapse>
        </dd>
        <dt class="list-title co-mg-t1"><span>手风琴</span></dt>
        <dd class="list-info">通过设置属性accordion开启手风琴模式，每次只能打开一个面板。</dd>
        <dd class="list-example">
          <co-collapse v-model="value2" accordion>
            <co-panel name="A">
              A
              <p slot="content">哆啦</p>
            </co-panel>
            <co-panel name="B">
              B
              <p slot="content">咪发嗦</p>
            </co-panel>
          </co-collapse>
        </dd>
      </dl>
    </section>
  </div>
</template>
<script type="es6">
  export default {
    name: 'page-collapse',
    data() {
      return {
        value1: '1',
        value2: 'B'
      };
    },
    methods: {
      setVal(nameArr) {
        this.value1 = nameArr;
      }
    }
  };
</script>

<style>
  .page-collapse .main-list .list-title {
    background-image: linear-gradient(to bottom, #dddee1 100%, #dddee1 0);
    background-position: 0 center;
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
    background-repeat: no-repeat;
  }
  .page-collapse .main-list .list-title span {
    font-size: 22px;
    line-height: 2;
    margin-left: .7em;
    padding: 0 10px;
    background-color: #ebebeb;
  }

  .page-collapse .main-list .list-info {
    font-size: 16px;
    line-height: 1.5;
    padding: 5px;
  }
</style>
