<template>
  <div>
    <el-tag
      class="tag-select-tag"
      :key="index"
      v-for="(tag,index) in value"
      :disable-transitions="true"
      closable
      @close="removeSkill(tag[prop.value], true)"
      size="medium"
      >{{ tag[prop.label] }}</el-tag
    >
    <slot name="dialog-btn" v-if="canSelect">
      <el-button class="button-new-tag" size="small" @click="showSelect(true)"
        >+ 选择{{ name }}</el-button
      >
    </slot>
    <el-dialog
      :title="name"
      :visible.sync="dialogVisible"
      width="55%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :append-to-body="true"
      v-loading="loading"
    >
      <div>
        <el-tag
          class="tag-select-tag"
          :key="key"
          v-for="(value, key) in selected"
          closable
          type="primary"
          :disable-transitions="true"
          @close="removeSkill(key)"
          size="medium"
          >{{ value }}</el-tag
        >
      </div>
      <div class="tag-select-tip">请选择您所需的标签：{{ name }}</div>
      <div class="tag-select-searchinp">
        <el-input
          v-model="search"
          placeholder="搜索您想要的标签"
          clearable=""
        ></el-input>
      </div>
      <div>
        <el-tag
          class="tag-select-tag"
          type="info"
          :disable-transitions="true"
          size="medium"
          effect="plain"
          v-for="(tag,index) in noSelect"
          :key="index"
          @click="editSkill(tag)"
          >{{ tag[prop.label] }}</el-tag
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-circle-plus-outline"
          type="primary"
          @click="submit"
        >保 存</el-button
        >
        <el-button icon="el-icon-circle-close" @click="dialogVisible = false"
        >取 消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  name: "tagSelect",
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
    name: String,
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    canSelect: { type: Boolean, default: true },
    loading: Boolean,

    prop: {
      type: Object,
      default() {
        return {
          label: "label",
          value: "value",
        };
      },
    },
  },
  data() {
    return {
      search: "",
      dialogVisible: false,
      selected: {},
    };
  },
  computed: {
    noSelect() {
      let data = this.data.filter((item) => {
        return !this.selected.hasOwnProperty(item[this.prop.value]);
      });
      if (this.search) {
        data = this.data.filter((item) => {
          return (
            item[this.prop.label]
              .toLowerCase()
              .indexOf(this.search.toLowerCase()) > -1
          );
        });
      }
      return data;
    },
  },
  watch: {
  },
  methods: {
    /*技能*/
    editSkill(tag) {
      this.$set(this.selected, tag[this.prop.value], tag[this.prop.label]);
    },
    removeSkill(key, save) {
      this.$delete(this.selected, key);
      if (save) {
        this.submit();
      }
    },
    submit() {
      const res = [];
      for (const key in this.selected) {
        const item = {};
        item[this.prop.label] = this.selected[key];
        item[this.prop.value] = key;
        res.push(item);
      }
      this.$emit("input", res);
      this.dialogVisible = false;
    },
    showSelect(flag) {
      const value = _.cloneDeep(this.value || []);
      let selected = {};
      value.forEach((element) => {
        selected[element[this.prop.value]] = element[this.prop.label];
      });
      this.selected = selected;
      this.dialogVisible = flag;
    },
  },
  created(){
    this.showSelect();
  },
};
</script>
<style>
.tag-select-tag {
  margin: 0 5px 5px 0;
  cursor: pointer;
}
.tag-select-tip,
.tag-select-searchinp {
  margin-bottom: 5px;
}
</style>
