<template>
  <el-tooltip class="item" effect="dark" :content="title" placement="top">
    <div class="visual-item">
      <img class="visual-img" :src="img"/>
      <div class="visual-icon">
        <i class="circle" v-if="checked"></i>
      </div>
    </div>
  </el-tooltip>
</template>

<script>

export default {
  name: 'VisualItem',
  props: {
    title: {
      type: String,
      default: ''
    },
    img: {
      type: String,
      default: ''
    },
    selected: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false
    }
  },
  watch: {
    'selected': {
      handler(newVal, oldVal) {
        this.checked = newVal
      },
      immediate: true,
      deep: false
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.visual-item {
  position: relative;
  border-radius: 4px;
  cursor: pointer;

  .visual-img {
    width: 52px;
    height: 45px;
    border: none;
    display: block;
  }

  .visual-icon {
    color: #1890ff;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    min-height: 20px;
    .circle {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      display: inline-block;
      background: #1890ff;
    }
  }
}
</style>
