<template>
  <div class="common-btn">
    <div v-if="type ==='btn'" class="btn">
      <van-button type="primary" :block="block" :round="round" :size="size" :color="vanBtnColor" :icon="icon">
        {{ btnText }}
      </van-button>
    </div>
    <div v-else class="f-btn">
      <div v-if="img" class="image-content">
        <img :src="img" alt="" :width="imgSize">
      </div>
      <div
        :style="textStyle"
        class="f-btn-content"
      >
        <van-icon :name="icon" :size="iconSize" />
        <span :style="{fontSize:fontSize+'px'}"> {{ fBtnText }}</span>
      </div>
    </div>

  </div>
</template>

<script>
// import { button as VanButton } from 'vant'

export default {
  name: 'DkCommonBtn',
  components: {
    // VanButton
  },
  props: {
    posterData: {
      default: () => {
        return {}
      },
      type: [Object]
    },
    type: { default: 'btn', type: [String] },
    icon: { default: '', type: String },
    // 图片配置
    imgSize: { default: 20, type: [String, Number] },
    img: { default: '', type: String },
    imgText: { default: '', type: String },
    // 悬浮配置
    fBtnText: { default: '自定义文本', type: String },
    fBgColor: { default: '#ff3d2c', type: String },
    isTextBlock: { default: true, type: Boolean },
    fColor: { default: '#fff', type: String },
    fWSize: { default: 20, type: [String, Number] },
    fHSize: { default: 20, type: [String, Number] },
    borderRadius: { default: 20, type: [String, Number] },
    fontSize: { default: 12, type: [String, Number] },
    fontTopSize: { default: 0, type: [String, Number] },
    iconSize: { default: 12, type: [String, Number] },
    // 按钮配置
    btnText: { default: '按钮文字', type: String },
    block: { default: true, type: Boolean },
    round: { default: true, type: Boolean },
    size: { default: 'normal', type: String },
    color: { default: '#ff3d2c', type: String },
    color2: { default: '', type: String }
  },
  data() {
    return {}
  },
  computed: {
    textStyle() {
      if (this.isTextBlock) {
        return {
          backgroundColor: this.fBgColor,
          width: this.fWSize + 'px',
          height: this.fHSize + 'px',
          color: this.fColor,
          borderRadius: this.borderRadius + 'px',
          marginTop: this.fontTopSize + 'px'
        }
      } else {
        return {
          marginTop: this.fontTopSize + 'px'
        }
      }
    },
    vanBtnColor() {
      if (this.color && this.color2) {
        return 'linear-gradient(to right, ' + this.color + ', ' + this.color2 + ')'
      } else if (this.color) {
        return this.color
      } else if (this.color2) {
        return this.color2
      } else {
        return ''
      }
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.common-btn {
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;

    &::v-deep {
      .van-icon {
        font-size: 1.2em;
      }
    }
  }

  .f-btn {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
  .image-content{
    display: inherit;
  }
    .f-btn-content {
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .f-img {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
  }
}
</style>
