<template>
  <div>
    <div class="bigBox">
      <div class="left-box">
        <div class="left-top">
          <div class="top-title">风险单元辨识覆盖率</div>
          <div class="top-each">
            <gagues :loadingshow="barsShow" ids="fxdybsfgl" :key="keys" :barNum="barNum" />
            <div class="top-lable">总计{{ from.unitCount }}个风险单元本次辨识已覆盖{{ from.riskCount }}个</div>
          </div>
        </div>
        <div class="left-top">
          <div class="top-title">四色预警统计</div>
          <div class="top-fix">
            <div class="left-btn">
              <span class="re">重大风险：{{ from.R }}</span>
              <span class="or">较大风险：{{ from.O }}</span>
              <span class="ye">一般风险：{{ from.Y }}</span>
              <span class="bl">低风险：{{ from.B }}</span>
            </div>
            <div class="blo-ear">
              <barchrs :loadingshow="barsShow" ids="ssyjtj" :key="keyss" :barTitle="barTitle" :serData="serData" />
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div ref="queryHeigth">
          <div class="right-top" v-if="from.level == 'S'">
            <img :src="getImgUrl('indexImages/f_x-0.png')" @click="gotopag('01')">
            <img :src="getImgUrl('indexImages/f_x-1.png')" @click="gotopag('02')">
            <img :src="getImgUrl('indexImages/f_x-2.png')" @click="gotopag('03')">
            <!-- <img :src="getImgUrl('indexImages/f_x-3.png')" @click="gotopag('04')"> -->
          </div>
        </div>

        <div class="headBox">
          <div class="title">风险辨识列表</div>
          <div>
            <div class="yra">
              <el-select v-model="listQuery.year" filterable>
                <el-option v-for="item in filterYear(7)" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div :style="{ 'height': totalHeight }">
          <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" stripe height="100%"
            v-loading="tableloading" @selection-change="handleSelectionChange" border>
            <el-table-column label="单位" property="entityName" width="250"></el-table-column>
            <el-table-column label="风险单元数量" width="100" property="unitCount" v-if="from.level == 'S'"></el-table-column>
            <el-table-column label="风险总数" width="100" property="riskCount"></el-table-column>
            <el-table-column label="应参与人数" width="100" property="yPeople" v-if="from.level == 'S'"></el-table-column>
            <el-table-column label="实际参与人数" width="100" property="sPeople" v-if="from.level == 'S'"></el-table-column>
            <el-table-column label="参与率" width="100" property="cyl" v-if="from.level == 'S'"></el-table-column>
            <el-table-column label="风险等级">
              <el-table-column label="重大风险" property="R"></el-table-column>
              <el-table-column label="较大风险" property="O"></el-table-column>
              <el-table-column label="一般风险" property="Y"></el-table-column>
              <el-table-column label="低风险" property="B"></el-table-column>
            </el-table-column>
            <el-table-column label="当前状态">
              <template #default="{ row }">
                <sapn v-if="row.status == '1'" style="color:red">辨识中</sapn>
                <sapn v-else-if="row.status == '2'" style="color:red">汇总</sapn>
                <sapn v-else-if="row.status == '3'" style="color:red">评价中</sapn>
                <sapn v-else-if="row.status == '4' && row.stage == '24'" style="color:blue">分管领导审核</sapn>
                <sapn v-else-if="row.status == '4' && row.stage == '28'" style="color:blue">主管领导审核</sapn>
                <sapn v-else-if="row.status == '5'" style="color:green">辨识完成</sapn>
                <sapn v-else-if="row.status == '6'" style="color:red">退回</sapn>
                <span class="operesee" @click="Seexq(row)" v-if="from.level == 'S' && row.entityCode"><el-icon>
                    <Compass />
                  </el-icon>查看</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
// 引入
import { reactive, onMounted, ref, watch } from "vue";
import { filterYear } from "@/utils/auth.js";
import { getApi } from "@/api/tobAcco_api.js";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import gagues from "./component/gagues.vue";
import barchrs from "./component/barchrs.vue";
const store = useStore();
const queryHeigth = ref(null)
const router = useRouter();
const totalHeight = ref(null)
const keys = ref(1)
const keyss = ref(1)
const barsShow = ref(false);
const barNum = ref(0);
const from = ref({
  unitCount: 0,
  riskCount: 0,
  R: 0,
  O: 0,
  Y: 0,
  B: 0
})
const barTitle = ref(['低风险', '一般风险', '较大风险', '重大风险'])
const tableData = ref([])
const serData = ref(
  [
    {
      type: 'bar',
      data: [0, 0, 0, 0],
      itemStyle: {

        color: function (params) {
          // 根据参数返回不同的颜色
          if (params.dataIndex === 0) {
            return '#0080FF';
          } else if (params.dataIndex === 1) {
            return '#E2D101';
          } else if (params.dataIndex === 2) {
            return '#FF8040';
          } else {
            return '#E80000';
          }
        }
      }
    }
  ]
)

