<template>
  <el-scrollbar height="100vh">
    <div class="wrapper">
      <datav-header/>
      <main>
        <el-row :gutter="16">
          <el-col :span="6">
            <datav-card>
              <datav-tabs v-model="activeTab">
                <datav-tab-item label="维权案件情况" name="1">
                  <datav-tabs
                      v-model="activeMailTab"
                      type="bottom-button"
                      title="案件数"
                  >
                    <datav-tab-item label="分县市局" name="1">
                      <el-scrollbar height="300px">
                        <datav-chart-bar
                            :data="fxsjRightsRank"
                            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="jsdwRightsRank"
                            :max="11"
                            size="large"
                            :color="colors"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                  </datav-tabs>
                </datav-tab-item>
                <datav-tab-item label="抚慰金额情况" name="2">
                  <datav-tabs
                      v-model="activeMailTab"
                      type="bottom-button"
                  >
                    <datav-tab-item label="分县市局" name="1">
                      <el-scrollbar height="300px">
                        <datav-chart-bar
                            :data="fxsjComfortMoneyRank"
                            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="jsdwComfortMoneyRank"
                            :max="11"
                            size="large"
                            :color="colors"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                  </datav-tabs>
                </datav-tab-item>
              </datav-tabs>
            </datav-card>

            <datav-card title="案件类别占比">

              <datav-tabs
                  v-model="activeMailTab"
                  type="bottom-button"
              >
                <datav-tab-item label="刑事案件" name="1">
                  <v-charts
                      style="height: 350px"
                      :option="xsajCaseTypeOption"
                      autoresize
                  />
                </datav-tab-item>
                <datav-tab-item label="行政案件" name="2">
                  <v-charts
                      style="height: 350px"
                      :option="xzajCaseTypeOption"
                      autoresize
                  />
                </datav-tab-item>
              </datav-tabs>
            </datav-card>
          </el-col>

          <el-col :span="12">
            <datav-date-picker v-model="time"/>
            <div class="flex gap-42">
              <datav-statistic
                  :value="comfortOverview.comfortCaseTotal"
                  title="维权案件总数"
                  style="width: 20%"
              />
              <datav-statistic
                  :value="comfortOverview.hurtTotal"
                  title="受侵害人数"
                  style="width: 20%"
              />
              <datav-statistic
                  :value="comfortOverview.comfortTotal"
                  title="抚慰人数"
                  style="width: 20%"
              />
              <datav-statistic
                  :value="comfortOverview.hitTotal"
                  title="打击处理人数"
                  style="width: 20%"
              />
              <datav-statistic
                  :value="comfortOverview.comfortMoney"
                  :title="`抚慰金额\n（万元）`"
                  :isDecimal="true"
                  style="width: 20%"
              />
            </div>
            <v-charts
                style="height: 360px"
                :option="option"
                autoresize
                ref="chart"
                @click="handleClick"
            />
            <el-row :gutter="20">
              <el-col :span="12">
                <datav-card title="打处情况">
                  <v-charts
                      style="height: 300px"
                      :option="punishmentSituationOption"
                      autoresize
                  />
                </datav-card>
              </el-col>
              <el-col :span="12">
                <datav-card title="抚慰情况">
                  <v-charts
                      style="height: 300px"
                      :option="comfortSituationOption"
                      autoresize
                  />
                </datav-card>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="6">

            <datav-card title="民辅警受伤情况" sub-title="人数">
              <datav-tabs
                  v-model="activeMailTab"
                  type="bottom-button"
              >
                <datav-tab-item label="受伤人数" name="1">
                  <v-charts
                      style="height: 310px;"
                      :option="hurtNumOption"
                      autoresize
                  />
                </datav-tab-item>
                <datav-tab-item label="受伤类別" name="2">
                  <v-charts
                      style="height: 310px;"
                      :option="hurtTypeOption"
                      autoresize
                  />
                </datav-tab-item>
              </datav-tabs>
            </datav-card>

            <datav-card title="发案情况占比">

              <datav-tabs
                  v-model="activeMailTab"
                  type="bottom-button"
              >
                <datav-tab-item label="发案环节" name="1">
                  <v-charts
                      style="height: 350px"
                      :option="ariseCaseLinkOption"
                      autoresize
                  />
                </datav-tab-item>
                <datav-tab-item label="发案警种" name="2">
                  <v-charts
                      style="height: 350px"
                      :option="ariseCasePoliceOption"
                      autoresize
                  />
                </datav-tab-item>
                <datav-tab-item label="发案单位" name="3">
                  <v-charts
                      style="height: 350px"
                      :option="ariseCaseORgOption"
                      autoresize
                  />
                </datav-tab-item>

              </datav-tabs>


            </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";
import {
  getALlComfortCount,
  getPunishmentSituation,
  getComfortSituation,
  getRightsAndComfortRank, getPoliceHurtSituationAndHurtType, getCaseAriseSituationRate, getComfortMapIcon
} from "@/api/screen/rightsComfort.ts";
import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import {
  getSubOneALlComfortCount, getSubOneCaseAriseSituationRate,
  getSubOnePoliceHurtSituationAndHurtType
} from "@/api/screen/subScreen/subOneRightsConfort.ts";


