<template>
  <el-scrollbar height="100vh">
    <div class="wrapper">
      <datav-header/>
      <main>
        <el-row :gutter="16">
          <el-col :span="6">
            <datav-card title="调查情况" style="height: 156px">
              <el-row  class="mb-32">
                <el-col :span="5">
                  <div class="descriptions_cell text-center margin-top-30">
                    <div class="descriptions_content">
                      {{ reviewOk[0].dczl }}
                    </div>
                    <div class="descriptions_label">
                      调查总量
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="descriptions_cell text-center margin-top-30">
                    <div class="descriptions_content">
                      {{ reviewOk[0].State3 }}
                    </div>
                    <div class="descriptions_label">
                      有效回复
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="descriptions_cell text-center margin-top-30">
                    <div class="descriptions_content">
                      {{ reviewOk[0].mys }}
                    </div>
                    <div class="descriptions_label">
                      满意
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="descriptions_cell text-center margin-top-30">
                    <div class="descriptions_content">
                      {{ reviewOk[0].jbmys }}
                    </div>
                    <div class="descriptions_label">
                      基本满意
                    </div>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="descriptions_cell text-center margin-top-30">
                    <div class="descriptions_content yellow">
                      {{ reviewOk[0].bmys }}
                    </div>
                    <div class="descriptions_label">
                      不满意数
                    </div>
                  </div>
                </el-col>
              </el-row>

            </datav-card>
            <datav-card title="调查滿意度">
              <el-container >
                <el-header>
                  <el-row class="mb-32">
                    <el-col :span="11">
                      <div class="descriptions_cell text-center">
                        <div class="descriptions_content">
                          {{
                            dcmyd.length > 0 && dcmyd[1] && dcmyd[1].FinalRP !== undefined ? dcmyd[1].FinalRP : '0'
                          }}
                        </div>
                        <div class="descriptions_label">
                          上期满意度
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="11">
                      <div class="descriptions_cell text-center height-118">
                        <div class="descriptions_content yellow">
                          {{
                            dcmyd.length > 0 && dcmyd[0] && dcmyd[0].FinalRP !== undefined ? dcmyd[0].FinalRP : '0'
                          }}
                        </div>
                        <div class="descriptions_label ">
                          当前调查满意度
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-header>
                <el-main style="height: 165px">
                    <v-charts  :option="option1" autoresize/>
                </el-main>
              </el-container>
            </datav-card>
            <div style="background-color:#04144E; ">
              <h3 style="color: white">业务满意率</h3>
              <el-table
                  :highlight-current-row="false"
                  :highlight-hover-row='false'
                  :data="tableData"
                  height="350"
                  :summary-cell-style="summaryCellStyle"
                  :summary-method="getSummaries"
                  :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
                  :header-cell-style="headerCellStyle"
                  :row-style="tableRowStyle"
                  :show-summary='true'
              >
                <el-table-column prop="Name" label="单项业务" width="77px"/>
                <el-table-column prop="sdcl" label="有效数" width="77px"/>
                <el-table-column prop="BasicallySatisfiedNum" label="基本满意数" width="77px"/>
                <el-table-column prop="sbmys" label="不满意数" width="77px"/>
                <el-table-column prop="smyl" label="满意率" width="77px"/>
                <el-table-column prop="smyltb" label="同比" width="77px">
                  <template v-slot="scope">
                    <span :style="getCellStyle(scope.row.smyltb)">{{ scope.row.smyltb }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>

          <el-col :span="12">
            <el-row justify="center" :gutter="20" class="mt-16">
              <el-col :span="4">
                <el-select v-model="selectYear" placeholder="请选择" @change="handleYearChange">
                  <el-option
                      v-for="item in years"
                      :key="item.ID"
                      :label="item.PeriodName"
                      :value="item.ID">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select v-model="selectMonth" placeholder="请选择" @change="handleMonthChange">
                  <el-option
                      v-for="item in months"
                      :key="item.ID"
                      :label="item.SonPeriodName"
                      :value="item.ID">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-tree-select
                    v-model="selectOrg"
                    :data="org"
                    check-strictly
                    :props="treeProps"
                    :expand-on-click-node="false"
                    node-key="id"
                    :style="{ fontSize: '12px', }"
                    @change="handleOrgChange"
                />
              </el-col>
              <el-col :span="4">
                <el-select v-model="task" placeholder="请选择" @change="handleTaskChange">
                  <el-option
                      v-for="item in content"
                      :key="item.ID"
                      :label="item.SetName"
                      :value="item.ID">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>


            <v-charts
                style="height: 450px"
                :option="option"
                autoresize
                @click="handleChartClick"
                class="map-option"
            />
            <datav-card title="综合滿意度排名">
              <div class="common-layout">
                <el-container>

                  <el-container>
                    <el-header>
                      <div style="background-color:#04144E; ">
                        <el-table
                            :data="tableData1"
                            height="70"
                            :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
                            :header-cell-style="headerCellStyle"
                            :row-style="tableRowStyleTableData1"
                            :show-summary='false'
                            :highlight-current-row='false'
                        >
                          <el-table-column prop="SetName" label="排名" width="72px"/>
                          <el-table-column prop="OrganizeName" label="市州考评" width="129"/>
                          <el-table-column prop="FinalRP" label="滿意度" width="75px"/>
                          <el-table-column prop="TBRp" label="上期满意度" width="75px"/>
                          <el-table-column prop="TBRpts" label="同比上期" width="75px">
                            <template v-slot="scope">
                              <span :style="getCellStyle(scope.row.TBRpts)">{{ scope.row.TBRpts }}</span>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-header>
                    <el-main>
                      <div style="background-color:#04144E; ">
                        <el-table
                            :data="tableData2"
                            height="215"
                            :style="{ width: '100%', marginTop: '70px', fontSize: fontSize + 'px'  }"
                            :header-cell-style="headerCellStyle"
                            :row-style="tableRowStyleTableData2"
                            :show-summary='false'
                        >
                          <el-table-column prop="MydRanking" label="排名" width="55px"/>
                          <el-table-column prop="OrganizeName" label="县市考评"/>
                          <el-table-column prop="FinalRP" label="滿意度" width="66px"/>
                          <el-table-column prop="TBRp" label="上期满意度" width="66px"/>
                          <el-table-column prop="TBRpts" label="同比上期" width="66px">
                            <template v-slot="scope">
                              <span :style="getCellStyle(scope.row.TBRpts)">{{ scope.row.TBRpts }}</span>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-main>
                  </el-container>

                  <el-aside width="445px">
                    <div style="background-color:#04144E; height: 360px ">
                      <el-table
                          :data="tableData3"
                          height="360"
                          :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
                          :header-cell-style="headerCellStyle"
                          :row-style="tableRowStyle"
                          :show-summary='false'
                      >
                        <el-table-column prop="MydRanking" label="排名"/>
                        <el-table-column prop="OrganizeName" label="区"/>
                        <el-table-column prop="FinalRP" label="滿意度"/>
                        <el-table-column prop="TBRp" label="上期满意度"/>
                        <el-table-column prop="TBRpts" label="同比上期" width="86px">
                          <template v-slot="scope">
                            <span :style="getCellStyle(scope.row.TBRpts)">{{ scope.row.TBRpts }}</span>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-aside>
                </el-container>
              </div>
            </datav-card>
          </el-col>

          <el-col :span="6">
            <datav-card title="不满意样本趋势" sub-title="不满意样本" style="height: 156px">
              <div style="height: 150px">
                <v-charts
                    :option="option2"
                    autoresize
                />
              </div>

            </datav-card>
            <datav-card title="单项分析">
              <div style="height: 226px">
                <v-charts
                    :option="option3"
                    autoresize
                />
              </div>
            </datav-card>
            <div style="background-color:#04144E; ">
              <h3 style="color: white">单项调查情况 <span style="font-size: 14px; color: #597AE9">昨日数据下发</span>
              </h3>
              <el-table
                  :data="tableData4"
                  height="350"
                  :summary-cell-style="summaryCellStyle"
                  :summary-method="getSummaries"
                  :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
                  :header-cell-style="headerCellStyle"
                  :row-style="tableRowStyle"
                  :show-summary='true'
              >
                <el-table-column prop="Name" label="单项业务"/>
                <el-table-column prop="sdcl" label="有效数"/>
                <el-table-column prop="bmyzs" label="省不满意数"/>
                <el-table-column prop="LastDayQACount" label="新增调查数"/>

              </el-table>
            </div>
          </el-col>

        </el-row>
      </main>
    </div>
  </el-scrollbar>

</template>


<script setup>
import vCharts from "vue-echarts";
import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core";
import {
  GetBMYYBQS, GetCustomOffLineSonPeriodSet,
  GetDCQK,
  GetDITU,
  GetDXFX,
  GetGLFW,
  GetMyPeriod, GetOffLineStatisticsSetList,
  GetRCSQQK,
  GetZHMYLPM,
  GetZRSJXF, qx_get
} from "@/api/screen/jwpy.ts";


// region  变量
const reviewOk = ref([{}]); // 调查情况
const dcmyd = ref([]); // 调查滿意度
const bmyybqs = ref([]); // 不满意样本趋势
const dxfx = ref([]); // 单项分析
const tempMap = ref([]) // 接收地图数据
const mapDataList = ref([]);  // 解析后的地图数据
const years = ref([{}])  // 年份列表
const selectYear = ref();  // 选择的年份
const tempMonths = ref([{}])  // 暂储细节后的全部返回的月份  注意不能随意改变
const months = ref([{}])   // 对应年份的月份
const selectMonth = ref();   // 选择的月份
const org = ref([])  // 组织机构
const selectOrg = ref()  // 选择的组织机构
const task = ref()   // 选择的任务id
const content = ref([{}])  // 任务id的列表

const tableData = ref([])    // 业务满意率
const tableData1 = ref([])   // 综合满意度排名
const tableData2 = ref([])
const tableData3 = ref([])
const tableData4 = ref([])   // 单项调查情况
// endregion
// 树形下拉框的映射字段
const treeProps = {
  label: 'text',
  children: 'children'
};


// 监听年份变化，更新月份数据
watch(selectYear, (newYearID) => {
  if (newYearID) {
    const temp = years.value.filter(item => item.ID === selectYear.value)
    if (temp.length > 0 && temp[0].PeriodName.includes("半")) {
      months.value = tempMonths.value.filter(item => item.PeriodID === newYearID);
      months.value.unshift({SonPeriodName: '半年度', ID: '-1'});
    } else {
      months.value = tempMonths.value.filter(item => item.PeriodID === newYearID);
      months.value.unshift({SonPeriodName: '全年', ID: '-1'});
    }
    selectMonth.value = months.value[0].ID;
  } else {
    months.value = [];           // 清空月份数据
  }
});


// region 下拉框
const handleYearChange = (checkedYear) => {
  console.log("年份" + selectYear.value + "  月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value)
  getData();
}
const handleMonthChange = (checkedMonth) => {
  console.log("年份" + selectYear.value + "  月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value)
  getData();
}
// 组织机构选项改变时
const handleOrgChange = async (checkedOrg) => {
  try {
    // 使用 await 等待异步操作完成   因为要等返回选中第一个 task 之后才能发送正确的请求
    content.value = await GetOffLineStatisticsSetList(selectOrg.value);
    task.value = content.value[0].ID;
    // 找到对应单位在地图上的位置
    const targetName = mapDataList.value.find(item => item.value === checkedOrg).name;
    const chart = echarts.getInstanceByDom(document.querySelector('.map-option'));
    if (chart) {
      chart.dispatchAction({type: 'highlight', name: targetName,});
    } else {
      alert("没有找到")
    }
    console.log("年份" + selectYear.value + "  月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value)
  } catch (error) {
    console.error("Error fetching data:", error);
  }
  await getData();
};
// 任务选项改变时
const handleTaskChange = (checkedTask) => {
  console.log("年份" + selectYear.value + "  月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value)
  getData();
}
// 点击地图
const handleChartClick = async (params) => {
  if (params.componentType === 'series') {
    const targetName = params.name === '长沙县' ? '长沙县公安局' : params.name.substring(0, 2);
    const clickedData = mapDataList.value.find(item => item.name.includes(targetName));
    if (clickedData) {
      selectOrg.value = clickedData.value;
      console.log(`地区：${params.name}   id：${selectOrg.value}   年：${selectYear.value}   月：${selectMonth.value}`);
      try {
        content.value = await GetOffLineStatisticsSetList(selectOrg.value);
        task.value = content.value[0].ID;
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    } else {
      console.error("没有找到匹配的数据项");
    }
  }
  await getData();
};
// endregion


echarts.registerMap("changsha", changshaMap);
const option = ref({
  geo: {
    map: "changsha",
  },
  visualMap: {
    show: false,
    type: "piecewise",
    bottom: 10,
    pieces: [
      {min: 0, max: 500, label: "问题数低于500", color: "#F6A149"},
      {min: 501, max: 1000, label: "问题数介于500-1000", color: "#F6A149"},
      {min: 1001, label: "问题数高于1000", color: "#D34343"},
    ],
    right: 10,
    realtime: false,
    orient: "horizontal",
    textStyle: {
      color: "#fff",
    },
    calculable: true,
  },
  series: [
    {
      name: "长沙",
      type: "map",
      map: "changsha",
      hoverAnimation: true,
      label: {
        show: true,
        color: "white",
      },
      itemStyle: {
        normal: {
          areaColor: "#02215E",
          borderColor: "#1773c3",
        },
      },
      emphasis: {
        areaColor: "#FFD700", // 高亮时区域颜色
        borderColor: "#FF0000", // 高亮时边框颜色
        borderWidth: 4 // 高亮时边框宽度
      },
      data: []
    }
  ],
})
const option1 = ref({
  xAxis: {
    type: "category",
    boundaryGap: true,
    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
    axisLabel: {
      interval: 0,
    },
    axisTick: {
      show: false // 隐藏x轴的刻度
    }
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: "#193775",
      },
    },
    axisLabel: {
      margin: 20,
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      type: "line",
      smooth: true,
      label: {
        show: false
      },
      lineStyle: {
        color: "#FFDB31",
        width: 4,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(255,218,51,0.25)", // 渐变起始颜色
          },
          {
            offset: 1,
            color: "rgba(255,219,49,0)", // 渐变结束颜色
          },
        ]),
      },
      data: [1,1,1,1,1,1,1,1,1,1,1,1], // 直接添加数据
    },
  ],
  grid: {left: '0%', right: '0%', top: '5%', bottom: '0%', containLabel: true},
})
const option2 = ref({
  xAxis: {
    type: "category",
    boundaryGap: true,
    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
    axisTick: {
      show: false // 隐藏x轴的刻度
    },
    axisLabel: {
      interval: 0,
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: "#193775",
      },
    },
    axisLabel: {
      margin: 20,
    },

  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      type: "line",
      smooth: true,
      label: {
        show: false
      },
      lineStyle: {
        color: "#6FDBA0",
        width: 4,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(109, 221, 159, 0.47)'
        }, {offset: 1, color: 'rgba(109, 221, 159, 0)'}])
      },
      data: [1,1,1,1,1,1,1,1,1,1,1,1], // 直接添加数据
    },
  ],
  grid: {left: '5%', right: '5%', top: '10%', bottom: '20%', containLabel: true},
})
const option3 = ref({
  tooltip: {},
  legend: {
    data: ['本期', '上一期', '去年同期'],
    textStyle: {
      color: '#fff',
    },
  },

  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      interval: 0, // 隔一个显示一个标签
      fontSize: 5,
      color: '#fff',
    },

  },
  yAxis: {
    type: 'value',
    axisLabel: {
      margin: 10,
    },
    splitLine: {
      show: true, lineStyle: {
        color: ['#193775'], // 设置x轴分割线的颜色
        width: 1, // 线条宽度
        type: 'solid' // 线条样式，可以是 'solid', 'dashed', 'dotted'
      }
    }
  },
  series: [
    {
      name: '本期',
      type: 'bar',
      data: [],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(40,230,255,0.63)'
        }, {offset: 1, color: 'rgba(40,230,255,0)'}])
      },


    },
    {
      name: '上一期',
      type: 'bar',
      data: [],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
            [{offset: 0, color: 'rgba(255,218,51,0.52)'},
              {offset: 1, color: 'rgba(255,219,49,0)'}])
      }
    },
    {
      name: '去年同期',
      type: 'line',
      data: [],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#6FDBA0'
        }, {offset: 1, color: '#6FDBA0'}])
      }
    }
  ],
  grid: {left: '8%', right: '0%', top: '10%', bottom: '10%'},
});


