<script setup>
const props = defineProps({
  isShowLabelDlg: {
    default: false,
    type: Boolean,
  },
  dlgLabelList: {
    default: {},
    type: Object,
  },
  userLabel: {
    default: "",
    type: String,
  },
});
const emit = defineEmits(["labelChildren", "close"]);

// 类型的处理
function lookLabelListNumber() {
  let arr = props.dlgLabelList.Labels
    ? props.dlgLabelList.Labels.split(",")
    : [];
  return arr;
}

// 点击标签的事件
function labelChildren(key) {
  emit("labelChildren", key, props.dlgLabelList);
}

// 关闭了弹框
function cancelHandle() {
  emit("close");
}
</script>

<template>
  <div class="container-labrlDlg">
    <el-dialog
      title="标签"
      draggable
      :model-value="isShowLabelDlg"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="cancelHandle"
      center
      width="800px"
    >
      <div class="popover-item">
        <el-tag
          size="mini"
          style="margin: 5px 8px; cursor: pointer"
          v-for="item in lookLabelListNumber()"
          :key="item"
          :type="userLabel == item && 'danger'"
          @click="labelChildren(item)"
        >
          {{ item }}
        </el-tag>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.container-labrlDlg {
  .popover-item {
    padding-bottom: 30px;
  }
  .popover-not-have {
    width: 100%;
    text-align: center;
  }
}
</style>
