<template>
  <div class="bigBox pageRight" :style="{ height: bigHeight }">
    <!-- 标题 -->
    <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 @click="searchname">查询</el-button>
      </div>
    </div>
    <div class="main_box">
      <div class="top_box">
        <div class="title_text">隐患趋势</div>
        <div class="charts_box">
          <div class="left_charts">
            <Charts ids="left_qsfx" :Xdata="Xdata" :serData="serData" :key="keys" />
          </div>
          <div class="left_charts">
            <Charts ids="right_qsfx" :Xdata="Xdatas" :serData="serDatas" :key="key2" />
          </div>
        </div>
      </div>
      <div class="bottom_box">
        <div class="title_text">隐患数量每月统计</div>
        <!-- 表格 -->
        <div class="tabBox">
          <el-table ref="multipleTableRef" :data="tableData" stripe style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="单位" property="orgname"></el-table-column>
            <!-- <el-table-column label="月份">
              <template #default="{ row }">
                <span>隐患数量</span>
              </template>
</el-table-column> -->
            <el-table-column v-for="item in titlelist" :key="item.name" :prop="item.name" :label="item.title">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import Charts from "./components/charts.vue";
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js";
import { dateFormat } from "@/utils/tools";
// 获取最近12个月的时间范围
const getLast12Months = () => {
  const end = new Date();
  const start = new Date();

  // 结束时间设为当前月份
  const endYear = end.getFullYear();
  const endMonth = end.getMonth() + 1; // 月份从0开始，需要+1

  // 开始时间设为12个月前
  start.setMonth(start.getMonth() - 11); // 减11个月，加上当前月正好12个月

  const startYear = start.getFullYear();
  const startMonth = start.getMonth() + 1;

  return [
    `${startYear}-${startMonth.toString().padStart(2, '0')}`,
    `${endYear}-${endMonth.toString().padStart(2, '0')}`
  ];
};

// 修改默认时间为最近12个月
const monthTime = ref(getLast12Months());
const Xdata = ref([])
const Xdatas = ref([])
const serData = ref([])
const serDatas = ref([])
const keys = ref(1)
const key2 = ref(1)
const titlelist = ref([])
const bigHeight = ref(); //整个高度
const tableData = ref([]);
// 方法

onMounted(() => {
  // bigHeightFn();
  // getcount()
  // getfivcount()
  // getTableData();
  bigHeightFn();
  searchname(); 
});
const bigHeightFn = () => {
  // bigHeight.value = window.innerHeight - 147 + "px";
};
//查询隐患趋势分析 柱状图 列表
function getcount () {
  getApi({ startTime: monthTime.value[0], endTime: monthTime.value[1] }, `/mosty-jcgl/yhb/yhfx/yhfxByMonth`).then((res) => {
    Xdata.value = res.timeList;
    serData.value = res.countList;
    keys.value++
  })
}
//隐患趋势分析-统计前五年的隐患数量
function getfivcount () {
  getApi({}, '/mosty-jcgl/yhb/yhfx/yhfxByYear').then(res => {
    Xdatas.value = res.timeList;
    serDatas.value = res.countList;
    key2.value++
  })
}
//查询
function searchname () {
  // getcount()
  // getTableData();
  getcount(); // 查询最近12个月的数据
  getfivcount(); // 查询前五年数据
  getTableData(); // 查询表格数据
}

// 获取表格数据
const getTableData = () => {
  getApi(
    { startTime: monthTime.value[0], endTime: monthTime.value[1] },
    "/mosty-jcgl/yhb/yhfx/yhfxListByMonth"
  ).then((res) => {
    titlelist.value = res.timeList.map(item => {
      return { title: item }
    });
    tableData.value = res.list
    for (let i = 0; i < titlelist.value.length; i++) {
      const el = titlelist.value[i];
      el.name = 'data' + i
    }
  });
};


</script>

<style lang="scss" scoped>
.tabBox {
  // overflow-y: scroll;
}

.bigBox {
  height: calc(100vh - 213px) !important;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;

    &::after {
      content: "";
      background: #006e4a;
      height: 16px;
      width: 3px;
      position: absolute;
      z-index: 9;
      left: -6px;
      top: 22px;
    }
  }

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

  .btnBox {
    display: flex;
    width: 373px;
    justify-content: space-between;
    align-items: center;
  }

  .btnBox {
    .el-select {
      width: 150px;
    }

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

.main_box {
  display: flex;
  flex-direction: column;
  height: calc(100% - 65px);

  .top_box {
    height: 400px;
  }

  .bottom_box {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
  }

  .charts_box {
    display: flex;
    justify-content: space-around;
    height: 350px;

    .left_charts {
      height: 350px;
      flex: 1;
    }
  }
}

.title_text {
  font-size: 18px;
  color: #000;
  margin: 10px;
  height: 25px;
}

.tabBox {
  flex: 1;
  height: calc(100% - 25px);
  overflow: auto;
}
</style>
