<template>
  <div class="radio-wrap" @click.stop="onClick">
    <template v-if="isHookType">
      <i
        class="iconfont"
        :class="`${isChoosed ? 'icon-mobile-ui-xuanzhong' : 'icon-mobile-ui-weixuanzhong'}`"
        :style="iconSize"
      ></i>
    </template>
    <template v-else>
      <p :class="hookRadioClass" :style="hookRadioStyle">
        <span class="point" :style="hookRadioPointStyle"></span>
      </p>
    </template>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-06-08 19:56:59
 */
export default {
  name: "WlRadioIcon",
  props: {
    isChoosed: {
      type: Boolean,
      default: false,
    },
    size: {
      type: Number,
      default: 20,
    },
    chosedColor: {
      type: String,
      default: "#1C9FFF",
    },
    unChosedColor: {
      type: String,
      default: "rgba(0,0,0,.3)",
    },
    isHookType: {
      type: Boolean,
      default: true,
    },
    hookSelectPointSize: {
      type: Number,
      default: 7,
    },
  },
  computed: {
    iconSize() {
      return {
        fontSize: `${this.size}px`,
        color: this.isChoosed ? this.chosedColor : this.unChosedColor,
      };
    },
    hookRadioClass() {
      return {
        "hook-radio-unselect": !this.isChoosed,
        "hook-radio-selected": this.isChoosed,
      };
    },
    hookRadioStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        "--unSelectColor": this.unChosedColor,
        "--selectedColor": this.chosedColor,
      };
    },
    hookRadioPointStyle() {
      return {
        width: `${this.hookSelectPointSize}px`,
        height: `${this.hookSelectPointSize}px`,
      };
    },
  },
  methods: {
    onClick() {
      this.$emit("onClick");
    },
  },
};
</script>

<style lang="scss" scoped>
.hook-radio-unselect,
.hook-radio-selected {
  border-radius: 50%;
}
.hook-radio-unselect {
  border: 1px solid var(--unSelectColor);
  .point {
    display: none;
  }
}
.hook-radio-selected {
  background-color: var(--selectedColor);
  @extend %flex-middle-center;
  .point {
    display: inline-block;
    border-radius: 50%;
    background-color: white;
  }
}
</style>
