<!-- 
 * @Description: 表单
 * @Author: syy 
 * @Date: 2023-12-15 15:45:59
-->
<template>
  <div>
    <form-container v-model="visible" :title="`${sysUserProps.opt}服装`" form-size="500px" @close="onClose">
      <el-form
        ref="sysUserFormRef"
        :rules="rules"
        :disabled="sysUserProps.disabled"
        :model="sysUserProps.record"
        :hide-required-asterisk="sysUserProps.disabled"
        label-width="auto"
        label-suffix=" :"
      >
        <div>
          <el-row :gutter="16">
            <el-col :span="24">
              <s-form-item label="所属服装库" prop="clothSetId">
                <s-select
                  v-model="sysUserProps.record.clothSetId"
                  :options="sysUserProps.treeAllData"
                  label="clothSetName"
                  value="clothSetId"
                ></s-select>
              </s-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="24">
              <s-form-item label="上传服装" prop="clothUrl">
                <el-upload
                  class="avatar-uploader"
                  action="/api/business/clothApi/uploadFile"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  accept=".jpg, .jpeg, .png"
                  :headers="{
                    Authorization: `${TokenEnum.TOKEN_PREFIX} ${accessToken}`
                  }"
                >
                  <img v-if="sysUserProps.record.clothUrl" :src="sysUserProps.record.clothUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
              </s-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="onClose"> 取消 </el-button>
        <el-button v-show="!sysUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
      </template>
    </form-container>
  </div>
</template>

<script setup lang="ts" name="SysUserClothForm">
import { SysUserCloth, userManageClothApi } from "@/api";
import { FormOptEnum } from "@/enums";
import { required } from "@/utils/formRules";
import { FormInstance } from "element-plus";
import { useUserStore } from "@/stores/modules";
import type { UploadProps } from "element-plus";
import { TokenEnum } from "@/enums";
const visible = ref(false); //是否显示表单
const activeName = ref("basic");
const userStore = useUserStore();
const { accessToken } = userStore;
// 表单参数
const sysUserProps = reactive<FormProps.Base<SysUserCloth.list>>({
  opt: FormOptEnum.ADD,
  record: {},
  treeAllData: [],
  disabled: false
});

// 表单验证规则
const rules = reactive({
  clothSetId: [required("请选择所属服装库")],
  clothUrl: [required("请上传服装")]
});

const handleAvatarSuccess: UploadProps["onSuccess"] = (response: any) => {
  if (response.code === 200) {
    sysUserProps.record.clothUrl = response.data;
  }
};
/**
 * 打开表单
 * @param props 表单参数
 */
function onOpen(props: FormProps.Base<SysUserCloth.list>) {
  Object.assign(sysUserProps, props); //合并参数
  visible.value = true; //显示表单
  sysUserProps.record = props.record;
}

// 提交数据（新增/编辑）
const sysUserFormRef = ref<FormInstance>();
/** 提交表单 */
async function handleSubmit() {
  sysUserFormRef.value?.validate(async valid => {
    if (!valid) return; //表单验证失败
    await userManageClothApi
      .add(sysUserProps.record)
      .then(() => {
        sysUserProps.successful!(); //调用父组件的successful方法
      })
      .finally(() => {
        onClose();
      });
  });
}

/** 关闭表单*/
function onClose() {
  visible.value = false;
  activeName.value = "basic";
}

// 暴露给父组件的方法
defineExpose({
  onOpen
});
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}
</style>
<style>
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
