<template>
  <div class="custom-color-radio-wrap">
    <RadioGroup v-model="colorFlag" @on-change="onChange">
      <Radio
        :label="item.label"
        :key="item.label"
        v-for="item in radioOptions">
          <Icon
            v-if="item.color"
            type="ios-flag"
            :style="{color: item.color}">
          </Icon>
          <span v-if="item.title">{{ item.title }}</span>
        </Radio>
    </RadioGroup>
  </div>
</template>

<script>
const R3 = window.R3;
const { network } = R3;
export default {
  name: 'ColorRadioFlag',
  props: {
    options: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    'options': {
      handler(newObj, oldObj){
        console.log(newObj, oldObj, 'newList');
        // if(newList.length) {
        // }
        if(newObj.valuedata.length == 0){
          const newList = newObj.combobox || [];
          this.colorFlag = -1;
          this.setRadioOptions(newList);
        }
      },
      deep: true
    },
  },
  data() {
    return {
      /**
       * 0灰色 1红色 2黄色 3绿色 4浅蓝色 5紫色 6粉红色 7青色 8橙色 9深蓝色
       * ['grey','#eb4832','yellow','green','#25adeb','purple','pink','#51ef15','orange','#2538eb']
       */
      originMap: {
        '0': 'grey',
        '1': '#eb4832',
        '2': 'yellow',
        '3': 'green',
        '4': '#25adeb',
        '5': 'purple',
        '6': 'pink',
        '7': '#51ef15',
        '8': 'orange',
        '9': '#2538eb'
      },
      mockOptions: [
        { label: '0', color: 'grey'},
        { label: '1', color: '#eb4832'},
        { label: '2', color: 'yellow'},
        { label: '3', color: 'green'},
        { label: '4', color: '#25adeb'},
        { label: '5', color: 'purple'},
        { label: '6', color: 'pink'},
        { label: '7', color: '#51ef15'},
        { label: '8', color: 'orange'},
        { label: '9', color: '#2538eb'},
      ],
      defalutOption: [{ label:-1, title: '无' }],
      colorFlag: '',// -1 是无
      radioOptions: [],// 动态选项
    };
  },

  mounted() {
    if (this.options.valuedata) {
      this.colorFlag = this.options.valuedata || -1;
    } else {
      this.colorFlag = -1;
    }
    this.$nextTick(()=> {
      this.loadOptions();
    })
  },
  methods: {
    setRadioOptions(selectList) {
      const canList = [];
      if (selectList && selectList.length) {
        selectList.forEach(item => {
          canList.push({
            label: item.VALUE,
            color: this.originMap[item.VALUE],
          })
        })
      }
      this.radioOptions = this.defalutOption.concat(canList);
      // console.log(selectList, this.radioOptions, 'radioOptions_01');
    },
    onChange() {
      this.$emit('change', this.colorFlag);
    },
    async loadOptions() {
      try {
        const platformElem = document.getElementById("PLATFORM");
        const val = platformElem.__vue__.value || null;
        let platformId = null;
        if (val && val.length) {
          platformId = val[0].ID || '';
        }
        if (!platformId) return;
        const reqParam = {
          ASSIGN: { PLATFORM: platformId },
        }
        const res = await network.post('/p/cs/blackUser/queryFlag', reqParam);
        const resultData = res.data || {};
        if (resultData && resultData.length) {
          const selectList = resultData[0].COMBOBOX || [];
          if (selectList && selectList.length) {
            this.setRadioOptions(selectList);
          }
        }
      } catch (error) {
        console.log('load_radio_flag_error');
      }
    },
  },
};
</script>

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