<template>
  <div>
    <MOSTY.FromPage :title="'风险分级管控详情'" @closeDialog="handleBack">
      <template #content>
        <MOSTY.Assort :title="'基础信息'" />
        <div class="content">
          <el-form :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" disabled
            style="display: block;" inline="true">
            <el-form-item label="编号：">
              <el-input v-model="ruleForm.shortid" clearable style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item label="辨识时间：">
              <el-date-picker v-model="ruleForm.identifytime"  format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY-MM-DD HH:mm:ss" style="width: 260px;" />
            </el-form-item>
            <el-form-item label="所属部门：">
              <el-input v-model="ruleForm.depname" clearable style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item label="场所类型：">
              <el-select v-model="ruleForm.sitetype" style="width: 260px;">
                <el-option v-for="item in D_TB_CSLX" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="辨识人员：">
              <el-input v-model="ruleForm.username" clearable style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item label="风险类型：">
              <el-select v-model="ruleForm.type" style="width: 260px;">
                <el-option v-for="item in D_BZ_FXLX" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="检查频率:" prop="jcpl">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_JCBZPL" v-model="ruleForm.jcpl" style="width: 260px"
                selectType="select" />
            </el-form-item>
            <el-form-item label="辨识区域：">
              <el-input v-model="ruleForm.objname" clearable style="width: 260px;">></el-input>
            </el-form-item>
            <el-form-item label="风险描述：">
              <el-input v-model="ruleForm.description" type="textarea" style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item label="可能产生的后果:">
              <el-select v-model="ruleForm.consequense" multiple style="width: 260px;">>
                <el-option v-for="item in D_BZ_KNFXHGLX" :key="item.value" :label="item.label" multiple
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="S风险严重程度:">
              <el-input v-model="ruleForm.sscore" clearable style="width: 260px;"></el-input>
            </el-form-item>
        
            <el-form-item label="现有控制措施:">
              <el-input v-model="ruleForm.existingControls" type="textarea" style="width: 260px;" />
            </el-form-item>
            <el-form-item label="可能存在的风险隐患:">
              <el-input v-model="ruleForm.potentialRisks" type="textarea" style="width: 260px;" />
            </el-form-item>
            <el-form-item label="管控等级:">
              <el-input v-model="ruleForm.controlLevel" clearable style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item label="是否保持原措施:">
              <el-radio-group v-model="ruleForm.keepOriginal">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="新增措施:">
              <el-input v-model="ruleForm.newControls" type="textarea" style="width: 700px;" />
            </el-form-item>
            <el-form-item label="计划完成时间:">
              <el-date-picker v-model="ruleForm.planCompletionTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY-MM-DD HH:mm:ss" style="width: 260px;" />
            </el-form-item>
            <el-form-item label="风险等级:">
              <span v-if="ruleForm.risklevel == '4'" class="fxdjspan reds">重大风险</span>
              <span v-else-if="ruleForm.risklevel == '3'" class="fxdjspan orgs">较大风险</span>
              <span v-else-if="ruleForm.risklevel == '2'" class="fxdjspan blus">一般风险</span>
              <span v-else-if="ruleForm.risklevel == '1'" class="fxdjspan gres">低风险</span>
              <span v-else class="fxdjspan gray">&nbsp;</span>
            </el-form-item>
          </el-form>
        </div>

        <MOSTY.Assort :title="'管控措施'" />
        <div style="height: 40vh;margin:0 10px;">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData2" :isSelect="false" :isSort="false"
            :tableHeight="'100%'">
            <template #yhLv="{ row }">
              <dict-tag :options="D_DBZ_YHDJ" :value="row.yhLv" :tag="false"></dict-tag>
            </template>
            <template #yhFlag="{ row }">
              <dict-tag :options="NYHBZ" :value="row.yhFlag" :tag="false"></dict-tag>
            </template>
            <template #isPic="{ row }">
              <dict-tag :options="NSFBXSCTP" :value="row.isPic" :tag="false"></dict-tag>
            </template>
            <template #actions="scope">
              <span class="operesee" @click="toAdd('see', scope.row, scope.$index)"><el-icon>
                  <View />
                </el-icon>查看</span>
            </template>
          </MOSTY.Table>
          <div class="fenye">
            <MOSTY.Pages :pageConfiger="listQuery2" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="handleBack">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
    </MOSTY.FromPage>
  </div>
</template>

<script setup>
// 引入
import { defineEmits, ref, defineProps, getCurrentInstance, onMounted, reactive } from 'vue';
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";

