<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" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY-MM-DD HH:mm:ss" placeholder="Select date and time" 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="所属场所：" v-if="ruleForm.siteid">
              <el-input v-model="ruleForm.sitename" clearable style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item label="场所类型：" v-if="ruleForm.sitetype">
              <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" v-if='ruleForm.jcpl'>
                <MOSTY.DictRidioAndSelect :dictData="D_BZ_JCBZPL" v-model="ruleForm.jcpl" style="width: 260px"
                  selectType="select" placeholder='请选择检查频率' />
              </el-form-item>
               <el-form-item label="辨识区域：">
              <el-input v-model="ruleForm.objname" clearable  style="width: 700px;"></el-input>
            </el-form-item>
            <el-form-item label="危险源描述：">
              <el-input v-model="ruleForm.dangerDescription" type="textarea" style="width: 700px;" />
            </el-form-item>
            <el-form-item label="可能产生的后果:">
              <el-select v-model="ruleForm.consequense" multiple style="width: 700px;">
                <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="控制措施:">
              <el-select v-model="ruleForm.controls" multiple style="width: 705px">
                <el-option v-for="item in D_TB_WXYKZCS" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item> -->
             <el-form-item v-if=" ruleForm.pjfs == '01'" label="L:" prop="pjlPoint" >
            <el-select v-model=" ruleForm.pjlPoint" style="width: 700px">
              <el-option v-for="item in D_TB_LECD_L" :key="item.value" :label="item.label" :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if=" ruleForm.pjfs == '01'" label="E:" prop="pjePoint" >
            <el-select v-model=" ruleForm.pjePoint" style="width: 700px">
              <el-option v-for="item in D_TB_LECD_E" :key="item" :label="item.label" :value="item.value"
               ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if=" ruleForm.pjfs == '01'" label="C:" prop="pjcPoint" >
            <el-select v-model=" ruleForm.pjcPoint" style="width: 700px">
              <el-option v-for="item in D_TB_LECD_C" :key="item" :label="item.label" :value="item.value"
          ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if=" ruleForm.pjfs == '01'" label="D:" prop="pjdPoint" >
            <el-input v-model=" ruleForm.pjdPoint" readonly style="width: 260px" />
          </el-form-item>
          <el-form-item v-if=" ruleForm.pjfs == '02'" label="L:" prop="pjlPoint" >
            <el-select v-model=" ruleForm.pjlPoint" style="width: 700px">
              <el-option v-for="item in D_BZ_LSR_L" :key="item.value" :label="item.label" :value="item.value"
             ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if=" ruleForm.pjfs == '02'" label="S:" prop="pjePoint" >
            <el-select v-model=" ruleForm.pjePoint" style="width: 700px">
              <el-option v-for="item in D_BZ_LSR_S" :key="item" :label="item.label" :value="item.value"
           ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if=" ruleForm.pjfs == '02'" label="R:" prop="pjdPoint" >
            <el-input v-model=" ruleForm.pjdPoint" readonly 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>
<InnerDialog v-if="innerShow" :title="title" :innerShow="innerShow" @changeVi="changeVi"
         :savebtnshow='savebtnshow' :dict="{ D_DBZ_YHDJ, NSFBXSCTP, NYHBZ }" :formValue="data.editObj" :type='"pjpage"' @getList="getListEvent"/>

  </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";
import InnerDialog from '../kzcsk/innerDialog.vue';
const emits = defineEmits(['close'])
const { proxy } = getCurrentInstance();
const { D_TB_CSLX, D_BZ_KNFXHGLX, D_TB_LECD_L, D_TB_LECD_E, D_TB_LECD_C, D_BZ_JCBZPL,
   D_BZ_LSR_S, D_BZ_LSR_L,D_BZ_FXLX,D_DBZ_YHDJ,NSFBXSCTP,NYHBZ } =
  proxy.$dict("D_TB_CSLX", "D_TB_LECD_L", "D_BZ_KNFXHGLX", "D_TB_LECD_E",
   'D_TB_LECD_C', "D_BZ_JCBZPL", "D_BZ_FXLX", "D_BZ_LSR_S", "D_BZ_LSR_L","D_DBZ_YHDJ","NSFBXSCTP","NYHBZ");
// 表单数据
const ruleForm = ref({
})
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: Object,
    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(() => {
   listQuery2.value.bmbsid= props.id
 getkzcslist()
  getxqList();

})
// 方法
const handleBack = () => {
  emits('close', false)
}

function getxqList() {
  getApi({ bmbsid: props.id }, '/mosty-jcgl/dangerPlanlist/getBmbmInfo').then(res => {
    ruleForm.value = res;
    // ruleForm.value.controls = res.controls.split(',')
    ruleForm.value.consequense = res.consequense.split(',')
      ruleForm.value.pjdPoint =  ruleForm.value.pjdPoint ?  ruleForm.value.pjdPoint.toString() : null
       ruleForm.value.pjlPoint =  ruleForm.value.pjlPoint ?  ruleForm.value.pjlPoint.toString() : null
       ruleForm.value.pjePoint =  ruleForm.value.pjePoint ?  ruleForm.value.pjePoint.toString() : null
       ruleForm.value.pjcPoint =  ruleForm.value.pjcPoint ?  ruleForm.value.pjcPoint.toString() : null
         ruleForm.value.jcpl=res.checkrate&&res.checkrate!='none'?res.checkrate+'_'+res.checkratecount:null
  })
}
//获取控制措施
function getkzcslist() {
  getApi(listQuery2.value,'/mosty-jcgl/dangerPlanlist/getControlsList').then(res=>{
    tableData2.value=res.records
    listQuery2.value.total=res.total
  })
}
//新增控制措施
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 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>
