<script setup>
import {computed,defineProps} from "vue";

/**
 * 按钮
 * @description
 *
 * @property {String}			title       显示的文字
 */
const emit = defineEmits(['click']);
function clickHandle(event){
  emit('click',event);
}

const props = defineProps({
  containerPadding:{
    type:[String,Number],
    default:'10px'
  },
  buttonPadding:{
    type:[String,Number],
    default:'10px'
  },
  textStyle:{
    type:[Object],
    default:''
  },
  justifyAlign:{
    type:String,
    default:'center'
  },
  verticalAlign:{
    type:String,
    default:'center'
  },
  border:{
    type:String,
    default:'1px solid #999999;'
  },
  buttonColor:{
    type:String,
  },
  radius:{
    type:[String,Number],
    default:'10px'
  },
  text:{
    type:String,
    default:'确认'
  },
  customStyle:{
    type:[String,Object],
    default:{}
  }
});

const containerStyle = computed(() => {
  return {
    'padding':props.containerPadding,
    'justify-content':props.justifyAlign,
    'align-items':props.verticalAlign,
  }
});
const buttonStyle = computed(() => {
  return {
    ...uni.$m.addStyle(props.customStyle),
    'border':props.border,
    'border-radius':props.radius,
    'background-color':props.buttonColor,
    'padding':props.buttonPadding,
  }
});
</script>

<template>
  <view class="m-button-container" @click="clickHandle" style="display: flex;" :style="containerStyle">
    <view class="button" :style="buttonStyle">
      <view class="m-button-pre">
        <slot name="pre"></slot>
      </view>
      <view class="m-button-title" :style="textStyle">
        <m-text
            :text="text"
            :size="textStyle.size"
            :color="textStyle.color"
            :line-height="textStyle.lineHeight"
            :align="textStyle.align || 'center'"
            :display="textStyle.display"
        ></m-text>
      </view>
      <view class="m-button-pre">
        <slot name="after"></slot>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.button{
  flex:0 0 1;
  width:100%;

  text-align: center;
}
</style>