// region 初始化
onMounted(async () => {
  // 年
  const resYears = await GetMyPeriod();
  years.value = resYears.map(item => ({
    ID: item.ID,
    PeriodName: item.PeriodName
  }));
  if (years.value.length > 0) {
    selectYear.value = years.value[0].ID; // 选择第一个年份
    console.log("第一个年份" + selectYear.value)
  }

  // 月
  const resMonths = await GetCustomOffLineSonPeriodSet();
  tempMonths.value = resMonths.map(item => ({
    ID: item.ID,
    SonPeriodName: item.SonPeriodName,
    PeriodID: item.PeriodID,
  }));
  // 从返回的全部月份中筛选出对应年份的月份，添加一个 ‘全年’ 或者 ‘半年度’  value 为 -1
  if (tempMonths.value.length > 0) {
    const temp = years.value.filter(item => item.ID === selectYear.value)
    if (temp.length > 0 && temp[0].PeriodName.includes("半")) {
      months.value = tempMonths.value.filter(item => item.PeriodID === selectYear.value);
      months.value.unshift({SonPeriodName: '半年度', ID: '-1'});
    } else {
      months.value = tempMonths.value.filter(item => item.PeriodID === selectYear.value);
      months.value.unshift({SonPeriodName: '全年', ID: '-1'});
    }
    selectMonth.value = months.value[0].ID;
  }

  // 组织机构
  const resOrgs = await qx_get();
  org.value = resOrgs;
  if (org.value.length > 0) {
    selectOrg.value = org.value[0].id;
    console.log(selectOrg.value);
  }

  const resTasks = await GetOffLineStatisticsSetList(selectOrg.value);
  content.value = resTasks;
  if (content.value.length > 0) {
    console.log(content.value[0]);
    task.value = content.value[0].ID;
  }
  // 获取数据
  await getData();


});

