<template>
  <el-scrollbar height="100vh">
    <div class="wrapper">
      <datav-header/>
      <main>
        <el-row :gutter="16">
          <el-col :span="6">
            <datav-card title="机构问题排名" sub-title="问题数">
              <datav-tabs
                  v-model="activeOrgTab"
                  type="bottom-button"
              >
                <datav-tab-item label="分县市局" name="1">
                  <el-scrollbar height="340px">
                    <datav-chart-bar
                        :data="fxsjlist"
                        size="large"
                        :max="11"
                        :color="colors"
                    />
                  </el-scrollbar>
                </datav-tab-item>
                <datav-tab-item label="局属单位" name="2">
                  <el-scrollbar height="340px">
                    <datav-chart-bar
                        :data="jsdwlist"
                        :max="11"
                        size="large"
                        :color="colors"
                    />
                  </el-scrollbar>
                </datav-tab-item>
              </datav-tabs>
            </datav-card>
            <datav-card title="业务类型占比">
              <v-charts
                  style="height: 360px;"
                  :option="zfbaPieOption"
                  autoresize
              />
            </datav-card>
          </el-col>

          <el-col :span="12">
            <datav-date-picker v-model="time"/>
            <div class="flex gap-42">
              <datav-statistic
                  :value="overview.totalPro"
                  title="问题总数"
                  style="width: 13.66%; margin-left: 20px"
              />
              <datav-statistic
                  :value="overview.supervisionPro"
                  title="督察问题"
                  style="width: 13.66%; margin-left: 30px"
              />
              <datav-statistic
                  :value="overview.caseVerificationPro"
                  title="案件核查问题"
                  style="width: 13.66%; margin-left: 30px"
              />
              <datav-statistic
                  :value="overview.complaintPro"
                  title="信访投诉问题"
                  style="width: 13.66%; margin-left: 30px"
              />
              <datav-statistic
                  :value="overview.talkPro"
                  title="民意感知问题"
                  style="width: 13.66%; margin-left: 30px"
              />
              <datav-statistic
                  :value="overview.auditPro"
                  title="审计监督问题"
                  style="width: 13.66%; margin-left: 10px"
              />
            </div>
            <v-charts
                style="height: 360px"
                :option="option"
                autoresize
            />

            <div>
              <datav-card title="问题趋势">
                <v-charts
                    style="height: 280px;"
                    :option="proTrend"
                    autoresize
                />
                <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>
            </div>
          </el-col>

          <el-col :span="6">
            <datav-card title="突出问题排名" sub-title="问题数">
              <el-scrollbar height="390px">
                <datav-chart-bar-pro
                    :data="tcwtlist"
                    size="small"
                    :color="colors"
                />
              </el-scrollbar>
            </datav-card>

            <datav-card title="问题类型占比">
              <v-charts
                  style="height: 370px;"
                  :option="wtlxPieOption"
                  autoresize
              />
            </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";
import {
  getAllGobalCount,
  getBusinessRate,
  getGobalRecentlyTrendByMonth,
  getOrganizationRank, getProblemBusinessRate, getStrongProblemRate, getGobalMap
} from "@/api/data/basicScreen.ts";

// region  各种变量
const activeOrgTab = ref("1");
const fxsjlist = ref([]);  // 分县市区机构问题排名
const jsdwlist = ref([]);  // 局属单位机构问题排名
const ywzblist = ref([]);  // 业务类型占比
const wtlxlist = ref([]);  // 问题类型占比
const tcwtlist = ref([]);  // 突出问题排名
const overview = ref({
  totalPro: 0,
  supervisionPro: 0,
  caseVerificationPro: 0,
  complaintPro: 0,
  talkPro: 0,
  auditPro: 0,
});   // 中央的概况数据
const time = ref([
  moment().startOf("year").format("YYYY-MM-DD"),
  moment().format("YYYY-MM-DD"),
]);   // 时间范围
const gobalTempMapVoList = ref([
  {
    "name": "天心分局",
    "totalPro": 11,
    "supervisePro": 11,
    "caseVerifyPro": 11,
    "mailPro": 11,
    "policePro": 11,
    "reviewPro": 11
  }
]);  // 地图临时数据
const router = useRouter();
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
// endregion

function go() {
  router.push("/datav/sub1")
}


