<template>
  <div class="form-item-box" :style="{ width: width }">
    <el-radio-group v-bind="$attrs" v-model="props.sex" @change="onChange">
      <el-radio :label="item.dm" v-for="item in sexArr" :key="item.id">
        <SvgIcon class="manIcon" icon="man" v-if="item.zdmc == '男'"></SvgIcon>
        <SvgIcon class="manIcon" icon="woman" v-else-if="item.zdmc == '女'"></SvgIcon>
        <SvgIcon class="manIcon" icon="user" v-else></SvgIcon>
      </el-radio>
      <!-- <el-radio :label="13298">
        <SvgIcon class="womanIcon" icon="woman"></SvgIcon>
      </el-radio>
       <el-radio :label="13299">
        <SvgIcon class="womanIcon" icon="woman"></SvgIcon>
      </el-radio> -->
      <!-- <el-radio :label="3">未知</el-radio> -->
    </el-radio-group>
    <!-- <el-icon class="errorIcon">
      <circle-close-filled />
    </el-icon>
    <el-icon class="checkIcon">
      <circle-check-filled />
    </el-icon> -->
  </div>
</template>

<script setup>
import { getDictInfoByDictEnum } from "@/api/sysDict";
import { COMPONENT_WIDTH } from '@/constant';
import { ref, defineProps, defineEmits, defineExpose, onBeforeMount } from "vue";
const props = defineProps({
  //获取组件传值
  sex: {
    type: String
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  }
});
const sexArr = ref([]);
onBeforeMount(async () => {
  const res = await getDictInfoByDictEnum({ dictElementEnum: "GENDER" });
  sexArr.value = [...res.itemList]
});
const emits = defineEmits(["update:sex"]);
const onChange = (e) => {
  emits("update:sex", e);
};
</script>

<style lang="scss" scoped>
.manIcon,
.womanIcon {
  font-size: 30px;
}
</style>
