<template>
  <div class="hae-accordion">
    <div class="hae-accordion-item" v-for="(item,index) in accordionList" :key="index">
      <div class="hae-accordion header" @click="toggleAccordion(index)">
        <p class="hae-accordion title">{{item.title}}</p>
        <span class="iconfont" :class="{'rotate':showIndexs.includes(index)}">&#xe658;</span>
      </div>
      <template v-if="item.type == 'string' || type === 'string'">
        <div class="hae-accordion content" :class="{'active':showIndexs.includes(index)}">{{item.content}}</div>
      </template>
      <template v-else>
        <div class="hae-accordion content" :class="{'active':showIndexs.includes(index)}">
          <a href="javascript:;" @click="go(content.path)" class="content-item" v-for="(content,i) in item.content" :key="i">
          <span class="content-title">{{content.title}}</span>
          <span class="arrow-right iconfont">&#xe659;</span>
          </a>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'accordion',
  data () {
    return {
      showIndexs: []
    }
  },
  props: {
    accordionList: {
      type: Array,
      default: () => {
        return [{
          title: 'base',
          content: ''
        }]
      }
    },
    mode: {
      type: String,
      // 'base': will not close other accordion，'accordion'：will close other accordions when current is opened
      default: 'base'
    },
    type: {
      type: String,
      // 'string': will show text ，'list'：will show list
      default: 'string'
    },
    // default open which accordion
    showIndex: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    toggleAccordion (index) {
      if (this.mode === 'base') {
        if (this.showIndexs.includes(index)) {
          const delIndex = this.showIndexs.indexOf(index);
          this.showIndexs.splice(delIndex, 1);
          return;
        }
        this.showIndexs.push(index);
      } else {
        if (this.showIndexs.includes(index)) {
          this.showIndexs = [];
          return;
        }
        this.showIndexs = [];
        this.showIndexs.push(index);
      }
    },
    go (path) {
      if (path) {
        this.$router.push(path);
      }
    }
  },
  created () {
    this.showIndexs = this.showIndex;
  }
};
</script>
<style lang="less">
.hae-accordion.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
}
.iconfont {
  transition: all 0.2s linear;
}
.iconfont.rotate {
    transform: rotate(180deg);
}
.hae-accordion-item {
  padding: 15px;
  overflow: hidden;
  margin: 10px;
  background: #FFFFFF;
}
.hae-accordion.content {
  height: 0;
  overflow: hidden;
  font-size: 14px;
  transition: all 0.2s linear;
  color: #666666;
}
.hae-accordion.content.active {
  height: auto;
  padding-top: 10px;
}
.content-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    position: relative;
    color: #666666;
    font-size: 14px;
}
.content-item::after {
  content:'';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1px;
  width: 100%;
  background-color: #dddddd;
  transform: scaleY(0.5);
}
.content-item:active {
  background-color:#dddddd;
}
</style>