<template>
  <div>
    <el-radio class="radio" :value="checkedVal" :label="item.key" :key="index" v-for="(item, index) in options" @input="inputHandler">
      {{item.value}}
    </el-radio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedVal: '',
      options: []
    }
  },
  methods: {
    inputHandler(val) {
      this.checkedVal = val
      this.$emit('input', this.checkedVal)
    },
    async updateOptions(config) {
      if (config.options && config.options.length) {
        this.options = JSON.parse(JSON.stringify(config.options))
        return
      }

      if (config.listOptions) {
        let items = config.listOptions.split(':')
        if (items.length !== 2) {
          this.options = []
          return
        }

        if (items[0] === 'Input') {
          let list = items[1].split('<br>')
          this.options = list.map(val => {
            return { value: val, key: val }
          })
          return
        }
        let res = await axios.get(`/ui/contentextends/fields/options/${items[0]}`, {
          params: {
            method: items[1]
          }
        })
        this.options = res.data.data
      }
    }
  },
  watch: {
    config(val) {
      this.updateOptions(val)
    },

    value(val) {
      this.checkedVal = val
    }
  },
  props: [
    'value',
    'config'
  ],
  created() {
    this.checkedVal = this.value
    this.updateOptions(this.config)
  }
}
</script>

<style>

</style>
