<template>
  <view class="uni-button">
    <button
      :class="analyseButtonClass"
      :type="type"
      :disabled="disabled"
      :loading="loading"
      :formType="formType"
      :openType="openType"
      :appParameter="appParameter"
      :hoverStopPropagation="hoverStopPropagation"
      :lang="lang"
      :sessionFrom="sessionFrom"
      :sendMessageTitle="sendMessageTitle"
      :sendMessagePath="sendMessagePath"
      :sendMessageImg="sendMessageImg"
      :showMessageCard="showMessageCard"
      @click="click"
      @getphonenumber="getphonenumber"
      @getuserinfo="getuserinfo"
      @error="error"
      @opensetting="opensetting"
      @launchapp="launchapp"
    >{{ text }}</button>
  </view>
</template>

<script>
/**
 * Button 按钮
 */
export default {
  name: 'asp-mp-button',
  emits: [],
  props: {
    text: {
      type: [String, Number],
      default: '按钮'
    },
    size: {
      type: String,
      default: 'huge'// 按钮五个尺寸-huge, large, middle, small, mini
    },
    type: {
      type: String,
      default: 'original'// 按钮类型-main, normal, original
    },
    shape: {
      type: String,
      default: 'square'// 按钮形状-square, circle
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    formType: {
      type: String,
      default: ''
    },
    openType: {
      type: String,
      default: ''
    },
    appParameter: {
      type: String,
      default: ''
    },
    hoverStopPropagation: {
      type: Boolean,
      default: true
    },
    lang: {
      type: String,
      default: 'en'
    },
    sessionFrom: {
      type: String,
      default: ''
    },
    sendMessageTitle: {
      type: String,
      default: '当前标题'
    },
    sendMessagePath: {
      type: String,
      default: '当前分享路径'
    },
    sendMessageImg: {
      type: String,
      default: '截图'
    },
    showMessageCard: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  computed: {
    // 分析出出按钮样式
    analyseButtonClass () {
      const returnClass = ['uni-button-common', `uni-button-size--${this.size}`, `uni-button-shape--${this.size}-${this.shape}`]
      // 根据是否禁用控制样式
      if (this.disabled) {
        returnClass.push(`uni-button-type--${this.type}-disable`)
      } else {
        returnClass.push(`uni-button-type--${this.type}`)
      }
      return returnClass
    }
  },
  watch: {},
  methods: {
    // 处理button上的事件回调
    click (e) {
      this.$emit('click', e)
    },
    getphonenumber (e) {
      this.$emit('getphonenumber', e)
    },
    getuserinfo (e) {
      this.$emit('getuserinfo', e)
    },
    error (e) {
      this.$emit('error', e)
    },
    opensetting (e) {
      this.$emit('opensetting', e)
    },
    launchapp (e) {
      this.$emit('launchapp', e)
    }
  }
}
</script>

<style lang="scss">
.uni-button {
  .uni-button-common {
    padding: 0px 2px;
    text-align: center;
    &::before {
      margin-right: 2px;
    }
    &::after {
      border: none;
    }
  }
  // 处理尺寸
  .uni-button-size--huge {
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 18px;
    &::before {
      position: relative;
      top: -2px;
      width: 18px;
      height: 18px;
    }
  }
  .uni-button-size--large {
    width: 164px;
    height: 48px;
    line-height: 48px;
    font-size: 18px;
    &::before {
      position: relative;
      top: -2px;
      width: 18px;
      height: 18px;
    }
  }
  .uni-button-size--middle {
    width: 120px;
    height: 36px;
    line-height: 38px;
    font-size: 14px;
    &::before {
      position: relative;
      top: -2px;
      width: 14px;
      height: 14px;
    }
  }
  .uni-button-size--small {
    width: 90px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    &::before {
      position: relative;
      top: -1px;
      width: 12px;
      height: 12px;
    }
  }
  .uni-button-size--mini {
    width: 44px;
    height: 16px;
    line-height: 16px;
    font-size: 8px;
    &::before {
      position: relative;
      top: -1px;
      width: 8px;
      height: 8px;
    }
  }
  // 处理按钮样式类型
  // 主按钮
  .uni-button-type--main {
    background-color: #1372F0;
    color: #FFFFFF;
  }
  .uni-button-type--main:hover {
    background-color: #0654C9;
  }
  .uni-button-type--main-disable {
    background-color: #1372F0;
    color: #FFFFFF;
    opacity: 0.35;
  }
  // 次要按钮
  .uni-button-type--normal {
    background-color: #FFFFFF;
    border: 1px solid #1372F0;
    color: #1372F0;
  }
  .uni-button-type--normal:hover {
    background-color: #E6F5FF;
  }
  .uni-button-type--normal-disable {
    border: 1px solid #8FCBFF ;
    color: #8FCBFF;
  }
  // 默认按钮
  .uni-button-type--original {
    background-color: #FFFFFF;
    color: rgba(0,0,0,0.65);
    border: 1px solid rgba(0,0,0,0.15);
  }
  .uni-button-type--original:hover {
    background-color: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.15);
  }
  .uni-button-type--original-disable {
    background-color: rgba(0,0,0,0.04);
    color: rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.06);
  }
  // 处理按钮形状
  .uni-button-shape--huge-square,
  .uni-button-shape--large-square,
  .uni-button-shape--middle-square,
  .uni-button-shape--small-square,
  .uni-button-shape--mini-square {
    border-radius: 4px;
  }
  // 需要根据不同尺寸控制圆弧的弧度值
  .uni-button-shape--huge-circle,.uni-button-shape--large-circle {
    border-radius: 24px;
  }
  .uni-button-shape--middle-circle {
    border-radius: 20px;
  }
  .uni-button-shape--small-circle,.uni-button-shape--mini-circle {
    border-radius: 14px;
  }
}
</style>