<template>
    <div class="a">
      <div  class="legend-entry2">
        <el-radio-group @change="changeType" v-model="val" direction="vertical">
          <el-radio style="margin-right:8px;" v-for="item in typeList" :label="item.label"  :key="item.label">{{item.name}}</el-radio>
        </el-radio-group>
      </div>
    </div>
  </template>
  
  <script setup>
  import {ref} from "vue";
  const val = ref(null)
  const emit = defineEmits(["changeType"]);
  //指标类型
  const typeList = ref([])

  function setTypeData(attrFields,attrNames){
    let data = [];
    for(let i = 0;i<attrFields.length;i++){
      data.push({
        label:attrFields[i],
        name:attrNames[i]
      })
    }
    val.value = attrFields[0]?attrFields[0]:null;

    typeList.value = data;
  }
  function changeType(e){
    emit("changeType",e);
  }
  defineExpose({
    setTypeData
  })
  </script>
  
  <style lang="scss" scoped>
  .a{
    position: absolute;
    width: 13%;
    top: 2px;
    right: 0px;
    z-index: 100;
  }
  .legend-entry2 {
    float: right;
    display: flex;
    flex-direction: row;
    margin-right:5px;
  }
:deep(.el-radio-group) {
  display: block;
  // color:bisque;
}

:deep(.el-radio) {
  display: block;
  // color:bisque;
}
</style>
  