<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-select class="select-box" @change="warehouseData" :disabled="showLock" v-model:value="formState.orgId"
                style="width: 220px" placeholder="请选择">
                <a-select-option v-for="item in warehouseList" :key="item.orgId" :value="item.orgId">
                  {{ item.orgName }}
                </a-select-option>
              </a-select>
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="负责人">
              <a-input placeholder="请输入" autocomplete="off" :disabled="showLock"
                v-model:value="formState.personInCharge" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="所属市州">
              <a-select class="select-box" :disabled="showLock" v-model:value="formState.zcdzCity" style="width: 220px"
                placeholder="请选择">
                <a-select-option v-for="item in auditStatus" :key="item.id" :value="item.id">
                  {{ item.dictLabel }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="事故类型">
              <a-select class="select-box" :disabled="showLock" v-model:value="formState.accidentType"
                style="width: 220px" placeholder="请选择">
                <a-select-option v-for="item in accidentTypeList" :key="item.value" :value="item.value">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="发生时间">
              <a-date-picker :disabled="showLock" v-model:value="formState['occurrenceTime']"
                value-format="YYYY-MM-DD 00:00:00" />
            </a-form-item></a-col>
          <a-col :span="8">
            <a-form-item label="发生地点">
              <a-input placeholder="请输入" autocomplete="off" :disabled="showLock" v-model:value="formState.location" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="损失情况">
              <a-input placeholder="请输入" autocomplete="off" :disabled="showLock"
                v-model:value="formState.lossSituation" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="伤亡人数">
              <a-input autocomplete="off" placeholder="请输入" :disabled="showLock"
                v-model:value="formState.casualtyCount" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="事故原因">
              <a-input autocomplete="off" placeholder="请输入" :disabled="showLock"
                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" placeholder="请输入" :disabled="showLock"
                v-model:value="formState.investigationResult" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="调查时间">
              <a-date-picker :disabled="showLock" v-model:value="formState['investigationTime']"
                value-format="YYYY-MM-DD 00:00:00" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="调查人">
              <a-input autocomplete="off" placeholder="请输入" :disabled="showLock" v-model:value="formState.investigator" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="事故等级">
              <a-select class="select-box" :disabled="showLock" v-model:value="formState.accidentLevel"
                style="width: 220px" placeholder="请选择">
                <a-select-option v-for="item in accidentLevelList" :key="item.value" :value="item.value">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="处置时间">
              <a-date-picker :disabled="showLock" v-model:value="formState['disposalTime']"
                value-format="YYYY-MM-DD 00:00:00" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="处置人">
              <a-input autocomplete="off" placeholder="请输入" :disabled="showLock"
                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="showLock" 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 v-if="dataObj.isType !== '3'" style="margin-right: 16px" type="primary"
          @click="handleOk()">保存</a-button>
        <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 formRef = ref(null)
const formState = ref({})
const isTypeData = ref('')
const showLock = ref(false)
const visible = ref(false)
const titleText = ref('')
const emit = defineEmits(['isVisible'])

const auditStatus = ref([])
const warehouseList = ref([])
const accidentTypeList = ref([])
const accidentLevelList = ref([])
// 取消按钮
const handleCancel = () => {
  visible.value = false
  emit('isVisible', false)
  formState.value = {}
}
// 用于查看调用
const detailData = (id) => {
  safetyProductionApi.ssriskaccidentDetail({ id: id }).then((res) => {
    formState.value = { ...res }
  })
}
// 市州下拉框数据
const getSearchData = () => {
  safetyProductionApi.recognizetParentId({ parentId: '1781535965870915586' }).then((res) => {
    auditStatus.value = res
  })
}
// 库点调用数据
const getOrgInfoData = () => {
  safetyProductionApi.safeStorageGetOrgInfo().then((res) => {
    accidentTypeList.value = [
      {
        name: '熏蒸事故',
        value: 1
      },
      {
        name: '火灾事故',
        value: 2
      },
      {
        name: '烘干事故',
        value: 3
      },
      {
        name: '高空事故',
        value: 4
      },
      {
        name: '用电事故',
        value: 5
      },
      {
        name: '车辆事故',
        value: 6
      },
      {
        name: '吊装事故',
        value: 7
      },
      {
        name: '水灾事故',
        value: 8
      },
    ]
    accidentLevelList.value = [{
      name: '一级',
      value: 1
    }, {
      name: '二级',
      value: 2
    }, {
      name: '三级',
      value: 3
    }]
    warehouseList.value = res
  })
}
// 库区change事件
const warehouseData = (val) => {
  warehouseList.value.forEach(i => {
    if (i.orgId == val) {
      formState.value.unitInfoId = i.unitInfoId
    }
  })
}
// 确定按钮
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      // isTypeData === '1' 新增  2是编辑 3是查看
      if (isTypeData.value === '1') return addData()
      if (isTypeData.value === '2') return editData()
    })
    .catch((error) => {
      message.warning('请填写完善')
      console.log('error', error)
    })
}
// 新增
const addData = () => {
  formRef.value
    .validate()
    .then(() => {
      let obj = { ...formState.value, status: 0 }
      safetyProductionApi.ssriskaccidentAdd(obj).then((res) => {
        handleCancel()
      })
    })
    .catch((error) => {
      message.warning('请填写完善')
      console.log('error', error)
    })
}
// 编辑
const editData = () => {
  formRef.value
    .validate()
    .then(() => {
      let obj = { ...formState.value, status: 0 }
      safetyProductionApi.ssriskaccidentedit(obj).then((res) => {
        handleCancel()
      })
    })
    .catch((error) => {
      message.warning('请填写完善')
      console.log('error', error)
    })
}
// 监听点击事件更新数据
watch(
  () => props.dataObj,
  async (newValue, oldvalue) => {
    await nextTick()
    titleText.value = newValue.titleText
    visible.value = newValue.visible
    showLock.value = newValue.showLock
    isTypeData.value = newValue.isType
    getOrgInfoData(), getSearchData()
    if (newValue.isType == '2' || newValue.isType == '3') {
      detailData(newValue.id)
    } else {
      // 用于新增时清空表格数据
      formState.value = {}
    }
  },
  { 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: 86% !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>
