<template>
  <div>
    <el-tag
      v-for="item in tagOptions"
      :key="item.value"
      class="tag"
      style="cursor: pointer;"
      :type="model.findIndex(x => x === item.value) === -1 ? 'info' : 'success'"
      @click="handleClickItem(item.value)"
    >{{ item.label }}</el-tag>
  </div>
</template>

<script>
import { getTagList } from '@/model/tag'

export default {
  name: 'TagCheckTag',

  props: {
    value: {
      type: Array,
      default: () => []
    },
    moduleType: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      model: this.value,
      tagOptions: []
    }
  },

  watch: {
    value: {
      handler(val) {
        this.model = val
      },
      immediate: true
    },
    moduleType: {
      handler(val, oldVal) {
        if (oldVal) {
          this.$emit('input', [])
        }
        val && this.loadTagList()
      },
      immediate: true
    }
  },

  mounted() {
  },

  methods: {
    async loadTagList() {
      const { success, data, msg } = await getTagList({
        data: {
          moduleType: this.moduleType
        }
      })
      if (success) {
        this.tagOptions = data
      } else {
        this.$message.error(msg)
      }
    },

    handleClickItem(val) {
      const index = this.model.findIndex(x => x === val)
      const result = this.model
      if (index === -1) {
        result.push(val)
      } else {
        result.splice(index, 1)
      }
      this.$emit('input', result)
    }
  }
}
</script>

<style scoped>
.mt-60 {
  margin-top: 60px;
}
.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mcol-20 .el-row {
  font-size: 14px;
  line-height: 1.7;
  padding-top: 14px;
}
.search-box {
  border: 1px #DCDEE2 solid;
  padding: 5px;
}
.search-box .search-input {
  margin: 0 5px;
  max-width: 200px;
}
.tag {
  margin-right: 5px;
}
</style>
