<template>
  <view
    class="car-radio-button"
    @click="click"
    :style="{ background: bgColor }"
  >
    <k-typography
      class="car-radio-button--title"
      :color="titleColor"
      typographyIndex="Heading03"
    >
      {{ title }}
    </k-typography>
    <view
      class="car-radio-button--radio"
      :style="{
        border: color
          ? '1px solid ' + color
          : '1px solid var(--k-color-primary-01, #000)',
      }"
    >
      <view
        v-if="radioStatusShow"
        class="car-radio-button--radio--point"
        :style="{
          background: color ? color : 'var(--k-color-primary-01, #000)',
        }"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'k-radio-button',
  components: {},
  props: {
    title: {
      type: String,
      default: '标题',
    },
    radioStatus: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: '',
    },
    titleColor: {
      type: String,
      default: '#000',
    },
    bgColor: {
      type: String,
      default: '#fbfcff',
    },
  },
  data() {
    return {
      radioStatusShow: false,
    };
  },
  watch: {},
  computed: {},
  created() {
    // this.disorderNumber();
    if (this.radioStatus) {
      this.radioStatusShow = true;
    }
  },
  methods: {
    click() {
      if (this.radioStatusShow) {
        this.radioStatusShow = false;
      } else {
        this.radioStatusShow = true;
      }
      this.$emit('click', this.radioStatusShow);
    },
  },
};
</script>

<style scoped lang="scss">
/* stylelint-disable selector-class-pattern */
/* stylelint-disable declaration-no-important */
/* stylelint-disable comment-empty-line-before */
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
.car-radio-button {
  width: calc(100% - 43px);
  padding-left: 20px;
  padding-right: 23px;
  height: 48px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: #fbfcff;
  align-items: center;

  &--title {
    display: flex;
  }

  &--radio {
    display: flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: 20px;
    justify-content: space-between;
    align-items: center;

    &--point {
      display: flex;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 0 auto;
      position: relative;
    }
  }
}
</style>
