<template>
  <div>
    <a-modal v-model:visible="visible" width="50%" :closable="false" :maskClosable="false" :title="titleText"
      :footer="null">
      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <div class="text-box">
          <a-form-item label="库点名称" name="orgId">
            <a-select class="select-box" :disabled="showLock" v-model:value="formState.orgId" :size="size"
              placeholder="请选择">
              <a-select-option v-for="item in enterpriseList" :key="item.orgId" :value="item.orgId">{{ item.orgName
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="检查日期" name="inspectionDate">
            <a-date-picker :disabled="showLock" v-model:value="formState['inspectionDate']"
              value-format="YYYY-MM-DD 00:00:00" />
          </a-form-item>
          <a-form-item label="检查人员" name="inspector">
            <a-input class="title-box" placeholder="请输入" autocomplete="off" :disabled="showLock"
              v-model:value="formState.inspector" />
          </a-form-item>
          <a-form-item label="制定部门" name="formulatingDepartment">
            <a-input class="title-box" placeholder="请输入" autocomplete="off" :disabled="showLock"
              v-model:value="formState.formulatingDepartment" />
          </a-form-item>
          <a-form-item label="制定人" name="formulator">
            <a-input class="title-box" placeholder="请输入" autocomplete="off" :disabled="showLock"
              v-model:value="formState.formulator" />
          </a-form-item>
        </div>
        <div class="btn-box">
          <a-button v-if="dataObj.isType !== '3'" style="margin-right: 16px" type="primary"
            @click="handleOk('0')">保存</a-button>
          <a-button v-if="dataObj.isType !== '3'" style="margin-right: 16px" type="primary"
            @click="handleOk('1')">下发</a-button>
          <a-button @click="handleCancel">关闭</a-button>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import safetyProductionApi from '@/api/security.info/safetyProductionApi.js'
import { message } from 'ant-design-vue'
const props = defineProps({
  dataObj: {
    type: Object,
    default: () => { }
  }
})
const formState = ref({})
const rules = ref({
  orgId: [{ required: true, message: '请选择库点名称', trigger: 'change' }],
  inspectionDate: [{ required: true, message: '请选择检查日期', trigger: 'change' }],
  inspector: [{ required: true, message: '请输入检查人员', trigger: 'blur' }],
  formulatingDepartment: [{ required: true, message: '请输入制定部门', trigger: 'blur' }],
  formulator: [{ required: true, message: '请输入制定人', trigger: 'blur' }],

})
const isTypeData = ref('')
const showLock = ref(false)
const visible = ref(false)
const titleText = ref('')
const formRef = ref(null)
const emit = defineEmits(['isVisible'])
const enterpriseList = ref([])

// 取消按钮
const handleCancel = () => {
  colosData()
}
// 确定按钮
const handleOk = (val) => {
  formRef.value
    .validate()
    .then(() => {
      // isTypeData === '1' 新增  2是编辑 3是查看
      if (isTypeData.value === '1') return addData(val)
      if (isTypeData.value === '2') return editData(val)
    })
    .catch((error) => {
      message.warning('请填写完善')
      console.log('error', error)
    })
}
// 新增
const addData = (val) => {
  formRef.value
    .validate()
    .then(() => {
      let obj = {
        orgId: formState.value.orgId,
        inspectionDate: formState.value.inspectionDate,
        inspector: formState.value.inspector,
        formulatingDepartment: formState.value.formulatingDepartment,
        formulator: formState.value.formulator,
        status: val == '0' ? 0 : 1,
      }
      safetyProductionApi.safeStorageAdd(obj).then((res) => {
        colosData()
      })
    })
    .catch((error) => {
      message.warning('请填写完善')
      console.log('error', error)
    })
}
// 编辑
const editData = (val) => {
  formRef.value
    .validate()
    .then(() => {
      let obj = {
        id: props.dataObj.id,
        orgId: formState.value.orgId,
        inspectionDate: formState.value.inspectionDate,
        inspector: formState.value.inspector,
        formulatingDepartment: formState.value.formulatingDepartment,
        formulator: formState.value.formulator,
        status: val == '0' ? 0 : 1,
      }
      safetyProductionApi.safeStorageEdit(obj).then((res) => {
        colosData()
      })
    })
    .catch((error) => {
      message.warning('请填写完善')
      console.log('error', error)
    })
}
// 库点调用数据
const getOrgInfoData = () => {
  safetyProductionApi.safeStorageGetOrgInfo().then((res) => {
    enterpriseList.value = res
  })
}
// 用于查看调用
const detailData = (id) => {
  safetyProductionApi.safeStorageDetail({ id: id }).then((res) => {
    formState.value = { ...res }
  })
}
// 取消按钮
const colosData = () => {
  visible.value = false
  emit('isVisible', false)
  formRef.value.resetFields() //resetFields()函数是组件库提供的
  formState.value = {}
}
// 监听点击事件更新数据 
watch(
  () => props.dataObj,
  async (newValue, oldvalue) => {
    await nextTick()
    titleText.value = newValue.titleText
    visible.value = newValue.visible
    showLock.value = newValue.showLock
    isTypeData.value = newValue.isType
    // isType字段用于查看接口
    getOrgInfoData()
    if (newValue.isType == '2' || newValue.isType == '3') {
      detailData(newValue.id)
    } else {
      // 用于新增时清空表格数据
      formState.value = {}
    }
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
.ant-input {
  width: 80%;
}

/* 针对 a-form-item 的 label 应用样式 */
::v-deep .ant-form-item-label {
  width: 160px;
  text-align: right;
}

::v-deep .ant-form-item-control-input {
  width: 100%;
}

/deep/.ant-input-number-input {
  text-align: left !important;
}

.title-box {
  width: 66%;
}

.select-box {
  width: 66%;
}

.ant-picker {
  width: 66%;
}

.from-input {
  width: 101.4%;
}

::v-deep.ant-modal-footer {
  display: none !important;
}

.text-box {
  margin: 0 auto;
  width: 86%;
}

.btn-box {
  text-align: center;
}

.btn-type {
  background-color: #22ce8d;
  color: #fff;
}
</style>
