<template>
  <div class="foldPanelContent">
    <Collapse
      :simple="simple"
      :value="collapseValue"
      :accordion="accordion"
      hide-arrow
      @on-change="collapseChange"
    >
      <Panel
        :hide-arrow="hideArrow"
        :name="panelName"
        :is-title-show="isTitleShow"
        :title-type="titleType"
      >
        <div class="foldPanelTitle">
          <div class="foldPanelTitleTip" />
          {{ title }}
          <span
            v-if="explain"
            style="margin-left:16px;color:red"
            :style="explainStyle?explainStyle:'color:red'"
          >{{ explain }}</span>
          <!-- <i :class="currentValue ? 'iconfont iconios-arrow-up' : 'iconfont iconios-arrow-down'" /> -->
        </div>
        <div slot="content">
          <slot name="content" />
        </div>
      </Panel>
    </Collapse>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentValue: this.value,
        collapseValue: this.value ? ['0'] : [],
        panelName: '0'
      };
    },
    name: 'FoldPanel',
    props: {
      accordion: {
        type: Boolean,
        default: false
      },
      value: {
        type: Boolean,
        default: true
      },
      simple: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      explain: {
        type: String,
        default: ''
      },
      explainStyle:{
        type: String,
        default: ''
      },
      hideArrow: {
        type: Boolean,
        default: true
      },
      isTitleShow: {
        type: Boolean,
        default: true
      },
      titleType: {
        type: String,
        default: 'left'
      }
    },
    watch: {
      value(val) {
        this.currentValue = val;
        if (val) {
          this.collapseValue = ['0'];
        } else {
          this.collapseValue = [];
        }
      }
    },
    computed: {},
    methods: {
      collapseChange(key) {
        if (key[0] === this.panelName) {
          this.$emit('input', true);
        } else {
          this.$emit('input', false);
        }
        this.$emit('on-change', key);
      }
    }
  };
</script>

<style lang="less">
  .foldPanelContent {
    .ark-collapse {
      border: 0;
      margin-bottom: 0;
    }
    .ark-collapse > .ark-collapse-item.ark-collapse-item-active > .ark-collapse-header {
      background: #f7f8fa;
      border: 0 !important;
      border-bottom: 0px solid transparent;
    }
    .ark-collapse > .ark-collapse-item > .ark-collapse-header {
      background: #f7f8fa !important;
      height: 35px !important;
      line-height: 35px !important;
      border-bottom: 0px solid transparent;
    }
    // .ark-collapse-header {
    //   background-color: #ffffff !important;
    // }
    .ark-collapse > .ark-collapse-item >  .ark-collapse-content {
      padding-top: 20px;
    }
    .foldPanelTitle {
      width: 100%;
      display: flex;
      align-items: center;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4C4C4C;
      .foldPanelTitleTip {
        width: 3px;
        height: 10px;
        background: var(--primary-color);
        margin-right: 8px;
        font-size: 12px;
        font-weight: 500;
        color: #4C4C4C;
        border-radius: 2px;
        transition: all 0.6s;
        transform:rotate(90deg);
      }
      i {
        margin-left: 6px;
        font-size: 16px;
        color: #4C4C4C;
      }
    }
    .ark-collapse-item.ark-collapse-item-active .foldPanelTitle .foldPanelTitleTip{
      height: 14px;
      width: 3px;
      transform:rotate(0deg);
    }
  }
</style>
