<template>
  <el-scrollbar height="100vh">
    <div class="wrapper">
      <datav-header/>
      <main>
        <el-row :gutter="16">
          <el-col :span="6">
            <datav-card title="初访重访情况">
              <el-row class="mb-32">
                <el-col :span="8">
                  <div class="descriptions_cell text-center">
                    <div class="descriptions_content">
                      {{ currentOverview.firstMail }}
                    </div>
                    <div class="descriptions_label">
                      初信初访
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="descriptions_cell text-center">
                    <div class="descriptions_content">
                      {{ currentOverview.repeatMail }}
                    </div>
                    <div class="descriptions_label">
                      重复信访
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="descriptions_cell text-center">
                    <div class="descriptions_content">
                      {{ currentOverview.leaderMail }}
                    </div>
                    <div class="descriptions_label">
                      领导接访数
                    </div>
                  </div>
                </el-col>
              </el-row>
              <datav-card>
                <datav-tabs v-model="activeTab">
                  <datav-tab-item label="分县市局" name="1">
                    <datav-tabs
                        v-model="activeMailTab"
                        type="bottom-button"
                    >
                      <datav-tab-item label="初信初访" name="1">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="fxsjFirstMailList"
                              size="large"
                              :max="11"
                              :color="colors"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                      <datav-tab-item label="重复信访" name="2">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="fxsjRepeatMailList"
                              :max="11"
                              size="large"
                              :color="colors"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                      <datav-tab-item label="领导接访" name="3">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="fxsjLeaderViewMailList"
                              :max="11"
                              size="large"
                              :color="leaderViewColors"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                    </datav-tabs>
                  </datav-tab-item>
                  <datav-tab-item label="部委支队" name="2">
                    <datav-tabs
                        v-model="bwzdActiveTab"
                        type="bottom-button"
                    >
                      <datav-tab-item label="初信初访" name="1">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="bwzdFirstMailList"
                              size="large"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                      <datav-tab-item label="重复信访" name="2">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="bwzdRepeatMailList"
                              :max="11"
                              size="large"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                      <datav-tab-item label="领导接访" name="3">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="bwzdLeaderViewMailList"
                              :max="11"
                              size="large"
                              :color="leaderViewColors"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                    </datav-tabs>
                  </datav-tab-item>
                </datav-tabs>
              </datav-card>
            </datav-card>


            <datav-card title="信访问题类型">
              <v-charts
                  style="height: 300px"
                  :option="option2"
                  autoresize
              />
              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
                <div class="tab-title-item active">
                </div>
              </div>
            </datav-card>

          </el-col>

          <el-col :span="12">
            <div class="datav-col">
              <datav-date-picker v-model="time"/>
            </div>
            <div class="flex gap-42">
              <datav-statistic
                  :value="overview.manageMail"
                  title="局长信箱"
                  style="width: 20%"
              />

              <datav-statistic
                  :value="overview.totalMail"
                  title="信访总件数"
                  style="width: 20%"
              />
              <datav-statistic
                  :value="overview.countryMail"
                  title="国家信访"
                  style="width: 20%"
              />
              <datav-statistic
                  :value="overview.policeMail"
                  title="公安部信访"
                  style="width: 20%"
              />

              <datav-statistic
                  :value="overview.numberMail"
                  title="12337信访"
                  style="width: 20%"
              />
            </div>

            <v-charts
                style="height: 450px"
                :option="option"
                autoresize
                @click="handleClick"
            />

            <datav-card title="信访趋势">
              <datav-tabs v-model="activeMailTrend" @change="handleTabChange">
                <datav-tab-item label="国家信访" name="1">
                  <v-charts
                      style="width: 105%; height: 300px;"
                      :option="countryTrend"
                      autoresize
                  />
                </datav-tab-item>
                <datav-tab-item label="公安部信访" name="2">
                  <v-charts
                      style="width: 105%; height: 300px; "
                      :option="policeTrend"
                      autoresize
                  />
                </datav-tab-item>
                <datav-tab-item label="12337信访" name="4">
                  <v-charts
                      style="width: 105%; height: 300px; "
                      :option="numberTrend"
                      autoresize
                  />
                </datav-tab-item>
              </datav-tabs>
              <div class="gobal-dropdown-container">
                <el-dropdown class="test" @command="handleCommand">
                    <span class="el-dropdown-link my-gobal-yearselect">
                      {{ selectedYear + " 年" }}
                    </span>
                  <template #dropdown>
                    <el-dropdown-menu style="width: 90px">
                      <el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </datav-card>

          </el-col>

          <el-col :span="6">
            <datav-card title="缠访集访情况">
              <el-row class="mb-32">
                <el-col :span="8">
                  <div class="descriptions_cell text-center">
                    <div class="descriptions_content">
                      {{ currentRightOverview.leaderReview }}
                    </div>
                    <div class="descriptions_label">
                      领导督办
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="descriptions_cell text-center">
                    <div class="descriptions_content">
                      {{ currentRightOverview.entanglement }}
                    </div>
                    <div class="descriptions_label">
                      缠访闹访
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="descriptions_cell text-center">
                    <div class="descriptions_content">
                      {{ currentRightOverview.mass }}
                    </div>
                    <div class="descriptions_label">
                      群体集访
                    </div>
                  </div>
                </el-col>
              </el-row>
              <datav-card>
                <datav-tabs v-model="activeTabRight">
                  <datav-tab-item label="分县市局" name="1">
                    <datav-tabs
                        type="bottom-button"
                    >
                      <datav-tab-item label="领导督办" name="1">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="fxsjLeaderReviewMailList"
                              size="large"
                              :max="11"
                              :color="leaderViewColors"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                      <datav-tab-item label="缠访闹访" name="2">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="fxsjEntanglementMailList"
                              :max="11"
                              size="large"
                              :color="colors"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                      <datav-tab-item label="群体集访" name="3">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="fxsjMassMailList"
                              :max="11"
                              size="large"
                              :color="colors"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                    </datav-tabs>
                  </datav-tab-item>
                  <datav-tab-item label="部委支队" name="2">
                    <datav-tabs
                        type="bottom-button"
                    >
                      <datav-tab-item label="领导督办" name="1">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="bwzdLeaderReviewMailList"
                              size="large"
                              :color="leaderViewColors"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                      <datav-tab-item label="缠访闹访" name="2">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="bwzdEntanglementMailList"
                              :max="11"
                              size="large"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                      <datav-tab-item label="群体集访" name="3">
                        <el-scrollbar height="300px">
                          <datav-chart-bar
                              :data="bwzdMassMailList"
                              :max="11"
                              size="large"
                              :color="colors"
                          />
                        </el-scrollbar>
                      </datav-tab-item>
                    </datav-tabs>
                  </datav-tab-item>
                </datav-tabs>
              </datav-card>
            </datav-card>

            <datav-card title="追责问责情况">
              <v-charts
                  style="height: 300px"
                  :option="option3"
                  autoresize
              />
              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
                <div class="tab-title-item active">
                </div>
              </div>
            </datav-card>
          </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 moment from "moment/moment.js";
