<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="6">
                  <div class="descriptions_cell text-center">
                    <div class="descriptions_content">
                      {{rankOverview.proTotal}}
                    </div>
                    <div class="descriptions_label">
                      问题数
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="descriptions_cell text-center">
                    <div class="descriptions_content">
                      {{rankOverview.changing}}
                    </div>
                    <div class="descriptions_label">
                      整改中
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="descriptions_cell text-center">
                    <div class="descriptions_content">
                      {{ rankOverview.changed }}
                    </div>
                    <div class="descriptions_label">
                      已整改
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="descriptions_cell text-center">
                    <div class="descriptions_content">
                      {{ rankOverview.correctionRate }}%
                    </div>
                    <div class="descriptions_label">
                      整改率
                    </div>
                  </div>
                </el-col>
              </el-row>

              <datav-tabs
                  type="bottom-button"
                  v-model="activeTabLeft"

              >
                <datav-tab-item label="分县市局" name="3">
                  <el-scrollbar height="350px">
                    <datav-chart-bar
                        :data="data1"
                        :color="colors"
                        :size="small"
                        title="整改率排名"
                        sub-title="已整改/问题数"
                    />
                  </el-scrollbar>
                </datav-tab-item>
                <datav-tab-item label="局属单位" name="4">
                  <el-scrollbar height="350px">
                    <datav-chart-bar
                        :data="jsdwBarList"
                        :max="11"
                        size="large"
                        :color="colors"
                        title="整改率排名"
                        sub-title="完成数/问题数"
                    />
                  </el-scrollbar>
                </datav-tab-item>
              </datav-tabs>

            </datav-card>

            <datav-card title="问题类型占比">
              <v-charts
                  style="height: 300px"
                  :option="option2"
                  autoresize
              />
            </datav-card>
          </el-col>

          <el-col :span="12">
            <datav-date-picker v-model="time"/>
            <div class="flex gap-42">
              <datav-statistic
                  :value="overview.supervisionNotifyTotal"
                  title="通报问题数"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.supervisionNotifyChangingTotal"
                  title="整改中"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.supervisionNotifyChangedTotal"
                  title="已整改"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.supervisionNotifyOrgTotal"
                  title="涉及单位数"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.supervisionNotifyPreTotal"
                  title="涉及人数"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.correctionRate"
                  value-unit="%"
                  title="整改率"
                  style="width: 16.66%"
              />
            </div>
            <v-charts
                style="height: 450px"
                :option="option"
                autoresize
            />
            <datav-card title="问题趋势">
              <v-charts
                  style="height: 280px"
                  :option="option1"
                  autoresize
              />
            </datav-card>
          </el-col>

          <el-col :span="6">
            <datav-card>
<!--              <datav-tabs v-model="activeTabRight" size="small">
                <datav-tab-item label="枪支管理" name="1">
                  <datav-tabs
                      v-model="activeMailTabRight"
                      type="bottom-button"
                  >
                    <el-row class="mb-32">
                      <el-col :span="6">
                        <div class="descriptions_cell text-center">
                          <div class="descriptions_content">
                            42
                          </div>
                          <div class="descriptions_label">
                            问题数
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="descriptions_cell text-center">
                          <div class="descriptions_content">
                            2
                          </div>
                          <div class="descriptions_label">
                            整改中
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="descriptions_cell text-center">
                          <div class="descriptions_content">
                            40
                          </div>
                          <div class="descriptions_label">
                            已整改
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="descriptions_cell text-center">
                          <div class="descriptions_content">
                            95%
                          </div>
                          <div class="descriptions_label">
                            整改率
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <datav-tab-item label="分县市局" name="1">
                      <el-scrollbar height="300px">
                        <datav-chart-bar-mail
                            :data="xx"
                            size="large"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                    <datav-tab-item label="局属单位" name="2">
                      <el-scrollbar height="300px">
                        <datav-chart-bar-mail
                            :data="xx"
                            :max="11"
                            size="large"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                  </datav-tabs>
                </datav-tab-item>
                <datav-tab-item label="涉企问题" name="2">
                  <datav-tabs
                      v-model="activeMailTabRight"
                      type="bottom-button"
                  >
                    <datav-tab-item label="分县市局" name="1">
                      <el-scrollbar height="300px">
                        <datav-chart-bar-mail
                            :data="xx"
                            size="large"
                        />
                      </el-scrollbar>

                    </datav-tab-item>
                    <datav-tab-item label="局属单位" name="2">
                      <el-scrollbar height="300px">
                        <datav-chart-bar-mail
                            :data="xx"
                            :max="11"
                            size="large"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                  </datav-tabs>
                </datav-tab-item>
                <datav-tab-item label="黄赌毒" name="3">
                  <datav-tabs
                      v-model="activeMailTabRight"
                      type="bottom-button"
                  >
                    <datav-tab-item label="分县市局" name="1">
                      <el-scrollbar height="300px">
                        <datav-chart-bar-mail
                            :data="xx"
                            size="large"
                        />
                      </el-scrollbar>

                    </datav-tab-item>
                    <datav-tab-item label="局属单位" name="2">
                      <el-scrollbar height="300px">
                        <datav-chart-bar-mail
                            :data="xx"
                            :max="11"
                            size="large"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                  </datav-tabs>
                </datav-tab-item>
                <datav-tab-item label="执法办案" name="4">
                  <datav-tabs
                      v-model="activeMailTabRight"
                      type="bottom-button"
                  >
                    <datav-tab-item label="分县市局" name="1">
                      <el-scrollbar height="300px">
                        <datav-chart-bar-mail
                            :data="xx"
                            size="large"
                        />
                      </el-scrollbar>

                    </datav-tab-item>
                    <datav-tab-item label="局属单位" name="2">
                      <el-scrollbar height="300px">
                        <datav-chart-bar-mail
                            :data="xx"
                            :max="11"
                            size="large"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                  </datav-tabs>
                </datav-tab-item>
                <datav-tab-item label="工作日测酒" name="5">
                  <datav-tabs
                      v-model="activeMailTabRight"
                      type="bottom-button"
                  >
                    <datav-tab-item label="分县市局" name="1">
                      <el-scrollbar height="300px">
                        <datav-chart-bar-mail
                            :data="xx"
                            size="large"
                        />
                      </el-scrollbar>

                    </datav-tab-item>
                    <datav-tab-item label="局属单位" name="2">
                      <el-scrollbar height="300px">
                        <datav-chart-bar-mail
                            :data="xx"
                            :max="11"
                            size="large"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                  </datav-tabs>
                </datav-tab-item>
              </datav-tabs>-->

              <!--              <datav-chart-bar
                                title="问题数排名"
                                sub-title="问题数"
                                :data="data2"
                                :max="9700"
                            />-->

            </datav-card>
            <datav-card title="督察工作动态">
              <el-scrollbar height="400px">
                <div class="message">
                  <div class="message-title">工作部署</div>
                  <div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法“三个规定”进展情况的通知。</div>
                  <div class="message-footer flex end">
                    <span>2024-09-18 18:00:13</span>
                  </div>
                </div>
                <div class="message" type="warning">
                  <div class="message-title">督察通报</div>
                  <div class="message-content">
                    自20**年**月**日起，对****同志担任****单位****职务期间的经济责任履行情况进行审计，必要时，将追溯至相关年度或延伸审计有关单位。
                  </div>
                  <div class="message-footer flex end">
                    <span>2024-09-18 18:00:13</span>
                  </div>
                </div>
                <div class="message" type="success">
                  <div class="message-title">工作简报</div>
                  <div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法“三个规定”进展情况的通知。</div>
                  <div class="message-footer flex end">
                    <span>2024-09-18 18:00:13</span>
                  </div>
                </div>
                <div class="message">
                  <div class="message-title">工作部署</div>
                  <div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法“三个规定”进展情况的通知。</div>
                  <div class="message-footer flex end">
                    <span>2024-09-18 18:00:13</span>
                  </div>
                </div>
              </el-scrollbar>
            </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 {getAllSupervisionNotifyCount, getChangedRank} from "@/api/data/supervisionNotify.ts";

