<template>
  <div>
    <div class="warning-header">
      <div class="warning-title">预警中心统计</div>
      <div>
        <el-date-picker v-model="yearStr" type="year" format="YYYY" value-format="YYYY"
          :disabled-date="disabledDate"></el-date-picker>
        <el-button style="margin-left: 10px;" type="primary" size="mini" @click="search(yearStr)">查询</el-button>
      </div>

    </div>
    <div class="warning-container">
      <rank ref="rankRef" :year="yearStr" />
      <div class="right-content">
        <div class="warningStatisticsTitle">
          <!-- 水球，安全生产得分 -->
          <waterPolo ref="waterPoloRef" class="right-head-polo-line-echart" :year="yearStr" />

          <!-- 折线图 -->
          <div class="right-head-polo-line-echart">
            <div class="warningTitle">甘肃省烟草专卖局(公司)总得分趋势情况</div>
            <div class="trendDistribution" id="trendDistribution"></div>
          </div>
        </div>

        <!-- 详细表格 -->
        <div class="table_list">
          <div class="warningTitle">甘肃省烟草专卖局(公司)安全生产得分(总分100分)</div>
        </div>
        <div class="table-container">
          <el-table :data="tableData" :span-method="handleSpan" border style="width: 100%;" height="100%">
            <el-table-column prop="moduleName" label="评估项目"></el-table-column>
            <el-table-column prop="itemName" label="预警要素"></el-table-column>
            <el-table-column prop="agencyName" label="指标名称"></el-table-column>
            <el-table-column prop="score" label="得分"></el-table-column>
          </el-table>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import * as echarts from "echarts"
import "echarts-liquidfill"
import { ref, onMounted } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js";
import rank from "./com/rank.vue"
import waterPolo from './com/waterPolo.vue'


const yearStr = ref((new Date().getFullYear()).toString())
const tableData = ref([])
const rankRef = ref(null)
const waterPoloRef = ref(null)

const search = (val) => {
  if (rankRef.value) rankRef.value.getTableDetail(val)
  if (waterPoloRef.value) waterPoloRef.value.refresh(val)
  getTableDetail()
}

const handleSpan = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) { // 处理“评估项目”列
    if (row.moduleRowSpan > 0) {
      return [row.moduleRowSpan, 1];
    } else {
      return [0, 0]; // 非首行隐藏
    }
  } else if (columnIndex === 1) { // 处理“预警要素”列
    if (row.itemRowSpan > 0) {
      return [row.itemRowSpan, 1];
    } else {
      return [0, 0];
    }
  }
  return [1, 1]; // 其他列不合并
}

const disabledDate = (time) => {
  return time.getFullYear() > new Date().getFullYear() || time.getFullYear() < 2010
}
/**
 * 初始化趋势分布
 */
const initializeTrendDistributionLineChart = () => {
  let chartDom = document.getElementById("trendDistribution")
  let myChart = echarts.init(chartDom)
  let option

  option = {
    grid: {
      top: "20px",
      left: "40px",
      right: "10px",
      bottom: "30px"
    },
    xAxis: {
      type: "category",
      data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"]
    },
    yAxis: {
      splitLine: {
        lineStyle: {
          color: "#565050",
          width: 0.1
        }
      },
      type: "value"

    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
        areaStyle: {
          color: "rgba(21,107,84,0.09)"
        },
        smooth: true,
        color: "#0b6c51"
      }
    ]
  }

  option && myChart.setOption(option)
}

const processData = (originalData) => {
  const flatData = [];
  originalData.forEach(module => {
    const moduleName = module.moduleName;
    // 计算该模块总行数（所有指标数量之和）
    const moduleRowCount = module.items.reduce((sum, item) => sum + item.agencys.length, 0);
    let moduleRowIndex = 0; // 记录当前模块内的行索引
    module.items.forEach(item => {
      const itemName = item.itemName;
      const itemRowCount = item.agencys.length; // 当前预警要素的行数
      item.agencys.forEach((agency, agencyIndex) => {
        flatData.push({
          moduleName,
          moduleRowSpan: moduleRowIndex === 0 ? moduleRowCount : 0, // 模块首行设置合并行数
          itemName,
          itemRowSpan: agencyIndex === 0 ? itemRowCount : 0, // 预警要素首行设置合并行数
          agencyName: agency.agencyName,
          score: agency.score
        });
        moduleRowIndex++;
      });
    });
  });
  return flatData;
}
/**
 * 获取表格数据
 */
const getTableDetail = () => {
  getApi({ year: yearStr.value }, "/mosty-jcgl/scoreDetail/getScoreDetailList").then((res) => {

    if (Array.isArray(res)) {
      tableData.value = processData(res)
    } else {
      tableData.value = []
    }
  })
}
onMounted(() => {
  initializeTrendDistributionLineChart()
  search()
  // getTableDetail()
  // if (rankRef.value) rankRef.value.getTableDetail(val)
  // if (waterPoloRef.value) waterPoloRef.value.refresh(val)
})

</script>

<style scoped lang="scss">
.warning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding-right: 10px;
}

.warning-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 39px;
  padding-left: 20px;
  line-height: 39px;
  font-size: 18px;
  color: var(--el-color-primary);
  background-color: #fff;
}

.warning-container {
  display: flex;
  height: calc(100vh - 170px);

  .right-content {
    width: calc(100% - 330px);
    height: calc(100vh - 180px);
    // height: calc(100vh - 140px);
    // padding: 10px;
    // background-color: #fff;
    // overflow-y: auto;
    // box-sizing: border-box;
  }
}

.warningStatisticsTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #faf6f6;
  padding: 10px;

  .right-head-polo-line-echart {
    width: calc((100% - 10px) / 2);
    box-sizing: border-box;
    background: #fff;
    padding: 10px;
    height: 200px;

    .trendDistribution {
      height: calc(100% - 18px);
      width: 100%;
    }

    // .warningCent {
    //   height: calc(100% - 18px);
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;

    //   .liquidfill-container {
    //     width: 170px;
    //     height: 100%;
    //   }

    //   .warningCentInfo {
    //     width: calc(100% - 170px);
    //     height: 100%;
    //     display: flex;
    //     flex-wrap: wrap;     align-items: center;
    //     justify-content: space-between;
    //     color: #0b6c51;
    //     font-size: 13px;
    //     box-sizing: border-box;
    //     padding: 20px 0;

    //     .warningCentInfoItem {
    //       width: 50%;
    //       display: flex;
    //       align-items: center;
    //       justify-content: space-between;
    //       padding: 0 10px;

    //       .warningCentInfoTitle {
    //         color: #0a0909;
    //         display: flex;
    //         align-items: center;

    //         span {
    //           margin-left: 8px;
    //         }
    //       }
    //     }
    //   }
    // }
  }
}


.warningTitle {
  font-size: 18px;
  line-height: 18px;
  color: #03130e;
  padding-left: 20px;
  border-left: 4px solid #0b6c51;
}

.table_list {
  padding: 10px;
  background-color: #fff;
}

.table-container {
  padding: 0 10px 11px;
  background: #fff;
  height: calc(100% - 250px);
}
</style>