const emits = defineEmits(['close'])
const { proxy } = getCurrentInstance();
const { D_TB_CSLX, D_BZ_KNFXHGLX, D_BZ_JCBZPL, D_BZ_FXLX, D_DBZ_YHDJ, NSFBXSCTP, NYHBZ, D_BZ_FXDJS } =
  proxy.$dict("D_TB_CSLX", "D_BZ_KNFXHGLX", "D_BZ_JCBZPL", "D_BZ_FXLX", "D_DBZ_YHDJ", "NSFBXSCTP", "NYHBZ", "D_BZ_FXDJS");

// 表单数据
const ruleForm = ref({
  shortid: '',
  identifytime: '',
  depname: '',
  sitetype: '',
  username: '',
  type: '',
  jcpl: '',
  objname: '',
  description: '', // 风险描述
  consequense: [], // 可能产生的后果
  sscore: '', // S风险严重程度
  inherentRiskLevel: '', // 固有风险等级
  existingControls: '', // 现有控制措施
  potentialRisks: '', // 可能存在的风险隐患
  currentRiskLevel: '', // 现状风险等级
  controlLevel: '', // 管控等级
  keepOriginal: false, // 是否保持原措施
  newControls: '', // 新增措施
  planCompletionTime: '', // 计划完成时间
  risklevel: '' // 风险等级
})

const listQuery2 = ref({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
});

const savebtnshow = ref(false)
const innerShow = ref(false)
const data = reactive({
  editObj: {},
});
const title = ref('')

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
});

const tableColumns = reactive([
  {
    title: "管控措施内容",
    prop: "itemName"
  },
  {
    title: "隐患等级",
    prop: "yhLv",
    slot: true
  },
  {
    title: "隐患说明",
    prop: "yhNote",
  },
  {
    title: "标红项",
    prop: "yhFlag",
    slot: true
  },
  {
    title: "是否必须上传图片",
    prop: "isPic",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])

const editIndex = ref(null);
const tableData2 = ref([])

onMounted(() => {
  if (props.id) {
    getxqList();
    getkzcslist();
  }
})

// 获取详情数据
function getxqList () {
  getApi({ id: props.id }, '/mosty-jcgl/dangerPlanlist/getDetail').then(res => {
    if (res) {
      ruleForm.value = {
        ...ruleForm.value,
        ...res
      };

      // 处理可能产生的后果（如果是字符串，转换为数组）
      if (res.consequense && typeof res.consequense === 'string') {
        ruleForm.value.consequense = res.consequense.split(',');
      } else if (Array.isArray(res.consequense)) {
        ruleForm.value.consequense = res.consequense;
      }

      // 处理检查频率
      if (res.checkrate && res.checkrate !== 'none') {
        ruleForm.value.jcpl = res.checkrate + '_' + (res.checkratecount || '');
      }
    }
  }).catch(err => {
    console.error('获取详情失败:', err);
  })
}

// 获取控制措施列表
function getkzcslist () {
  const params = {
    ...listQuery2.value,
    bmbsid: props.id
  };

  getApi(params, '/mosty-jcgl/dangerPlanlist/getControlsList').then(res => {
    tableData2.value = res.records || [];
    listQuery2.value.total = res.total || 0;
  })
}

// 查看控制措施详情
function toAdd (type, row, index) {
  data.editObj = row;
  editIndex.value = index;
  title.value = '控制措施详情';
  savebtnshow.value = false;
  innerShow.value = true;
}

// 关闭控制措施弹窗
function changeVi () {
  innerShow.value = false;
}

// 关闭详情页面
const handleBack = () => {
  emits('close', false);
}

// 页码改变触发
const handleCurrentChange = (currentPage) => {
  listQuery2.value.pageCurrent = currentPage;
  getkzcslist();
};

// pageSize 改变触发
const handleSizeChange = (currentSize) => {
  listQuery2.value.pageSize = currentSize;
  getkzcslist();
};
</script>

<style lang="scss" scoped>
.titleBox {
  align-items: center;
  padding: 0 40px;
}

.content {
  // height: calc(100vh - 600px);
  overflow: auto;
  margin: 0 10px;
}

.fxdjspan {
  border: 1px solid var(--el-color-primary);
  display: inline-block;
  width: 260px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 5px;
  border-radius: 5px;
  color: #fff !important;
}

.reds {
  background-color: #e80000;
}

.orgs {
  background-color: #ff8040;
}

.blus {
  background-color: #e2d101;
}

.gres {
  background-color: #0080ff;
}

.gray {
  background-color: rgb(211, 219, 221);
}
</style>
