<template>
  <el-drawer
    title="新增物料"
    :append-to-body="true"
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :show-close="false"
    direction="rtl"
    :size="computedSize"
    :before-close="handleClose"
  >
    <el-form
      ref="drawerRef"
      :model="drawerFormData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="物料主数据" prop="materialCode" style="margin-bottom: 30px">
        <el-select
          v-model="drawerFormData.materialCode"
          :model-value="materialLabel"
          placeholder="请输入物料主数据"
          @click="openForm"
        />
      </el-form-item>
      <el-form-item label="数量" prop="quantity1" style="margin-bottom: 30px">
        <el-input v-model="drawerFormData.quantity1" type="number" placeholder="请输入数量" />
      </el-form-item>
      <el-form-item label="单位" prop="unit1" style="margin-bottom: 30px">
        <el-input v-model="drawerFormData.unit1" placeholder="请输入单位" disabled/>
      </el-form-item>
      <el-form-item label="单价" prop="price1" style="margin-bottom: 30px">
        <el-input v-model="drawerFormData.unitPrice1" placeholder="请输入单价" />
      </el-form-item>
      <el-form-item label="备注" prop="remark1" style="margin-bottom: 30px">
        <el-input v-model="drawerFormData.remark1" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </template>
  </el-drawer>
  <MaterialSelect ref="materialFormRef" @choose="materialChoose" />
</template>
<script setup lang="ts">
import { defineEmits, defineOptions, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import * as PmsMaterialApi from '@/api/pms/material'
import {CommonStatusEnum} from "@/utils/constants";
import MaterialSelect from './SelectMaterial.vue'

const drawerVisible = ref<boolean>(false)
const emit = defineEmits(['update:modelValue', 'add'])
const materialLabel = ref('') // 表单的类型：create - 新增；update - 修改
defineOptions({
  name: 'StockMaterialDrawer'
})
const materialChoose = (row) => {
  drawerFormData.value.materialCode = row.code
  drawerFormData.value.materialName = row.name
  drawerFormData.value.unit1 = row.unit
  materialLabel.value = row.name
}
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  createTime: [],
  bomId: '',
  name: '',
  code: ''
})
const drawerFormData = ref({
  id: undefined,
  materialCode: undefined,
  materialName: undefined,
  unit1: undefined,
  unitPrice1: undefined,
  type: 1,
  quantity1: undefined,
  totalCount: undefined,
  sapCode: undefined,
  status1: undefined,
  remark1: undefined
})
const resetDrawerForm = () => {
  drawerFormData.value = {
    id: undefined,
    materialCode: undefined,
    materialName: undefined,
    unit1: undefined,
    unitPrice1: undefined,
    type: 1,
    quantity1: undefined,
    totalCount: undefined,
    sapCode: undefined,
    status1: undefined,
    remark1: undefined
  }
  drawerRef.value?.resetFields()
}
const formRules = reactive({
  materialCode: [{ required: true, message: '物料编码不能为空', trigger: 'blur' }],
  materialName: [{ required: true, message: '物料名称不能为空', trigger: 'blur' }],
  quantity1: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
})
const materialFormRef = ref()
const openForm = () => {
  materialFormRef.value.open()
}
const windowWidth = ref(window.innerWidth)
// 动态计算百分比
const computedSize = computed(() => {
  return windowWidth.value > 800 ? '40%' : '60%'
})

const loading = ref(false)
const total = ref(0) // 列表的总页数
const materials = ref([])

const props = defineProps({
  modelValue: Boolean
})

// 打开抽屉
const openDrawer = () => {
  drawerVisible.value = true
  resetDrawerForm()
  materialLabel.value = undefined
}

// 关闭抽屉
const closeDrawer = () => {
  drawerVisible.value = false
}

// 关闭抽屉
const handleClose = () => {
  emit('update:modelValue', false)
}
const drawerRef = ref()
const submitForm= async ()=> {
  await drawerRef.value.validate()
  drawerFormData.value.type = '1'
  emit('add', drawerFormData.value);
  emit('update:modelValue', false)
}

defineExpose({ openDrawer, closeDrawer }) // 暴露方法给父组件
</script>

<style lang="scss" scoped></style>
