<template>
  <div class='board_record'>
    <!-- 搜索栏 -->
    <div class="filter">
      <div>
         <ButtonGradient @click.native="handleExport">
          <template #prefix>
            <img src="@screen/images/export.svg" />
          </template>
          导出
        </ButtonGradient>
        <ButtonGradient @click="onRefreshForm" class="refresh-btn">
          <template #prefix>
            <img src="@screen/images/refresh.svg" />
          </template>
          刷新
        </ButtonGradient>
      </div>

      <InputSearch ref="searchComp" style="width: 400px" :formList="searchFormList" @handleSearch="handleSearch" />
    </div>
    <!-- 内容 -->
    <div class="body">
      <div class="flowstate">
        <div class="tag1" >方向：济南<span>←</span></div>
        <div class="tag2"><span>→</span>方向：菏泽</div>
        <div class="chartsFs " id="surveyChart"></div>
      </div>
      <Table :data="tableData" :span-method="mergeRow" :height="'50%'">

        <ElTableColumn label="设备名称" prop="stakeMark" width="200"  align="center" header-align="center" >
          <template slot-scope="scope">
            <span>一类交调站{{scope.row.stakeMark}}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="方向" prop="direction"  align="center" header-align="center" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.direction == '1'">菏泽</span>
            <span v-if="scope.row.direction == '3'">济南</span>
          </template>
        </ElTableColumn>
        <ElTableColumn v-for="item in columnList" :label="item.label" :prop="item.key" min-width="80" align="center" header-align="center" />
        <ElTableColumn label="合计" prop="total" width="150" align="center" header-align="center" />
      </Table>
    </div>


  </div>
</template>

<script>
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
import Pagination from '@screen/components/Pagination.vue';
import Table from '@screen/components/Table.vue';
import request from "@/utils/request";
import BoardRecordPreview from '@screen/components/infoBoard/BoardRecordPreview.vue'
import InputSearch from "@screen/components/InputSearch/index.vue";
import { searchFormList } from "./data";
import { delay, exportFile, confirm } from "@screen/utils/common";
import Button from "@screen/components/Buttons/Button.vue";
import Form from "@screen/components/FormConfig";
import Dialog from "@screen/components/Dialog/index.vue";
import {  mapState } from "vuex";
import moment from 'moment';
import * as echarts from "echarts";
import chartOptions from "./charts";


