<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <div v-for="(ele, idx) in 2" :key="idx" @click="getBtn">
        <div class="radioBox" v-if="idx === 0">
          <input
            v-if="idx === 0"
            type="radio"
            class="colors"
            :name="item.id"
            :id="item.id"
            :value="item.id"
          />
          <label :for="item.id"></label>
          <!-- label必须放到input[type="radio"]的后面 -->
          红色{{ item.id }}
          <input type="text" v-show="checked.includes(item.id + '')" />
        </div>

        <div class="radioBox" v-if="idx === 1">
          <input
            type="radio"
            class="colors"
            :name="item.id"
            :id="item.pin"
            :value="item.pin"
          />
          <label :for="item.pin"></label>
          蓝色{{ item.pin }}
        </div>
        <p v-if="idx !== 0 && item.isImg && checked.includes(item.id + '')">
          这是一个图片
        </p>
      </div>
    </li>
  </ul>
</template>

<script>
  import { ref, reactive, toRefs, onMounted, toRaw } from 'vue'
  export default {
    setup() {
      let state = reactive({
        checked: [],
        getBtn: () => {
          let radios = document.getElementsByClassName('colors')
          console.log(radios, 'radios')
          let arr = []
          for (let i = 0, length = radios.length; i < length; i++) {
            if (radios[i].checked) {
              // 弹出选中值
              arr.push(radios[i].value)
            }
          }
          state.checked = arr
        },
        list: [
          { title: '标题1', id: 1, pin: 'p', isImg: 1 },
          { title: '标题2', id: 4, pin: 'a', isImg: 0 },
          { title: '标题3', id: 6, pin: 'z', isImg: 1 }
        ]
      })

      return {
        ...toRefs(state)
      }
    }
  }
</script>

<style lang="scss" scoped>
  ul {
    margin: 20px;
    li {
      margin-bottom: 10px;
    }
  }

  .radioBox {
    position: relative;
    line-height: 30px;
  }

  input[type='radio'] {
    width: 20px;
    height: 20px;
    opacity: 0;
  }

  label {
    position: absolute;
    left: 5px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #999;
    cursor: pointer;
  }

  /*设置选中的input的样式*/
  /* + 是兄弟选择器,获取选中后的label元素*/
  input:checked + label {
    background-color: #2e56d8;
    border: 1px solid #2e56d8;
  }

  /*添加的加号与label进行拼接(一个矩形边框去掉上和左的边框),再旋转45度*/
  input:checked + label::after {
    position: absolute;
    content: '';
    width: 5px;
    height: 10px;
    top: 3px;
    left: 6px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
  }
</style>