<template>
  <div>
    <div class="titleBox pl10">
      <div class="title">详情</div>
    </div>
    <!-- 表格 -->
    <div class="boxbage">

      <div class="tabBox2">
        <div style="display: flex;margin: 10px;justify-content: end;">
          <el-button type="primary" @click="saveFrom" v-if="props.saveBtnShow">
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="Close">
            <el-icon>
              <ArrowLeft />
            </el-icon>
            <span>关闭弹窗</span>
          </el-button>
        </div>
        <div style="height: calc(100vh - 677px);margin:0px 10px;">
          <el-form class="mosty-from-wrap" ref="elform" label-width="130px" :model="listQuery" :inline="true"
            :rules="rules" :disabled="!props.saveBtnShow">
            <el-form-item label="风险单元:" style="width: 100%">
              <el-input v-model="listQuery.objname" show-word-limit disabled />
            </el-form-item>
            <el-form-item label="风险类型:" prop="type" style="width: 30%">
              <el-select v-model="listQuery.type" style="width: 100%">
                <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="risklevel" style="width: 30%">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_FXDJ" v-model="listQuery.risklevel" style="width: 100%"
                selectType="select" placeholder='请选择风险单元类型' />
            </el-form-item>
            <el-form-item label="检查频率:" prop="jcpl" style="width:30%" v-if='obj'>
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_JCBZPL" v-model="listQuery.jcpl" style="width:100%"
                selectType="select" placeholder='请选择检查频率' />
            </el-form-item>
            <el-form-item label="风险描述:" style="width: 100%">
              <el-input v-model="listQuery.dangerDescription" type="textarea" :rows="3" show-word-limit
                maxlength="300" />
            </el-form-item>
            <el-form-item label="可能产生的后果:" prop="consequense" style="width: 100%">
              <el-select v-model="listQuery.consequense" multiple style="width: 100%">
                <el-option v-for="item in D_TB_KNCSDHG" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <MOSTY.Assort :title="'管控措施'" />
      <div style="height: calc(100vh - 578px);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>
    </div>
    <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 { defineProps, onMounted, getCurrentInstance, defineEmits, ref, reactive } from 'vue'
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { isString } from '@/utils/tools.js';
import * as MOSTY from "@/components/MyComponents/index";
import InnerDialog from '../kzcsk/innerDialog.vue';
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const { D_TB_KNCSDHG, D_BZ_JCBZPL, D_BZ_FXLX, D_BZ_FXDJ, D_DBZ_YHDJ, NSFBXSCTP, NYHBZ

} = proxy.$dict("D_TB_KNCSDHG", "D_BZ_JCBZPL", "D_BZ_FXLX", "D_BZ_FXDJ", "D_DBZ_YHDJ", 'NSFBXSCTP', 'NYHBZ');
const elform = 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 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([])
const obj = ref(null)
const listQuery = ref({});
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  identifyEntityId: String,
  type: String,
  userid: String,
  idlist: {
    type: Object,
    default: {}

  }
});

onMounted(() => {
  listQuery2.value.bmbsid = props.idlist.id
  getkzcslist()
  getfrom()

})
//获取控制措施
function getkzcslist() {
  getApi(listQuery2.value, '/mosty-jcgl/dangerPlanlist/getControlsList').then(res => {
    tableData2.value = res.records
    listQuery2.value.total = res.total
  })
}
//对接 	部门汇总-汇总-获取左侧部门辨识详情
function getfrom() {
  getApi({}, '/mosty-jcgl/identifyUser/getInfo?id=' + props.idlist.id).then((res) => {
    if (res) {
      try {
        // res.controls = res.controls.split(',')
        res.consequense = res.consequense.split(",")
      } catch (error) {
      }
      listQuery.value = res;
      let objid = res.objid.split(',')[0]
      getobjinfo(objid)
    }

  })
}
//获取obj详情
function getobjinfo(objid) {
  getApi({}, '/mosty-jcgl/obj/getObjByObjId?objid=' + objid).then(res => {
    if (res) {
      obj.value = res
      listQuery.value.jcpl = res && res.checkrate && res.checkrate != 'none' ? res.checkrate + '_' + res.checkratecount : null
    }
  })
}


//新增控制措施
function toAdd(type, row, index) {
  data.editObj = row
  editIndex.value = index;
  title.value = '控制措施详情'
  savebtnshow.value = false
  innerShow.value = true
}
//关闭控制措施弹窗
function changeVi() {
  innerShow.value = false
}
//返回
function Close() {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close", props.userid);
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close", props.userid);
  }

}

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

</script>

<style lang="scss" scoped>
.el-form {
  display: block;
}

.box-a {
  padding: 0 10px;
}

.stebox {
  width: 70%;
}

.el-select {
  width: 150px;
}

.btnBox {
  position: absolute;
  right: 15px;
  top: 9px;

  // display: flex;
  // justify-content: space-between;
  // margin-top: -30px;
}

.bs-title {
  color: red;
  margin: 10px;
}

.leftbox {
  width: 30%;
  margin-right: 40px;
  margin-top: 20px;
}

.tabBox2 {
  width: 100%;
}

.fil-bbox {
  display: flex;

  .font {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    margin: 10px;

    .labs {
      color: #999494;
    }
  }
}

.operates {
  cursor: pointer;
  color: yellowgreen !important;
  display: inline-block;
  width: 40px;
  height: 23px;
  border: 1px solid #000;
  margin: 0 5px;
  background-color: #fff;
}

.operated {
  cursor: pointer;
  color: #fff !important;
  display: inline-block;
  width: 40px;
  height: 23px;
  border: 1px solid #000;
  margin: 0 5px;
  background-color: #f11515;
}

.redfont {
  color: rgb(245, 34, 34) !important;
}

.fxdjspan {
  display: inline-block !important;
  width: 100px;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  color: #fff !important;
}

.reds {
  background-color: #e80000;
}

.orgs {
  background-color: #ff8040;
}

.blus {
  background-color: #e2d101;
}

.gres {
  background-color: #0080ff;
}
</style>