export default {
  name: 'survey',
  components: {
    ButtonGradient,
    Pagination,
    Table,
    Button,
    Form,
    Dialog,
    BoardRecordPreview,
    InputSearch
  },
  data() {
    return {
      tableData: [],
      searchFormList,
      total: 20,
      searchData: {
      },
      columnList:[],
    }
  },
  computed: {
    ...mapState(["menu"]),
  },
  created() {
    this.initData();
  },
  mounted(){
    this.$nextTick(()=>{
      if(!this.myChart){
        this.myChart = echarts.init(document.getElementById("surveyChart"));
      }
      this.initData();
      // this.searchQuery()
    })

    window.addEventListener("resize", () => {
      if(this.myChart)
        this.myChart.resize();
    });
  },
  methods: {
    mergeRow({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const start = this.tableData.findIndex(data => data.stakeMark === row.stakeMark);
        if (start !== -1) {
          const count = this.tableData.filter((data, index) => index >= start && data.stakeMark === row.stakeMark).length;
          if (rowIndex === start) {
            return [count, 1]; // 返回要合并的行数和列数
          } else {
            return [0, 0]; // 不合并
          }
        }
      }
      return [1, 1];
    },

    onRefreshForm(){
      this.searchData.pageNum = 1;
      this.$refs.searchComp.handleResetForm();
    },
    handleSearch(data) {
      data.timestamp = data.startTime + " 00:00:01";
      this.searchData = { ...data };
      this.initData();
    },
    indexMethod(index) {
        return this.searchData.pageSize*(this.searchData.pageNum-1) + index + 1;
    },
    //
    /** 导出按钮操作 */
    handleExport() {
      exportFile({
        url: "/trafficSurveyData/dcTrafficSurveyData/export",
        filename: "一类交调站",
        data: this.searchData,
      });
    },
    async initData() {

      if(!this.searchData.timestamp){
        this.searchData.timestamp = moment().format('YYYY-MM-DD') + " 00:00:01"
      }
      if(!this.searchData.type){
        this.searchData.type = 'day'
      }
      request({
        url: `/trafficSurveyData/dcTrafficSurveyData/list`,
        method: "get",
        params: this.searchData,
      }).then((result) => {
        this.columnList = result.data.columnList
        this.tableData = result.data.rowList
        this.loadCharts(result.data)
      });
    },
    onSizeChange(pageSize) {
      this.tableData = [];
      this.searchData.pageSize = pageSize;
      this.searchData.pageNum = 1;
      this.initData();
    },
    loadCharts(data){

      const xAxis = data.columnList.map(x=>x.label);
      chartOptions.xAxis[0].data = xAxis;
      chartOptions.xAxis[1].data = xAxis;

      let color = ["#2ef7f5", "#4780f5", "#b346f6", "#25ea77", "#d2040a", "#eadb06", "#0600f2", "#e67500"]
      let series = []
      let legendData = []
      const stakeMarkMap = new Map();
      data.rowList.forEach(item => {
        stakeMarkMap.set(item.stakeMark, item);
      });
      data.rowList.forEach(item => {
        const stakeMark = item.stakeMark;
        if (!stakeMarkMap[stakeMark]) {
          stakeMarkMap[stakeMark] = [];
        }
        stakeMarkMap[stakeMark].push(item);
      });

      stakeMarkMap.keys().forEach((stakeMark,index) =>{

        legendData.push({
          name: stakeMark,
          itemStyle: {
            color: color[index]
          }
        })
        stakeMarkMap[stakeMark].forEach(stakeMarkData => {
          let seriesData = []
          data.columnList.forEach(x =>{
            seriesData.push(stakeMarkData[x.key])
          })
          debugger

          if (stakeMarkData.direction == '3'){
            series.push({
              name: stakeMark,
              type: "line",
              symbolSize: 0,
              lineStyle: {
                color: color[index],
              },
              smooth: true,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 1,
                        color: "#06AED300",
                      },
                      {
                        offset: 0,
                        color: color[index],
                      },
                    ],
                    false
                  ),
                },
              },
              data: seriesData,
            },)
          } else {
            series.push({
              name: stakeMark,
              type: "line",
              symbol: "circle",
              symbolSize: 0,
              xAxisIndex: 1,
              yAxisIndex: 1,
              smooth: true,
              lineStyle: {
                color: color[index],
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#06AED300",
                      },
                      {
                        offset: 1,
                        color: color[index],
                      },
                    ],
                    false
                  ),
                },
              },
              data: seriesData,
            })
          }
        })

      })
      debugger
      chartOptions.series = series
      chartOptions.legend.data = legendData
      this.myChart.setOption(chartOptions);
    },
  }
}
</script>

<style lang='scss' scoped>
  .flowstate {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .chartsFs {
      height: 35vh;
      width: 200vh;
    }

    .tag1 {
      position: absolute;
      margin-top: -15%;
      margin-left: 2%;
      font-size: 12px;
      span{
        color: #8be8fe;
        font-weight: bold;
        margin-left: 10px;
      }
    }

    .tag2 {
      position: absolute;
      font-size: 12px;
      margin-top: 15%;
      margin-left: 90%;
      span{
        color: #8be8fe;
        font-weight: bold;
        margin-right: 10px;
      }
    }
  }
.board_record {
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    >div {
      display: flex;
      gap: 6px;
    }
  }

  .body {
    flex: 1;
    height: 0;
  }

  .footer {
    margin-top: 15px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .board_shower{
    margin: 4px;
  }
  ::v-deep .el-carousel__indicators--horizontal{
    line-height: 0; height: 16px;
    .el-carousel__indicator--horizontal{
      padding: 7px 4px;
    }
  }
  ::v-deep .el-table__cell div.cell {
    padding: 0 10px !important;
  }
}
.upload-file{
  position: absolute;
  width: 120px;
  height: 120px;
  margin-left: 55%;
  bottom: 210px;
  z-index: 9999;
}
::v-deep .el-upload-dragger{
    background-color: #104c66 !important;
    border: 1px solid #359cbc !important;

}
</style>