import {
  getAllMailCount,
  getEntanglementAndMassMail,
  getFirstAndRepeatMail,
  getMailMapIcon,
  getMailTrend
} from "@/api/screen/mail.ts";


//region  所有变量
let timer;
const router = useRouter();
const activeTab = ref("1");
const bwzdActiveTab = ref("1");  // 部委支队初重信tab
const activeMailTrend = ref("1");   // 信访趋势tab
const activeMailTab = ref("1");
const activeTabRight = ref("1");
const overview = ref({
  totalMail: 0,
  countryMail: 0,
  policeMail: 0,
  numberMail: 0,
  manageMail: 0,
});  // 总览
const fxjsFirstAndRepeatOverview = ref({
  firstMail: 0,
  repeatMail: 0,
  leaderMail: 0
});
const bwzdFirstAndRepeatOverview = ref({
  firstMail: 0,
  repeatMail: 0,
  leaderMail: 0
});
const fxsjFirstMailList = ref([]);  // 分局初信初访
const fxsjRepeatMailList = ref([]);  // 分局重访
const fxsjLeaderViewMailList = ref([]);   // 分局领导接访
const bwzdFirstMailList = ref([]);   // 部委初信
const bwzdRepeatMailList = ref([]);   // 部委重访
const bwzdLeaderViewMailList = ref([]);   // 部委领导接访
const fxsjMailEntanglementMassOverview = ref({
  entanglement: 0,
  mass: 0,
  leaderReview: 0,
})
const bwzdMailEntanglementMassOverview = ref({
  entanglement: 0,
  mass: 0,
  leaderReview: 0,
})
const fxsjLeaderReviewMailList = ref([]);   // 分局领导督察
const fxsjEntanglementMailList = ref([]);  // 分局缠闹
const fxsjMassMailList = ref([]);   // 分局集访
const bwzdLeaderReviewMailList = ref([]);   // 分局领导督察
const bwzdEntanglementMailList = ref([]);  // 部委缠闹
const bwzdMassMailList = ref([]);  // 部委集访

