<template>
  <div class="dof-icon-button" :key="_isColmo + 'icon-button'">
    <div class="content">
      <div class="triangle" v-if="isShowTriangle">
        <div :style="maskStyle" class="triangle-mask"></div>
      </div>
      <div class="imgBox" :style="style" @click="onClick">
        <image
          v-if="!isLoading && !_iconFont.code"
          :class="['dof-icon-button-img', round && 'dof-icon-button-img--round']"
          :src="src"
          :style="imgStyle"
        ></image>
        <dof-iconfont
          v-else-if="!isLoading && _iconFont.code"
          :code="_iconFont.code"
          :size="imgSize - 10"
          :color="_iconFont.color"
          @dofIconFontClicked="onClick"
        ></dof-iconfont>
        <!-- <div v-else class="dof-icon-button-loading-box"> -->
        <dof-spinner v-else :class="['dof-icon-button-loading']" :type="loadingSrc" :style="loadingImgStyle" />
        <!-- </div> -->
      </div>
    </div>
    <slot>
      <text v-if="text" class="dof-icon-button-text" :style="{ color: _textColor }">{{ text }}</text>
    </slot>
  </div>
</template>

<script>
import { Bridge } from 'dolphin-native-bridge'
import DofIconfont from '../dof-iconfont'
import ColmoMixin from '../../mixins/colmo'
import Color from 'color'
import DofSpinner from '../dof-spinner'
import DiabloMixin from '../../mixins/diablo'