// region  图表变量
// 业务类型占比
const zfbaPieOption = computed(() => {
  return {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        label: {
          color: "#fff",
        },
        data: ywzblist.value,
      },
    ],
  };
});
// 问题类型占比
const wtlxPieOption = computed(() => {
  return {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        label: {
          color: "#fff",
        },
        data: wtlxlist.value,

      },
    ],
  };
});
// 地图
echarts.registerMap("changsha", changshaMap);
const option = ref({
  geo: {
    map: "changsha",
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      console.log(params);
      const dataItem = gobalTempMapVoList.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.totalPro}</span></li>
              <li>督察问题 <span>${dataItem.supervisePro}</span></li>
              <li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li>
              <li>信访投诉问题 <span>${dataItem.mailPro}</span></li>
              <li>民意感知问题 <span>${dataItem.policePro}</span></li>
               <li>审计督察问题 <span>${dataItem.reviewPro}</span></li>
            </ul>
          </div>
        </div>`;
      } else {
        return `
        <div class="tooltip">
            <div class="tooltip-title">${dataItem.originalName}</div>
            <div class="tooltip-content">
  <ul class="tooltip-ul"">
    <li>问题总数 <span>0000</span></li>
   <li>督察问题 <span>0000</span></li>
    <li>案件核查问题 <span>0000</span></li>
    <li>信访投诉问题 <span>0000</span></li>
    <li>民意感知问题 <span>0000</span></li>
    <li>审计督察问题 <span>0000</span></li>

  </ul>

            </div>
        </div>`;
      }
    },
    // backgroundColor: "#031577", //
    // borderColor: "#0A2F86",
    borderWidth: 0, // 设置边框宽度为1像素
    borderRadius: 3, // 设置边框半径为3像素
    shadowBlur: 0, // 设置阴影模糊程度为8像素
    shadowOffsetX: 0, // 设置水平阴影位移量为0像素
    shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
  },
  visualMap: {
    type: "piecewise",
    bottom: 10,
    pieces: [
      {min: 0, max: 500, label: "问题数低于500", color: "#4987F6"},
      {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 proTrend = 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: [],
    },
  ],
});
// endregion

// region  初始化数据
function getData() {
  getOrganizationRank(time.value).then((res) => {
    fxsjlist.value = res.fxsjlist;
    jsdwlist.value = res.jsdwlist;
  });
  getBusinessRate(time.value).then((res) => {
    ywzblist.value = res.ywzblist;
  });
  getAllGobalCount(time.value).then((res) => {
    overview.value = res.overview;
  });
  getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => {
    const gobalRecentlyTrendList = res.gobalRecentlyTrendList;
    const categories = gobalRecentlyTrendList.map(item => item.name);
    const values = gobalRecentlyTrendList.map(item => item.value);
    // 更新图表数据
    proTrend.value.xAxis.data = categories;
    proTrend.value.series[0].data = values;
  });
  getStrongProblemRate(time.value).then((res) => {
    tcwtlist.value = res.tcwtlist;
  });
  getProblemBusinessRate(time.value).then((res) => {
    wtlxlist.value = res.wtlxlist;
  });
  getGobalMap(time.value).then(res => {
    // 对返回的数据映射处理
    const mappedData = res.gobalTempMapVoList.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.totalPro,
      };
    });
    gobalTempMapVoList.value = mappedData;
    // gobalTempMapVoList.value = res.gobalTempMapVoList;
    option.value.series[0].data = mappedData;
  })
}
onMounted(() => {
  getData();
});
// endregion

// region 事件||监听
const handleCommand = (year) => {
  selectedYear.value = year; // 更新当前选中的年份
  getGobalRecentlyTrendByMonth(year).then(res => {
    const gobalRecentlyTrendList = res.gobalRecentlyTrendList;
    const categories = gobalRecentlyTrendList.map(item => item.name);
    const values = gobalRecentlyTrendList.map(item => item.value);
    // 更新图表数据
    proTrend.value.xAxis.data = categories;
    proTrend.value.series[0].data = values;
  });
};
watch(time, () => {
  getData();
});
// endregion


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,
  },
];
</script>


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

:deep() {
  // 弹框整体
  .tooltip {
    position: relative;
    width: 160px;
    height: 194px;
    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: 150px;
    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: 24px;
    color: #597AE9;
    font-weight: 400;
    font-size: 14px;
  }


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

  }


  ///* 小尖角 */
  //.tooltip::before {
  //  content: '';
  //  position: absolute;
  //  top: 90px; /* 调整尖角的垂直位置 */
  //  left: -10px; /* 调整尖角的水平位置 */
  //  width: 0;
  //  height: 0;
  //  //border-top: 10px solid red; /* 顶边颜色 */
  //  //border-bottom: 10px solid green; /* 底边颜色 */
  //  //border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
  //}

}

.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>


