<template>
  <div>
    <CheckboxGroup
      v-model="colorFlag"
      @on-change="onChange"
    >
      <Checkbox
        :label="item.label"
        v-for="item in radioOptions"
        :key="item.label"
      >
        <Icon
          type="ios-flag"
          :style="{color: item.color}"
        >
        </Icon>
      </Checkbox>
    </CheckboxGroup>
  </div>
</template>

<script>
export default {
  name: 'ColorFlag',

  props: {
    options: {
      type: Object,
      default: () => { }
    }
  },

  data() {
    return {
      colorFlag: [],
      radioOptions: []
    };
  },

  mounted() {
    if (this.options.valuedata) {
      this.colorFlag = this.options.valuedata.split(',')
    } else {
      this.colorFlag = []
    }

    this.setRadioOptions()
  },

  methods: {
    getColor(val) {
      switch (val) {
        case '灰':
          return 'grey'
        case '红':
          return '#eb4832'
        case '黄':
          return 'yellow'
        case '绿':
          return 'green'
        case '蓝':
          return 'blue'
        case '紫':
          return 'purple'
      }
    },

    setRadioOptions() {
      const options = this.options.combobox.map(item => {
        const color = this.getColor(item.limitdesc)
        return {
          label: item.limitval,
          color,
        }
      })
      this.radioOptions = options
    },

    onChange(val) {
      // if (val.length > 1) {
      //   this.colorFlag = [val[val.length - 1]]
      // }
      this.$emit('change',this.colorFlag.join(','))
    }
  },
};
</script>

<style lang="less" scoped>
</style>
