<template>
  <div class="category-add">
    <h2 class="dialog_add-title">创建副本</h2>
    <dialog-input
      class="dialog_add-form dialog_add-input_name"
      v-model="name"
      :errorShowing="isErrorShowing"
      placeholder="请输入新的模板名称"
    />
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in MyCategories"
        :key="item.value"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
    <button class="dialog_add-btn_confirm" @click="checkForm">确定</button>
    <button class="dialog_add-btn_cancel" @click="closeDialog">取消</button>
  </div>
</template>

<script>
import { GO_URLS } from "@/config/URLS";
import DialogInput from "@/components/DialogInput.vue";
export default {
  components: {
    DialogInput,
  },
  props: {
    activeId: {
      type: Number,
    },
    TemplateID: {
      type: Number,
    },
  },
  data() {
    return {
      isErrorShowing: false,
      isInActive: false,
      name: "",
      MyCategories: [],
      value: "",
      detail: "",
    };
  },
  mounted() {
    this.getFolderList();
    this.value = this.activeId;
    this.gettemplate(this.TemplateID);
  },
  methods: {
    // 获取模板
    async gettemplate(id) {
      const res = await this.$ajax({
        type: "get",
        url: GO_URLS.getSystemTemplate,
        params: {
          id: id,
        },
      });
      if (res) {
        this.detail = res.data.detail;
      }
    },
    // 获取我的模板列表
    async getFolderList() {
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.folderList,
        params: {
          page: 1,
          page_size: 100,
          template_type: 1,
        },
      });
      if (res) {
        this.MyCategories = res.data.results;
      }
    },
    async checkForm() {
      if (this.isInActive) return;
      this.isInActive = true;
      this.isErrorShowing = true;
      // 追加非空验证
      if (this.name === "") {
        this.$message("模板名称不可为空");
        this.isInActive = false;
        return null;
      }
      if (this.value === "") {
        this.value = this.MyCategories[0].id;
      }

      const data = await this.$ajax({
        type: "post",
        url: GO_URLS.customize,
        params: {
          detail: this.detail,
          folder_id: this.value,
          name: this.name,
          info: this.name,
        },
      });
      if (data) {
        this.$emit("successCallback", this.value);
      }
      this.isInActive = false;
    },
    closeDialog() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
.category-add {
  padding: 34px 50px 0 50px;
  height: 305px; /* 325px - 34px */
  width: 500px; /* 600px - 100px */
}

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

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

.dialog_add-input_name {
  margin: 42px 0 34px 0;
}

.dialog_add-btn_confirm {
  float: right;
  width: 120px;
  height: 40px;
  color: #fff;
  font-size: 14px;
  outline: none;
  background: #3f79fe;
  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;
}
.el-select {
  width: 500px;
  margin-bottom: 40px;
}
/deep/.el-input__inner {
  height: 44px;
  padding: 0 26px;
}
</style>