echarts.registerMap("changsha", changshaMap);
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",
      },
    }
  },
  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: [
        2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
        3000, 3100, 3100, 3100,
      ],
    },
  ],
});

const data1 = ref([
  /*{
    label: "开福分局",
    value: 90,
    unit: "%",
    numerator: 16,
    denominator: 17,
  },
  {
    label: "芙蓉分局",
    value: 90,
    unit: "%",
    numerator: 11,
    denominator: 11,
  },
  {
    label: "岳麓分局",
    value: 80,
    unit: "%",
    numerator: 10,
    denominator: 10,
  },
  {
    label: "雨花分局",
    value: 70,
    unit: "%",
    numerator: 9,
    denominator: 9,
  },
  {
    label: "望城分局",
    value: 60,
    unit: "%",
    numerator: 4,
    denominator: 4,
  },
  {
    label: "浏阳市局",
    value: 50,
    unit: "%",
    numerator: 3,
    denominator: 3,
  },
  {
    label: "长沙县局",
    value: 40,
    unit: "%",
    numerator: 3,
    denominator: 3,
  },*/
]);

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 = {
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 18.6, name: "执法办案"},
        {value: 15.5, name: "训练执勤"},
        {value: 1.9, name: "纪律作风"},
        {value: 2.5, name: "专项工作"},
        {value: 30, name: "整改核查"},
        {value: 31, name: "其他类型"},
      ],
    },
  ],
};


// region  初始化数据
const activeTabLeft = ref("3");
const overview = ref({
  supervisionNotifyTotal: 0,
  supervisionNotifyOrgTotal: 0,
  supervisionNotifyPreTotal: 0,
  supervisionNotifyChangingTotal: 0,
  supervisionNotifyChangedTotal: 0,
  correctionRate: 0,
});
const rankOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
});


const time = ref([
  moment().startOf("year").format("YYYY-MM-DD"),
  moment().format("YYYY-MM-DD"),
]);

function getData() {
  getAllSupervisionNotifyCount(time.value).then((res) => {
    overview.value = res.overview;
  });
  getChangedRank(time.value, 3).then((res) => {
    rankOverview.value = res.rankOverview;
    data1.value = res.changedRankList;
  });
}

watch(time, () => {
  getData();
});
watch(activeTabLeft, () => {
  alert(activeTabLeft.value)
  getChangedRank(time.value, activeTabLeft.value).then((res) => {
    rankOverview.value = res.rankOverview;
  });
});



onMounted(() => {
  getData();
});

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


</script>

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

.message {
  padding: 10px;
  margin-bottom: 10px;
  background: linear-gradient(270deg, rgba(16, 151, 255, 0.1) 0%, rgba(0, 55, 236, 0.87) 100%);

  &[type=warning] {
    background: linear-gradient(270deg, rgba(255, 190, 16, 0.1) 0%, rgba(236, 84, 0, 0.87) 100%);
  }

  &[type=success] {
    background: linear-gradient(270deg, rgba(91, 216, 9, 0.14) 0%, #28813D 100%);
  }

  .message-title {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .message-content {
    margin-bottom: 10px;
  }
}
</style>