<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.storehouseName" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="货位名称">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.warehouseName" />
            </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.inspector" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="保管员">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.keeper" />
            </a-form-item></a-col>
          <a-col :span="8">
            <a-form-item label="检查日期">
              <a-date-picker :disabled="true" v-model:value="formState['inspectionDate']"
                value-format="YYYY-MM-DD 00:00:00" />
            </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.grainTemperature" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="仓温℃">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.storeroomTemperature" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="气温℃">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.ambientTemperature" />
            </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.storeroomHumidity" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="仓外湿%">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.ambientHumidity" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="是否超限装粮">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.isOverloaded" />
            </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.grainHeight" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="仓容">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.storageCapacity" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="粮仓使用年限">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.usageYears" />
            </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.isLeakage" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="墙壁有无裂缝">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.isWallCrack" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="地面有无裂缝">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.isFloorCrack" />
            </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.isGroundSubmersion" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="门窗有无损坏">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.isDoorWindowDamage" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="附属设施是否完好">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.isAccessoryFacilityIntact" />
            </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.isPaintPeel" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="螺栓,垫片是否松动">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.isBoltLoose" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="支座部分有无异常">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.isSupportAbnormal" />
            </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.isWeldSeamIntact" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="罐顶盖，人孔，测量孔，通气孔是否正常">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.isTankCoverNormal" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="垫片是否完好">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.isGasketIntact" />
            </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.isValveSealReliable" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item ref="uploadDataList" label="附件">
              <UPLoadData :beforeUpload="beforeUpload" :disabled="true" listType="picture-card" multiple
                v-model:urls="formState.images" :change="changeUpload" />
            </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/safetyProductionApi.js'
import global from '@/api/basic.info/global'
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 formRef = ref(null)
const emit = defineEmits(['isVisible'])
// 取消按钮
const handleCancel = () => {
  visible.value = false
  emit('isVisible', false)
  formRef.value.resetFields() //resetFields()函数是组件库提供的
  formState.value = {}
}

// 文件预览方式
function changeUpload(ev) {
  return global.uploadFile(ev).then((reg) => {
    return reg
  })
}
const uploadDataList = ref(null)
function beforeUpload() {
  uploadDataList.value.clearValidate()
}
// 用于查看调用
const detailData = (id) => {
  safetyProductionApi.safeStorageResultDetail({ ssSafeProductInspectionId: id }).then((res) => {
    formState.value = {
      orgName: res.orgName,
      storehouseName: res.storehouseName,
      warehouseName: res.warehouseName,
      inspector: res.inspector,
      keeper: res.keeper,
      inspectionDate: res.inspectionDate,
      grainTemperature: res.grainTemperature,
      storeroomTemperature: res.storeroomTemperature,
      ambientTemperature: res.ambientTemperature,
      storeroomHumidity: res.storeroomHumidity,
      ambientHumidity: res.ambientHumidity,
      isOverloaded: res.isOverloaded == 0 ? '否' : '是',
      grainHeight: res.grainHeight,
      storageCapacity: res.storageCapacity,
      usageYears: res.usageYears,
      isLeakage: res.isLeakage == 0 ? '否' : '是',
      isWallCrack: res.isWallCrack == 0 ? '否' : '是',
      isFloorCrack: res.isFloorCrack == 0 ? '否' : '是',
      isGroundSubmersion: res.isGroundSubmersion == 0 ? '否' : '是',
      isDoorWindowDamage: res.isDoorWindowDamage == 0 ? '否' : '是',
      isAccessoryFacilityIntact: res.isAccessoryFacilityIntact == 0 ? '否' : '是',
      isPaintPeel: res.isPaintPeel == 0 ? '否' : '是',
      isBoltLoose: res.isBoltLoose == 0 ? '否' : '是',
      isSupportAbnormal: res.isSupportAbnormal == 0 ? '否' : '是',
      isWeldSeamIntact: res.isWeldSeamIntact == 0 ? '否' : '是',
      isTankCoverNormal: res.isTankCoverNormal == 0 ? '否' : '是',
      isGasketIntact: res.isGasketIntact == 0 ? '否' : '是',
      isValveSealReliable: res.isValveSealReliable == 0 ? '否' : '是',
    }
    if (res.images) {
      formState.value.images = []
      formState.value.images = res.images.split(',') || ''
    }
  })
}
// 监听点击事件更新数据
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: 94.6%;
}

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

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