<script lang="ts" setup>
/**
 * @Name: AttributeManageCreate.vue
 * @Description:
 * @Author: Cheney
 */

import { Close, Finished } from '@element-plus/icons-vue';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useResponse } from '/@/utils/useResponse';
import * as api from '../api';


const props: any = defineProps({
  rowData: Object
});
const { rowData } = props;

const emit = defineEmits([ 'refresh' ]);

const loading = ref(false);
const createDialog = <Ref>useTemplateRef('createDialog');
const createOpen = defineModel({ default: false });
const btnLoading = ref(false);

interface RuleForm {
  kind: any;
  attr: any;
  section: any;
  order: any;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  kind: '',
  attr: '',
  order: '',
  section: ''
});

const rules = reactive<FormRules<RuleForm>>({
  attr: [ { required: true, message: '必填项', trigger: 'blur' } ],
  section: [ { required: true, message: '必填项', trigger: 'blur' } ]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const body = {
        kind: rowData.id,
        attr: ruleForm.attr,
        order: ruleForm.order,
        section: Number(ruleForm.section)
      };
      const res = await useResponse(api.createProductAttr, body, loading);
      if (res.code === 2000) {
        ElMessage.success({ message: '创建成功', plain: true, icon: 'CirclePlus' });
        createDialog.value.visible = false;
        emit('refresh');
      }
    } else {
      ElMessage.error('创建失败，请检查表单');
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const attributeOptions: any = ref([]);

onBeforeMount(() => {
  fetchAttributeOptions();
});

async function fetchAttributeOptions() {
  const res = await useResponse(api.getAttributeOptions, { limit: 100 });
  attributeOptions.value = res.data;
}

function cancelDialog() {
  resetForm(ruleFormRef.value);
  createDialog.value.visible = false;
}

</script>

<template>
  <el-dialog ref="createDialog"
             v-model="createOpen" :close-on-click-modal="false" :close-on-press-escape="false" class="create-dialog"
             style="width: 35%" title="创 建">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        class="mx-2.5 mt-7"
        label-position="left"
        label-width="auto"
        status-icon>
      <el-form-item class="font-medium" label="位 置" prop="section">
        <el-select v-model="ruleForm.section">
          <el-option label="第1部分" value="1" />
          <el-option label="第2部分" value="2" />
          <el-option label="第3部分" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item class="font-medium" label="属 性" prop="attr">
        <el-select v-model="ruleForm.attr">
          <el-option v-for="item in attributeOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item class="font-medium" label="顺 序" prop="order">
        <el-input-number v-model="ruleForm.order" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-divider />
      <div class="flex flex-1 justify-end">
        <el-button :icon="Close" @click="cancelDialog">取 消</el-button>
        <el-button :icon="Finished" :loading="btnLoading" type="primary" @click="submitForm(ruleFormRef)">
          确 定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
:deep(.create-dialog .el-dialog__footer) {
  padding-top: 0;
}
</style>
