<template>
  <a-tooltip :title="title" :overlayStyle="{zIndex: 2001}">
    <div class="img-check-box" @click="toggle">
      <img :src="img" alt="" v-if="type === 'img'">
      <a-icon v-else :type="icon" style="font-size: 2rem" :class="sChecked?'sChecked iconCheck':'iconCheck'"/>
      <div v-if="sChecked && type === 'img'" class="check-item">
        <a-icon type="check"/>
      </div>
    </div>
  </a-tooltip>
</template>

<script>
export default {
  name: 'ImgCheckbox',
  props: {
    checked: {
      type: Boolean,
      required: false,
      default: false
    },
    img: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'img'
    },
    icon: {
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/require-prop-types
    value: {
      required: true
    },
    // eslint-disable-next-line vue/require-default-prop
    title: String
  },
  data () {
    return {
      sChecked: this.initChecked()
    }
  },
  inject: ['groupContext'],
  watch: {
    sChecked: function () {
      const option = {
        value: this.value,
        checked: this.sChecked
      }
      this.$emit('change', option)
      const groupContext = this.groupContext
      if (groupContext) {
        groupContext.handleChange(option)
      }
    }
  },
  created () {
    const groupContext = this.groupContext
    if (groupContext) {
      this.sChecked = groupContext.defaultValues.length > 0 ? groupContext.defaultValues.indexOf(this.value) >= 0 : this.sChecked
      groupContext.datas.push(this)
    }
  },
  methods: {
    toggle () {
      if (this.groupContext.multiple || !this.sChecked) {
        this.sChecked = !this.sChecked
      }
    },
    initChecked () {
      const groupContext = this.groupContext
      if (!groupContext) {
        return this.checked
      } else if (groupContext.multiple) {
        return groupContext.defaultValues.indexOf(this.value) > -1
      } else {
        return groupContext.defaultValues[0] === this.value
      }
    }
  }
}
</script>

<style lang="less" scoped>
.sChecked {
  color: @primary-color;
}

.iconCheck {
  padding: 5px;
  border: 1px solid;
  border-radius: 12px;
}

.img-check-box {
  margin-right: 16px;
  position: relative;
  border-radius: 4px;
  cursor: pointer;

  .check-item {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    padding-top: 15px;
    padding-left: 24px;
    height: 100%;
    color: @primary-color;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
