<template>
  <span :style="{color:color,backgroundColor:backgroundColor}">{{value}}</span>
</template>

<script setup>
  import { computed,getCurrentInstance,nextTick, ref  } from "vue";
  const { proxy } = getCurrentInstance();
  const color = ref('');
  const backgroundColor = ref('');
  const value = ref('');
  const data=ref([]);
  const config = ref({})

  const props = defineProps({
    propConfig:{},
    propValue:{},
    parentValue:{}
  })
  const attrs = computed({
    get() {
      return config.value.attr ? config.value.attr : {};
    }
  })

   //设置配置
   const setConfig = c => {
    if(c){
      config.value = c;
      setConfigAfter()
    }
  }

  //获取配置
  const getConfig = () => {
    return lodash.cloneDeep(config.value)
  }

  const setConfigAfter=() => {
    if(attrs.value.data){
      data.value = attrs.value.data
    }
  }
  const setValue = v => {
    color.value = '';
    backgroundColor.value = '';
    value.value = '';
    if(data.value){
      for(const item of data.value){
        if(item.value == v){
          value.value = item.label;
          if(item.backgroundColor){
            backgroundColor.value = item.backgroundColor;
          }
          if(item.color){
            color.value = item.color;
          }
          break;
        }
      }
    }
  }

  defineExpose({
    getConfig,setConfig,setValue
  })
  
  if(props.propConfig){
    setConfig(props.propConfig)
  }
  if(props.propValue || props.propValue === 0){
    setValue(props.propValue)
  }


</script>

<style lang="scss" scoped>

</style>