async function getData() {

  // 调查情况
  GetDCQK(selectYear.value, selectMonth.value, selectOrg.value, task.value).then((res) => {
    reviewOk.value = res
  });

  // 调查满意度
  GetGLFW(selectYear.value, selectOrg.value, task.value).then((res) => {
    dcmyd.value = res
    option1.value.xAxis.data = dcmyd.value[0].lstson.slice(-6).map(item => item.SonPeriodName);
    option1.value.series[0].data = dcmyd.value[0].lstson.slice(-6).map(item => item.FinalRP);
  });

  // 业务满意率
  GetZRSJXF(selectYear.value, selectMonth.value, selectOrg.value, task.value).then((res) => {
    let temp = res.lstShen
    temp = temp.filter(item => item.Name !== null);
    tableData.value = temp
  });

  // 综合满意度排名
  GetZHMYLPM(selectYear.value, selectMonth.value).then((res) => {
    tableData1.value = res[0].lstCity
    let temp = res[0].lstSheng;
    // 返回数据数组是连着的  这里需要分组
    const group2 = temp.filter(item => item.SetName === "(省)县市考评");
    const group3 = temp.filter(item => item.SetName === "(省)区");
    tableData2.value = group2
    tableData3.value = group3
  });

  // 不满意样本趋势
  GetBMYYBQS(selectYear.value, selectOrg.value, task.value).then((res) => {
    bmyybqs.value = res;
    option2.value.xAxis.data = bmyybqs.value.map(item => item.SonPeriodName);
    option2.value.series[0].data = bmyybqs.value.map(item => item.QACount);
  });

  // 单项分析
  GetDXFX(selectYear.value, selectMonth.value, selectOrg.value, task.value).then((res) => {
    dxfx.value = res;
    option3.value.xAxis.data = dxfx.value[0].lstson.map(item => item.MasterName);
    option3.value.series[0].data = dxfx.value[0].lstson.map(item => item.FinalRP);   // 本周期
    option3.value.series[1].data = dxfx.value[1].lstson.map(item => item.FinalRP);   // 上一期
    option3.value.series[2].data = dxfx.value[2].lstson.map(item => item.FinalRP);   // 去年同期
  });

  // 单项调查情况
  GetRCSQQK(selectYear.value, selectMonth.value, selectOrg.value, task.value).then((res) => {
    let text = res
    text = text.filter(item => item.Name !== null)
    tableData4.value = text
  });

  // 地图数据
  GetDITU(selectYear.value).then((res) => {
    tempMap.value = res
    mapDataList.value = tempMap.value.map(org => {
      return {name: org.OrganizeName, value: org.OrganizeID};
    })
    option.value.series.data = mapDataList.value
  });

}

