<template>
  <div class="bigBox">
    <div>
      <div class="topbox">
        <div style="border: 1px solid #ccc;margin: 10px;width: 45%;padding: 10px;">
          <Pie :list="data.list1" :key="key1" />

        </div>
        <div style="border: 1px solid #ccc;margin: 10px;width: 45%;padding: 10px;">
          <Line :list="data.list2" :key="key3" />

        </div>
        <!-- <div class="echar" ref="echarBox2"></div> -->
        <!-- 隐患统计图 -->
        <!-- <div class="echar" ref="echarBox"></div> -->
      </div>
      <div style="height: 350px;margin-top: 20px;">
        <Bar :list="data.list" :key="key2" />

      </div>
    </div>


  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import Bar from "./bar.vue";
import Pie from "./pie.vue";
import Line from "./line.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as echarts from "echarts";
import { onMounted, reactive, ref, watch } from "vue";
const emit = defineEmits("changePage");
const data = reactive({
  list1: [],
  list2: [],
  list: [],
});
const key1 = ref(1)
const key2 = ref(1)
const key3 = ref(1)
// 16进制 随机色
function getRandomColor() {
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};
function getTableData() {
  getApi({}, '/mosty-jcgl/accident/getStatisticsByOrg').then(res => {
    data.list = res;
    key2.value++
  })
  getApi({}, '/mosty-jcgl/accident/getStatisticsByType').then(res => {
    data.list1 = res;
    data.list1.forEach(item => {
      item.color = getRandomColor()
    })
    key1.value++
  })
  getApi({}, '/mosty-jcgl/accident/getStatisticsByYear').then(res => {
    data.list2 = res;
    data.list2.resList = res.resList.map((item) => {
      return { name: item.orgname, type: 'line', data: item.countList }
    })
    key3.value++
  })
}
onMounted(() => {
  getTableData()

});

</script>

<style lang="scss" scoped>
.topbox {
  display: flex;
  justify-content: space-between;
  height: 380px;
  margin-bottom: 10px;
}

.bigBox {
  background: #fff;
}
</style>