<template>
  <div>
    <el-dialog title="设置标签" v-model="dialogVisible" height="50vh">
      <div>
        <el-space wrap>
          <el-select
            v-model="selectTags"
            placeholder="请选择标签"
            filterable
            clearable
            style="width: 400px"
            multiple
          >
            <el-option
              v-for="item in tags"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <template #default>
                <div>
                  <span style="font-weight: bold">{{ item.name }} </span>
                  <div class="text-sm" v-if="item.purpose">
                    用途：{{ item.purpose }}
                  </div>
                </div>
              </template>
            </el-option>
          </el-select>
          <el-button type="primary" @click="handleAddTags">确认</el-button>
        </el-space>
        <el-divider />
        <div class="w-full" style="height: 300px">
          <h4 class="mb-4">已设置标签</h4>
          <el-space wrap v-if="setTags?.length">
            <el-tag
              v-for="(tag, index) in setTags"
              :key="tag.id"
              closable
              @close="handleRemoveTag(index)"
              >{{ tag.name }}</el-tag
            >
          </el-space>
          <div v-else class="text-center">
            <el-empty description="暂未设置标签" />
          </div>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">保 存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request, unique } from "@/utils";
import { ElMessage } from "element-plus";
import { ref, computed, defineProps, defineEmits, watch } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["update:show", "success"]);
const tags = ref([]);
const selectTags = ref([]);
const setTags = ref([]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      initData();
    } else {
    }
  }
);
const getArchiveTags = () => {
  if (!props.id) return;
  request
    .get(`dataService/schemeManage/tag/archive?archiveId=${props.id}`)
    .then(resp => {
      setTags.value = resp.data || [];
    });
};
const getTags = () => {
  request
    .get(`dataService/schemeManage/tag/paginate?pageSize=${9999}`)
    .then(resp => {
      tags.value = resp.data.list;
    });
};
const handleAddTags = () => {
  if (!selectTags?.value.length) {
    return ElMessage.error("请至少选择一个标签");
  }
  const _setTags = tags.value?.filter(v => selectTags.value?.includes(v.id));
  setTags.value = unique([...setTags.value, ..._setTags], "id");
  selectTags.value = [];
};
const handleRemoveTag = index => {
  setTags.value?.splice(index, 1);
};
const onSubmit = () => {
  if (!setTags?.value.length) {
    return ElMessage.error("请至少选择一个标签");
  }
  request
    .post(`dataService/schemeManage/tag/archive`, {
      archiveId: props.id,
      tagIds: setTags.value?.map(v => v.id)
    })
    .then(resp => {
      ElMessage.success(resp.message);
      emits("success");
      dialogVisible.value = false;
    });
};
const initData = () => {
  selectTags.value = [];
  getArchiveTags();
  getTags();
};
</script>
<style lang="scss" scoped>
.el-select-dropdown__item {
  // color: var(--gray-Alpha-white-1200, rgba(255, 255, 255, 0.85)) !important;
  overflow: auto;
  height: auto;
}
</style>
