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

<script lang="ts">
import { Component, Prop, Vue, Watch,Mixins } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'

@Component
export default class TextChange extends VueViews {
  color = '';
  backgroundColor = '';
  value = '';
  data:Array<any>=[];

  @Watch('propValue')
  propDataChange(v:any){
    this.setValue(v)
  }
  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
  }
  mounted(){
    this.setValue(this.propValue)
  }
  setConfigAfter(){
    if(this.attrs.data){
      this.data = this.attrs.data
    }
  }
  setValue(v:any){
    this.color = '';
    this.backgroundColor = '';
    this.value = '';
    if(this.data){
      for(const item of this.data){
        if(item.value == v){
          this.value = item.label;
          if(item.backgroundColor){
            this.backgroundColor = item.backgroundColor;
          }
          if(item.color){
            this.color = item.color;
          }
          break;
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>