<template>
  <div>
    <div class="titleBox pl10">
      <div class="title">详情</div>
    </div>
    <!-- 表格 -->
    <div class="box-a">
      <div class="tabBox2">
        <div style="display: flex;margin: 10px;justify-content: end;">
          <el-button type="primary" @click="Close">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </div>
        <div style="height: calc(100vh - 270px);">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloadings"
            :isSelect="false" :isSort="false" style="width: 100%;">
            <template #type="{ row }">
              <dict-tag :options="D_BZ_FXLX" :value="row.type" :tag="false" />
            </template>
            <template #risklevel="{ row }">
              <span v-if="row.risklevel == '4'" class="fxdjspan reds">重大风险</span>
              <span v-else-if="row.risklevel == '3'" class="fxdjspan orgs">较大风险</span>
              <span v-else-if="row.risklevel == '2'" class="fxdjspan blus">一般风险</span>
              <span v-else-if="row.risklevel == '1'" class="fxdjspan gres">低风险</span>
              <span v-else>待定</span>
            </template>
            <template #consequense="{ row }">
              <dict-tag :options="D_TB_KNCSDHG" :value="row.consequense" :tag="true" />
            </template>
            <!-- <template #controls="{ row }">
              <dict-tag :options="D_TB_WXYKZCS" :value="row.controls" :tag="true" />
            </template> -->
            <template #actions="scope">
              <span class="operesee" @click="handlehxq(scope.row)">
                <el-icon>
                  <Compass />
                </el-icon>详情</span>
              <span class="operedit" @click="handlehz(scope.row)" v-if="props.state == 1"><el-icon>
                  <EditPen />
                </el-icon>修改</span>
              <el-popconfirm v-if="props.state == 1" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                title="确定要删除?" @confirm="deldete(scope.row)">
                <template #reference>
                  <span span class="operdel" size="small"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-popconfirm>
            </template>
          </MOSTY.Table>
        </div>
      </div>
    </div>
    <div v-if="showhbsxq" class="dialog-box">
      <Bsxqinfo @close="changeclose" :idlist="idlists" :saveBtnShow="savebtn" :type="'ry'"
        :identifyEntityId="props.identifyEntityId" />
    </div>

  </div>
</template>

<script setup>
// 引入
import { defineProps, onMounted, getCurrentInstance, defineEmits, ref } from 'vue'
import { ElMessage } from "element-plus";
import { getApi, postApi, deleteApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import Bsxqinfo from './bsxqinfo.vue';
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const { D_TB_KNCSDHG, D_TB_WXYKZCS, D_BZ_FXLX } = proxy.$dict("D_TB_KNCSDHG", "D_TB_WXYKZCS", "D_BZ_FXLX");
const tableHeight = ref()
const elform = ref();
const loading = ref(false);
const showhbsxq = ref(false)
const showbtn = ref(false);
const titlename = ref('');
const tableData = ref([])
const tableloadings = ref(false)
const savebtn = ref(false)
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  identifyEntityId: String,
  state: String,
  idlist: {
    type: Object,
    default: {}

  }
});
const tableColumn = ref([
  {
    title: "人员",
    prop: "username",
    sortable: true
  },
  {
    title: "风险类型",
    prop: "type",
    slot: true,
    sortable: true
  },
  {
    title: "风险等级",
    prop: "risklevel",
    sortable: true,
    slot: true
  },
  {
    title: "可能产生的后果",
    prop: "consequense",
    sortable: true,
    slot: true
  },
  // {
  //   title: "控制措施",
  //   prop: "controls",
  //   sortable: true,
  //   slot: true
  // },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const idlists = ref({
  planid: props.idlist.planid,
})
onMounted(() => {

  tabHeightFn();
  getpepoList();
  // getfrom()

})
//	部门汇总-汇总-获取人员辨识列表
function getpepoList() {
  getApi(props.idlist, '/mosty-jcgl/dangerPlanlist/getPeoplelist').then((res) => {
    tableData.value = res
    tableData.value.forEach((item) => {
      try {
        item.consequense = item.consequense.split(',')
        // item.controls = item.controls.split(',')
      } catch (error) {

      }
    })

  })
}

//修改
function handlehz(row) {
  idlists.value.dangerid = row.dangerid;
  idlists.value.bmbsid = row.id
  savebtn.value = true
  showhbsxq.value = true
}
//详情
function handlehxq(row) {
  idlists.value.dangerid = row.dangerid;
  idlists.value.peoplelistid = row.id
  idlists.value.bmbsid = row.deplistid


  savebtn.value = false
  showhbsxq.value = true

}
//删除
function deldete(row) {
  deleteApi({}, `/mosty-jcgl/dangerPlanlist/delPeopleList/${row.id}`).then((res) => {
    proxy.$message.success("删除成功");
    getpepoList()
  })
}
function changeclose() {
  showhbsxq.value = false
  getpepoList()
}
//返回
function Close() {
  emits("close");
}

// 方法
const tabHeightFn = () => {
  tableHeight.value =
    window.innerHeight - 100 - 57 - 60 + 'px'
}

</script>

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

.box-a {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.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>