// 分页
const listQuery = reactive({
  year: new Date().getFullYear()
});
watch(() => listQuery.year,
  () => {
    gettatol()
    keys.value++;
    keyss.value++;
  }
)
// 初始化
onMounted(() => {
  gettatol()
});
//统计信息
function gettatol() {
  getApi({ year: listQuery.year }, '/mosty-jcgl/fxtj/getTjdata').then(res => {
    if (res) {
      if (res.level == 'S') {
        totalHeight.value = `calc(100vh - ${229 + queryHeigth.value.offsetHeight}px)`
      } else {
        totalHeight.value = `calc(100vh - 229px)`
      }
      res.riskCount = res.riskCount ? res.riskCount : 0;
      res.unitCount = res.unitCount ? res.unitCount : 0;
      res.R = res.R ? res.R : 0;
      res.Y = res.Y ? res.Y : 0;
      res.O = res.O ? res.O : 0;
      res.R = res.R ? res.R : 0;
      from.value = res;

      if (res.list) {
        tableData.value = res.list;
        tableData.value.forEach(item => {
          if (item.yPeople == 0) {
            item.cyl = Number(0).toFixed(2) + '%'
          } else {
            item.cyl = ((item.sPeople / item.yPeople) * 100).toFixed(2) + '%'
          }
        })
      }
      barNum.value = Math.floor((res.riskCount / res.unitCount) * 100) ? Math.floor((res.riskCount / res.unitCount) * 100) : 0
      serData.value[0].data[0] = res.B;
      serData.value[0].data[1] = res.Y;
      serData.value[0].data[2] = res.O;
      serData.value[0].data[3] = res.R;
      barsShow.value = true
      keys.value++;
      keyss.value++;

    }
  })
}
//查看 
function Seexq(row) {
  let title = row.entityName;
  store.dispatch("user/setRouterName", title);
  router.push({
    path: "/fxgk/aqfxfjgk/component/fxtjxq",
    query: {
      entityCode: row.entityCode,
      planid: from.value.planid
    }
  });
}
//页面跳转
function gotopag(val) {
  if (val == '01') {
    //风险策划
    router.push("/fxgk/aqfxfjgk/fxch");
  } else if (val == '02') {
    //辨识汇总
    router.push("/fxgk/aqfxfjgk/bshz");
  } else if (val == '03') {
    //辨识清单
    router.push("/fxgk/aqfxfjgk/bsqd");
  } else {
    //风险控制
    router.push("/fxgk/aqfxfjgk/fxkz");
  }
}
</script>
<style lang="scss" scoped>
.bigBox {
  height: 84vh;
  display: flex;
  width: 100%;
}

.left-box {
  width: 25%;
  background: #fff;
}

.right-box {
  background: #fff;
  margin-left: 10px;
  width: calc(75% - 10px);
  padding: 10px;
}

.left-top {
  background-color: #fff;
  margin-bottom: 10px;
  height: 42vh;

  .top-title {
    font-size: 28px;
    width: 100%;
    height: 63px;
    line-height: 63px;
    border-bottom: 3px solid #eeeeee;
    padding: 0 10px;
    font-weight: 800;
    color: black;
  }

  .top-each {
    height: 30vh;
    position: relative;

    .top-lable {
      position: absolute;
      bottom: -20px;
      font-size: 17px;
      left: 64px;
      color: #000;
    }
  }
}

.top-fix {
  display: flex;
  justify-content: space-between;

  .left-btn {
    width: 34%;
    margin: auto;

    >span {
      display: block;
      width: 95%;
      text-align: center;
      padding: 10px 0;
      margin: 20px 10px;
      font-size: 15px;
      color: #fff;
      border-radius: 5px;
    }

    .re {
      background-color: #e80000;
    }

    .or {
      background-color: #ff8040;
    }

    .ye {
      background-color: #e2d101;
    }

    .bl {
      background-color: #0080ff;
    }
  }

  .blo-ear {
    height: 35vh;
    width: 70%;
  }
}

.right-top {
  margin-top: 10px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  width: 100%;

  >img {
    width: 22%;
    height: 80px;
    margin: 20px;
  }
}

.headBox {
  background-color: #fff;
  height: 60px;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;

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

    .el-icon {
      cursor: pointer;
    }
  }
}

.yra {
  margin-top: 10px;
}
</style>