<template>
  <!-- 添加一级标题输入框 -->
  <common-dialog id="add_root_dialog" @closePopup="emitClose">
    <div class="c-dialog">
      <h2 class="c-dialog-title">添加一级标题</h2>
      <dialog-input
        class="l-input t-input"
        v-model="bindValue"
        :errorShowing="isErrorShowing"
        placeholder="输入一级标题名称"
        :maxlength="limit"
      />
      <div class="c-dialog-btn_wrapper">
        <button class="g-btn_primary c-dialog-btn_cancel" @click="emitClose">
          取消
        </button>
        <button class="g-btn_primary c-dialog-btn_confirm" @click="emitConfirm">
          确定
        </button>
      </div>
    </div>
  </common-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import CommonDialog from "@/components/CommonDialog.vue";
// import { Limit } from "@/config";
import DialogInput from "@/components/DialogInput.vue";
@Component({
  components: {
    CommonDialog,
    DialogInput,
  },
})
export default class AddRootDialog extends Vue {
  public limit = 10;
  public bindValue: string = "";
  public isErrorShowing: boolean = false;
  public emitConfirm() {
  
    if (this.bindValue.length === 0) {
      this.isErrorShowing = true;
      return;
    }
    this.$emit("confirm", this.bindValue);
    this.emitClose();
  }
  public emitClose() {
    this.$emit("close");
  }
}
</script>
<style scoped lang='less'>
.l-input {
  margin: 42px 0 47px 0;
}
/* 添加模板公用样式 */
.c-dialog {
  width: 500px;
  /* 600 - 100 */
  padding: 34px 50px 63px 50px;
}

.c-dialog-title {
  margin: 0;
  font-size: 22px;
  line-height: 30px;
  color: #000;
  font-weight: 500;
}



.c-dialog-btn_wrapper {
  text-align: right;
}
.g-btn_primary {
    border: none;
    background: #0CC399;
    font-size: 14px;
    color: #fff;
    outline: none;
    cursor: pointer;
    border-radius: 8px;
}
.c-dialog-btn_confirm {
  width: 120px;
  height: 40px;
  border-radius: 4px;

  &:after {
    clear: both;
  }
}

.c-dialog-btn_cancel {
  margin-right: 22px;
  /* 28 - (40 - 28) / 2 */
  color: #5c6476;
  background: transparent;
  height: 40px;
  width: 60px;
}
</style>

