<template>
  <div class="radio-card">
    <!-- 单选 -->
    <el-radio-group v-if="type === 'radio'" v-model="radio" @change="value => $emit('change', value)">
      <el-radio v-for="item in list" :key="item.id" :label="item.id" :style="{ marginRight: gutter,marginBottom: gutter }">
        <div
          class="radio__card"
          :class="{
            radio__active: item.id === radio,
            redio__hidden_icon: !showUnActiveIcon && item.id !== radio,
            radio__border: border
          }"
        >
          <slot :row="item" name="item" />
        </div>
      </el-radio>
    </el-radio-group>
    <!-- 多选 -->
    <el-checkbox-group v-else v-model="checkList" @change="handleCheckBoxChange">
      <el-checkbox v-for="item in list" :key="item.id" :label="item.id" :style="{ marginRight: gutter ,marginBottom: gutter }">
        <div class="radio__card" :class="objectClass(item.id)">
          <slot :row="item" name="item" />
        </div>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'RadioCard',
  model: {
    event: 'change',
    prop: 'value'
  },
  props: {
    type: {
      type: String,
      default: 'radio'
    },
    list: {
      type: Array,
      default: () => [
        {
          id: 1
        },
        {
          id: 2
        },
        {
          id: 3
        }
      ]
    },
    value: {
      type: [Number, String, Array],
      default: ''
    },
    border: {
      type: Boolean,
      default: true
    },
    borderColor: {
      type: String,
      default: '#ff6d6d'
    },
    showUnActiveIcon: {
      type: Boolean,
      default: true
    },
    gutter: {
      type: String,
      default: '16px'
    }
  },
  data() {
    return {
      radio: 0,
      checkList: []
    }
  },
  watch: {
    value() {
      this.radio = this.checkList = this.value
    }
  },
  methods: {
    objectClass(id) {
      return {
        radio__active: this.checkList.includes(id),
        redio__hidden_icon: !this.showUnActiveIcon && this.checkList.includes(id),
        radio__border: this.border
      }
    },
    handleCheckBoxChange(value) {
      this.$emit('change', value)
    }
  }
}
</script>

<style scoped>
.radio-card >>> .el-radio__input,
.radio-card >>> .el-checkbox__input {
  display: none;
}
.radio-card >>> .el-radio__label,
.radio-card >>> .el-checkbox__label {
  padding: 0;
}
</style>

<style scoped lang="scss">
.radio-card {
  .el-checkbox,
  .el-radio {
    &:last-of-type {
      margin-right: 0 !important;
    }
  }

  .radio__card {
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;

    // 图标样式（未选中）
    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 26px;
      height: 26px;
      background: url(~@/assets/img/icon-select.png) no-repeat center;
      right: 0;
      bottom: 0;
    }

    &.radio__border {
      border-width: 1px;
      border-style: solid;
      border-color: #d8d8d8;
    }

    // 选中时图标样式
    &.radio__active {
      &::after {
        background: url(~@/assets/img/icon-select-active.png) no-repeat center;
      }
      &.radio__border {
        border-color: #ff6d6d;
      }
    }
    // 隐藏选中图标
    &.redio__hidden_icon {
      &::after {
        display: none;
      }
    }
  }
}
</style>
