<template>
  <div class="svg-choice" v-if="radio">
    <div v-if="state === 'default'">
      <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="14"
           height="14">
        <path :fill="disabled? 'rgba(0, 0, 0, .2)': 'rgba(24, 144, 255, 1)'"
              d="M100,200A100,100,0,1,1,200,100,100,100,0,0,1,100,200Zm0-12.5A87.5,87.5,0,1,0,12.5,100,87.51,87.51,0,0,0,100,187.5Z"/>
        <circle v-if="select" fill="rgba(24, 144, 255, 1)" cx="98.5" cy="98.5" r="62.5"/>
      </svg>
    </div>
    <div v-else>
      <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.95 174.95" width="14"
           height="14">
        <path :fill="state === 'correct'?'rgba(67, 207, 124, 1)': 'rgba(255, 0, 0, 1)'"
              d="M100.91,12.49A87.48,87.48,0,1,0,188.39,100,87.48,87.48,0,0,0,100.91,12.49Z"
              transform="translate(-13.44 -12.49)"/>
        <path v-if="state === 'correct'" fill="rgba(255, 255, 255, 1)"
              d="M160.36,76.87,97.93,139.3l-.07.08a12.51,12.51,0,0,1-17.68,0l-.08-.08L42.68,101.87A12.49,12.49,0,1,1,60.35,84.2L89,112.86,142.68,59.2a12.5,12.5,0,1,1,17.68,17.67Z"
              transform="translate(-15.01 -10.54)"/>
        <path v-else fill="rgba(255, 255, 255, 1)" d="M151.43,134.15a35.64,35.64,0,0,1,5.81,7.52q1.84,3.41-.61,7.79c-.37.55-.87,1.21-1.51,2s-1.3,1.53-2,2.26a26.89,26.89,0,0,1-2,2,13.1,13.1,0,0,1-1.71,1.3,10.89,10.89,0,0,1-8.07,1.09,16.26,16.26,0,0,1-8.34-4.65l-5.74-5.74L119.57,140l-9-9-9.85-9.84-17.5,17.5q-8.07,8.07-13.12,13.26-5.2,5.19-10.33,6.43A9.56,9.56,0,0,1,50.66,156l-1-1-1.5-1.5-1.5-1.5a5.93,5.93,0,0,1-1-1.1A8.08,8.08,0,0,1,44,147.07a8.74,8.74,0,0,1,.34-3.9,13.88,13.88,0,0,1,1.85-3.69,23.41,23.41,0,0,1,2.73-3.28q1.23-1.09,4.38-4.11l7.38-7.65q4.52-4.38,10-9.85t11.56-11.48q-6.57-6.57-12.52-12.44L59.07,80.14q-4.73-4.65-7.73-7.59l-3.69-3.62c-2.37-2.37-3.57-4.72-3.62-7.05a11.89,11.89,0,0,1,2.39-7,28.65,28.65,0,0,1,3.15-3.21,29.25,29.25,0,0,1,2.87-2.39c2.73-1.83,5.19-2.62,7.38-2.4s4.38,1.49,6.56,3.76l4.24,4.24q3.15,3.15,7.8,7.66T88.88,72.69L101,84.51q5.19-5.19,10.18-10.12t9.3-9.22q4.31-4.32,7.79-7.73t5.82-5.74a16.23,16.23,0,0,1,7.11-4.17,8.12,8.12,0,0,1,7.38,1.71,10.87,10.87,0,0,0,.89.68,18,18,0,0,1,1.5,1.23l1.44,1.3a5.46,5.46,0,0,0,1,.75c2.47,2.37,3.67,4.95,3.63,7.73a11.07,11.07,0,0,1-3.63,7.72q-2.46,2.46-6.08,6.15c-2.42,2.47-5.1,5.16-8.07,8.07s-6.08,6-9.36,9.3l-10.39,10.39q5.06,4.92,9.91,9.64c3.23,3.15,6.24,6.08,9,8.82s5.29,5.24,7.52,7.52,4.08,4.15,5.54,5.61Z"
              transform="translate(14.88 14.81) scale(0.7)"/>
      </svg>
    </div>
  </div>
  <div v-else class="svg-choice">
    <div v-if="state === 'default'">
      <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 175" width="14" height="14">
        <path :fill="disabled? 'rgba(0, 0, 0, .2)': 'rgba(24, 144, 255, 1)'"
              d="M172.92,12.5H27.08A14.58,14.58,0,0,0,12.5,27.08V172.92A14.58,14.58,0,0,0,27.08,187.5H172.92a14.58,14.58,0,0,0,14.58-14.58V27.08A14.58,14.58,0,0,0,172.92,12.5Zm0,160.42H27.08V27.08H172.92V172.92Z"
              transform="translate(-12.5 -12.5)"/>
        <path v-if="select" fill="rgba(24, 144, 255, 1)"
              d="M45.56,38.76H154.44a6.79,6.79,0,0,1,6.8,6.8h0V154.44a6.79,6.79,0,0,1-6.8,6.8H45.56a6.8,6.8,0,0,1-6.8-6.8h0V45.56a6.8,6.8,0,0,1,6.8-6.8Z"
              transform="translate(-12.5 -12.5)"/>
      </svg>
    </div>
    <div v-else>
      <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 175" width="19" height="19">
        <path :fill="state === 'correct'?'rgba(67, 207, 124, 1)': 'rgba(255, 0, 0, 1)'"
              d="M45.56,38.76H154.44a6.79,6.79,0,0,1,6.8,6.8h0V154.44a6.79,6.79,0,0,1-6.8,6.8H45.56a6.8,6.8,0,0,1-6.8-6.8h0V45.56a6.8,6.8,0,0,1,6.8-6.8Z"
              transform="translate(-32.5 -12.5)"/>
        <path v-if="state === 'correct'" fill="rgba(255, 255, 255, 1)"
              d="M160.36,76.87,97.93,139.3l-.07.08a12.51,12.51,0,0,1-17.68,0l-.08-.08L42.68,101.87A12.49,12.49,0,1,1,60.35,84.2L89,112.86,142.68,59.2a12.5,12.5,0,1,1,17.68,17.67Z"
              transform="translate(1.01 16.54) scale(0.7)"/>
        <path v-else fill="rgba(255, 255, 255, 1)" d="M151.43,134.15a35.64,35.64,0,0,1,5.81,7.52q1.84,3.41-.61,7.79c-.37.55-.87,1.21-1.51,2s-1.3,1.53-2,2.26a26.89,26.89,0,0,1-2,2,13.1,13.1,0,0,1-1.71,1.3,10.89,10.89,0,0,1-8.07,1.09,16.26,16.26,0,0,1-8.34-4.65l-5.74-5.74L119.57,140l-9-9-9.85-9.84-17.5,17.5q-8.07,8.07-13.12,13.26-5.2,5.19-10.33,6.43A9.56,9.56,0,0,1,50.66,156l-1-1-1.5-1.5-1.5-1.5a5.93,5.93,0,0,1-1-1.1A8.08,8.08,0,0,1,44,147.07a8.74,8.74,0,0,1,.34-3.9,13.88,13.88,0,0,1,1.85-3.69,23.41,23.41,0,0,1,2.73-3.28q1.23-1.09,4.38-4.11l7.38-7.65q4.52-4.38,10-9.85t11.56-11.48q-6.57-6.57-12.52-12.44L59.07,80.14q-4.73-4.65-7.73-7.59l-3.69-3.62c-2.37-2.37-3.57-4.72-3.62-7.05a11.89,11.89,0,0,1,2.39-7,28.65,28.65,0,0,1,3.15-3.21,29.25,29.25,0,0,1,2.87-2.39c2.73-1.83,5.19-2.62,7.38-2.4s4.38,1.49,6.56,3.76l4.24,4.24q3.15,3.15,7.8,7.66T88.88,72.69L101,84.51q5.19-5.19,10.18-10.12t9.3-9.22q4.31-4.32,7.79-7.73t5.82-5.74a16.23,16.23,0,0,1,7.11-4.17,8.12,8.12,0,0,1,7.38,1.71,10.87,10.87,0,0,0,.89.68,18,18,0,0,1,1.5,1.23l1.44,1.3a5.46,5.46,0,0,0,1,.75c2.47,2.37,3.67,4.95,3.63,7.73a11.07,11.07,0,0,1-3.63,7.72q-2.46,2.46-6.08,6.15c-2.42,2.47-5.1,5.16-8.07,8.07s-6.08,6-9.36,9.3l-10.39,10.39q5.06,4.92,9.91,9.64c3.23,3.15,6.24,6.08,9,8.82s5.29,5.24,7.52,7.52,4.08,4.15,5.54,5.61Z"
              transform="translate(6.88 24.81) scale(0.6)"/>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    radio: { // 单选
      type: Boolean,
      default: false
    },
    select: { // 选中
      type: Boolean,
      default: false
    },
    state: { // 状态
      type: String,
      default: 'default'
    },
    disabled: { // 禁用
      type: Boolean,
      default: false
    }
  },
  watch: {
    select: {
      handler(val) {
        console.log(val)
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.svg-choice {
  position: absolute;
  top: 2px;
  left: 0;
  z-index: 1;
}
</style>
