<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="zdbhFlag">
        <el-select filterable v-model="formData.zdbhFlag" size="small">
          <el-option
            v-for="item in state.zdbhFlagList"
            :key="item.key"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否货位管理" prop="useLocation">
        <el-select filterable v-model="formData.useLocation" size="small">
          <el-option
            v-for="item in useLocation"
            :key="item.key"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否熟化" prop="isOven">
        <el-select filterable v-model="formData.isOven" size="small">
          <el-option
            v-for="item in isOven"
            :key="item.key"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-form-item label="仓管员" prop="locationUser">
          <el-Input v-model="formData.locationUser"></el-Input>
        </el-form-item>
      </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/wareHouse'
const { proxy }: any = getCurrentInstance()
const emits = defineEmits(['refresh'])
// 公共数据
const drawerRef = ref(ElForm);
const state = reactive({
  dialog: {
    title: "编辑仓库",
    type: 'edit',
    visible: false,
  },
  useLocation: [
    { key: 'y', label: '是', value: 'Y' },
    { key: 'n', label: '否', value: 'N' }
  ],
  isOven: [
    { key: 'y', label: '是', value: 'Y' },
    { key: 'n', label: '否', value: 'N' }
  ],
  zdbhFlagList: [
    { key: 'y', label: '是', value: 'Y' },
    { key: 'n', label: '否', value: 'N' }
  ],
  formData: {
    erpFactoryName: '',
    erpLocationName: '',
    // 是否货位管理
    useLocation: '',
    // 是否熟化
    isOven: '',
    locationUser: '',
    zdbhFlag: ''
  },
  rules: {
    useLocation: [{ required: true, message: "是否货位管理", trigger: "blur" }],
    isOven: [{ required: true, message: "是否熟化", trigger: "blur" }],
  }
})
const { dialog, formData, rules, useLocation, isOven } = 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.erpFactoryName = row.ERPFACTORYNAME
  state.formData.erpLocationName = row.ERPLOCATIONNAME
  state.formData.useLocation = row.USE_LOCATION
  state.formData.isOven = row.IS_OVEN
  state.formData.locationUser = row.LOCATION_USER
  state.formData.zdbhFlag = row.ZDBHFLAG
}
defineExpose({ showModal })
</script>
