<template>
  <div class="dee-radio-image-group-com">
    <el-radio-group v-model="cloneValue" class="dee-radio-image-group" @change="change" @input="change">
      <el-radio-button v-for="(item, index) in list" :key="index" :label="item.id" :disabled="item.disabled">
        <div class="dee-image" :style="{width: item.width || 'auto', height: item.height || 'auto',}">
          <el-image
            v-if="item.src"
            class="image"
            :src="item.src"
            :style="{width: item.imgWidth || '100px', height: item.imgHeight || '60px',}"
            fit="fill"
          />
          <span class="demonstration">{{ item.name }}</span>
        </div>
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'DeeRadioImageGroup',
  props: {
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    value: {
      type: [String, Number],
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      cloneValue: ''
    }
  },
  computed: {
    list() {
      const options = JSON.parse(JSON.stringify(this.options))
      return options.map(el => {
        if (el.src) {
          if (!el.src.startsWith('http') && !(el.src.startsWith('data:') && el.src.includes(';base64,'))) {
            el.src = `${el.src}`
          }
        }
        return el
      })
    }
  },
  watch: {
    value(val) {
      this.cloneValue = val
    }
  },
  methods: {
    change(e) {
      this.$emit('input', e)
    }
  }
}
</script>

<style lang="scss">
.dee-radio-image-group-com {
  .dee-radio-image-group {
    margin-top: 20px;
    .dee-image{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .image{
      }
      .demonstration {
        transform: translateY(10%);
      }
    }
    .el-radio-button__inner{
      border-left: 1px solid #DCDFE6;
      padding: 0;
      padding-bottom: 5px;
      width: 100px;
      height: 80px;
    }
    .el-radio-button {
      padding: 10px;
    }
  }
}
</style>