<template>
  <div class="pubDataBox">
    <div class="title">
      <span class="text"> 隐患趋势分析 </span>
    </div>
    <div class="content">
      <div v-for="(item, index) in tabsData" :key="index">
        <div class="chartsBox" v-if="tabsActiveVal == index">
          <div class="wibox">
            <!-- v-if="pxslBarnum != null"  -->
            <PieChart v-if="pxslBarnum != null" :pxslTime="pxslBartitle" :pxslNum="pxslBarnum" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pubDataBox">
    <div class="title">
      <span class="text"> 最新工作开展 </span>
    </div>
    <div class="contents">
      <BarStackChart :data="barStackData" />
    </div>
  </div>
</template>

<script setup>
import { getApi, postApi } from "@/api/tobAcco_api.js";
import PieChart from "./charts/pieChart2";
import BarStackChart from "./charts/barStackChart2";
import { ref, defineProps, reactive, onMounted } from "vue";
import { dateFormat } from "@/utils/tools.js";
import { fakeYhqsData, fakeZxgzData } from "./fakeData";

const props = defineProps({
  value: {
    type: Number,
    default: 0
  }
});
const tabsActiveVal = ref(0);
const tabsData = ref([
  { name: "安防设备" },
  { name: "消防设施" },
  { name: "特种设备" },
  { name: "安全人员" },
  { name: "场所" },
  { name: "建筑物" },
  { name: "部位" },
  { name: "车辆" },
  { name: "驾驶员" }
]);
const barStackData = ref([])
const pxslBartitle = ref([]); //时间标题
const pxslBarnum = ref(); //数据
const mouthdata = ref(dateFormat({ type: "month" })); //当前年月
//获取隐患趋势分析柱状图数据
const getyhqsData = () => {
  getApi(
    { month: mouthdata.value },
    "/mosty-jcgl/yhb/getHistogram/{month}"
  ).then((res) => {
    // 
    pxslBarnum.value = res;

  });
};
//获取时间段
const getData = () => {
  var dataArr = [];
  var data = new Date();
  var year = data.getFullYear();
  var month = data.getMonth() + 1;
  var endDate = year - 1; //自定义截止年份时间 例如是2020年
  var rate = year - endDate;
  var monthNum = (rate - 1) * 12 + 7 + month; //取到的月份
  data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份
  for (var i = 0; i < monthNum; i++) {
    data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
    var m = data.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    dataArr.push(data.getFullYear() + "-" + m);
  }
  pxslBartitle.value = dataArr.reverse();
};
onMounted(() => {
  // 测试假数据 ================================
  getData();
  pxslBarnum.value = fakeYhqsData() // 隐患趋势分析
  barStackData.value = fakeZxgzData() // 最新工作开展
  return
  // =============================================
  getyhqsData();
  getData();
});
</script>

<style lang="scss" scoped>
@import "~@/assets/css/element-plus.scss";

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

.content {
  height: 192px;
}

.contents {
  height: calc(100vh - 700px);
}

.wibox {
  height: 100%;
  display: flex;
  padding: 0 10px;
}

.wiboxtwo {
  height: 138% !important;
}

.indexTabsContents {
  height: calc(100vh - 398px);

  >.title {
    height: 34px;
    line-height: 34px;
    text-align: center;
    margin: 0 8px;
    background: rgba(0, 212, 224, 0.15);
  }

  .chartsBox {
    height: calc((100% - 145px) / 2);
    margin: 0 8px;
  }
}
</style>
