<template>
  <div :class="itemClasses">
    <div :class="headerClasses" @click="toggle">
      <div style="display: flex;align-items: center">
        <Icon :type="isActive?'ios-arrow-down':'ios-arrow-forward'" v-if="!hideArrow && showClick"
              class="icon-class"></Icon>
        <div v-if="!showClick" class="no-click-icon-class"></div>
        <span v-if="showTitle" class="panel-title-class">{{ vm.$t(this.prop) }}</span>
        <Poptip trigger="hover" transfer placement="top-start" v-if="titleTip">
          <Icon type="iconfont iconfont icon-question" class="panel-tip-class"
                style="cursor: pointer;margin-top: -4px;" color="#909399" ref="info-icon"/>
          <div slot="content" style="white-space: pre-wrap ;">{{ titleTip }}</div>
        </Poptip>
        <div style="margin-left: 10px">
          <slot name="header"></slot>
        </div>
      </div>
      <!--      <div style="padding-right: 10px" @click.stop="handleClick">-->
      <!--        <Icon type="ios-albums" />-->
      <!--      </div>-->
    </div>
    <div :class="contentClass" v-show="isActive">
      <div :class="boxClasses">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script>
const prefixCls = "dk-collapse";
export default {
  name: "dk-Panel",
  data() {
    const vm = window.vm
    return {
      vm: vm,
      index: 0,
      nameData: '',
      isActive: false
    };
  },
  props: {
    // 当前面板的 name，与 Collapse的value对应
    name: {
      type: [String, Number]
    },
    // 标题属性
    prop: {
      type: String
    },
    // 是否显示标题
    showTitle: {
      type: Boolean,
      default: true
    },
    // 是否可以点击
    showClick: {
      type: Boolean,
      default: false
    },
    // 是否隐藏箭头
    hideArrow: {
      type: Boolean,
      default: false
    },
    // 平分高度
    averageHeightFlag: {
      type: Boolean,
      default: false,
    },
    // 提示信息
    titleTip: {
      type: String
    }
  },
  watch: {
    name(n, o) {
      this.nameData = n;
    }
  },
  computed: {
    itemClasses() {
      return [
        `${prefixCls}-item`,
        {
          [`${prefixCls}-item-active`]: this.isActive
        }
      ];
    },
    // 定义header样式
    headerClasses() {
      return `${prefixCls}-header`;
    },
    contentClass() {
      return `${prefixCls}-content`;
    },
    boxClasses() {
      return `${prefixCls}-content-box`;
    }
  },
  methods: {
    toggle() {
      if (!this.showClick) {
        return;
      }
      this.$parent.toggle({
        name: this.nameData || this.index,
        isActive: this.isActive
      });
    },
  },
  mounted() {
    if (this.prop && this.$parent) {
      this.nameData = this.prop;
      this.$parent.setValues(this.prop);
    }
  },
  created() {
    this.nameData = this.name;
  }
};
</script>

<style lang="scss" scoped>
.dk-collapse-header {
  display: flex;
  padding: 8px 0 10px 16px;
  justify-content: space-between;
}

.dk-collapse-content {
  padding: 3px 0 10px 16px;
  width: 98%;
}

.icon-class {
  width: 30px;
  align-items: center;
  justify-content: center;
  display: flex;
  padding-right: 15px;
}

.dk-collapse-item {
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #dcdee2;
  margin: 5px 2px;
  box-shadow: 0 -1px 0 0 #e5e5e5, -0.2px 0 0 0 #e5e5e5, 0.2px 0 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5;
}

.panel-title-class {
  font-weight: 600;
}

.no-click-icon-class {
  width: 5px;
  background: #2b85e4;
  height: 11px;
  margin-right: 10px;
}
</style>
