<template>
  <el-radio-group v-model="radioValue" class="compliance">
    <div class="compliance-radio-container">
      <el-radio
        v-bind="$attrs"
        v-for="item in radioOptions"
        :key="item.value"
        :value="item.value"
        class="compliance-radio"
      >
        {{ item.label }}
      </el-radio>
    </div>
  </el-radio-group>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  const radioOptions = [
    { label: '符合', value: 1 },
    { label: '不符合', value: 0 },
  ];
  const props = defineProps<{
    radioValue: number;
  }>();
  const radioValue = ref(props.radioValue);
</script>

<style lang="scss" scoped>
  .compliance {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .compliance-radio-container {
    width: 200px;
  }
  .compliance-radio {
    width: 100%;
  }
  :deep(.el-radio__inner) {
    border-radius: 2px;
  }
  :deep(.el-radio__input.is-checked .el-radio__inner::after) {
    content: '';
    width: 10px;
    height: 5px;
    border: 1px solid white;
    border-top: transparent;
    border-right: transparent;
    transform: rotate(-45deg);
    text-align: center;
    border-radius: 0px;
    background: none;
    position: absolute;
    top: 1px;
    left: 1px;
  }

  :deep(.el-radio.is-disabled.is-checked) {
    .el-radio__input.is-checked .el-radio__inner {
      background-color: #409eff;
      border-color: #409eff;
      opacity: 0.6;
    }
    .el-radio__label {
      color: #409eff;
      opacity: 0.8;
    }
  }

  :deep(.el-radio.is-disabled) {
    .el-radio__inner {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
    }
    .el-radio__label {
      color: #909399;
    }
  }
</style>