const time = ref([
  moment().subtract(1, "year").format("YYYY-MM-DD"),
  moment().format("YYYY-MM-DD"),
]);
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref(currentYear); // 当前选中的年份
const colors = [
  {
    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
    percentage: 80,
  },
  {
    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
    percentage: 60,
  },
  {
    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
    percentage: 40,
  },
];
const leaderViewColors = [
  {
    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
    percentage: 80,
  },
  {
    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
    percentage: 60,
  },
  {
    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
    percentage: 0,
  },
];

//endregion

// region 所有函数


const getFirstAndRepeatMailRank = async (timeValue = time.value) => {
  const res = await getFirstAndRepeatMail(timeValue)
  fxjsFirstAndRepeatOverview.value = res.fxjsFirstAndRepeatOverview;
  bwzdFirstAndRepeatOverview.value = res.bwzdFirstAndRepeatOverview
  fxsjFirstMailList.value = res.fxsjFirstRankList;
  fxsjRepeatMailList.value = res.fxsjRepeatRankList;
  fxsjLeaderViewMailList.value = res.fxsjLeaderViewRankList;

  bwzdFirstMailList.value = res.bwzdFirstRankList;
  bwzdRepeatMailList.value = res.bwzdRepeatRankList;
  bwzdLeaderViewMailList.value = res.bwzdLeaderViewRankList;

}
const getOverview = async (timeValue = time.value) => {
  const res = await getAllMailCount(timeValue)
  overview.value = res.overview;
}
const getTrend = async (year = selectedYear.value) => {
  const res = await getMailTrend(year);
  const policeList = res.policeList;
  const manageList = res.manageList;
  const numberList = res.numberList;
  const countryList = res.countryList;
  const policecategories = policeList.map(item => item.name);
  const policevalues = policeList.map(item => item.value);
  const managecategories = manageList.map(item => item.name);
  const managevalues = manageList.map(item => item.value);
  const numbercategories = numberList.map(item => item.name);
  const numbervalues = numberList.map(item => item.value);
  const countrycategories = countryList.map(item => item.name);
  const countryvalues = countryList.map(item => item.value);
  // 更新图表数据
  policeTrend.value.xAxis.data = policecategories;
  policeTrend.value.series[0].data = policevalues;
  manageTrend.value.xAxis.data = managecategories;
  manageTrend.value.series[0].data = managevalues;
  numberTrend.value.xAxis.data = numbercategories;
  numberTrend.value.series[0].data = numbervalues;
  countryTrend.value.xAxis.data = countrycategories;
  countryTrend.value.series[0].data = countryvalues;
}
const getEntangleMassRank = async (timeValue = time.value) => {
  const res = await getEntanglementAndMassMail(timeValue)
  fxsjMailEntanglementMassOverview.value = res.fxsjMailEntanglementMassOverview;
  bwzdMailEntanglementMassOverview.value = res.bwzdMailEntanglementMassOverview;
  fxsjEntanglementMailList.value = res.fxsjEntanglementList;
  fxsjMassMailList.value = res.fxsjMassList;
  fxsjLeaderReviewMailList.value = res.fxsjLeaderReviewList;

  bwzdLeaderReviewMailList.value = res.bwzdLeaderReviewList;
  bwzdEntanglementMailList.value = res.bwzdEntanglementList;
  bwzdMassMailList.value = res.bwzdMassList;
}

