<template>
  <div>
    <div class="titleBox">
      <div class="stebox">
        <div class="left">
          <el-steps :active="status" align-center>
            <el-step title="辨识" />
            <el-step title="评价" />
            <el-step title="审核">
            </el-step>
            <el-step title="结束">
            </el-step>
          </el-steps>
        </div>
        <div style="color:red;" v-if="shsm">{{ shsm }}</div>
        <div>

        </div>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="Close">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          <span>返回</span>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="box-a">
      <div>
        <div style="display: flex;justify-content: space-between;">
          <div class="bs-title" v-if="listQuery.status == '1' || listQuery.status == '2'">
            *注：只有评价小组成员才能评价，请先创建评价小组
          </div>
          <div class="bs-title" v-if="listQuery.status == '3'">*注：当前评价小组成员：{{ listQuery.teamUsernames }}</div>
          <div class="bs-title" v-if="listQuery.status == '4'">*注：审核中，请相关负责人在手机 上进行审核操作</div>
          <div class="bs-title" v-if="listQuery.status == '5'">*注：风险辨识已经完成</div>
          <div v-if="listQuery.stage == '21'" class="pr10">
            <el-button type="primary" @click="handlehz">
              <span>提交审核</span>
            </el-button>
          </div>
        </div>
        <div style="display: flex;justify-content: space-between;">
             <div style="width: 40%;height: 58vh;">
            <MOSTY.Table :table-columns="tableColumn" :tableData="tableData1" :tableloading="tableloading"
              :isSelect="false" :isSort="false" style="width: 100%;">
              <template #num="{ row }">
                <span>{{ row.orangePointCount + row.redPointCount + row.yellowPointCount
                  + row.bluePointCount }}</span>
              </template>
              <template #stage="{ row }">
                <dict-tag :options="GZ_D_ENT_STAGE" :value="row.stage" :tag="false" />
              </template>
              <template #actions="{ row }">
                <span class="btnpas" v-if="row.stage == '14' && status < 3" @click="ppjxzcz(row)">操作</span>
                  <el-popconfirm v-if="row.stage == '14' && status < 3" confirm-button-text="是" cancel-button-text="否"
                    icon-color="red" title="确定要退回?" @confirm="deldete(row)">
                    <template #reference>
                      <span class="btnpas" size="small">退回</span>
                    </template>
                  </el-popconfirm>
                  <span class="btnpas" v-else @click="handlexg(row)">查看</span>
              </template>
            </MOSTY.Table>
          </div>

          <div class="ww70 ml10 mr10">
            <el-table ref="mulRefs" stripe :data="tableData2" style="width: 100%;height: 55vh !important;"
              @selection-change="handleSelectionChange" :height="tableHeight" border>
              <el-table-column label="风险单位" property="riskcell">
              </el-table-column>
              <el-table-column label="辨识区域" property="objname">
              </el-table-column>
              <el-table-column label="风险描述" property="dangerDescription">
              </el-table-column>
              <el-table-column label="风险等级" property="risklevel">
                <template #default="{ 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>
              </el-table-column>
              <el-table-column property="isPj" label="状态">
                <template #default="{ row }">
                  <span v-if="row.isPj == 'W' && !btnShow" style="color: red !important;">待评价</span>
                  <span v-else-if="row.isPj == 'Y'">已评价</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="{ row }">
                  <span v-if="btnShow">--</span>
                  <span class="operesee" v-if="row.isPj == 'W' && !btnShow" @click="handlepj(row,'pj')"><el-icon>
                      <Compass />
                    </el-icon>评价</span>
                  <span class="operedit" v-if="row.isPj == 'Y' && !btnShow" @click="handlepj(row,'xg')"><el-icon>
                      <EditPen />
                    </el-icon>修改</span>
                  <el-popconfirm v-if="!btnShow" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                    title="确定要删除?" @confirm="deldetebm(row)">
                    <template #reference>
                      <span class="operdel" size="small"><el-icon>
                          <Delete />
                        </el-icon>删除</span>
                    </template>
                  </el-popconfirm>

                </template>
              </el-table-column>
            </el-table>
            <div class="fenye" :style="{ top: tableHeight }">
              <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="listpage.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listpage.pageSize"
                layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showhzpage" class="dialog-box">
      <pJindex @close="changeclose" :idlist="idlist" :tjtype='tjtype'/>
    </div>
  </div>
</template>

