<template>
  <view
    :style="buttonStyle"
    class="flex-row justify-center items-center new-update"
  >
    <text>{{ text }}</text>
  </view>
</template>

<script lang="ts" setup >
import { computed, ref } from 'vue'
import { styleInto } from '../../js/api'

interface propsType {
  text?: string
  size?: string | number
  color?: string
  width?: number
  height?: number
  background?: string
  disabledBackground?: string
  radius?: number
  disabled?: boolean
  isIcon?: boolean
}
const props = withDefaults(defineProps<propsType>(), {
  text: 'DNVUE',
  size: 30,
  color: 'white',
  width: 520,
  height: 80,
  background: '#04c260',
  disabledBackground: '#d9d9d9',
  radius: 8,
  disabled: false,
  isIcon: false,
})

const status = ref<boolean>(false)
const buttonStyle = computed(() => {
  let style: any = {
    width: `${props.width}rpx`,
    height: `${props.height}rpx`,
    borderRadius: `${props.radius}rpx`,
    opacity: status.value ? 0.8 : 1,
    color: props.color,
  }
  return style
})
</script>

<style lang="scss" scoped>
@import '../../css/index.scss';
.new-update {
  background-image: linear-gradient(125deg, #84e366, #04c260);
}
</style>