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

        <div style="margin:0px 10px;width: calc(100% - 50px);">
          <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_BZ_KNFXHGLX" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="现有措施:" prop="existingMeasures" style="width: 100%">
              <el-input v-model="listQuery.existingMeasures" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
                show-word-limit maxlength="500" />
            </el-form-item>
            <el-form-item label="强化措施:" prop="strengtheningMeasures" style="width: 100%">
              <el-input v-model="listQuery.strengtheningMeasures" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
                show-word-limit maxlength="500" />
            </el-form-item>
            <!-- <el-form-item label="控制措施:" prop="controls" style="width: 100%">
              <el-select v-model="listQuery.controls" multiple style="width: 100%">
                <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>
        </div>


      </div>
      <MOSTY.Assort :title="'管控措施'" />
      <div style="height: 500px;padding: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>
    <div style="display: flex;margin: 10px;justify-content: center;align-items: center;height: 32px;">
      <el-button type="primary" @click="saveFrom" v-if="props.saveBtnShow">
        <span>保存</span>
      </el-button>
      <el-button type="primary" @click="Close">
        <span>关闭弹窗</span>
      </el-button>
    </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 InnerDialog from './kzcsk/innerDialog.vue';
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { isString } from '@/utils/tools.js';
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const { D_BZ_KNFXHGLX, D_BZ_JCBZPL, D_BZ_FXLX, D_BZ_FXDJ, D_DBZ_YHDJ, NSFBXSCTP, NYHBZ } = proxy.$dict("D_BZ_KNFXHGLX",
  "D_BZ_JCBZPL", "D_BZ_FXLX", "D_BZ_FXDJ", "D_DBZ_YHDJ", "NSFBXSCTP", "NYHBZ");
const elform = ref();
const peoplelistid = ref(null);
const listQuery = ref({});
const savebtnshow = ref(false)
const editIndex = ref(null);
const obj = ref(null)
const title = ref('')
const innerShow = ref(false)
const data = reactive({
  editObj: {},
});
const tableData2 = ref([])
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  identifyEntityId: String,
  type: String,
  idlist: {
    type: Object,
    default: {}
  },
  listpage: Object
});
const listQuery2 = ref({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
});
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
  }
])
onMounted(() => {
  listQuery2.value.bmbsid = props.idlist.bmbsid

  getkzcslist()
  getfrom()

})

//对接 	部门汇总-汇总-获取左侧部门辨识详情
function getfrom() {
  if (props.type == 'bm') {
    getApi({ bmbsid: props.idlist.bmbsid }, '/mosty-jcgl/dangerPlanlist/getBmbmInfo').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)
      } else {
        // listQuery.value = tableData.value[0];
        // peoplelistid.value = tableData.value[0].id
      }

    })
  } else {
    getApi({ peoplelistid: props.idlist.peoplelistid }, '/mosty-jcgl/dangerPlanlist/getPeopleListInfo').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.checkrate && res.checkrate != 'none' ? res.checkrate + '_' + res.checkratecount : null
    }
  })
}
function getGkcsArr(id) {
  return new Promise((resolve, reject) => {
    getApi({}, `/mosty-jcgl/danger2Baseinfo/getDanger2BaseinfoById/${id}`).then(
      (res) => {
        res.consequense = res.consequense ? res.consequense.split(",") : [];
        const tableArr = res.list ? res.list : []
        resolve(tableArr)
      }
    )
  })

}
//获取控制措施
function getkzcslist() {
  getGkcsArr(props.idlist.dangerid).then(res => {
    tableData2.value = res
  })

  // 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
}
//保存
function saveFrom() {

  if (props.type == 'bm') {
    let data = {
      bmbsid: props.idlist.bmbsid,
      consequense: listQuery.value.consequense ? listQuery.value.consequense.toString() : '',
      checkrate: listQuery.value.jcpl ? listQuery.value.jcpl.split('_')[0] : null,
      checkratecount: listQuery.value.jcpl ? listQuery.value.jcpl.split('_')[1] : null,
      // controls: listQuery.value.controls ? listQuery.value.controls.toString() : '',
      dangerDescription: listQuery.value.dangerDescription,
      identifyEntityId: props.identifyEntityId,
      peoplelistid: peoplelistid.value,
      type: listQuery.value.type,
      risklevel: listQuery.value.risklevel
    }
    postApi(data, '/mosty-jcgl/dangerPlanlist/hzSave').then(res => {
      ElMessage.success("保存成功");
      emits("close", props.listpage);
    }).finally(() => {
      listQuery.value.consequense = listQuery.value.consequense && isString(listQuery.value.consequense) ? listQuery.value.consequense.split(',') : listQuery.value.consequense
      // listQuery.value.controls = listQuery.value.controls&&isString(listQuery.value.controls) ? listQuery.value.controls.split(',') : null
    })
  } else {
    let data = {
      objid: listQuery.value.objid,
      planid: listQuery.value.planid,
      baseinfoid: listQuery.value.dangerid,
      consequense: listQuery.value.consequense ? listQuery.value.consequense.toString() : '',
      // controls: listQuery.value.controls ? listQuery.value.controls.toString() : '',
      dangerDescription: listQuery.value.dangerDescription,
      peoplelistid: listQuery.value.id,
      type: listQuery.value.type,
      risklevel: listQuery.value.risklevel
    }
    postApi(data, '/mosty-jcgl/dangerPlanlist/addOrEditDanger').then(res => {
      ElMessage.success("保存成功");
      emits("close", props.listpage);
    }).finally(() => {
      listQuery.value.consequense = listQuery.value.consequense && isString(listQuery.value.consequense) ? listQuery.value.consequense.split(',') : listQuery.value.consequense
      // listQuery.value.controls = listQuery.value.controls&&isString(listQuery.value.controls) ? listQuery.value.controls.split(',') : null
    })
  }
}
// 页码改变触发
const handleCurrentChange = (currentPage) => {
  listQuery2.value.pageCurrent = currentPage;
  getkzcslist();
};
// pageSize 改变触发
const handleSizeChange = (currentSize) => {
  listQuery2.value.pageSize = currentSize;
  getkzcslist();
};
//返回
function Close() {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close", props.listpage);
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close", props.listpage);
  }

}



</script>

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

.boxbage {
  height: calc(100vh - 230px);
  overflow-y: auto;
  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>
