<template>
  <div>
    <div class="collapse">
      <div
        :class="[{ show: item.show }, 'collapse-item']"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="collapse-item-title" @click="itemClick(index)">
          <div class="Ci-title-left">
            <span class="Cit-left-txt">{{ item.title }}</span>
            <svg-icon icon-class="triangle-down" v-if="item.content" class-name="Cit-left-svg" />
          </div>
          <span class="Ci-title-right">{{ item.value }}</span>
        </div>
        <div class="collapse-item-content">
          <div class="collapse-item-content-txt" v-html="item.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CollapseSecurity",
  props: {
    collapseData: {
      type: Array,
      default() {
        return [];
      }
    },
    hideIcon: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    collapseData: {
      immediate: true,
      deep: true,
      handler(val) {
        console.log("collapseData", val);
        this.list = val.map(item => {
          item.showItem = false;
          return item;
        });
      }
    }
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    itemClick(index) {
      let _item = this.list[index];
      if (!_item.content) return;
      _item.show = !_item.show;
      this.$set(this.list, index, _item);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../../style/var.less";
.collapse {
  &-item {
    &-title {
      display: flex;
      justify-content: space-between;
      .svg-icon {
        height: 17px;
        width: 17px;
        transform: rotate(-90deg);
        transition: all 0.2s linear;
      }
      font-size: 12px;
      line-height: 24px;

      .Ci-title-left {
        display: flex;
        align-items: center;
        font-weight: 400;
        color: #666666;
        .Cit-left-txt {
          font-size: 14px;
          color: #333333;
        }
      }
      .Ci-title-right {
        color: #333333;
        font-size: 14px;
        font-weight: 700;
      }
    }
    &-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;
        width: 15px;
      }
      &-txt {
        margin-left: 8px;
      }
    }
    &.show {
      .collapse-item-title {
        .svg-icon {
          transform: rotate(0deg);
        }
      }
      .collapse-item-content {
        display: flex;
      }
    }
  }
}
</style>
