<template>
  <div class="pubDataBox">
    <div class="title">
      <span class="text"> 数据统计 </span>
    </div>
    <div class="content">
      <ul class="indexTabs">
        <li class="four" v-for="(item, index) in tabsData" :key="index" :class="tabsActiveVal == index ? 'active' : ''"
          @click="checkColumn(index, item.name)">
          <span v-if="item.name == '红橙黄风险'">
            <span v-for="(items, index) in item.list" :key="index">{{ items.val }}({{ items.num }})</span>
          </span>
          <span v-else> {{ item.name }}({{ item.num }})</span>

          <div v-if="tabsActiveVal == index" class="indexTabsContent">
            <buildings v-if="dataTitle == '建筑物'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <special v-if="dataTitle == '特种设备'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <firefighting v-if="dataTitle == '消防设施'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <firebrigade v-if="dataTitle == '消防队'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <storage v-if="dataTitle == '仓储'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <occupation v-if="dataTitle == '职业危害场所'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <chemical v-if="dataTitle == '危化品'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <interested v-if="dataTitle == '重点相关方'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <cartable v-if="dataTitle == '车辆'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <hazardous v-if="dataTitle == '危险作业'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <redorye v-if="dataTitle == '红橙黄风险'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <danger v-if="dataTitle == '隐患数量'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <yinjiyuan v-if="dataTitle == '应急预案'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <rehearsal v-if="dataTitle == '应急演练'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
            <accident v-if="dataTitle == '事故事件'" :dataTitle="dataTitle" :visible="visible" @changeVi="changeVi" />
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pubDataBox">
    <div class="title">
      <span class="text"> 设备统计 </span>
    </div>
    <div class="chartsBox">
      <div class="wibox">
        <!-- v-if="totalInsData.length > 0" -->
        <PieChart :totalInsData="totalInsData" />
      </div>
    </div>
    <div class="title">风险预警</div>
    <div class="chartsBoxs">
      <div class="wibox wiboxtwo">
        <BarStackChart />
      </div>
    </div>
  </div>
</template>

<script setup>
import PieChart from "./charts/pieChart";
import BarStackChart from "./charts/barStackChart";
import buildings from "./tables/shujutj/buildings.vue";
import special from "./tables/shujutj/special.vue";
import firefighting from "./tables/shujutj/firefighting.vue";
import firebrigade from "./tables/shujutj/firebrigade.vue";
import storage from "./tables/shujutj/storage.vue";
import occupation from "./tables/shujutj/occupation.vue";
import interested from "./tables/shujutj/interested.vue";
import cartable from "./tables/shujutj/cartable.vue";
import hazardous from "./tables/shujutj/hazardous.vue";
import redorye from "./tables/shujutj/redorye.vue";
import danger from "./tables/shujutj/danger.vue";
import yinjiyuan from "./tables/shujutj/yinjiyuan.vue";
import rehearsal from "./tables/shujutj/rehearsal.vue";
import accident from "./tables/shujutj/accident.vue";
import chemical from "./tables/shujutj/chemical.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ref, defineProps, onMounted } from "vue";
const visible = ref(false);
const dataTitle = ref("");
const totalInsData = ref([
  { value: 26, name: "器械设备数量" },
  { value: 37, name: "特种设备数量" },
  { value: 22, name: "电气设备数量" },
  { value: 17, name: "安防设施数量" },
  { value: 63, name: "消防设施数量" },
  { value: 29, name: "防雷设施数量" },
  { value: 48, name: "安全器材数量" }
]);
const binShow = ref(true);
const props = defineProps({
  value: {
    type: Number,
    default: false
  }
});

