<template>
  <div class="category-add">
    <syScrollBar max-height="300px" ref="syScrollBarRef">
      <div
        v-for="(category, i) in categoryNames"
        class="mb-3 flex pr-2 items-center"
      >
        <syDialogInput
          class="dialog_add-form dialog_add-input_name flex-grow"
          v-model:value.trim="category.name"
          :maxLength="30"
          :errorShowing="category.error"
          placeholder="请输入分类名称"
        />
        <button
          tabindex="-1"
          @click="
            i >= 1 && categoryNames.length !== 1 && categoryNames.splice(i, 1)
          "
          class="ml-2"
          :style="{
            opacity: i >= 1 ? 1 : 0,
            cursor: i >= 1 ? 'pointer' : 'unset',
          }"
        >
          <Icon iconName="iconhuishouzhan1"></Icon>
        </button>
      </div>
    </syScrollBar>
    <div
      style="font-size: 14px; font-weight: 400; color: var(--sy-blue)"
      class="flex items-center cursor-pointer w-fit my-3"
      @click="categoryNames.push({ name: '', error: false }); $nextTick(()=>{
        ($refs as any).syScrollBarRef.scrollTo({
            top: 100000,
            behavior: 'smooth'
        })
      })"
    >
      <Icon iconName="icontianjialiucheng" class="mr-1"></Icon>
      <button>继续添加</button>
    </div>

    <sy-button
      mode="elementBtn"
      type="primary"
      size="large"
      style="height: 40px"
      class="w-full"
      :loading="loading"
      @click="checkForm"
      >确定</sy-button
    >
  </div>
</template>

<script lang="ts">
import { syDialogInput, GO_URLS, syButton, syScrollBar } from "cqk-sy-ui";
import { $ajax } from "@/service";
import { ElMessage } from "element-plus";
import { defineComponent } from "vue";
import Icon from "@/components/Icon/index.vue";

export default defineComponent({
  data() {
    return {
      loading: false,
      categoryNames: [
        {
          name: "",
          error: false,
        },
      ],
    };
  },
  components: {
    syDialogInput,
    syButton,
    Icon,
    syScrollBar,
  },
  emits: ["close", "successCallback"],
  methods: {
    //   //   关闭弹窗
    async closeDialog() {
      this.$emit("close", {});
    },
    verifyFields() {
      let valid = true;
      this.categoryNames.forEach((item) => {
        if (item.name.trim() === "") {
          item.error = true;
          valid = false;
        }
      });
      return valid;
    },
    async checkForm() {
      const valid = this.verifyFields();
      if (!valid) {
        ElMessage("分类名称不可为空");
        return;
      }
      this.loading = true;
      await Promise.all(
        this.categoryNames
          .map((i) => i.name)
          .map(async (name) => {
            const data = await $ajax({
              type: "post",
              url: GO_URLS.addFolder,
              params: {
                name: name,
                info: name,
              },
            });
            return data;
          })
      );
      this.loading = false;
      this.$emit("successCallback");
      this.closeDialog();
    },
  },
});
</script>

<style scoped>
.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%;
  /* margin: 20px 0 34px 0; */
}

.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>
