<template>
  <div class="dof-switch-wrapper">
    <dof-spinner :type="loadingSrc" class="dof-switch-loading" v-if="loading" />
    <div
      ref="switch"
      @click="changeHandler"
      :class="[type === 'white' ? 'switch-white' : 'switch', checked && switchActiveClass, `switch-${type}`]"
      :style="Object.assign({}, mrSwitchStyle, customStyle)"
      :accessible="true"
      :aria-label="blindHelptext"
    >
      <div
        :accessible="false"
        :aria-hidden="true"
        ref="switchDot"
        :style="dotStyle"
        :class="[type === 'white' ? 'switch-white-dot' : 'switch-dot']"
      ></div>
    </div>
  </div>
</template>

<style src="./colmo.css"></style>
<style scoped>
.dof-switch-wrapper {
  position: relative;
  width: 96px;
  height: 48px;
  align-items: center;
  justify-content: center;
}
.dof-switch-loading {
  width: 48px;
  height: 48px;
  position: absolute;
  left: 32px;
  top: 0px;
}

.switch {
  width: 96px;
  height: 48px;
  border-style: solid;
  /* border-color: #8E969B;
  background-color: #ffffff; */
  border-width: 4px;
  border-radius: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.switch-colmo {
  border-width: 2px;
}
.switch-white {
  width: 96px;
  height: 48px;
  border-style: solid;
  border-color: #ffffff;
  background-color: #1e2e37;
  border-width: 4px;
  border-radius: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* margin-right: 12px; */
}
.switch-disabled {
  opacity: 0.3;
}
.switch-dot {
  border-radius: 8px;
  width: 16px;
  height: 16px;
  position: relative;
  left: 12px;
  transform-origin: center;
  transition-property: all;
  /* transition-duration: 5s; */
  background-color: transparent;
}
.switch-white-dot {
  border-radius: 8px;
  width: 16px;
  height: 16px;
  position: relative;
  left: 12px;
  transition-property: all;
  /* transition-duration: 5s; */
  background-color: transparent;
}
</style>

<script>
// 带switch按钮的cell
const animation = weex.requireModule('animation')
import { throttle } from '../../helper/utils'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
import { STYLE_MAP, STYLE_MAP_DIABLO } from './style'
import DofSpinner from '../dof-spinner'
import Utils from '../utils'

export default {
  components: { DofSpinner },
  mixins: [ColmoMixin, DiabloMixin],
  props: {
    checked: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    isLightLoading: {
      type: Boolean,
      default: false
    },
    blindHelptext: {
      type: String,
      default: ''
    },
    borderColor: {
      type: String,
      default: ''
    },
    backgroundColor: {
      type: String,
      default: ''
    },
    isScale: {
      typeof: Boolean,
      default: undefined
    },
    dotColor: {
      typeof: String,
      default: ''
    }
  },
  computed: {
    loadingSrc() {
      if (this._isColmo || this.type === 'colmo') return 'colmo'
      const src = this.isLightLoading ? 'white' : 'black'
      return src
    },
    switchActiveClass() {
      const { type } = this
      return `switch-active-${type}`
    },
    mrSwitchStyle() {
      return this.disabled ? { opacity: 0.3 } : this.loading ? { opacity: 0 } : { opacity: 1 }
    },
    dotStyle() {
      return {
        // 安卓1px渲染误差
        top: weex.config.env.platform.toLowerCase() === 'android' ? '1px' : '0px'
      }
    },
    customStyle() {
      let res = {}
      if (this.checked) {
        res = this._isDiablo ? { ...STYLE_MAP_DIABLO[this.type] } : { ...STYLE_MAP[this.type] } || {}
      } else {
        res = {
          'border-color': 'transparent',
          'background-color': this._isDiablo ? '#45494C' : '#d3d5d7'
        }
      }
      // colmo
      if ((this._isColmo && this.type === 'default') || this.type === 'colmo') {
        res.borderColor = this.checked ? '#B35336' : '#71717A'
        res.backgroundColor = 'transparent'
      }

      if (this.borderColor) res.borderColor = this.borderColor
      if (this.backgroundColor) res.backgroundColor = this.backgroundColor
      return res
    },
    _dotColor() {
      let dotColor = ''
      if (this.checked) {
        dotColor = this.type === 'white' ? '#1E2E37' : '#ffffff'
        // colmo
        if ((this._isColmo && this.type === 'default') || this.type === 'colmo') dotColor = '#B35336'
        if (this.dotColor) dotColor = this.dotColor
      } else {
        dotColor = this.type === 'white' ? '#ffffff' : this._isColmo ? '#8A8A8F' : this._isDiablo ? '#DCDDDD' : '#ffffff'
      }

      return dotColor
    },
    _isScale() {
      let isScale = true
      if ((this._isColmo && this.type === 'default') || this.type === 'colmo') isScale = false
      if (this.isScale !== undefined) isScale = this.isScale
      return isScale
    },
    leftDotStyle() {
      return {
        transform: !this._isScale
          ? `translateX(2px) scale(${this._isColmo || this.type === 'colmo' ? 2 : 2.25})`
          : 'translateX(2px) scale(2.25)',
        backgroundColor: this._dotColor
      }
    },
    rightDotStyle() {
      let offset = 46
      if ((this._isColmo && this.type === 'default') || this.type === 'colmo') offset = 50
      if (Utils.env.isWeb()) offset = 46
      return {
        backgroundColor: this._dotColor,
        transform: `translateX(${offset}px) scale(2.25)`
      }
    }
  },
  data: () => ({}),
  mounted() {
    this.handleInit()
  },
  methods: {
    handleInit() {
      if (this.checked) {
        animation &&
          animation.transition(this.$refs.switchDot, {
            styles: this.rightDotStyle,
            duration: 0
          })
      } else {
        animation &&
          animation.transition(this.$refs.switchDot, {
            styles: this.leftDotStyle,
            duration: 0
          })
      }
    },
    changeHandler: throttle(function() {
      const { disabled } = this
      if (!disabled) {
        this.$emit('dofChange')
      }
    }, 300)
  },
  watch: {
    _isColmo() {
      setTimeout(() => {
        this.handleInit()
      }, 0)
    },
    checked(newVal, oldVal) {
      if (newVal === true && oldVal === false) {
        animation &&
          animation.transition(this.$refs.switchDot, {
            styles: this.rightDotStyle,
            duration: 300,
            timingFunction: 'ease-out'
          })
      } else if (newVal === false && oldVal === true) {
        animation &&
          animation.transition(this.$refs.switchDot, {
            styles: this.leftDotStyle,
            duration: 300,
            timingFunction: 'ease-out'
          })
      }
    }
  }
}
</script>
