<template>
  <!-- 添加一级标题输入框 -->
  <common-dialog
    :visible="visible"
    @closePopup="emitClose"
    type="element"
    showMask
    :elementDialogProps="{
      title: '添加一级标题',
    }"
    :btnConfig="{
      type: 'noBorder',
      btns,
      btnFunctions: [
        {
          name: '取消',
          async click() {
            return true;
          },
        },
        {
          name: '确定',
          click: emitConfirm,
        },
      ],
    }"
  >
    <div class="c-dialog" v-if="visible">
      <!-- <h2 class="c-dialog-title">添加一级标题</h2> -->
      <dialog-input
        class="l-input t-input"
        v-model:value="bindValue"
        :errorShowing="isErrorShowing"
        placeholder="输入一级标题名称"
        :maxlength="limit"
      />
      <SelectVue
        class="type-select"
        v-model="unitType"
        placeholder="请选择类型"
      >
        <OptionVue label="所有类型" :value="3"></OptionVue>
        <OptionVue label="JSON" :value="12"></OptionVue>
      </SelectVue>
      <!-- <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" setup>
import { btns } from "@/config/btns";
import {
  syCommonDialog as CommonDialog,
  syDialogInput as DialogInput,
  sySelect as SelectVue,
  syOption as OptionVue,
} from "cqk-sy-ui";
import { ref } from "vue";

const props = defineProps<{
  visible: boolean;
}>();

const emit = defineEmits(["confirm", "close"]);

const limit = ref(10);
const bindValue = ref("");
const isErrorShowing = ref(false);
const unitType = ref(3);
const emitConfirm = async () => {
  if (bindValue.value.length === 0) {
    isErrorShowing.value = true;
    return false;
  }
  emit("confirm", bindValue.value, unitType.value);
  emitClose();
  return true;
};
const emitClose = () => {
  bindValue.value = "";
  unitType.value = 3;
  emit("close");
};
</script>
<style scoped lang="scss">
.l-input {
  margin: 0px 0 20px 0;
  width: 100%;
}

.type-select {
  width: 100%;
  :deep(.el-input.is-focus) .el-input__inner,
  :deep(.el-input__inner:focus) {
    border-color: var(--sy-blue);
  }
}

/* 添加模板公用样式 */
.c-dialog {
  box-sizing: content-box;
}

.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: var(--sy-blue);
  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>
<style lang="scss">
.el-select-dropdown__item.selected {
  color: var(--sy-blue);
}
.type-select {
  .el-input__inner {
    padding-left: 26px;
    height: 44px;
    line-height: 44px;
  }
}
</style>