const mailMapIconList = ref([]);
const getMailMapIconList = async (timeValue = time.value) => {
  const res = await getMailMapIcon(timeValue);
  const mappedData = res.mailMapIconList.map(item => {
    let name;
    switch (item.name) {
      case '长沙县局':
        name = '长沙县';
        break;
      case '芙蓉分局':
        name = '芙蓉区';
        break;
      case '天心分局':
        name = '天心区';
        break;
      case '岳麓分局':
        name = '岳麓区';
        break;
      case '开福分局':
        name = '开福区';
        break;
      case '雨花分局':
        name = '雨花区';
        break;
      case '望城分局':
        name = '望城区';
        break;
      case '宁乡市局':
        name = '宁乡市';
        break;
      case '浏阳市局':
        name = '浏阳市';
        break;
      case '高新分局':
        name = '高新区';
        break;
      default:
        name = item.name;
        break;
    }
    return {
      ...item,
      originalName: item.name, // 添加原始名称
      name: name,
      value: item.total,
    };
  });
  mailMapIconList.value = mappedData;
  console.log(mailMapIconList)
  const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
  const avg = total / mappedData.length; // 计算平均值
  const range30Percent = avg * 0.3   // 不用取整，小数也可以
  option.value.series[0].data = mappedData;
  option.value.visualMap.pieces = [
    {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
    {gte: avg - range30Percent, lte: avg + range30Percent + 0.1, label: `平均问题上下浮动30%内`, color: "#F6A149"},
    {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
  ];
}
const getData = () => {
  getFirstAndRepeatMailRank();
  getOverview();
  getMailMapIconList()
  getTrend();
  getEntangleMassRank();
}

const currentOverview = computed(() => {
  return activeTab.value === '1' ? fxjsFirstAndRepeatOverview.value : bwzdFirstAndRepeatOverview.value;
});

const currentRightOverview = computed(() => {
  return activeTabRight.value === '1' ? fxsjMailEntanglementMassOverview.value : bwzdMailEntanglementMassOverview.value;
});
// endregion


// region 所有图
echarts.registerMap("changsha", changshaMap);
const gobalTempMapVoList = [
  {
    "name": "芙蓉分局",
    "total": 704,
    "countryTotal": 153,
    "policeTotal": 506,
    "numTotal": 45,
  }, {
    "name": "天心分局",
    "total": 700,
    "countryTotal": 150,
    "policeTotal": 483,
    "numTotal": 67,
  }, {
    "name": "岳麓分局",
    "total": 609,
    "countryTotal": 94,
    "policeTotal": 462,
    "numTotal": 53,
  }, {
    "name": "开福分局",
    "total": 392,
    "countryTotal": 108,
    "policeTotal": 224,
    "numTotal": 60,
  }, {
    "name": "雨花分局",
    "total": 886,
    "countryTotal": 204,
    "policeTotal": 601,
    "numTotal": 81,
  }, {
    "name": "望城分局",
    "total": 273,
    "countryTotal": 22,
    "policeTotal": 224,
    "numTotal": 27,
  }, {
    "name": "浏阳市局",
    "total": 335,
    "countryTotal": 34,
    "policeTotal": 261,
    "numTotal": 40,
  }, {
    "name": "宁乡市局",
    "total": 309,
    "countryTotal": 16,
    "policeTotal": 267,
    "numTotal": 26,
  }, {
    "name": "长沙县局",
    "total": 422,
    "countryTotal": 75,
    "policeTotal": 303,
    "numTotal": 44,
  }
];

// const gobalTempMapVoList=[]
const option = ref({
  geo: {
    map: "changsha",
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      console.log(params)
      const dataItem = mailMapIconList.value.find(item => item.name.includes(params.name.substring(0, 2)));
      if (dataItem) {
        return `
        <div class="tooltip">
          <div class="tooltip-title">${dataItem.originalName}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul" >
              <li>信访总件数 <span>${dataItem.total}</span></li>
              <li>国家信访 <span>${dataItem.countryTotal}</span></li>
              <li>公安部信访 <span>${dataItem.policeTotal}</span></li>
                <li>局长信箱 <span>${dataItem.commissionerTotal}</span></li>
              <li>12337信访 <span>${dataItem.numTotal}</span></li>
            </ul>
          </div>
        </div>`;
      } else {
        return `<div class="tooltip">
          <div class="tooltip-title">${params.name}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul"">
              <li>信访总件数 <span>0</span></li>
              <li>国家信访 <span>0</span></li>
              <li>公安部信访 <span>0</span></li>
              <li>局长信箱 <span>0</span></li>
              <li>12337信访 <span>0</span></li>
            </ul>
          </div>
        </div>`;
      }
    },
  },
  visualMap: {
    type: "piecewise",
    bottom: 10,
    pieces: [
      {gte: 0, lte: 10, label: "问题数低于500"},
      {gte: 10, lte: 20, label: "问题数介于500-1000"},
      {gte: 30, label: "问题数高于1000"},
    ],
    right: 10,
    realtime: false,
    orient: "horizontal",
    textStyle: {
      color: "#fff",
    },
    calculable: true,
    inRange: {
      color: ["#4987F6", "#F6A149", "#D34343",],
    },
  },
  series: [
    {
      name: "长沙",
      type: "map",
      map: "changsha",
      hoverAnimation: true,
      label: {
        show: true,
        color: "white",
      },
      itemStyle: {
        normal: {
          areaColor: "#02215E",
          borderColor: "#24D2EE",
          borderWidth: 1 // 高亮时边框宽度
        },
      },
      emphasis: {
        areaColor: "#FFD700", // 高亮时区域颜色
        borderColor: "#FF0000", // 高亮时边框颜色
        borderWidth: 4 // 高亮时边框宽度
      },
      data: []
    }
  ],
})
const policeTrend = ref({
  grid: {
    left: '5%', // 图表距离容器左边的距离
    right: '2%', // 图表距离容器右边的距离
    top: '10%', // 图表距离容器上边的距离
    bottom: '20%', // 图表距离容器下边的距离
    containLabel: false // 是否包含坐标轴的标签
  },
  xAxis: {
    type: "category",
    data: [],
    boundaryGap: true,
    axisTick: {
      // 去掉X轴刻度线
      show: false
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: "#193775",
      },
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      type: "line",
      smooth: true,
      label: {
        show: false
      },
      lineStyle: {
        color: "#28E6FF",
        width: 4,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(40,230,255,0.47)", // 渐变起始颜色
          },
          {
            offset: 1,
            color: "rgba(40,230,255,0)", // 渐变结束颜色
          },
        ]),
      },
      data: [],
    },
  ],
});
const manageTrend = ref({
  grid: {
    left: '5%', // 图表距离容器左边的距离
    right: '2%', // 图表距离容器右边的距离
    top: '10%', // 图表距离容器上边的距离
    bottom: '20%', // 图表距离容器下边的距离
    containLabel: false // 是否包含坐标轴的标签
  },
  xAxis: {
    type: "category",
    data: [],
    boundaryGap: true,
    axisTick: {
      // 去掉X轴刻度线
      show: false
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: "#193775",
      },
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      type: "line",
      smooth: true,
      label: {
        show: false
      },
      lineStyle: {
        color: "#28E6FF",
        width: 4,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(40,230,255,0.47)", // 渐变起始颜色
          },
          {
            offset: 1,
            color: "rgba(40,230,255,0)", // 渐变结束颜色
          },
        ]),
      },
      data: [],
    },
  ],
});
const numberTrend = ref({
  grid: {
    left: '5%', // 图表距离容器左边的距离
    right: '2%', // 图表距离容器右边的距离
    top: '10%', // 图表距离容器上边的距离
    bottom: '20%', // 图表距离容器下边的距离
    containLabel: false // 是否包含坐标轴的标签
  },
  xAxis: {
    type: "category",
    data: [],
    boundaryGap: true,
    axisTick: {
      // 去掉X轴刻度线
      show: false
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: "#193775",
      },
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      type: "line",
      smooth: true,
      label: {
        show: false
      },
      lineStyle: {
        color: "#28E6FF",
        width: 4,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(40,230,255,0.47)", // 渐变起始颜色
          },
          {
            offset: 1,
            color: "rgba(40,230,255,0)", // 渐变结束颜色
          },
        ]),
      },
      data: [],
    },
  ],
});
const countryTrend = ref({
  grid: {
    left: '5%', // 图表距离容器左边的距离
    right: '2%', // 图表距离容器右边的距离
    top: '10%', // 图表距离容器上边的距离
    bottom: '20%', // 图表距离容器下边的距离
    containLabel: false // 是否包含坐标轴的标签
  },
  xAxis: {
    type: "category",
    data: [],
    boundaryGap: true,
    axisTick: {
      // 去掉X轴刻度线
      show: false
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: "#193775",
      },
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      type: "line",
      smooth: true,
      label: {
        show: false
      },
      lineStyle: {
        color: "#28E6FF",
        width: 4,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(40,230,255,0.47)", // 渐变起始颜色
          },
          {
            offset: 1,
            color: "rgba(40,230,255,0)", // 渐变结束颜色
          },
        ]),
      },
      data: [],
    },
  ],
});
const option2 = {
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 1282, name: "不作为"},
        {value: 426, name: "求助咨询"},
        {value: 284, name: "乱作为"},
        {value: 131, name: "其他"},
        {value: 95, name: "违法违纪违规"},
        {value: 72, name: "慢作为"},
        {value: 24, name: "意见建议"},
        {value: 5, name: "纪律作风"},

      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
};
const option3 = {
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 10, name: "通报批评"},
        {value: 2, name: "责令检查"},
        {value: 1, name: "诫勉谈话"},
        {value: 1, name: "批评教育"},
      ],
    },
  ],
};
// endregion


