<template>
    <el-scrollbar height="100vh">
        <div class="wrapper">
            <datav-header />
            <main>
                <el-row :gutter="16">
                    <el-col :span="6">
                        <datav-card title="维权案件情况">
                            <datav-chart-bar
                                sub-title="案件数"
                                :data="data1"
                                :max="31"
                                size="large"
                            />
                            <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
                                <div class="tab-title-item active">
                                    分县市局
                                </div>
                                <div class="tab-title-item">局属单位</div>
                            </div>
                        </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 class="tab-title-item">行政案件</div>
                            </div>
                        </datav-card>
                    </el-col>
                    <el-col :span="12">
                      <datav-date-picker v-model="time" />
                        <div class="flex gap-42">
                            <datav-statistic
                                :value="136"
                                title="维权案件总数"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="112"
                                title="受侵害人数"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="comfortPersonNumber"
                                title="抚慰人数"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="hitPersonNumber"
                                title="打击处理人数"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="comfortMoney"
                                title="&nbsp;&nbsp;&nbsp;&nbsp;抚慰金额（万元）"
                                style="width: 20%"
                            />
                        </div>
                        <v-charts
                            style="height: 450px"
                            :option="option"
                            autoresize
                        />
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <datav-card title="打处情况">
                                    <v-charts
                                        style="height: 300px"
                                        :option="option3"
                                        autoresize
                                    />
                                </datav-card>
                            </el-col>
                            <el-col :span="12">
                                <datav-card title="抚慰情况">
                                    <v-charts
                                        style="height: 300px"
                                        :option="option4"
                                        autoresize
                                    />
                                </datav-card>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="6">
                        <datav-card title="民辅警受伤情况">
                            <v-charts
                                style="height: 300px"
                                :option="option6"
                                autoresize
                            />
                            <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
                                <div class="tab-title-item active">
                                    受伤人数
                                </div>
                                <div class="tab-title-item">受伤类别</div>
                            </div>
                        </datav-card>
                        <datav-card title="发案情况占比">
                            <v-charts
                                style="height: 300px"
                                :option="option5"
                                autoresize
                            />
                            <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
                                <div class="tab-title-item active">
                                    发案环节
                                </div>
                                <div class="tab-title-item">发案警种</div>
                                <div class="tab-title-item">发案单位</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 {getRightsComfortData} from "@/api/datav";
import moment from "moment";

echarts.registerMap("changsha", changshaMap);
const time = ref([
  moment().startOf("year").format("YYYY-MM-DD"),
  moment().format("YYYY-MM-DD"),
]);
const comfortPersonNumber = ref(0);
const hitPersonNumber = ref(0);
const comfortMoney = ref(0.0);
const punishmentSituationList = ref([]);
const comfortSituationList = ref([]);

function getData() {
  getRightsComfortData(time.value).then((data) => {
    console.log('Received data:', data); // 添加日志输出
    comfortPersonNumber.value = data.comfortPersonNumber;
    hitPersonNumber.value = data.hitPersonNumber;
    comfortMoney.value = data.comfortMoney;
    punishmentSituationList.value = data.punishmentSituation;
    comfortSituationList.value = data.comfortSituation;
  });
}
watch(time, () => {
  getData();
})
onMounted(() => {
  getData();
});
const option = {
    geo: {
        // 是上面注册时的名字哦，registerMap（'名字保持一致'）
        map: "changsha",
    },

    visualMap: {
        type: "piecewise",
        bottom: 10,
        pieces: [
            { gte: 85, lte: 100, label: "问题数低于500" },
            { gte: 65, lte: 85, label: "问题数低于1000" },
            { gte: 0, lte: 65, label: "问题数低于1000" },
        ],
        right: 10, // 右边距
        realtime: false,
        orient: "horizontal", // 水平显示
        textStyle: {
            color: "#fff", // 文字颜色
        },
        calculable: true,
        inRange: {
            color: ["#D34343", "#F6A149", "#4987F6"],
        },
    },
    series: [
        {
            name: "长沙",
            type: "map",
            map: "changsha",
            hoverAnimation: true,

            label: {
                show: true,
                color: "white",
            },
            itemStyle: {
                normal: {
                    areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
                },
            },
        },
    ],
};

const option1 = ref({
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
            "9/10",
            "9/11",
            "9/12",
            "9/13",
            "9/14",
            "9/15",
            "9/16",
            "9/17",
            "9/18",
            "9/19",
            "9/20",
            "9/21",
            "9/22",
            "9/23",
        ],
    },
    yAxis: {
        type: "value",
        splitLine: {
            show: true,
            lineStyle: {
                color: "#193775",
            },
        },
    },
    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: [
                2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
                3000, 3100, 3100, 3100,
            ],
        },
    ],
});

const data1 = [
    // {
    //     name: "开福分局",
    //     value: 31
    // },
    // {
    //     name: "芙蓉分局",
    //     value: 30
    // },
    // {
    //     name: "岳麓分局",
    //     value: 22
    // },
    // {
    //     name: "雨花分局",
    //     value: 20
    // },
    // {
    //     name: "望城分局",
    //     value: 15
    // },
    // {
    //     name: "浏阳市局",
    //     value: 9
    // },
    // {
    //     name: "长沙县局",
    //     value: 9
    // },
];

const data2 = [
    {
        name: "开福分局",
        value: 9700,
    },
    {
        name: "芙蓉分局",
        value: 9021,
    },
    {
        name: "岳麓分局",
        value: 8512,
    },
    {
        name: "雨花分局",
        value: 8021,
    },
    {
        name: "望城分局",
        value: 7111,
    },
    {
        name: "浏阳市局",
        value: 6622,
    },
    {
        name: "长沙县局",
        value: 6221,
    },
];

const option2 = {
    // series: [
    //     {
    //         type: "pie",
    //         radius: ["40%", "70%"],
    //         label: {
    //             color: "#fff",
    //         },
    //         data: [
    //             { value: 311, name: "故意伤害" },
    //             { value: 735, name: "袭警罪" },
    //             { value: 580, name: "寻衅滋事" },
    //             { value: 484, name: "妨碍公务" }
    //         ],
    //     },
    // ],
};

const option3 = computed(() => {
    return {
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            label: {
              color: "#fff",
            },
            data: punishmentSituationList.value,
          },
        ],
    };
});

const option4 = computed(() => {
  return {
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        label: {
          color: "#fff",
        },
        data: comfortSituationList.value,
      },
    ],
  };
});

const option6 = {
    series: [
        // {
        //     type: "pie",
        //     radius: ["40%", "70%"],
        //     label: {
        //         color: "#fff",
        //     },
        //     data: [
        //         { value: 211, name: "民警" },
        //         { value: 655, name: "辅警" },
        //         { value: 666, name: "协警" },
        //         { value: 312, name: "巡防队员" }
        //     ],
        // },
    ],
};

const option5 = {
    series: [
        // {
        //     type: "pie",
        //     radius: ["40%", "70%"],
        //     label: {
        //         color: "#fff",
        //     },
        //     data: [
        //         { value: 211, name: "其它" },
        //         { value: 655, name: "网络侵权" },
        //         { value: 666, name: "110警情" },
        //         { value: 321, name: "安保维稳" },
        //         { value: 211, name: "执勤处室" },
        //         { value: 421, name: "组织调解" },
        //     ],
        // },
    ],
};
</script>
<style lang="scss" scoped>
@import "@/style/datav.scss";
</style>