const tabsActiveVal = ref();
const tabsData = ref([
  { name: "建筑物", num: "0" },
  { name: "特种设备", num: "0" },
  { name: "消防设施", num: "0" },
  { name: "消防队", num: "0" },
  { name: "仓储", num: "0" },
  { name: "职业危害场所", num: "0" },
  { name: "危化品", num: "0" },
  { name: "重点相关方", num: "0" },
  { name: "车辆", num: "0" },
  { name: "危险作业", num: "0" },
  //{ name: '红橙黄风险',num:'0'},
  {
    name: "红橙黄风险",
    list: [
      { val: "红", num: "0" },
      { val: "橙", num: "0" },
      { val: "黄", num: "0" }
    ]
  },
  { name: "隐患数量", num: "0" },
  { name: "应急预案", num: "0" },
  { name: "应急演练", num: "0" },
  { name: "事故事件", num: "0" }
]);
// 设备统计请求
const getEquipTotal = () => {
  getApi({}, "/mosty-jcgl/jxsb/listDisplay").then((res) => {
    const { instrument, special, electric, security, fire, lightning, safety } = res.total;
    totalInsData.value = [
      { value: instrument, name: "器械设备数量" },
      { value: special, name: "特种设备数量" },
      { value: electric, name: "电气设备数量" },
      { value: security, name: "安防设施数量" },
      { value: fire, name: "消防设施数量" },
      { value: lightning, name: "防雷设施数量" },
      { value: safety, name: "安全器材数量" }];
  });
};

onMounted(() => {
  getcount1()
  getcount2()
  getcount3()
});

function getcount1() {
  getApi({}, "/mosty-jcgl/basicData/statistics1").then((res) => {
    getDataVal("建筑物", res.count);
    getDataVal("特种设备", res.tzsb);
    getDataVal("消防设施", res.xf);
    getDataVal("消防队", res.xfd);
    getDataVal("仓储", res.cc);
    getDataVal("职业危害场所", res.zywhcs);
  });
}
function getcount2() {
  getApi({}, "/mosty-jcgl/basicData/statistics2").then((res) => {
    getDataVal("危化品", res.whp);
    getDataVal("重点相关方", res.xgf);
    getDataVal("车辆", res.cl);
    getDataVal("危险作业", res.wxzy);
    getDataValFx(res);
    getDataVal("隐患数量", res.yh);
  });
}
function getcount3() {
  getApi({}, "/mosty-jcgl/basicData/statistics3").then((res) => {
    getDataVal("应急预案", res.yjya);
    getDataVal("应急演练", res.yjyl);
    getDataVal("事故事件", res.sgsj);
  });
}

// 遍历风险统计数据
const getDataValFx = (data) => {
  for (let item of tabsData.value) {
    if (item.name === '红橙黄风险') {
      for (let i = 0; i < item.list.length; i++) {
        if (item.list[i].val === '红') {
          item.list[i].num = data.red;
        }
        if (item.list[i].val === '橙') {
          item.list[i].num = data.orange;
        }
        if (item.list[i].val === '黄') {
          item.list[i].num = data.yellow;
        }
      }
    }
  }
}
// 遍历数据修改统计数量
const getDataVal = (name, arrnum) => {
  for (let item of tabsData.value) {
    if (item.name === name) {
      item.num = arrnum;
    }
  }
};
//点击事件
function checkColumn(val, name) {

  dataTitle.value = name;
  tabsActiveVal.value = val;
  visible.value = true;
}
//接受子组件传过来的值
const changeVi = (val) => {
  visible.value = val;
  dataTitle.value = "";
};
</script>

<style lang="scss" scoped>
@import "~@/assets/css/system/newsystem.scss";

.indexTabsContent {
  .title {
    color: #5effd4;
  }
}

.chartsBox {
  height: 150px;
}

.chartsBoxs {
  height: calc(100vh - 606px);
}

.wibox {
  height: 100%;
  display: flex;
  padding: 0 8px;
  box-sizing: border-box;
}

.wiboxtwo {
  height: 100% !important;
}

.wibox .left {
  width: 20%;
}

.wibox .left>div {
  margin-top: 10px;
  text-align: center;
  line-height: 40px;
}

.wibox .left .red {
  background-color: red;
  width: 60px;
  height: 40px;
  border-radius: 5px;
}

.wibox .left .blue {
  background-color: rgb(0, 174, 255);
  width: 60px;
  height: 40px;
  border-radius: 5px;
}

.wibox .left .green {
  background-color: rgb(13, 125, 7);
  width: 60px;
  height: 40px;
  border-radius: 5px;
}
</style>