// endregion

// region 数据
// endregion


// region 表格样式
const fontSize = ref(11)
const headerCellStyle = ref({
  fontSize: '11px', /* 设置表头字体大小 */
  color: '#24D2EE', /* 设置表头字体颜色 */
  backgroundColor: '#04144E', /* 设置表头背景颜色 */
  height: '0px', /* 设置表头高度 */
  padding: '0 0 0 0', /* 设置表头内边距 */
  lineHeight: '0px',
});
const tableRowStyle = (row) => {
  return {
    backgroundColor: '#04144E',
    color: "#FFFFFF",
    height: '40px',
  };
};
const tableRowStyleTableData1 = (row) => {
  return {
    backgroundColor: '#04144E',
    color: "#FFFFFF",
    height: '50px',
  };
};
const tableRowStyleTableData2 = () => {
  return {
    backgroundColor: '#04144E',
    color: "#FFFFFF",
    height: '50px',
  };
}
// 自定义总合行样式
const summaryCellStyle = () => {
  return {
    backgroundColor: '#04144E',
    color: "#FFFFFF"
  };
};
// 定义汇总方法
const getSummaries = (param) => {
  const {columns, data} = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '总计';
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    if (!values.every(value => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
      // 小数就2位  不然就随便
      sums[index] = Number.isInteger(sums[index]) ? sums[index] : sums[index].toFixed(2);
    } else {
      sums[index] = 'N/A';
    }
  });
  return sums;
};
const getCellStyle = (smyltb) => {
  if (smyltb > 0) {
    return {color: 'green'};
  } else {
    return {color: 'red'};
  }
}
// endregion

