<template>
  <div>
    <a-modal v-model:visible="visible" width="84%" :closable="false" :maskClosable="false" :title="titleText"
      :footer="null">
      <div class="top-box">
        <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row>
            <a-col :span="8"><a-form-item label="安全风险分析对象">
                <a-input placeholder="请输入" autocomplete="off" :disabled="showLock"
                  v-model:value="formState.riskAnalysisObject" />
              </a-form-item></a-col>
            <a-col :span="8"><a-form-item label="风险评估">
                <a-select class="select-box" :disabled="showLock" v-model:value="formState.riskAssessment"
                  style="width: 220px" placeholder="请选择">
                  <a-select-option v-for="item in riskAssessmentList" :key="item.value" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item></a-col>
            <a-col :span="8"><a-form-item label="安全风险等级">
                <a-select class="select-box" :disabled="showLock" v-model:value="formState.safetyRiskLevel"
                  style="width: 220px" placeholder="请选择">
                  <a-select-option v-for="item in riskLevelList" :key="item.value" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </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.riskAnalysisUnit" :rows="6"
                  placeholder="请输入" />
              </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.hazardSource" :rows="6"
                  placeholder="请输入" />
              </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.riskDescription" :rows="6"
                  placeholder="请输入" />
              </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.riskControlMeasures" :rows="6"
                  placeholder="请输入" />
              </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.riskLevelControl" :rows="6"
                  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>
      </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 riskAssessmentList = ref([
  {
    label: '爆炸',
    value: 1
  },
  {
    label: '火灾',
    value: 2
  },
  {
    label: '重度',
    value: 3
  },
  {
    label: '窒息',
    value: 4
  }
])
const riskLevelList = ref([
  {
    label: '一级',
    value: 1
  },
  {
    label: '二级',
    value: 2
  },
  {
    label: '三级',
    value: 3
  },
  {
    label: '四级',
    value: 4
  },
  {
    label: '五级',
    value: 5
  }
])
// 取消按钮
const handleCancel = () => {
  visible.value = false
  emit('isVisible', false)
  formState.value = {}
}
// 用于查看调用
const detailData = (id) => {
  safetyProductionApi.preventionDetail({ id: id }).then((res) => {
    formState.value = { ...res }
  })
}
// 确定按钮
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.preventionAdd(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.preventionEdit(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
    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 {
  width: 90%;
  background: rgba(190, 190, 190, 0.2);
  color: #d9d9d9;
  padding: 5px;
  font-size: 20px;
  text-align: center;
  box-shadow: 1px 2px 2px #bfbfbf;
  background-clip: padding-box;
  position: absolute;
  left: 4%;
  bottom: 4%;
}

.top-box {
  max-height: 680px;
  overflow-y: auto;
}

.btn-type {
  background-color: #22ce8d;
  color: #fff;
}

/* 为所有滚动条设置样式 */
::-webkit-scrollbar {
  width: 8px;
  /* 设置滚动条的宽度 */
  border-radius: 10px;
}

/* 修改滚动条滑块的样式 */
.a-modal::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f5f5f5;
  /* 设置轨道的背景颜色 */
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  /* 设置滑块的背景颜色 */
  border-radius: 10px !important;
}
</style>