export default {
  components: { DofIconfont, DofSpinner, DiabloMixin },
  mixins: [ColmoMixin, DiabloMixin],
  props: {
    // 是否激活态
    active: {
      type: Boolean,
      default: false
    },
    // 常态图片
    img: {
      type: String
    },
    // 常态背景颜色
    color: {
      type: String,
      default: ''
    },
    // 点击背景颜色
    activeColor: {
      type: String,
      default: ''
    },
    // 字体颜色
    textColor: {
      type: String,
      default: ''
    },
    // 点击未松手背景颜色
    touchColor: {
      type: String,
      default: ''
    },
    // 是否loading
    isLoading: {
      type: Boolean,
      default: false
    },
    // loading图片
    loadingImg: {
      type: String,
      default: 'black'
    },
    // 选中态图片
    activeImg: {
      type: String,
      default: ''
    },
    round: {
      type: Boolean,
      default: true
    },
    text: {
      type: String,
      default: ''
    },
    // 是否展示三角
    isShowTriangle: {
      type: Boolean,
      default: false
    },
    // 常规边框颜色
    borderColor: {
      type: String,
      default: ''
    },
    // 选中态边框颜色
    activeBorderColor: {
      type: String,
      default: ''
    },
    // 是否开启震动反馈
    isHapticFeedback: {
      type: Boolean,
      default: false
    },
    // 按钮大小
    btnSize: {
      type: Number,
      default: 96
    },
    // 图片大小
    imgSize: {
      type: Number,
      default: 96
    },
    // loading图片大小
    loadingImgSize: {
      type: Number,
      default: 0
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 朴素按钮(暂时只支持colmo)
    isPlain: {
      type: Boolean,
      default: false
    },
    // 使用iconFont { code: '\uXXX', color: '' }
    iconFont: {
      type: Object,
      default: () => ({})
    },
    // 点击态iconFont { ode: '\uXXX', color: '' }
    activeIconFont: {
      type: Object,
      default: () => ({})
    }
  },
  model: {
    prop: 'active',
    event: 'change'
  },
  computed: {
    // 常态背景颜色
    _color() {
      if (this.color) return this.color
      if (this._isColmo) {
        return this.isPlain ? 'transparent' : '#2d2e2f'
      } else {
        return this._isDiablo ? '#45494C' : '#F6F7F9'
      }
    },
    // 点击背景颜色
    _activeColor() {
      if (this.activeColor) return this.activeColor
      if (this._isColmo) {
        return this.isPlain ? 'transparent' : '#b45336'
      } else {
        return this._isDiablo ? '#0490D3' : '#00A4F2'
      }
    },
    // 常规边框颜色
    _borderColor() {
      if (this.borderColor) return this.borderColor
      if (this._isColmo) {
        return this.isPlain ? '#6f7070' : 'transparent'
      } else {
        return 'transparent'
      }
    },
    // 选中态边框颜色
    _activeBorderColor() {
      if (this.activeBorderColor) return this.activeBorderColor
      if (this._isColmo) {
        return this.isPlain ? '#b45336' : 'transparent'
      } else {
        return 'transparent'
      }
    },
    // 字体颜色
    _textColor() {
      if (this.textColor) return this.textColor
      return this._isColmo ? 'rgb(204, 204, 204)' : this._isDiablo ? '#cfcfd0' : '#1E2E37'
    },
    // touch颜色
    _touchColor() {
      if (this.touchColor) return this.touchColor
      if (this._isColmo) {
        return this.isPlain ? '#2d2e2f' : this.active ? '#bc654a' : '#424344'
      } else {
        return ''
      }
    },
    // loading图片大小
    _loadingImgSize() {
      if (this.loadingImgSize) return this.loadingImgSize
      return this._isColmo ? 48 : 32
    },
    src() {
      const res = this.active ? this.activeImg : this.img
      return res || this.img
    },
    loadingSrc() {
      if (this._isColmo) return 'colmo'
      let bgColor = this.style.backgroundColor
      if (bgColor === 'transparent') return 'black'

      var color = new Color(bgColor)
      return color.isDark() ? 'white' : 'black'
    },
    _iconFont() {
      if (!this.iconFont.code) return {}
      let res = {}
      if (this.active) {
        res = this.activeIconFont.code
          ? this.activeIconFont
          : { code: this.iconFont.code, color: 'rgba(255,255,255,0.80)' }
      } else {
        res = this.iconFont
      }
      // 颜色默认值
      if (!res.color)
        res.color = this.active ? 'rgba(255,255,255,0.80)' : this._isColmo ? 'rgba(255,255,255,0.40)' : '#666'
      return res
    },
    maskStyle() {
      // 右下角三角优先使用 borderColor 与 activeBorderColor
      const res =
        this._borderColor !== 'transparent' && this._activeBorderColor !== 'transparent'
          ? {
              backgroundColor: this.active ? this._activeBorderColor : this._borderColor
            }
          : {
              backgroundColor: this.active ? this._activeColor : this._color
            }
      !this.isLoading && this._touchColor && (res['backgroundColor:active'] = this._touchColor)
      return res
    },
    style() {
      const res = {
        backgroundColor: this.active ? this._activeColor : this._color,
        'border-width': '2px',
        'border-style': 'solid',
        'border-color': this.active ? this._activeBorderColor : this._borderColor,
        width: this.btnSize + 'px',
        height: this.btnSize + 'px',
        'border-radius': this.btnSize / 2 + 'px'
      }
      !this.isLoading && this._touchColor && (res['backgroundColor:active'] = this._touchColor)
      return res
    },
    imgStyle() {
      return {
        width: this.imgSize + 'px',
        height: this.imgSize + 'px',
        'border-radius': this.imgSize / 2 + 'px'
      }
    },
    loadingImgStyle() {
      return {
        width: this._loadingImgSize + 'px',
        height: this._loadingImgSize + 'px',
        'border-radius': this._loadingImgSize / 2 + 'px'
      }
    },
    isIp6() {
      if (weex && weex.config.env.osName === 'iOS') {
        let deviceModel = weex.config.env.deviceModel.substr(6) // 'iPhone10,3' ==> 10.3
        return (
          deviceModel.split(',')[0] < 8 // > iphone7 以下
        )
      } else {
        return false
      }
    }
  },
  methods: {
    onClick() {
      if (this.disabled || this.isLoading) return
      // 震动反馈
      if (this.isHapticFeedback) Bridge.hapticFeedback(!this.isIp6 ? 1 : null)
      this.$emit('change', !this.active)
    }
  }
}
</script>

<style scoped>
.dof-icon-button {
  align-items: center;
  position: relative;
}
.content {
  position: relative;
}
.imgBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dof-icon-button-img {
  /* width: 96px;
  height: 96px; */
}

.dof-icon-button-img--round {
  /* border-radius: 48px; */
}

.dof-icon-button-text {
  margin-top: 24px;
  font-family: PingFangSC-Regular;
  font-size: 24px;
  text-align: center;
  font-weight: 400;
}
.triangle {
  position: absolute;
  width: 18px;
  height: 18px;
  overflow: hidden;
  transform: rotateZ(270deg);
  transform-origin: center;
  bottom: 0;
  right: 0;
}

.triangle-mask {
  /* Math.sqrt(18 * 18 + 18 * 18) */
  width: 26px;
  height: 26px;
  transform: rotateZ(45deg);
  transform-origin: left top;
}

.dof-icon-button-loading-box {
  /* width: 96px;
  height: 96px;
  border-radius: 48px;
  display: flex;
  justify-content: center;
  align-items: center; */
}

.dof-icon-button-loading {
  /* width: 32px;
  height: 32px; */
}
</style>
