<template>
  <el-radio-group
    v-model="inputVal"
    style="margin-bottom: 30px"
    @change="handleChange"
  >
    <el-radio-button
      :label="option.key"
      v-for="option in options"
      :key="option.key"
    >
      <img :src="option.img" width="80" height="80" />
      <div class="name">{{ option.value }}</div>
    </el-radio-button>
  </el-radio-group>
</template>

<script>
import utils from '@/hotent-ui-util'
export default {
  name: 'HtCardRadio',
  props: {
    value: [String, Number, Boolean, Array],
    multiple: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  computed: {
    inputVal: {
      get() {
        if (utils.isEmpty(this.value)) {
          return ''
        }
        if (this.value.constructor === String) {
          const ary = this.value === '' ? [] : this.value.split(',')
          if (this.multiple) {
            return ary
          } else {
            return this.value
          }
        }
        return this.value
      },
      set(val) {
        let result = ''
        if (this.multiple) {
          if (val && val.constructor === Array && val.length > 0) {
            if (val[0].constructor === Number) {
              throw '多选不支持数字类型'
            }
            result = val.join(',')
          }
        } else {
          result = val
        }
        this.$emit('input', result)
      },
    },
  },
  data() {
    return {}
  },
  methods: {
    handleChange(radioLabel) {
      this.$emit('change', radioLabel)
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-radio-button {
    padding-right: 15px;
    .el-radio-button__inner {
      border: none;
      width: 144px;
      height: 148px;
      border-radius: 5px;
      text-align: center;
      background: #f8f8f8;

      .name {
        font-size: 15px;
        font-weight: bold;
      }
    }

    &:first-child .el-radio-button__inner {
      border-radius: 5px;
    }
    &:last-child .el-radio-button__inner {
      border-radius: 5px;
    }
  }

  .el-radio-group {
    margin-bottom: 0 !important;
  }

  .is-active .el-radio-button__inner {
    color: #409eff;
    background-color: #ffffff;
    border: 1px solid #409eff;
  }

  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    box-shadow: 0 0 0 0 #409eff;
  }
}
</style>