<script setup>
// 引入
import { defineProps, watch, onMounted, getCurrentInstance, defineEmits, ref } from 'vue'
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import ChooseDept from "@/components/MyComponents/ChooseDept/Depart.vue";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import pJindex from './pjindex.vue';
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const { GZ_D_ENT_STAGE, D_BZ_FXLX } = proxy.$dict("GZ_D_ENT_STAGE", "D_BZ_FXLX");
const tableHeight = ref()
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  title: String,
  planid: {
    type: String,
    default: null
  },
  orgid: {
    type: String,
    default: null
  },
  spflg: {
    type: String,
    default: null
  }

});
const tableColumn = ref([
  {
    title: "分公司",
    prop: "entityName",
    sortable: true
  },
  {
    title: "风险数量",
    prop: "num",
    slot: true,
    sortable: true
  },
  {
    title: "状态",
    prop: "stage",
    sortable: true,
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const deptId = ref(null)
const showhzpage = ref(false)
const tjtype=ref('pj')
const userids = ref([]);
const loading = ref(false);
const btnShow = ref(false);
const shsm = ref(null)
const status = ref(2)
const total = ref(0)
const zzlx = ref(null);
const infoList = ref([
  { ids: 1, username: '', userid: '', orgidList: [], orgname: '' }
])
const proms = ref({
})
const listQuery = ref({})
const listpage = ref({
  pageCurrent: 1,
  pageSize: 10,
  planid: props.planid
})
const idlist = ref({
  planid: props.planid,
})
const tableData1 = ref([])
const tableData2 = ref([])
const tableloading = ref(false)
const leaderid = ref("");
const singleShow = ref(true); //单选多选


onMounted(() => {
  proms.value.planid = props.planid
  tabHeightFn();
  getpageDate()


})
//辨识评价-页面数据详情
function getpageDate() {
  // orgcode:只有评价小组登录才传orgcode
  getApi({ planid: props.planid, orgcode: props.orgid, spflg: props.spflg }, '/mosty-jcgl/dangerPlanlist/bspj/showSjInfo').then(res => {
    tableData1.value = res.list
    listQuery.value = res.entity
    shsm.value = res.shsm ? res.shsm : null
    proms.value.identifyEntityId = res.entity.id
    if (['30', '31', '32', '22'].includes(res.entity.stage)) {
      status.value = 3
    } else if (res.entity.stage == '33') {
      status.value = 4
    }
    // if (res.entity.status == '4') {
    //   //审核通过
    //   status.value = 3
    // }
  })
}


//评价小组操作
function ppjxzcz(row) {
  idlist.value.identifyEntityId = row.id
  btnShow.value = false;
  listpage.value.depcode = row.entityCode;
  getpspjqk()
}
//评价小组查看
function handlexg(row) {
  btnShow.value = true;
  listpage.value.depcode = row.entityCode;
  getpspjqk()
}
//	辨识评价-查询各个部门的辨识情况
function getpspjqk() {
  getApi(listpage.value, '/mosty-jcgl/dangerPlanlist/bspj/getBmbsListByDeptId').then(res => {
    if (res.records) {
      tableData2.value = res.records
      total.value = res.total
    }
  })
}
//评价
function handlepj(row) {
  idlist.value.bmbsid = row.id
  showhzpage.value = true
}
//提交审核（评价小组成员提交审核）
function handlehz() {
  // 辨识评价 - 各个分公司提交审核
  postApi({}, `/mosty-jcgl/dangerPlanlist/bspj/tjsh/${proms.value.identifyEntityId}`).then(res => {
    ElMessage.success("审核成功");
    getpageDate();
    tableData2.value = []
  })
}
//删除评价小组成员评价内容
function deldetebm(row) {
  deleteApi({}, `/mosty-jcgl/dangerPlanlist/bspj/del/${row.id}/${proms.value.identifyEntityId}`).then(res => {
    ElMessage.success("删除成功");
    getpageDate();
    getpspjqk()
  })
}
//退回部门
function deldete(row) {

  postApi({ depcode: row.entityCode, planid: props.planid, spfag: row.spfag }, '/mosty-jcgl/dangerPlanlist/bspj/deptBackOff').then(res => {
    ElMessage.success("退回成功");
    getpageDate();
    tableData2.value = []
  })
}
//关闭汇总
function changeclose() {
  showhzpage.value = false;
  getpageDate();
  getpspjqk()
}
// 方法
const tabHeightFn = () => {
  tableHeight.value =
    window.innerHeight - 100 - 57 - 60 + 'px'
}

//返回
function Close() {
  emits("close");
}
//分页
const handleSizeChange = (currentSize) => {
  listpage.value.pageSize = currentSize;
  getpspjqk()
};
const handleCurrentChange = (currentPage) => {
  listpage.value.pageCurrent = currentPage;
  getpspjqk()
};
</script>

<style lang="scss" scoped>
.titleBox {
  border: none;
  height: 134px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.stebox {
  width: 90%;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  margin: o auto;
}

.left {
  width: 70%;
}

.el-select {
  width: 150px;
}

.btnBox {
  right: 15px;
  top: 9px;
  width: 10%;
  text-align: right;
  padding-right: 10px;
}

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

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

.tabBox2 {
  width: 65%;
}

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

.box-big {
  display: flex;
  margin-top: 10px;

  .fix-box {
    display: flex;
    margin-right: 30px;
  }
}

.el-textarea {
  --el-input-placeholder-color: #4c4e52 !important;
}

.btnpas {
  display: inline-block;
  padding: 5px 10px;
  color: #fff !important;
  margin-right: 4px;
  background-color: var(--el-color-primary);
  border-radius: 5px;
  cursor: pointer;
}

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