<template>
  <div class="dof-collapse-item">
    <div class="dof-collapse-item-content">
      <div
        class="title"
        @click="onCollapseHandler"
        :style="{
          'backgroundColor:active': _isColmo ? 'rgba(255,255,255,0.14)' : _isDiablo ? '#1d1f21' : '#fff'
        }"
      >
        <div :class="['title-box', collapsed_ ? 'bottom-line' : '']">
          <slot name="title"></slot>
          <div class="dof-header-arrow-box">
            <slot name="desc"></slot>
            <dof-iconfont
              v-if="_isColmo"
              ref="arrow"
              :code="'\u4814'"
              :size="48"
              :color="'rgba(255,255,255,0.8)'"
              @dofIconFontClicked="onCollapseHandler"
            ></dof-iconfont>
            <image v-else ref="arrow" class="dof-header-arrow" :src="arrowUp"></image>
          </div>
        </div>
      </div>
    </div>
    <div ref="slotBody" class="dof-item-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import DofIconfont from '../dof-iconfont'
import { Transition } from '../utils/transition.js'
import { getBoundingClientRect } from '../utils/dom.js'
import arrowUp from './imgs/arrow_up'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'

export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofIconfont },
  inject: ['_activeData'],
  props: {
    collapsed: {
      type: Boolean,
      default: true
    },
    name: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      collapsed_: this.collapsed,
      bodyHeight: 0,
      activeName: 0,
      arrowUp
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      getBoundingClientRect(
        this.$refs.slotBody,
        res => {
          if (res.result) {
            this.bodyHeight = res.size.height
          }
          if (this.collapsed_) {
            this.collapseBody(0)
          }
        },
        0
      )
    })
    if (this.collapsed_) {
      this.collapseArrow(0)
    }
  },
  computed: {
    accordion() {
      return this._activeData.accordion
    }
  },
  watch: {
    _activeData: {
      handler(newValue, oldValue) {
        this.activeName = newValue._activeName
        if (newValue._activeName != -1) {
          //手风琴
          if (newValue._activeName == 0) {
            this.collapseBody()
            this.collapseArrow()
            this.collapsed_ = true
          } else {
            if (newValue._activeName != this.name) {
              this.collapseBody()
              this.collapseArrow()
              this.collapsed_ = true
            } else {
              if (this.collapsed_) {
                this.collapseBody()
                this.collapseArrow()
              } else {
                this.expandeBody()
                this.expandeArrow()
              }
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    onCollapseHandler() {
      this.collapsed_ = !this.collapsed_
      //手风琴-发送通知
      this.$parent.collapseClick({ collapsed: this.collapsed_, name: this.name })
      if (!this.accordion) {
        if (this.collapsed_) {
          this.collapseBody()
          this.collapseArrow()
        } else {
          this.expandeBody()
          this.expandeArrow()
        }
      }
    },
    collapseBody(duration = 360) {
      Transition.Default()
        .duration(duration)
        .height(0)
        .needLayout(true)
        .run(this.$refs.slotBody)
    },
    collapseArrow() {
      Transition.Default()
        .rotateZ(-180)
        .transformOrigin('center')
        .run(this.$refs.arrow)
    },
    expandeBody(duration = 360) {
      Transition.Default()
        .duration(duration)
        .height(this.bodyHeight)
        .needLayout(true)
        .run(this.$refs.slotBody)
    },
    expandeArrow() {
      Transition.Default()
        .rotateZ(0)
        .transformOrigin('center')
        .run(this.$refs.arrow)
    }
  }
}
</script>

<style scoped>
.title {
  padding: 0 32px;
}
.dof-collapse-item-content {
  background-color: #fff;
}
/* .title:active {
  background-color: #fff;
} */

.title-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* padding-right: 16px; */
  height: 124px;
  align-items: center;
}

.bottom-line {
  border-bottom-color: #dddddd;
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

.title-text {
  height: 104px;
  line-height: 104px;
  font-size: 32px;
  color: #1e2e37;
}

.dof-header-arrow-box {
  height: 104px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.dof-header-arrow {
  width: 40px;
  height: 40px;
  margin-left: 0px;
  /* margin-right: 24px; */
  /* margin-top: 12px; */
  right: -8px;
  margin-bottom: 12px;
}

.dof-item-body {
  position: relative;
  overflow: hidden;
  background-color: #f9f9f9;
}
</style>
<style scoped src="./colmo.css"></style>
<style scoped src="./diablo.css"></style>
