<template>
  <div class="container-labrlDlg">
    <el-dialog
      title="标签"
      v-dialogDrag
      :visible.sync="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>

<script>
export default {
  name: "",
  components: {},
  props: {
    isShowLabelDlg: {
      default: false,
      type: Boolean,
    },
    dlgLabelList: {
      default: {},
      type: Object,
    },
    userLabel: {
      default: "",
      type: String,
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 类型的处理
    lookLabelListNumber() {
      let arr = this.dlgLabelList.Labels ? this.dlgLabelList.Labels.split(",") : [];
      return arr;
    },
    // 点击标签的事件
    labelChildren(key) {
      this.$emit("labelChildren", key, this.dlgLabelList);
    },
    // 关闭了弹框
    cancelHandle() {
      this.$emit("update:dlgLabelList", {});
      this.$emit("update:isShowLabelDlg", false);
    },
  },
};
</script>
<style scoped lang="scss">
.container-labrlDlg {
  .popover-item {
    padding-bottom: 30px;
  }
  .popover-not-have {
    width: 100%;
    text-align: center;
  }
}
</style>
