<template>
  <view class="btn-container"
        :style="{width, marginTop, marginBottom}"
        :hover-class="isActive ? 'fixed-mask-layer-radius8' : 'none'"
        hover-start-time="0"
        hover-stay-time="50"
        @click="submit()"
  >

    <!--线框按钮-->
    <view v-if="isBorderButton"
          class="wireframe-btn">
      <view class="btn flex-c" :style="{color: iconColor}">
        <view class="icon" v-if="iconType">
          <me-icon :color="iconColor" :type="iconType" size="44rpx"></me-icon>
        </view>
        <text class="text">{{ text }}</text>
      </view>
    </view>

    <!--纯色按钮-->
    <view v-else
          :class="['flex-c', 'btn', isActive ? '' : 'btn-default']"
          :style="{backgroundColor: btnBgColor, color: textColor}"
    >
      <view class="icon" v-if="iconType">
        <me-icon :color="iconColor" :type="iconType" size="44rpx"></me-icon>
      </view>
      <text class="text">{{ text }}</text>
    </view>
  </view>
</template>

<script setup>
import {computed} from 'vue';
import MeIcon from "../../components/me-icon/me-icon";

const emit = defineEmits(["click"]);
const props = defineProps({
  //按钮文本
  text: {
    type: String,
    required: false,
    default: '保 存',
  },
  //按钮 icon 样式
  iconType: {
    type: String,
    required: false,
    default: '',
  },
  //是否可点击
  isActive: {
    type: Boolean,
    required: false,
    default: true,
  },
  //是否为线框按钮
  isBorderButton: {
    type: Boolean,
    required: false,
    default: false,
  },
  //按钮宽度
  width: {
    type: String,
    required: true,
  },
  //距离顶部
  marginTop: {
    type: String,
    required: false,
    default: '0',
  },
  //距离底部
  marginBottom: {
    type: String,
    required: false,
    default: '0',
  },
  //按钮活动颜色
  activeColor: {
    type: String,
    required: false,
    default: 'var(--themeColor)',
  },
  //按钮文本颜色
  textColor: {
    type: String,
    required: false,
    default: '#FFFFFF',
  },
  //指定icon颜色
  customIconColor: {
    type: String,
    required: false,
    default: '',
  }
});

const btnBgColor = computed(() => {
  if (!props.isActive) {
    return 'var(--contentBgColor)'
  }

  return props.activeColor;
})

//计算 icon 颜色
const iconColor = computed(() => {
  if (props.customIconColor) {
    return props.customIconColor
  }

  if (!props.isActive) {
    return 'var(--descriptionColor)'
  }

  if (props.isBorderButton) {
    return 'var(--themeColor)'
  }

  return '#FFFFFF';
})

//提交
const submit = () => {
  emit("click");
};
</script>

<style lang="scss" scoped>
.btn-container {
  .icon {
    margin-right: 8rpx;
  }

  .btn {
    width: 100%;
    height: 96rpx;
    border-radius: 16rpx;
    font-size: 30rpx;
    line-height: 112rpx;
    text-align: center;
    .text {
      height: 96rpx;
      line-height: 96rpx;
    }
  }
  .btn-active {
    color: #FFFFFF;
  }
  .btn-default {
    color: var(--descriptionColor);
  }

  .wireframe-btn {
    .btn {
      border: 1px solid var(--contentBgColor);
      box-sizing: border-box;
    }
  }
}
</style>