// region 所有变量
const router = useRouter();
const route = useRoute();
const currentMapData = ref({})
const chart = ref(null);  // 地图
const currentDepartId = route.query.departId;
const time = ref([
  moment().startOf("year").format("YYYY-MM-DD"),
  moment().format("YYYY-MM-DD"),
]);
const fxsjRightsRank = ref([
  {
    label: "岳麓分局",
    value: 23
  },
  {
    label: "芙蓉分局",
    value: 20
  },
  {
    label: "天心分局",
    value: 20
  },
  {
    label: "雨花分局",
    value: 19
  },
  {
    label: "浏阳市局",
    value: 17
  },
  {
    label: "宁乡市局",
    value: 11
  },
  {
    label: "开福分局",
    value: 11
  },
  {
    label: "望城分局",
    value: 9
  },
  {
    label: "长沙县局",
    value: 9
  },
  {
    label: "高新分局",
    value: 4
  },

]);    // 分县市局维权案件情况
const jsdwRightsRank = ref([
  {
    label: "岳麓分局",
    value: 27
  },
  {
    label: "芙蓉分局",
    value: 20
  },
  {
    label: "天心分局",
    value: 20
  },
  {
    label: "雨花分局",
    value: 19
  },
  {
    label: "浏阳市局",
    value: 17
  },
  {
    label: "宁乡市局",
    value: 11
  },
  {
    label: "开福分局",
    value: 11
  },
  {
    label: "望城分局",
    value: 9
  },
  {
    label: "长沙县局",
    value: 9
  },
  {
    label: "高新分局",
    value: 4
  },

]);    // 局属单位维权案件情况
const fxsjComfortMoneyRank = ref([
  {
    label: "岳麓分局",
    value: 53
  },
  {
    label: "芙蓉分局",
    value: 20
  },
  {
    label: "天心分局",
    value: 20
  },
  {
    label: "雨花分局",
    value: 19
  },
  {
    label: "浏阳市局",
    value: 17
  },
  {
    label: "宁乡市局",
    value: 11
  },
  {
    label: "开福分局",
    value: 11
  },
  {
    label: "望城分局",
    value: 9
  },
  {
    label: "长沙县局",
    value: 9
  },
  {
    label: "高新分局",
    value: 4
  },

]);    // 分县市局抚慰金额情况
const jsdwComfortMoneyRank = ref([
  {
    label: "岳麓分局",
    value: 33
  },
  {
    label: "芙蓉分局",
    value: 20
  },
  {
    label: "天心分局",
    value: 20
  },
  {
    label: "雨花分局",
    value: 19
  },
  {
    label: "浏阳市局",
    value: 17
  },
  {
    label: "宁乡市局",
    value: 11
  },
  {
    label: "开福分局",
    value: 11
  },
  {
    label: "望城分局",
    value: 9
  },
  {
    label: "长沙县局",
    value: 9
  },
  {
    label: "高新分局",
    value: 4
  },

]);    // 局属单位抚慰金额情况
const comfortOverview = ref({
  comfortCaseTotal: 0,
  hurtTotal: 0,
  comfortTotal: 0,
  hitTotal: 0,
  comfortMoney: 0,
})   // 数据总览
let globalTempMapVoList = ref([]);
// endregion


// region 所有函数

const getMapJSON = async (departId) => {
  const res = await getSubOneStreetMap(departId);
  currentMapData.value = res;
  echarts.registerMap("changsha", res);
  chart.value.chart.setOption(option.value);
}

// 维权案件情况
const getRightsRankList = async (departId, timeValue) => {
  const res = await getSubOneALlComfortCount(departId, timeValue);
  fxsjRightsRank.value = res.fxsjRightsRankList;
  jsdwRightsRank.value = res.jsdwRightsRankList;
}
// 中央总览
// const getComfortOverview = async (timeValue) => {
//   const res = await getALlComfortCount(timeValue);
//   comfortOverview.value = res.comfortOverview;
// }
// 地图数据
// const getMapData = async (timeValue) => {
//   const res = await getComfortMapIcon(timeValue);
//   const mappedData = res.comfortMapVoList.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.totalCase,
//     };
//   });
//   globalTempMapVoList.value = mappedData
//   console.log(globalTempMapVoList)
//   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 getPunishmentSituationList = async (timeValue) => {
//   const res = await getPunishmentSituation(timeValue);
//   punishmentSituationOption.series[0].data = res.punishmentSituationList;
// }
// //抚慰情况
// const getComfortSituationList = async (timeValue) => {
//   const res = await getComfortSituation(timeValue);
//   comfortSituationOption.series[0].data = res.comfortSituationList;
// }

// 民辅警受伤情况-受伤人数
const getPoliceHurtSituationList = async (departId, timeValue) => {
  const res = await getSubOnePoliceHurtSituationAndHurtType(departId, timeValue);
  hurtNumOption.value.series[0].data = res.policeHurtSituationList
  hurtTypeOption.value.series[0].data = res.policeHurtTypeList
}

