<!-- 物资入库情况 弹窗编辑 -->
<script name="StoreDetailDialog" lang="ts" setup>
import type { IConsumableStoreGoods } from './consumable-interface'

const emit = defineEmits(['recordSaved'])

const goodsFormRef = ref()

const goodsStoreDetail = ref<IConsumableStoreGoods>({
  id: '',
  goodsName: '',
  goodsModel: '',
  amount: '',
  price: '',
  unitPrice: '',
  remark: '',
})

const goodsStoreRules = ref({
  goodsName: [{ required: true, message: '物资名称不能为空', trigger: 'blur' }],
  goodsModel: [{ required: true, message: '规格型号不能为空', trigger: 'blur' }],
  amount: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
  price: [{ required: true, message: '金额不能为空', trigger: 'blur' }],
}) // 表单验证规则

const showDialog = ref(false)

// 逻辑
const showRecordDialog = (show: boolean) => {
  showDialog.value = show

  nextTick(() => {
    goodsFormRef.value.clearValidate()
  })

  if (show === false) {
    // 关闭的时候清除表单
    goodsStoreDetail.value = {
      goodsName: '',
      goodsModel: '',
      amount: '',
      price: '',
      unitPrice: '',
      remark: '',
    }
  }
}

// 编辑时初始化表格
const initRecordData = (record: IConsumableStoreGoods) => {
  goodsStoreDetail.value = { ...record }
}

const submitStoreGoods = () => {
  goodsFormRef.value.validate((valid: boolean) => {
    if (valid === true) {
      emit('recordSaved', goodsStoreDetail.value)

      showRecordDialog(false)
    }
  })
}

defineExpose({
  showRecordDialog,
  initRecordData,
})
</script>

<template>
  <el-dialog v-model="showDialog" title="物资入库详情" :append-to-body="true" :close-on-click-modal="false">
    <detail-block title="">
      <el-form ref="goodsFormRef" :model="goodsStoreDetail" :rules="goodsStoreRules" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="物资名称" prop="goodsName">
              <el-input v-model="goodsStoreDetail.goodsName" placeholder="请输入物资名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="规格" prop="goodsModel">
              <el-input v-model="goodsStoreDetail.goodsModel" placeholder="请输入物资规格" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="数量" prop="amount">
              <el-input v-model="goodsStoreDetail.amount" placeholder="请输入使用数量及单位" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="单价">
              <el-input v-model="goodsStoreDetail.unitPrice" placeholder="请输入单价及单位" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="金额" prop="price">
              <el-input v-model="goodsStoreDetail.price" placeholder="请输入金额" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="备注">
              <el-input v-model="goodsStoreDetail.remark" placeholder="请输入备注信息" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showRecordDialog(false)">取消</el-button>
        <el-button type="primary" @click="submitStoreGoods">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>