<template>
  <div class="category-add">
    <syDialogInput
      class="dialog_add-form dialog_add-input_name"
      v-model:value.trim="name"
      :errorShowing="isErrorShowing"
      placeholder="请输入模板名称"
    />
    <sySelect
      v-model="value"
      placeholder="请选择"
      popper-class="categoryAddSySelect"
    >
      <syOption v-for="item in MyCategories" :key="item.value" :value="item.id">
        <div class="overflow-hidden text-ellipsis">{{ item.name }}</div>
      </syOption>
    </sySelect>
  </div>
</template>

<script lang="ts">
import {
  GO_URLS,
  syDialogInput,
  sySelect,
  syOption,
  syMessage as ElMessage,
} from "cqk-sy-ui";
import { $ajax } from "@/service";
import { defineComponent } from "vue";
export default defineComponent({
  data() {
    return {
      name: "",
      isErrorShowing: false, // 错误提示
      MyCategories: [] as any[],
      value: "" as any,
    };
  },
  props: {
    activeId: {
      type: Number,
    },
  },

  components: { syDialogInput, sySelect, syOption },
  created() {
    this.value = this.activeId;
    this.getFolderList();
  },
  methods: {
    async checkForm() {
      this.isErrorShowing = true;
      // 追加非空验证
      if (this.name === "") {
        ElMessage("模板名称不可为空");
        return null;
      }
      if (this.value === "" || this.value === undefined) {
        ElMessage("请选择分类");
        return null;
      }
      const data = await $ajax({
        type: "post",
        url: GO_URLS.customize,
        params: {
          detail: "",
          folder_id: this.value,
          name: this.name,
          info: this.name,
        },
      });
      if (data) {
        this.$emit("successCallback", this.value);
      }
      return true;
    },
    closeDialog() {
      this.$emit("close");
    },
    // 获取我的模板列表
    async getFolderList() {
      const res = await $ajax({
        type: "post",
        url: GO_URLS.folderList,
        params: {
          page: 1,
          page_size: 100,
          template_type: 1,
        },
      });
      if (res) {
        this.MyCategories = res.data.results;
      }
    },
  },
});
</script>
<style lang="scss">
.categoryAddSySelect {
  .el-select-dropdown__wrap.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default {
    width: 375px;
  }
}
</style>

<style lang="scss" scoped>
.category-add {
  background: rgba(255, 255, 255, 1);
}

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

.dialog_add-input_name {
  margin-bottom: 18px;
  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;
  margin-right: 39px;
}

.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;
}
.el-select {
  width: 100%;
}
:deep(.el-input__inner) {
  height: 44px;
  padding: 0 26px;
}
</style>
