<!-- modified by liuhr7 on 19/12/28. -->

<template>
  <WeexThemeView :key="disabled + _theme + ''">
    <text
      v-if="pattern === 'plain_text'"
      :class="['btn-text', isHighlight && !disabled && pattern === 'text' && !_isColmo && `dof-text-highlight-${type}`]"
      :style="mrTextStyle"
      @click="onTextClicked"
      :aria-label="text ? text + '。按钮。' : ''"
      >{{ loading && size == 'small' ? '' : text }}</text
    >
    <div
      v-else
      :class="['dof-btn', isHighlight && !disabled && !_isColmo && `dof-btn-highlight-${type}-${pattern}`]"
      :style="mrBtnStyle"
      @click="onClicked"
      :accessible="true"
      :aria-label="text ? text + '。按钮。' : ''"
    >
      <dof-spinner :type="loadingGif" class="loading-image" v-if="loading" />
      <slot>
        <text
          :class="['btn-text', isHighlight && !disabled && pattern === 'text' && `dof-text-highlight-${type}`]"
          :style="mrTextStyle"
          @click="onTextClicked"
          :aria-label="text ? text + '。按钮。' : ''"
          >{{ loading && size == 'small' ? '' : text }}</text
        >
      </slot>
      <div v-if="_isColmo && !disabled && !loading" class="mask" @click="onClicked"></div>
    </div>
  </WeexThemeView>
</template>

<script>
import {
  STYLE_MAP,
  STYLE_MAP_DIABLO,
  TEXT_STYLE_MAP,
  TEXT_STYLE_MAP_DIABLO,
  BUTTON_STYLE_MAP,
  COLMO_BUTTON_STYLE_MAP,
  TEXT_FONTSIZE_STYLE_MAP,
  COLMO_TEXT_FONTSIZE_STYLE_MAP
} from './type'
import Utils from '../utils'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
import { WeexThemeView } from '@dolphinweex/weex-theme'
import DofSpinner from '../dof-spinner'

export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { WeexThemeView, DofSpinner },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: '确认'
    },
    size: {
      type: String,
      default: 'full'
    },
    type: {
      type: String,
      default: 'primary'
    },
    pattern: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isHighlight: {
      type: Boolean,
      default: true
    },
    btnStyle: Object,
    textStyle: Object,
    disabledStyle: Object
  },
  computed: {
    mrBtnStyle() {
      let { type, pattern, disabled, btnStyle, size, disabledStyle } = this
      let buttonStyle = BUTTON_STYLE_MAP
      if (this._isColmo && this.type === 'primary') {
        type = 'colmo'
        buttonStyle = COLMO_BUTTON_STYLE_MAP
      }

      let styleMap = this._isDiablo ? { ...STYLE_MAP_DIABLO[type][pattern] } : { ...STYLE_MAP[type][pattern] }
      if (!this._isColmo && pattern !== 'text' && !disabled) delete styleMap.backgroundColor
      const mrBtnStyle = {
        ...styleMap,
        ...buttonStyle[size],
        ...btnStyle
      }

      let disabledInStyle = { opacity: 0.3 }
      if (type === 'white') {
        disabledInStyle = { backgroundColor: 'rgba(0, 0, 0, 0.1)' }
      }

      return disabled
        ? {
            ...mrBtnStyle,
            ...disabledInStyle,
            ...disabledStyle
          }
        : mrBtnStyle
    },
    mrTextStyle() {
      let { type, pattern, disabled, textStyle, size } = this
      if (pattern === 'plain_text') pattern = 'text'
      let buttonTextStyle = TEXT_FONTSIZE_STYLE_MAP
      if (this._isColmo && this.type === 'primary') {
        type = 'colmo'
        buttonTextStyle = COLMO_TEXT_FONTSIZE_STYLE_MAP
      }
      let textStyleMap = this._isDiablo ? TEXT_STYLE_MAP_DIABLO : TEXT_STYLE_MAP
       
      const mrTextStyle = {
        ...textStyleMap[type][pattern],
        ...buttonTextStyle[size],
        ...textStyle
      }
      return disabled ? { ...mrTextStyle } : mrTextStyle
    },
    loadingGif() {
      if (this._isColmo) return 'colmo'
      const { pattern } = this
      if (pattern === 'default') {
        return 'white'
      } else {
        return 'black'
      }
    }
  },
  methods: {
    onClicked(e) {
      const { type, pattern, disabled } = this
      disabled ? null : this.$emit('dofButtonClicked', { e, type, pattern, disabled })
    },
    onTextClicked(e) {
      const { type, pattern, disabled } = this
      disabled ? null : this.$emit('dofButtonClicked', { e, type, pattern, disabled })
    }
  }
}
</script>

