<template>
  <div>
    <div class="bigBox">
      <!-- 组织机构信息 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center;">
            <div style="padding-top: 5px; margin-right: 5px">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>
            <span class="zzjgxx" v-if="iconChange">组织机构信息</span>
          </div>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <div class="treeBox" :style="{ height: treeHeight }">
          <MOSTY.UserTree width="100%" clearable filterable :deptid='props.deptid' @clickUser="clickUser" />
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <div class="headBox" style="justify-content:space-between">
          <div class="title">个人风险辨识清单</div>
          <div class="btnBox" style="display: flex">
            <el-input v-model="listQuery.objname" placeholder="请输入辨识区域进行查询" />
            <el-button type="primary" @click="addUserHander">
              <el-icon>
                <Search />
              </el-icon>
              <span>查询</span>
            </el-button>
            <el-button type="primary" @click="handleBack">
              <el-icon>
                <ArrowLeft />
              </el-icon>
              <span>返回</span>
            </el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div>
          <el-table ref="multipleTableRef" stripe :data="tableData" v-loading="tableloading" :height="tableHeight"
            element-loading-text="数据加载中..." border>
            <el-table-column label="辨识计划" prop="identifyName" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="辨识年份" property="identifyyear" show-overflow-tooltip width="100px">
            </el-table-column>
            <el-table-column label="用户姓名" prop="username" show-overflow-tooltip width="100px">
            </el-table-column>
            <el-table-column label="风险类型" show-overflow-tooltip>
              <template #default="{ row }">
                <dict-tag :options="D_BZ_FXLX" :value="row.type" :tag="false" style="display: flex;" />
              </template>
            </el-table-column>
            <el-table-column label="危险源描述" property="dangerDescription" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="可能产生的后果" prop="consequense" show-overflow-tooltip>
              <template #default="{ row }">
                <div style="display: flex;">
                  <span v-for="it in row.consequense" :key="it" style="margin: 0 2px;display: flex;">
                    <dict-tag :options="D_TB_KNCSDHG" :value="it" :tag="false" style="display: flex;" />
                  </span>,
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="控制措施" property="controls" width="250" show-overflow-tooltip>
              <template #default="{ row }">
                <div style="display: flex;">
                  <span v-for="it in row.controls" :key="it" style="margin: 0 2px;display: flex;">
                    <dict-tag :options="D_TB_WXYKZCS" :value="it" :tag="false" style="display: flex;" />
                  </span>,
                </div>
              </template>
            </el-table-column> -->
            <el-table-column label="来源" property="dangeridSourceType" show-overflow-tooltip width="100px">
              <template #default="{ row }">
                <span v-if="row.dangeridSourceType == 'K'">风险库</span>
                <span v-if="row.dangeridSourceType == 'A'">新增</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px">
              <template #default="scope">
                <span class="operesee" @click="handleSee(scope.row)"> <el-icon>
                    <Compass />
                  </el-icon>查看</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye" :style="{ top: tableHeight }">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div v-if="comprehensiveShow" class="dialog-box">
      <Fxbsqdxq @close="comprehensiveShow = false" :id="id" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, getCurrentInstance, defineEmits } from "vue";
import { getApi, } from "@/api/tobAcco_api.js";
const emits = defineEmits(['close'])
import Fxbsqdxq from "./component/fxbsqdxq.vue";
import * as MOSTY from "@/components/MyComponents/index";
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 props = defineProps({
  planid: {
    type: String,
    default: null
  },
  deptid: {
    type: String,
    default: null
  }
});
// 表格高度
const tableHeight = ref()
const tableloading = ref(false)
const comprehensiveShow = ref(false)
const multipleTableRef = ref(null);
const id = ref(null);
const tableData = ref([]);
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
});
const total = ref(0);
// 树的展开与折叠
const iconChange = ref(true)
const lfBoxWid = ref('300px')
const rgBoxWid = ref('calc(100% - 300px)')
onMounted(() => {
  bigHeightFn();
});

// 方法
const bigHeightFn = () => {
  tableHeight.value = window.innerHeight - 120 - 37 - 100 + 'px'
};
const handleCollapse = () => {
  iconChange.value = !iconChange.value
  if (iconChange.value) {
    lfBoxWid.value = '300px'
    rgBoxWid.value = 'calc(100% - 300px)'
  }
  else {
    lfBoxWid.value = '40px'
    rgBoxWid.value = 'calc(100% - 40px)'
  }
}
//获取人员数据
const clickUser = (val) => {
  listQuery.value.userid = val;
  listQuery.value.pageCurrent = 1;
  getTableData();
}
// 获取表格数据
const getTableData = () => {
  tableloading.value = true
  listQuery.value.planid = props.planid
  getApi(listQuery.value, "/mosty-jcgl/identify/getUserBsPage").then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      tableData.value.forEach((item) => {
        // if (item.controls.includes(",")) {
        //   item.controls = item.controls.split(',')
        // }
      })
      total.value = res.total;
    }
  }).catch(() => {
    tableData.value = []
    tableloading.value = false;
  })
};

//查询
function addUserHander() {
  listQuery.value.pageCurrent = 1
  getTableData();
}

//详情
const handleSee = (row) => {
  id.value = row.deplistid;
  comprehensiveShow.value = true;
}

// 返回
const handleBack = () => {
  emits('close', false)
}
//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};
</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }

    .btnBox {
      justify-content: flex-end;
      margin: 20px;
    }
  }
}
</style>