<template>
  <div class="category-add">
    <!-- <h2 class="dialog_add-title">修改标题名</h2> -->
    <dialog-input
      class="dialog_add-form dialog_add-input_name"
      v-model:value="editTitle"
      maxlength="10"
      :errorShowing="isErrorShowing"
      placeholder="请输入标题名称"
    />
    <!-- <button class="dialog_add-btn_confirm" @click="changeEdit">确定</button>
    <button class="dialog_add-btn_cancel" @click="closeDialog">取消</button> -->
  </div>
</template>

<script lang="ts">
import { syDialogInput as DialogInput } from "cqk-sy-ui";
import { ElMessage } from "element-plus";
import { defineComponent } from "vue";
export default defineComponent({
  //   引入组件
  components: {
    DialogInput,
  },
  props: ["selectedEditItem", "setSelectedEditItem"],
  emits: ["close"],
  data() {
    return {
      editTitle: "",
      isErrorShowing: false,
    };
  },
  watch: {
    selectedEditItem: {
      handler(newName, oldName) {
        if (newName.title) this.editTitle = newName.title;
        if (newName.label) this.editTitle = newName.label;
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {},
  methods: {
    changeEdit() {
      if (this.editTitle.trim() === "") {
        this.isErrorShowing = true;
        return;
      }
      this.$nextTick(() => {
        if (this.selectedEditItem) {
          if (
            Object.prototype.hasOwnProperty.call(this.selectedEditItem, "title")
          ) {
            const temp = this.selectedEditItem;
            temp.title = this.editTitle;
            this.setSelectedEditItem(temp);
          }
          if (
            Object.prototype.hasOwnProperty.call(this.selectedEditItem, "label")
          ) {
            const temp = this.selectedEditItem;
            temp.label = this.editTitle;
            this.setSelectedEditItem(temp);
          }
        }
      });
      this.$emit("close");
    },
    // 取消
    closeDialog() {
      if (
        this.selectedEditItem &&
        this.selectedEditItem.title &&
        this.selectedEditItem.title.trim() === ""
      ) {
        ElMessage.warning("标题不可为空");
        return false;
      }
      this.$emit("close");
    },
  },
});
</script>
<style scoped lang="scss">
.category-add {
  box-sizing: content-box;
}

.dialog_add-title {
  margin: 0;
  color: #000;
  font-size: 22px;
  line-height: 30px;
}

.dialog_add-select_subject {
  margin-top: 29px;
}

.dialog_add-input_name {
  width: 100%;
}

.dialog_add-btn_confirm {
  float: right;
  width: 120px;
  height: 40px;
  color: #fff;
  font-size: 14px;
  outline: none;
  background: var(--sy-blue);
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.dialog_add-btn_cancel {
  float: right;
  margin-right: 18px; /* 28 - 10 */
  border: none;
  width: 48px; /* 28 + 增大20 */
  height: 40px;
  outline: none;
  background: #fff;
  color: #5c6476;
  font-size: 14px;
  cursor: pointer;
}
</style>
