<template>
  <div>
    <div class="collapse">
      <div
        class="collapse-item"
        :class="{
          show: item.show,
          more: index > initLength && !more && moreBtn
        }"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="collapse-item-title" @click="itemClick(index)">
          <i class="collapse-item-title-icon">Q</i>
          <span class="collapse-item-title-txt">{{ item.q }}</span>
          <svg-icon icon-class="triangle-down" />
        </div>
        <div class="collapse-item-content">
          <i class="collapse-item-content-icon">A:</i>
          <div class="collapse-item-content-txt" v-html="item.a"></div>
        </div>
        <cr-divider :hairline="false" :style="{ color: '#ebebeb', margin: 0 }" />
      </div>
    </div>
    <div class="collapse-more" :class="{ active: more }" v-if="moreBtn">
      <a href="javascript:;" @click="showMore">
        <span>查看更多</span>
        <span>隐藏</span>
        <svg-icon icon-class="arrow-down" />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Collapse",
  props: {
    collapseData: {
      type: Array,
      default() {
        return [];
      }
    },
    moreBtn: {
      type: Boolean,
      default: true
    },
    initLength: {
      type: Number,
      default: 2
    }
  },
  watch: {
    collapseData: {
      immediate: true,
      deep: true,
      handler(val) {
        this.list = val.map(item => {
          item.showItem = false;
          return item;
        });
      }
    }
  },
  data() {
    return {
      list: [],
      more: false
    };
  },
  methods: {
    itemClick(index) {
      let _item = this.list[index];
      _item.show = !_item.show;
      this.$set(this.list, index, _item);
    },
    showMore() {
      this.more = !this.more;
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/var.less";
.collapse {
  &-item {
    background-color: @white;
    &.more {
      display: none;
    }
    &-title {
      display: flex;
      color: @black;
      font-weight: @font-weight-bold;
      padding: @padding-md 0;
      &-icon {
        font-size: @font-size-12;
        font-weight: @font-weight-bold;
        font-style: normal;
        line-height: @line-height-md - 2;
        height: 20px;
        text-align: center;
        width: 20px;
        margin-top: 2px;
        border-radius: @border-radius-sm / 4 @border-radius-md / 2;
        background-color: @orange-light;
        box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
      }
      &-txt {
        margin-left: 10px;
        font-weight: @font-weight-bold;
        font-size: @font-size-14;
        line-height: @line-height-lg;
      }
      .svg-icon {
        height: 17px;
        width: 17px;
        transition: all 0.2s linear;
        margin-left: auto;
        margin-top: 4px;
      }
    }
    &-content {
      display: none;
      overflow: hidden;
      color: @black;
      font-size: @font-size-14;
      background-color: @gray-1;
      border-radius: @border-radius-md;
      padding: 16px 16px 16px 12px;
      line-height: @line-height-sm + 2;
      margin-bottom: 15px;
      &-icon {
        font-style: normal;
        font-weight: @font-weight-bold;
      }
      &-txt {
        margin-left: 8px;
      }
    }
    &.show {
      .collapse-item-title {
        .svg-icon {
          transform: rotate(180deg);
        }
      }
      .collapse-item-content {
        display: flex;
      }
    }
  }
}
.collapse-more {
  text-align: center;
  line-height: @line-height-lg;
  padding: 5px 0;
  span:nth-child(2) {
    display: none;
  }
  .svg-icon {
    height: 11px;
    width: 11px;
    margin-left: 3px;
    transition: all 0.2s linear;
  }
  &.active {
    span:nth-child(1) {
      display: none;
    }
    span:nth-child(2) {
      display: inline;
    }
    .svg-icon {
      transform: rotate(180deg);
    }
  }
}
</style>