<style src="./colmo.css"></style>
<style scoped>
.loading-image {
  height: 32px;
  width: 32px;
  margin-right: 10px;
}
.dof-btn {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* border-radius: 12px; */
  opacity: 1;
  position: relative;
  overflow: hidden;
}
.mask {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.mask:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.dof-btn-highlight-primary-default {
  background-color: #00a4f2;
}
.dof-btn-highlight-primary-default:active {
  background-color: #0093d9;
}
.dof-btn-highlight-primary-base {
  background-color: #e5f5fd;
}
.dof-btn-highlight-primary-base:active {
  background-color: #cddce3;
}
.dof-btn-highlight-primary-plain {
  background-color: #ffffff;
}
.dof-btn-highlight-primary-plain:active {
  background-color: rgba(38, 122, 255, 0.1);
}
.dof-btn-highlight-purple-default {
  background-color: #995efc;
}
.dof-btn-highlight-purple-default:active {
  background-color: #8a54e3;
}
.dof-btn-highlight-purple-base {
  background-color: #eee6ff;
}
.dof-btn-highlight-purple-base:active {
  background-color: #d5cee5;
}
.dof-btn-highlight-purple-plain {
  background-color: #ffffff;
}
.dof-btn-highlight-purple-plain:active {
  background-color: rgba(153, 94, 252, 0.1);
}

.dof-btn-highlight-slate-default {
  background-color: #6575ff;
}
.dof-btn-highlight-slate-default:active {
  background-color: #5b69e6;
}
.dof-btn-highlight-slate-base {
  background-color: #e6e8ff;
}
.dof-btn-highlight-slate-base:active {
  background-color: #ced0e5;
}
.dof-btn-highlight-slate-plain {
  background-color: #ffffff;
}
.dof-btn-highlight-slate-plain:active {
  background-color: rgba(101, 117, 255, 0.1);
}
.dof-btn-highlight-aqua-default {
  background-color: #29c3ff;
}
.dof-btn-highlight-aqua-default:active {
  background-color: #24afe6;
}
.dof-btn-highlight-aqua-base {
  background-color: #e6f8ff;
}
.dof-btn-highlight-aqua-base:active {
  background-color: #cedee5;
}
.dof-btn-highlight-aqua-plain {
  background-color: #ffffff;
}
.dof-btn-highlight-aqua-plain:active {
  background-color: rgba(41, 195, 255, 0.1);
}
.dof-btn-highlight-turquoise-default {
  background-color: #00bdb2;
}
.dof-btn-highlight-turquoise-default:active {
  background-color: #00b7a5;
}
.dof-btn-highlight-turquoise-base {
  background-color: #e6fffd;
}
.dof-btn-highlight-turquoise-base:active {
  background-color: #cee5e3;
}
.dof-btn-highlight-turquoise-plain {
  background-color: #ffffff;
}
.dof-btn-highlight-turquoise-plain:active {
  background-color: rgba(0, 203, 184, 0.1);
}
.dof-btn-highlight-yellow-default {
  background-color: #ffaa10;
}
.dof-btn-highlight-yellow-default:active {
  background-color: #e5980e;
}
.dof-btn-highlight-yellow-base {
  background-color: #fff4e0;
}
.dof-btn-highlight-yellow-base:active {
  background-color: #e5dbc9;
}
.dof-btn-highlight-yellow-plain {
  background-color: #ffffff;
}
.dof-btn-highlight-yellow-plain:active {
  background-color: rgba(255, 170, 16, 0.1);
}
.dof-btn-highlight-orange-default {
  background-color: #ffaa10;
}
.dof-btn-highlight-orange-default:active {
  background-color: #e67521;
}
.dof-btn-highlight-orange-base {
  background-color: #fff0e6;
}
.dof-btn-highlight-orange-base:active {
  background-color: #e5d7ce;
}
.dof-btn-highlight-orange-plain {
  background-color: #ffffff;
}
.dof-btn-highlight-orange-plain:active {
  background-color: rgba(255, 130, 37, 0.1);
}
.dof-btn-highlight-tomato-default {
  background-color: #f56428;
}
.dof-btn-highlight-tomato-default:active {
  background-color: #e65f44;
}
.dof-btn-highlight-tomato-base {
  background-color: #ffeae6;
}
.dof-btn-highlight-tomato-base:active {
  background-color: #e6d3cf;
}
.dof-btn-highlight-tomato-plain {
  background-color: #ffffff;
}
.dof-btn-highlight-tomato-plain:active {
  background-color: rgba(255, 106, 76, 0.1);
}
.dof-btn-highlight-gray-default {
  background-color: #7c879b;
}
.dof-btn-highlight-gray-default:active {
  background-color: #6f798b;
}
.dof-btn-highlight-gray-base {
  background-color: #cfd7e6;
}
.dof-btn-highlight-gray-base:active {
  background-color: #b9c1ce;
}
.dof-btn-highlight-gray-plain {
  background-color: #ffffff;
}
.dof-btn-highlight-gray-plain:active {
  background-color: rgba(124, 135, 155, 0.1);
}
.dof-btn-highlight-red-default {
  background-color: #e61e1e;
}
.dof-btn-highlight-red-default:active {
  background-color: #ce1a1a;
}
.dof-btn-highlight-red-base {
  background-color: #fffeb7;
}
.dof-btn-highlight-red-plain {
  background-color: #fff;
}

.dof-btn-highlight-brown-default {
  background-color: #86696b;
}
.dof-btn-highlight-brown-default:active {
  background-color: #785e60;
}
.dof-btn-highlight-red-base {
  background-color: #ffd9cf;
}
.dof-btn-highlight-red-plain {
  background-color: #fff;
}

.dof-btn-highlight-colmo-default {
  background-color: #b35336;
}
.dof-btn-highlight-colmo-default:active {
  background-color: #743d2a;
}
.dof-btn-highlight-colmo-base {
  background-color: #313237;
}
.dof-btn-highlight-colmo-base:active {
  background-color: rgba(0, 0, 0, 0.3);
}
.dof-btn-highlight-colmo-plain {
  background-color: transparent;
}
.dof-btn-highlight-colmo-plain:active {
  background-color: #636569;
}

.btn-text {
  font-family: PingFangSC-Medium;
  text-overflow: ellipsis;
  lines: 1;
  /* color: #ffffff; */
  /* margin-left: 10px; */
}
/* .dof-text-highlight-primary:active {
  color: #0093d9;
}
.dof-text-highlight-purple:active {
  color: #8a54e3;
}
.dof-text-highlight-slate:active {
  color: #5b69e6;
}
.dof-text-highlight-aqua:active {
  color: #24afe6;
}
.dof-text-highlight-turquoise:active {
  color: #00b7a5;
}
.dof-text-highlight-yellow:active {
  color: #e5980e;
}
.dof-text-highlight-orange:active {
  color: #e67521;
}
.dof-text-highlight-tomatot:active {
  color: #e65f44;
}
.dof-text-highlight-gray:active {
  color: #6f798b;
} */
</style>
<style scoped src="./diablo.css"></style>