const getCaseAriseSituationRateList = async (departId, timeValue) => {
  const res = await getSubOneCaseAriseSituationRate(departId, timeValue);
  ariseCaseLinkOption.value.series[0].data = res.incidentLinkList
  ariseCasePoliceOption.value.series[0].data = res.incidentPoliceTypeList
  ariseCaseORgOption.value.series[0].data = res.incidentOrgList
}


// endregion

function getData() {
  getRightsRankList(currentDepartId, time.value);
  // getComfortOverview(time.value);
  // getMapData(time.value)
  // getPunishmentSituationList(time.value);
  // getComfortSituationList(time.value);
  getPoliceHurtSituationList(currentDepartId, time.value);
  getCaseAriseSituationRateList(currentDepartId, time.value);
}

watch(time, () => {
  getData();
})
onMounted(() => {
  getMapJSON(currentDepartId);
  getData();
});
const handleClick = (params) => {
  const departId = params.data.departId;
  const url = router.resolve({
    path: "/datav/subOneRightsComfort",
    query: {departId: departId},
  }).href;
  window.open(url, "_blank");
}


// region 所有图表
echarts.registerMap("changsha", changshaMap);
const option = ref({
  geo: {
    map: "changsha",
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      console.log(params)
      const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
      if (dataItem) {
        return `
        <div class="tooltip">
          <div class="tooltip-title">${dataItem.name}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul" >
              <li>维权案件总数 <span>${dataItem.totalCase}</span></li>
              <li>受侵害人数 <span>${dataItem.victimPer}</span></li>
              <li>抚慰人数 <span>${dataItem.comfortPer}</span></li>
              <li>打击处理人数 <span>${dataItem.hitPro}</span></li>
              <li>抚慰金额 <span>${dataItem.comfortMon}</span></li>
            </ul>
          </div>
        </div>`;
      } else {
        return `<div class="tooltip">
          <div class="tooltip-title">${dataItem.name}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul"">
               <li>维权案件总数 <span>-</span></li>
              <li>受侵害人数 <span>-</span></li>
              <li>抚慰人数 <span>-</span></li>
              <li>打击处理人数 <span>-</span></li>
              <li>抚慰金额 <span>-</span></li>
            </ul>
          </div>
        </div>`;
      }
    },
  },
  visualMap: {
    type: "piecewise",
    bottom: 10,
    pieces: [],
    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 xsajCaseTypeOption = ref({
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 32, name: "故意伤害"},
        {value: 42, name: "袭警罪"},
        {value: 12, name: "寻衅滋事"},
        {value: 28, name: "妨碍公务"}
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
})
const xzajCaseTypeOption = ref({
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 2, name: "故意伤害"},
        {value: 42, name: "袭警罪"},
        {value: 2, name: "寻衅滋事"},
        {value: 28, name: "妨碍公务"}
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
});
const punishmentSituationOption = {
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        // {value: 71, name: "刑事追究"},
        // {value: 97, name: "行政处理"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
};
const comfortSituationOption = {
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        // {value: 71, name: "刑事追究"},
        // {value: 97, name: "行政处理"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
};
const hurtNumOption = ref({
  series: [
    {
      type: "pie",
      radius: ["30%", "50%"],
      label: {
        color: "#fff",
      },
      tooltip: {
        trigger: "item",
      },
      data: [
        {value: 68, name: "民警"},
        {value: 50, name: "辅警"},
        {value: 3, name: "协警"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
});
const hurtTypeOption = ref({
  series: [
    {
      type: "pie",
      radius: ["30%", "50%"],
      label: {
        color: "#fff",
      },
      tooltip: {
        trigger: "item",
      },
      data: [
        {value: 68, name: "民警"},
        {value: 250, name: "辅警"},
        {value: 3, name: "协警"},
      ],

    },
  ],
  tooltip: {
    trigger: "item",
  },
});
const ariseCaseLinkOption = ref({
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 127, name: "110警情"},
        {value: 32, name: "执勤处室"},
        {value: 2, name: "组织调解"},
        {value: 3, name: "传唤抓捕"},
        {value: 2, name: "安保维稳"},
        {value: 2, name: "网络侵权"},
        {value: 2, name: "医闹纠纷"},
        {value: 1, name: "其它"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
});
const ariseCasePoliceOption = ref({
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 127, name: "110警情"},
        {value: 132, name: "执勤处室"},
        {value: 222, name: "组织调解"},
        {value: 332, name: "传唤抓捕"},
        {value: 2, name: "安保维稳"},
        {value: 276, name: "网络侵权"},
        {value: 492, name: "医闹纠纷"},
        {value: 199, name: "其它"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
});
const ariseCaseORgOption = ref({
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 17, name: "110警情"},
        {value: 322, name: "执勤处室"},
        {value: 234, name: "组织调解"},
        {value: 343, name: "传唤抓捕"},
        {value: 22, name: "安保维稳"},
        {value: 2, name: "网络侵权"},
        {value: 2, name: "医闹纠纷"},
        {value: 1, name: "其它"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
});
// 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>