<!--
* @description
* @fileName index.vue
* @author zoiew[liangzw]
* @date 2021/01/22 10:54:32
!-->
<template>
  <div class="wrapper" :style="wrapperStyleComp">
    <div v-if="hasDot === true && size !== 'min'" class="dot-triangle" :style="{ backgroundColor: iconColor }"></div>
    <div class="btn-wrapper" :style="btnWrapperStyle">
      <div class="btn" :style="btnSizeComp" @click="btnClickedHandler">
        <div class="btn-img-container" v-if="imgUrl">
          <image class="btn-img" :style="btnImgSizeComp" :src="imgUrl"></image>
        </div>
        <text class="btn-text" :style="textColorComp" v-else>{{ text }}</text>
      </div>
    </div>
  </div>
</template>

<script>
import { themeColors } from '../../constant/theme'
export default {
  props: {
    mode: {
      type: String,
      default: 'common'
    },
    type: {
      type: String,
      default: 'text'
    },
    size: {
      type: String,
      default: 'middle'
    },
    theme: {
      type: String,
      default: 'primary'
    },
    themeColor: {
      type: String,
      default: null
    },
    circleBlankColor: {
      type: String,
      default: '#f9f9f9'
    },
    text: {
      type: String,
      default: 'text'
    },
    textColor: {
      type: String,
      default: null
    },
    imgUrl: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    hasDot: {
      type: Boolean,
      default: false
    },
    hasAnimation: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({}),
  computed: {
    wrapperStyleComp() {
      let { disabled } = this
      if (disabled) {
        return {
          opacity: 0.3
        }
      } else {
        return {
          opacity: 1
        }
      }
    },
    btnWrapperStyle() {
      let { circleBlankColor, size } = this
      if (size === 'min') {
        return {
          padding: '4px'
        }
      } else {
        return {
          backgroundColor: circleBlankColor,
          padding: '10px',
          borderRadius: '70px'
        }
      }
    },
    btnSizeComp() {
      let { size, themeColor, theme } = this
      let colorSetArr = Object.keys(themeColors)
      let curColor = colorSetArr.includes(theme) ? themeColors[theme] : '#ffffff'
      if (size === 'min') {
        return {
          width: '88px',
          height: '88px',
          borderRadius: '44px',
          backgroundColor: themeColor ? themeColor : curColor
        }
      } else {
        return {
          width: '128px',
          height: '128px',
          borderRadius: '64px',
          backgroundColor: themeColor ? themeColor : curColor
        }
      }
    },
    btnImgSizeComp() {
      let { size } = this
      if (size === 'min') {
        return {
          width: '48px',
          height: '48px',
          borderRadius: '24px'
        }
      } else {
        return {
          width: '72px',
          height: '72px',
          borderRadius: '36px'
        }
      }
    },
    iconColor() {
      let { themeColor, theme } = this
      let colorSetArr = Object.keys(themeColors)
      let curColor = colorSetArr.includes(theme) ? themeColors[theme] : '#ffffff'
      return themeColor ? themeColor : curColor
    },
    textColorComp() {
      let { textColor, theme } = this
      const defaultColor = '#232323',
        whiteText = '#ffffff'
      let curTextColor = textColor ? textColor : theme === 'white' ? defaultColor : whiteText
      return {
        color: curTextColor
      }
    }
  },
  methods: {
    btnClickedHandler() {
      let { disabled } = this
      !disabled && this.$emit('dofButtonClicked')
    }
  }
}
</script>

<style scoped>
/* .wrapper {
} */
.btn {
  /* padding: 4px; */
}
.btn {
  position: relative;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
.btn-img-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  justify-content: center;
  align-items: center;
}
.btn-img {
  /* width: 44px;
  height: 44px;
  border-radius: 22px; */
}
.btn-text {
  font-family: PingFangSC-Medium;
  font-size: 32px;
  color: #232323;
}
.dot-triangle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 24px;
  height: 24px;
  opacity: 0.5;
}
</style>
