<template>
  <el-drawer :title="dialog.title" v-model="dialog.visible" @close="cancel">
    <el-form ref="drawerRef" :model="formData" :rules="rules" label-position="top">
      <el-form-item label="批次号" prop="charge">
        <el-input v-model="formData.charge"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { getCurrentInstance, reactive, ref, toRefs } from 'vue'
import { ElForm } from 'element-plus'
import { editWareHouse } from '@/api/material/notPosted'
import { localStorage } from '@/utils/storage'
const { proxy }: any = getCurrentInstance()
const emits = defineEmits(['refresh'])
// 公共数据
const drawerRef = ref(ElForm);
const state = reactive({
  dialog: {
    title: "编辑批次",
    type: 'edit',
    visible: false,
  },
  formData: {
    // 批次号
    charge: '',
    // 备注
    remark: '',
    // 标签
    materialPackingName: '',
    siteName: '',
    user: localStorage.get('userName')
  },
  rules: {
    charge: [{ required: true, message: "请输入批次号", trigger: "blur" }],
  }
})
const { dialog, formData, rules } = toRefs(state)

// 取消
function cancel() {
  state.dialog.visible = false;
}

// 提交
function submitForm() {
  drawerRef.value.validate((isValid: boolean) => {
    if (isValid) {
      // 编辑
      editWareHouse(state.formData).then((res: any) => {
        console.log(res)
        if (res.errorCode === 200) {
          proxy.$ElMessage.success(res.message)
          cancel()
          emits('refresh')
        } else {
          proxy.$ElMessage.error(res.message)
        }
      })
    }
  });
}

// 展示
const showModal = (row: any) => {
  state.dialog.visible = true
  // 数据
  state.formData.charge = row.CHARGE
  state.formData.remark = row.REMARK
  state.formData.materialPackingName = row.MATERIALPACKINGNAME
  state.formData.siteName = row.SITENAME
}
defineExpose({ showModal })
</script>
