<!-- 物资交接单 弹窗编辑 -->
<script name="HandoverDetailDialog" lang="ts" setup>
import type { IConsumableHandoverGoods } from './consumable-interface'
import type { IStaffBasicInfo } from '@/views/resource/person/register/person-regitster'
import FilterRegistedStaff from '@/views/resource/common/filterRegistedStaff.vue'

const emit = defineEmits(['recordSaved'])

const goodsHandoverFormRef = ref()
const staffFilterRef = ref()

const goodsHandoverDetail = ref<IConsumableHandoverGoods>({
  id: '',
  recordId: '',
  goodsName: '',
  handoverTime: '',
  handoverAmount: '',
  handoverUserName: '',
  handoverUserId: '',
  company: '',
  receiver: '',
})

const goodsHandoverRules = ref({
  goodsName: [{ required: true, message: '物资名称不能为空', trigger: 'blur' }],
  handoverAmount: [{ required: true, message: '交接数量不能为空', trigger: 'blur' }],
  handoverTime: [{ required: true, message: '交接日期不能为空', trigger: 'blur' }],
  handoverUserId: [{ required: true, message: '交接人不能为空，请选择', trigger: ['blur', 'change'] }],
  receiver: [{ required: true, message: '接收人不能为空', trigger: 'blur' }],
}) // 表单验证规则

const showDialog = ref(false)

// 逻辑
const showRegistedStaffFilter = () => {
  staffFilterRef.value.showOrHideFilterDialog(true, 1)
}

const staffSelectedHandler = (staffs: IStaffBasicInfo[]) => {
  goodsHandoverDetail.value.handoverUserId = staffs[0].id!
  goodsHandoverDetail.value.handoverUserName = staffs[0].staffName

  staffFilterRef.value.showOrHideFilterDialog(false)
}

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

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

  if (show === false) {
    // 关闭的时候清除表单
    goodsHandoverDetail.value = {
      id: '',
      recordId: '',
      goodsName: '',
      handoverTime: '',
      handoverAmount: '',
      handoverUserName: '',
      handoverUserId: '',
      company: '',
      receiver: '',
    }
  }
}

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

const submitUseGoods = () => {
  goodsHandoverFormRef.value.validate((valid: boolean) => {
    if (valid === true) {
      emit('recordSaved', goodsHandoverDetail.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="goodsHandoverFormRef" :model="goodsHandoverDetail" :rules="goodsHandoverRules" 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="goodsHandoverDetail.goodsName" placeholder="请输入物资名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="交接日期" prop="handoverTime">
              <el-date-picker v-model="goodsHandoverDetail.handoverTime" placeholder="请选择交接日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="交接数量" prop="handoverAmount">
              <el-input v-model="goodsHandoverDetail.handoverAmount" 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="goodsHandoverDetail.company" placeholder="请输入计量单位" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="交接人" prop="handoverUserId">
              <el-input v-model="goodsHandoverDetail.handoverUserId" type="hidden" />
              <el-input v-model="goodsHandoverDetail.handoverUserName" placeholder="请选择交接人" :disabled="true">
                <template #append>
                  <el-button size="small" @click="showRegistedStaffFilter">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="接收人" prop="receiver">
              <el-input v-model="goodsHandoverDetail.receiver" 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="submitUseGoods">
          保存
        </el-button>
      </span>
    </template>

    <filter-registed-staff ref="staffFilterRef" :is-multi="false" :show-score="false" @record-selected="staffSelectedHandler" />
  </el-dialog>
</template>