</script>


<style lang="scss" scoped>
@import "@/style/datav.scss";

:deep() {
  .el-table__footer-wrapper tfoot td.el-table__cell {
    background-color: #09256D;
  }

  .el-scrollbar__wrap--hidden-default {
    background-color: #03154D;
  }

  .el-table .cell {
    padding: 0;
    text-align: center;
  }

  .el-table .el-table__row:hover {
    //background-color: transparent !important;
  }

  .el-table {
    --el-table-row-hover-bg-color: transparent;
    --el-table-border-color: #193775;
  }

  .el-select__wrapper {
    background-color: #1C3472;
    //border: 0px solid ;
  }

  .el-select__placeholder {
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
  }

  .el-select.is-focus {
    border-color: red; /* 去掉高亮时的边框颜色 */
    box-shadow: none; /* 去掉高亮时的阴影 */
  }

}

.dropdown-container {
  position: absolute;
  right: 30px;
  top: 65px;
}

.datav-tab-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.descriptions_content {
  font-size: 18px;
  font-weight: 700;
}


.margin-top-30 {
  margin-top: 30px;
}


.height-118 {
  height: 118px;
}

.custom-footer-row {
  background-color: #FB3131;
  font-weight: bold;
  color: #333;
}

.custom-footer-cell {
  text-align: center;
  padding: 10px;
}


h3 span {
  float: right;

}

h3 {
  line-height: 50px;
  margin-top: 10px;
  margin-bottom: 0px;
}

.yellow {
  color: #ffd04b;
}


</style>