<script setup>
import { computed } from 'vue'
const props = defineProps({
  /**
   * @example modelValue: ''
   */
  modelValue: { type: String, default: '' },
  /**
   *radioの項目に表示するテキスト
   * @example p_Label: 'text'
   */
  p_Label: { type: String, default: '' },
  /**
   * @example p_Label: 'testRadio'
   * !必須 required
   */
  p_Name: { type: String, default: '' },
  /**
   *radioの項目に表示するテキスト
   * @example p_Label: 'text'
   */
  value: { type: String, default: '' },
  /**
   * クリックの有効無効
   * @example disabled: false
   */
  disabled: { type: Boolean, default: false },
  /**
   * クリックの有効無効
   * @example checked: false
   */
  checked: { type: Boolean, default: undefined },
})

const emit = defineEmits({
  'update:modelValue': (value) => value,
})

const radioValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})
</script>

<template>
  <div class="_radio_area">
    <div :class="`_radio_contents ${disabled ? '_disabled' : '_not-disabled'}`">
      <label>
        <input
          v-model="radioValue"
          type="radio"
          :name="p_Name"
          :disabled="disabled"
          :checked="checked"
          :value="value"
          class="_input_radio"
        />
        <div class="_radio_motion">
          <div class="_auto_cercle">
            <div class="_inner_cercle"></div>
          </div>
        </div>
        <div class="_radio_text">{{ p_Label }}</div>
      </label>
    </div>
  </div>
</template>
<style lang="sass">
._radio_area
  padding: 10px
  font-size: 12px

._radio_contents
  width: fit-content

._radio_area label
  display: flex
  width: 100%

//--------------------------------------------------------------------------
// radioボタンの表示off
//--------------------------------------------------------------------------
._input_radio
  display: none

._radio_motion
  position: relative
  width: 20px
  height: 20px

._auto_cercle
  display: flex
  justify-content: center
  align-items: center
  border-radius: 50%
  border: solid 2px var(--q-primary, #0000a0)
  box-sizing: border-box
  width: 100%
  height: 100%
  padding: 0
  margin: 0

._inner_cercle
  border-radius: 50%
  background: var(--q-primary, #0000a0)
  width: 12px
  height: 12px
  transform: scale3d(0, 0, 1)
  transition: transform 0.22s cubic-bezier(0, 0, 0.2, 1) 0ms

._radio_area label:hover ~ ._radio_motion ._inner_cercle
  transform: scale3d(1, 1, 1)

//--------------------------------------------------------------------------
// radioボタンの表示アニメーションon
//--------------------------------------------------------------------------
._input_radio:checked ~  ._radio_motion ._inner_cercle
  transform: scale3d(1, 1, 1)

._radio_text
  display: inline-block
  padding-left: 6px
  height: 18px
  line-height: 1.8
  color: #707070
  user-select: none

._radio_contents._not-disabled label:hover
  cursor: pointer

._auto_cercle::before
  content: ""
  width: 20px
  height: 20px
  position: absolute
  border-radius: 50%
  background: #000
  opacity: 0.12
  transform: scale3d(0, 0, 1)
  transition: transform 0.22s cubic-bezier(0, 0, 0.2, 1)
  box-sizing: border-box

  //hover時の表示
._radio_area ._not-disabled:hover ._auto_cercle::before
  transform: scale3d(1.5, 1.5, 1)

//--------------------------------------------------------------------------
// radioボタンのdisabled有効時
//--------------------------------------------------------------------------

._radio_contents._disabled label:hover
  cursor: not-allowed

._input_radio:disabled ~ ._radio_motion,
._input_radio:disabled ~ ._radio_text
  opacity: 0.7
</style>
