<template>
  <div>
    <a-modal v-model:visible="visible" width="84%" :closable="false" :maskClosable="false" :title="titleText"
      :footer="null">
      <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="8"><a-form-item label="库点名称">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.orgName" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="负责人">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.personInCharge" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="市州">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.zcdzCityName" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="事故类型">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.sglxName" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="发生时间">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.occurrenceTime" />
            </a-form-item></a-col>
          <a-col :span="8">
            <a-form-item label="发生地点">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.location" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="损失情况">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.lossSituation" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="伤亡人数">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.casualtyCount" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="事故原因">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.accidentCause" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="调查结果">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.investigationResult" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="调查时间">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.investigationTime" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="调查人">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.investigator" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="事故等级">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.sgdjName" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="处置时间">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.disposalTime" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="处置人">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.disposalPerson" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="24"><a-form-item label="处置情况">
              <a-textarea :disabled="true" class="text-box" v-model:value="formState.disposalSituation" :rows="8"
                placeholder="请输入" />
            </a-form-item></a-col>
        </a-row>
      </a-form>
      <div class="btn-box">
        <a-button @click="handleCancel">关闭</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import safetyProductionApi from '@/api/security.info/riskLedgerApi.js'
const props = defineProps({
  dataObj: {
    type: Object,
    default: () => { }
  }
})
const formState = ref({})
const isTypeData = ref('')
const showLock = ref(false)
const visible = ref(false)
const titleText = ref('')
const emit = defineEmits(['isVisible'])
// 取消按钮
const handleCancel = () => {
  visible.value = false
  emit('isVisible', false)
  formState.value = {}
}
// 用于查看调用
const detailData = (id) => {
  safetyProductionApi.ssriskaccidentDetail({ id: id }).then((res) => {
    formState.value = { ...res }
  })
}
// 监听点击事件更新数据
watch(
  () => props.dataObj,
  async (newValue, oldvalue) => {
    await nextTick()
    titleText.value = newValue.titleText
    visible.value = newValue.visible
    showLock.value = newValue.showLock
    isTypeData.value = newValue.isType
    detailData(newValue.id)
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
.ant-input {
  width: 86%;
}

/* 针对 a-form-item 的 label 应用样式 */
::v-deep .ant-form-item-label {
  width: 160px;
  height: 42px;
  text-align: right;
  white-space: normal;
  /* 允许文本自动换行 */
  word-break: break-all;
  /* 在单词内换行 */
}

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

.title-box {
  width: 91.7%;
}

.ant-picker {
  width: 86%;
}

.ant-select {
  width: 80% !important;
}

.from-input {
  width: 101.4%;
}

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

.text-box {
  width: 96.6%;
}

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

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