<template>
  <div class="dof-card" :style="_cardStyle">
    <div class="dof-card-header" @click="onSelect" :style="_cardWrapperStyle">
      <div v-if="isActive" class="dof-card-header-tag" :style="{ backgroundColor: _tagBg }">
        <image :class="[_isColmo ? 'dof-card-header-tag-confirm-colmo' : 'dof-card-header-tag-confirm']" :src="_isColmo ? confirm.colmo : confirm.default"></image>
      </div>
      <div class="dof-card-header-content">
        <slot></slot>
      </div>
      <div class="dof-card-header-arrow-wrapper" v-if="collapsable" @click="onCollapse">
        <dof-switch v-if="_isColmo" :checked="!collapsed_" @dofChange="onCollapse"> </dof-switch>
        <image v-else ref="arrow" class="dof-card-header-arrow" :src="arrowUp"></image>
      </div>
    </div>
    <div v-if="collapsable" ref="body" class="dof-card-body">
      <slot name="body"></slot>
    </div>
    <div
      v-if="dotConfig.normalColor && dotConfig.clickedColor"
      :style="{ backgroundColor: clicked_ ? dotConfig.clickedColor : dotConfig.normalColor }"
      class="dof-card-dot"
    ></div>
  </div>
</template>

<script>
import { mixSelectableChild } from '../utils/mix-selectable-child.js'
import { Transition } from '../utils/transition.js'
import { getBoundingClientRect } from '../utils/dom.js'
import arrowUp from './imgs/arrow_up'
import confirm from './imgs/confirm'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
import { STYLE_MAP } from './style'
import DofSwitch from '../dof-switch/index'
export default {
  components: { DofSwitch },
  mixins: [mixSelectableChild('dof-card-group'), ColmoMixin, DiabloMixin],
  props: {
    collapsable: {
      type: Boolean,
      default: false
    },
    selectable: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Boolean,
      default: false
    },
    collapsed: {
      type: Boolean,
      default: false
    },
    tag: {
      type: String,
      default: 'right'
    },
    // 标签背景色
    tagBg: {
      type: String,
      default: ''
    },
    // 卡片样式
    cardStyle: {
      type: Object,
      default: () => ({})
    },
    // 右上角标记配置，normalColor常态颜色，clickedColor选中态颜色
    dotConfig: {
      type: Object,
      default: () => ({})
    },
    // 是否选中态
    clicked: {
      type: Boolean,
      default: false
    },
    // 点击颜色
    touchColor: {
      type: String,
      required: false,
      default: ''
    },
    cardWrapperStyle: {
      type: Object,
      default: () => ({})
    }
  },
  model: {
    prop: 'selected',
    event: 'select'
  },
  data() {
    return {
      active_: false,
      collapsed_: this.collapsed,
      clicked_: this.clicked,
      bodyHeight: 0,
      arrowUp,
      confirm,
      isTouching: false
    }
  },
  computed: {
    themeStyle() {
      const _theme = this._theme || 'default'
      return STYLE_MAP[_theme] || STYLE_MAP['default']
    },
    isActive() {
      return (this.selectable && this.selected) || this.isSelected
    },
    _cardStyle() {
      let tmp = { borderRadius: this.themeStyle.borderRadius }
      let style = {
        backgroundColor: this._isColmo ? '#303237' : (this._isDiablo ? '#171c1f' : '#fff'),
        ...tmp,
        ...this.cardStyle
      }
      if (this.touchColor && this.isTouching) style.backgroundColor = this.touchColor
      return style
    },
    _cardWrapperStyle() {
      let style = {
        'backgroundColor:active': this.touchColor ? this.touchColor : '',
        paddingLeft: '32px',
        paddingRight: '32px',
        paddingTop: '32px',
        paddingBottom: '32px',
        ...this.cardWrapperStyle
      }
      return style
    },
    _tagBg() {
      if (this.tagBg) return this.tagBg
      return this._isColmo ? '#B35336' : '#00A4F2'
    }
  },
  mounted() {
    this.initCollapsable()
  },
  methods: {
    initCollapsable() {
      if (!this.collapsable) {
        return
      }
      this.$nextTick(() => {
        getBoundingClientRect(this.$refs.body, res => {
          this.bodyHeight = res.size.height
          if (this.collapsed_) {
            this.collapseBody(0)
          } else {
            this.expandeBody()
          }
        })
      })
      if (this.collapsed_) {
        this.collapseArrow()
      }
    },
    onSelect() {
      this.$emit('select', !this.selected)
      this.triggerSelect()

      this.$emit('clicked', (this.clicked_ = !this.clicked_))
    },
    onCollapse() {
      this.collapsed_ = !this.collapsed_
      this.$emit('collapse', this.collapsed_)
      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.body)
    },
    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.body)
    },
    expandeArrow() {
      Transition.Default()
        .rotateZ(0)
        .transformOrigin('center')
        .run(this.$refs.arrow)
    }
  }
}
</script>

<style scoped>
.dof-card {
  /* border-radius: 32px; */
  overflow: hidden;
  position: relative;
  /* background-color: #ffffff; */
}

.dof-card--active {
  background-color: #f2f2f2;
}

.dof-card-header {
  position: relative;
  flex-direction: row;
  align-items: center;
  /* padding-left: 32px;
  padding-right: 32px;
  padding-top: 32px;
  padding-bottom: 32px; */
  overflow: hidden;
}

.dof-card-header-tag {
  position: absolute;
  width: 90px;
  height: 90px;
  right: -45px;
  top: -45px;
  transform-origin: center;
  transform: rotateZ(45deg);
}
.dof-card-header-tag-confirm {
  position: absolute;
  width: 66px;
  height: 66px;
  left: 11px;
  top: 58px;
  transform-origin: center;
  transform: rotateZ(-45deg);
}
.dof-card-header-tag-confirm-colmo {
  position: absolute;
  width: 18px;
  height: 18px;
  left: 35px;
  top: 66px;
  transform-origin: center;
  transform: rotateZ(-45deg);
}

.dof-card-header-stamp {
  position: absolute;
  top: 0px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  z-index: 100;
}

.dof-card-header-stamp--left {
  left: 0px;
  border-top-left-radius: 32px;
}

.dof-card-header-stamp--right {
  right: 0px;
  border-top-right-radius: 32px;
}

.dof-card-header-content {
  flex: 1;
  flex-direction: column;
}

.dof-card-header-arrow-wrapper {
  margin-right: 4px;
}

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

.dof-card-body {
  position: relative;
  overflow: hidden;
}
.dof-card-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  right: 16px;
  top: 16px;
  border-radius: 8px;
}
</style>
