<template>
  <div class="outer_box">
    <div class="mainBox">
      <!-- 标题栏按钮栏 -->
      <div class="ech_box">
        <div class="zj_box">
          <MOSTY.Assort :title="'不同等级隐患占比'" style="padding: 0;" />
          <!-- 总计 -->
          <Pie :data="sbLxData" :key="keys" :totalCount="totalCount" />
        </div>
        <div class="yhtj_box">
          <MOSTY.Assort :title="'暴露最多的事故隐患类别（TOP10）'" style="padding: 0;" />


        </div>
      </div>
      <div class="yhfbBox">
        <MOSTY.Assort :title="'隐患在各直属单位的分布统计'" style="padding: 0;" />
        <!-- 隐患统计图 -->
        <Bar :yAxdata="yAxdata" :serData="serData" :key="key2" />
      </div>
      <div class="tableBox">
        <div class="headBox" style="justify-content: space-between">
          <div class="title">各单位隐患统计表</div>
          <div class="btnBox">

            <el-date-picker v-model="monthTime" type="monthrange" range-separator="To" format="YYYY-MM"
              date-format="YYYY-MM" value-format="YYYY-MM" :size="size" />
            <el-button style="margin-left: 10px" @click="search">查询</el-button>
            <!-- <el-button @click="handleShow">隐患台账统计</el-button> -->
            <!-- <el-button @click="handleyhtz"> 隐患台账</el-button> -->
          </div>
        </div>
        <el-table :data="tableData" style="width: 100%" stripe height="32vh" v-loading="tableloading"
          element-loading-text="数据加载中..." border>
          <el-table-column prop="orgname" label="单位" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="countAll" label="总数"> </el-table-column>
          <el-table-column label="隐患等级类型">
            <el-table-column prop="count1" label="重大"> </el-table-column>
            <el-table-column prop="count2" label="较大"> </el-table-column>
            <el-table-column prop="count3" label="一般"> </el-table-column>
            <el-table-column prop="count4" label="轻微"> </el-table-column>
          </el-table-column>
          <el-table-column label="整改情况">
            <el-table-column prop="countW" label="未整改">
            </el-table-column>

            <el-table-column prop="countY" label="已整改">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <div v-if="dialogVisible" class="dialog-box">
    <Yhtztj @close="closeEvent" v-if="yhtjShow" :time="monthTime" />
  </div>
</template>

<script setup>
// 引入
import * as MOSTY from "@/components/MyComponents/index"
import Bar from "./components/bar.vue";
import Pie from "./components/pie.vue";
import { useRouter } from "vue-router";
import { dateFormat } from "@/utils/tools";
import Yhtztj from "./components/yhtztj.vue";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import Gwjcxq from "../components/jctj/gwjcxq.vue";
import { getApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
// import { useStore } from "vuex";
const router = useRouter();
//日期
const yhtzShow = ref(false); //隐患台账页面显示与否
const totalCount = ref(0)
const yhtjShow = ref(false);//隐患统计页面
// const monthTime = ref('')
const monthTime = ref([
  dateFormat({ type: "one", time: new Date() }),
  dateFormat({ type: "month", time: new Date() })
]);
const dialogVisible = ref(false);
const tableData = ref([

]);
const yAxdata = ref([
  "市机关",
  "物流",
  "卷烟",
  "红花岗",
  "播州",
  "桐梓",
  "正安",
  "道真",
  "务川",
  "南岗"
]);
const serData = ref([
  {
    name: "总数",
    type: "bar",
    symbolSize: ["30%", "5%"],
    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  },
  {
    name: "已整改",
    type: "bar",
    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  },
  {
    name: "未整改",
    type: "bar",
    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  }
]);
const sbLxData = ref([
  {
    name: "重大隐患(已整改)",
    value: 0
  },
  {
    name: "重大隐患(未整改)",
    value: 0
  },
  {
    name: "较大隐患(已整改)",
    value: 0
  },
  {
    name: "较大隐患(未整改)",
    value: 0
  },
  {
    name: "一般隐患(已整改)",
    value: 0
  },
  {
    name: "一般隐患(未整改)",
    value: 0
  },
  {
    name: "轻微隐患(已整改)",
    value: 0
  },
  {
    name: "轻微隐患(未整改)",
    value: 0
  }
]);
const keys = ref(1)
const key2 = ref(1)
const tableloading = ref(false)
onMounted(() => {
  getcount()
});
function search() {
  getcount()
}
function getcount() {
  //	隐患统计-饼图
  getApi({ startTime: monthTime.value[0], endTime: monthTime.value[1] }, '/mosty-jcgl/yhb/echartsPie').then((res) => {
    sbLxData.value[0].value = res.total1y;
    sbLxData.value[1].value = res.total1w;
    sbLxData.value[2].value = res.total2y;
    sbLxData.value[3].value = res.total2w;
    sbLxData.value[4].value = res.total3y;
    sbLxData.value[5].value = res.total3w;
    sbLxData.value[6].value = res.total4y;
    sbLxData.value[7].value = res.total4w;
    totalCount.value = res.totalCount
    keys.value++
  })
  //	隐患统计-柱状图
  getApi({ startTime: monthTime.value[0], endTime: monthTime.value[1] }, '/mosty-jcgl/yhb/echartsBar').then((res) => {
    yAxdata.value = res.map(item => {
      return item.orgname
    })
    serData.value[0].data = res.map(item => {
      return item.yhCount
    })
    serData.value[1].data = res.map(item => {
      return item.finishCount
    })
    serData.value[0].data = res.map(item => {
      return item.waitCount
    })
    key2.value++
  })
  //	隐患统计-各单位、部门隐患统计表
  tableloading.value = true
  getApi({ startTime: monthTime.value[0], endTime: monthTime.value[1] }, '/mosty-jcgl/yhb/statisticsList').then((res) => {
    tableData.value = res;
    tableloading.value = false
  })

}
function handleShow() {
  dialogVisible.value = true;
  yhtjShow.value = true;
}
// 关闭
const closeEvent = () => {
  yhtjShow.value = false;
  dialogVisible.value = false;
};

//点击隐患台账
function handleyhtz() {
  router.push("/fxgk/jcss/yhtz");
}


</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";

::v-deep .el-date-editor .el-range-input {
  color: #000;
}

.outer_box {
  height: calc(100vh - 210px);
  overflow-y: auto;
}

.ech_box {
  height: 340px;
  display: flex;
  justify-content: space-between;

  .zj_box {
    text-align: center;
    width: calc(50% - 5px);
      height: 340px;
      padding: 10px 0 0 20px;
      background-color: #fff;
      box-sizing: border-box;
    }
    
    .yhtj_box {
      width: 50%;
      width: calc(50% - 5px);
      padding: 10px 0 0 20px;
      background-color: #fff;
      box-sizing: border-box;
    }
    }
    
    .yhfbBox {
      height: 340px;
      background: #fff;
      padding: 10px 20px;
      margin: 10px 0 0 0;
    }
    
    .tableBox {
      background: #fff;
      padding: 5px 20px 20px;
      margin: 10px 0 0 0;
}

.headBox {
  display: flex;
  align-items: center;
}

.title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #000;
}

.btnBox {
  .el-button {
    margin-top: -5px;
  }

  .el-select {
    width: 150px;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .btnBox {
    display: flex;
    width: 500px;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