// region 监听|事件
const handleCommand = (year) => {
  selectedYear.value = year;
  getTrend()
};
// 监听信访趋势tab切换
watch(time, () => {
  getData();
})
onMounted(() => {
  getData();
  timer = setInterval(() => {
    activeMailTab.value = (parseInt(activeMailTab.value) % 3 + 1).toString();
    console.log("Active Tab: ", activeMailTab.value);
  }, 3000); // 每3秒切换一次
});
const handleClick = (params) => {
  const departId = params.data.departId;
  const url = router.resolve({
    path: "/datav/subOneMailVisits",
    query: {departId: departId},
  }).href;
  window.open(url, "_blank");
}
// endregion

</script>


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

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

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


:deep() {
  // 弹框整体
  .tooltip {
    position: relative;
    width: 160px;
    height: 178px;
    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
    border: 1px solid #4E8FFF;
    margin: -10px -10px -10px -10px;

  }

  ////浏阳市局
  .tooltip-title {
    width: 160px;
    height: 43px;
    background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%);
    box-shadow: inset 0px -1px 0px 0px #253755;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    border-bottom: 1px solid #253755; /* 设置下边框 */
  }

  .tooltip-content {
    width: 160px;
    height: 133px;
    background: linear-gradient(180deg, #010457 0%, #031577 100%)
  }

  .tooltip-content ul {
    list-style-type: none; /* 移除默认的小圆点 */
    padding-left: 5px;
    margin: 0;
  }

  .tooltip-content ul li {
    height: 26px;
    color: #597AE9;
    font-weight: 400;
    font-size: 14px;
  }

  .tooltip-ul span {
    float: right;
    width: 55px;
    color: #fff;
    font-size: 14px;
    text-align: center; /* 水平居中 */
  }

}


.test {
  width: 95px;
  height: 25px;
  background: #1C3472;
}

.gobal-dropdown-container {
  position: absolute;
  right: 20px;
  top: 15px;
}

.my-gobal-yearselect {
  font-size: 14px;
  padding-top: 6px;
  padding-left: 20px;
  width: 90px;
  color: #fff;
}


</style>

<!--
<datav-tab-item label="局长信箱" name="3">
<v-charts
    style="width: 105%; height: 300px; "
    :option="manageTrend"
    autoresize
/>
</datav-tab-item>-->
