<template>
  <div>
    <div class="titleBox">
      <PageTitle title="警情分析报告">
        <el-button type="primary" @click="generatePDF()">
          <el-icon style="vertical-align: middle">
            <CirclePlus />
          </el-icon>
          <span style="vertical-align: middle">导出</span>
        </el-button>
      </PageTitle>
    </div>
    <!-- 搜索 -->
    <div ref="searchBox">
      <Search :searchArr="searchConfiger" @submit="onSearch">
        <template #defaultSlot>
          <!-- -->
          <el-select v-model="bjlbList" placeholder="请选择情报类型" multiple collapse-tags>
            <el-option v-for="item in dictItemList" :key="item.dm" :label="item.zdmc" :value="item.dm" />
          </el-select>
        </template>
      </Search>
    </div>
    <div style="background-color: #fff;color: black;padding: 15px;overflow: auto;" :style="{ height: tabHeight + 'px' }"
      ref="tableBox">
      <div style="border-bottom: 1px #ccc solid;padding-bottom: 30px;">
        <h1 class="headline">{{ nd }}年度西藏公安执法数据分析</h1>
      <div style="display: flex;align-items: center;justify-content: space-between; color: red;margin-top: 30px;padding: 0 30px;">
        <div>{{ deptId.name }}</div>
        <div>{{ deptId?.ord }}</div>
        <div>{{ deptId?.time }}</div>
      </div>
      </div>

      <p>为全面、客观、准确掌握全区公安机关的执法状况，自治区
        公安厅基于数据统计，对全区公安机关{{ nd }}年度的执法状况作
        了客观分析。</p>
      <h2>一、执法状况总体分析</h2>
      <h2>1.接处警情况</h2>
      <h2>1.1接报警情</h2>
      <p>

        {{ timeValidate(TimeValue.startTime, 'td') }}至{{ timeValidate(TimeValue.endTime, 'td') }}



        ，全区公安机关共
        接报各类警情{{ dataList.XsfxTj.total }}起,同比{{ `${dataList.XsfxTj.tbbsb > 0 ? "下降" : "上升"}
        ${dataList.XsfxTj.tbbsb}%,同比${dataList.XsfxTj.tbbsb > 0 ? "下降" : "上升"}${dataList.XsfxTj.tbbsb}%` }}。</p>
      <h2>1.1.1类型维度</h2>
      <p>
        从警情类型来看，{{ sortingRatioValue.Ydfx[0]?.name }}警情最多，占到{{ sortingRatioValue.Ydfx[0]?.ratio }}；其次为{{
          sortingRatioValue.Ydfx[1]?.name }}警情，占到{{ sortingRatioValue.Ydfx[1]?.ratio }}。
      </p>
      <MaleNightingalePicture roseType="area" style="height: 550px;" :title="{ text: '接警情类型', left: 'center' }"
        :chartData="dataList.jqlxTj" :chartName="'接警情类型'" :innerRadius="0" :padAngle="4" />
      <h2>1.1.2来源维度</h2>
      <p>
        从警情来源来看，{{ sortingRatioValue.Jqlx[0]?.name }}警情最多，占到{{ sortingRatioValue.Jqlx[0]?.ratio }}；其次为{{
          sortingRatioValue.Jqlx[1]?.name }}警情，占到{{ sortingRatioValue.Jqlx[1]?.ratio }}。
      </p>
      <MaleNightingalePicture roseType="area" :title="{ text: '警情来源', left: 'center' }" style="height: 550px;"
        :chartData="dataList.jqlyTj" :innerRadius="50" :outerRadius="150" :padAngle="4" />

      <h2>1.1.3地域维度</h2>
      <p>从地市分布地市来看，{{ sortingRatioValue.Dywdtj[0]?.ssbm }}警情量最大，占到全区警情总
        量的{{ sortingRatioValue.Dywdtj[0]?.ratio }}。
        <span v-if="sortingRatioValue.Dywdtj.length > 1">
          其次为{{ sortingRatioValue.Dywdtj[1]?.ssbm }}
          <span v-if="sortingRatioValue.Dywdtj.length > 2">
            <span v-if="sortingRatioValue.Dywdtj.length > 3">
              和{{ sortingRatioValue.Dywdtj[3]?.ssbm }}，两市警情量较为接近。
            </span>
            <span>
              警情量最少的为{{ sortingRatioValue.Dywdtj[sortingRatioValue.Dywdtj.length - 1]?.ssbm }}。
            </span>
          </span>
        </span>
      </p>
      <Histogram title="地市分布" :xAxisData="dataList.dyTj.xAxisData" :seriesData="dataList.dyTj.seriesData" />
      <h2>1.1.4时间维度</h2>
      <p>
        我们将所有警情按照月份划分进行统计发现，每月警情分布
        较为平均。最高月份为
        {{ sortingRatioValue.Ydfx[0]?.month }}月，占到{{ sortingRatioValue.Ydfx[0]?.ratio }}；
        <span v-if="sortingRatioValue.Ydfx.length > 1">
          最低月份为{{ sortingRatioValue.Ydfx[sortingRatioValue.Ydfx.length - 1]?.month }}月，
          占到{{ sortingRatioValue.Ydfx[sortingRatioValue.Ydfx.length - 1]?.ratio }}。
          考虑是因为{{ sortingRatioValue.Ydfx[0]?.month }}月为我区传统旅游旺季，进藏人员较多。
          <!-- {{sortingRatioValue.Ydfx[sortingRatioValue.Ydfx.length-1]?.month}}月一般春节及藏历新年期间，在藏人员较少。 -->
        </span>
      </p>
      <MaleNightingalePicture :title="{ text: '警情分布', left: 'center' }" style="height: 550px;"
        :chartData="dataList.ydTj" :innerRadius="10" :outerRadius="150" :padAngle="2" />
      <!-- <p>
        按照24小时每小时时段进行划分后发现，警情多发时段集
        中在9时至20时，每小时均在1000起以上。
      </p> -->
      <h2>1.2警情处置</h2>
      <h2>1.2.1结果维度</h2>
      <p>
        从警情处置结果来看，
        <span v-for="(item, index) in sortingRatioValue.Cljgf">
          {{ `${item.name}占到${item.ratio}，` }}
        </span>

        <!--
        {{sortingRatioValue.Cljgf[0]?.name}}的，占到{{sortingRatioValue.Cljgf[0]?.ratio}}；拟作行
        政案件处理的占比17.63%；拟作刑事案件处理的，占到6.39%。 -->
      </p>
      <MaleNightingalePicture :title="{ text: '警情处置', left: 'center' }" style="height: 550px;"
        :chartData="dataList.CljgfTj" :innerRadius="0" :outerRadius="150" :padAngle="2" />
      <h2>1.2.2效率维度</h2>
      <p>从处警效率来看，{{ sortingRatioValue.Czlfx[1]?.name }}处警的，占到{{ sortingRatioValue.Czlfx[0]?.ratio
        }}。表明我区公安机关在接警之后能够在第一时间处警。
      </p>
      <MaleNightingalePicture :title="{ text: '效率维度', left: 'center' }" style="height: 550px;"
        :chartData="dataList.withinTj" :innerRadius="0" :outerRadius="150" :padAngle="0" />
    </div>

  </div>
  <AddForm ref="addForm" :dict="{ D_GS_XS_LX }" />
</template>

<script setup>
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import Search from "@/components/aboutTable/Search.vue";
import MaleNightingalePicture from './components/maleNightingalePicture.vue'
import Histogram from './components/histogram.vue'
import { timeValidate } from '@/utils/tools.js'
import { getItem, setItem } from '@/utils/storage'
import { fxbgDywdtj, getDictItem, fxbgJqlxtj, fxbgJqlytj, fxbgYdfx, fxbgXsfx, fxgbCljgf, fxgbCzlfx, fxbgTj } from '@/api/semanticAnalysis'
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance, nextTick, computed, watch } from "vue";
const { proxy } = getCurrentInstance();
const { D_GS_XS_LX } = proxy.$dict("D_GS_XS_LX"); //获取字典数据
const dictItemList = ref([])
const searchConfiger = reactive([
  {
    label: "时间",
    showType: "daterange",
    prop: "startTime",
    placeholder: "请输入警情名称",
  },
  {
    showType: "defaultSlot",
    // prop: "bjlbList",
    placeholder: "请选择情报类型",
    label: "警情类别"
  },
])
const bjlbList = ref([])
onMounted(() => {
  tabHeightFn()
})
const tabHeight = ref(0)
// 表格高度计算
const tabHeightFn = () => {
  tabHeight.value = window.innerHeight - 300
  window.onresize = function () {
    tabHeightFn();
  };
};
const pageData = reactive({
  parameter: {},
  total: 0,
  loading: false,
  tableData: []
})
const onSearch = (val) => {
  const promes = {
    startTime: val.startTime ? val.startTime[0] : '',
    endTime: val.startTime ? val.startTime[1] : '',
  }
  const bjlbLists = bjlbList.value ? bjlbList.value.join(',') : ""
  pageData.parameter = { bjlbList: bjlbLists, ...promes }
  funAll()
}

// 数据处理

const dataList = reactive({
  dyTj: {
    xAxisData: [],
    seriesData: [],
  },
  jqlxTj: [],
  jqlyTj: [],
  CljgfTj: [],
  XsfxTj: [],
})
const sortingRatioValue = reactive({
  Dywdtj: [],
  Ydfx: [],
  Cljgf: [],
  Czlfx: [],
  Lyfx: [],
  Jqlx: []
})
const sortingRatio = (data) => {
  // 提取所有number值
  // 计算总数
  const total = data.reduce((sum, item) => sum + item.number, 0);
  // 找出第一大和第二大的值及其对应的name
  const sortedData = [...data].sort((a, b) => b.number - a.number);
  const dataValue = sortedData.map(item => {
    return {
      ...item,
      ratio: total > 0 ? (item.number / total * 100).toFixed(2) + '%' : '0%',
    }
  })
  return dataValue
}
// 地域统计
const getfxbgDywdtj = () => {
  let params = {
    ...pageData.parameter,
  }
  fxbgDywdtj(params).then(res => {
    dataList.dyTj.xAxisData = res.map(it => it.ssbm)
    dataList.dyTj.seriesData = [];
    for (let i = 0; i < res.length; i++) {
      dataList.dyTj.seriesData[i] = [];
      for (let j = 0; j < res.length; j++) {
        dataList.dyTj.seriesData[i][j] = 0;
      }
    }
    for (let i = 0; i < dataList.dyTj.seriesData.length; i++) {
      dataList.dyTj.seriesData[i][i] = res[i].number
    }
    sortingRatioValue.Dywdtj = sortingRatio(res)
  })
}
// 警情类型统计
const getfxbgJqlxtj = () => {
  let params
  if (pageData.parameter.bjlbList) {
    params = {
      ...pageData.parameter,
    }
  } else {
    params = {
      ...pageData.parameter,
      bjlbList: dictItemList.value.map(item => item.dm).join(',')
    }
  }
  fxbgJqlxtj(params).then(res => {
    sortingRatioValue.Jqlx = sortingRatio(res)
    dataList.jqlxTj = res.map(item => {
      return {
        name: item.name,
        value: item.number
      }
    })
  })
}
// 警情来源统计
const getfxbgJqlytj = () => {
  let params = {
    ...pageData.parameter,
  }
  fxbgJqlytj(params).then(res => {
    sortingRatioValue.Lyfx = sortingRatio(res)
    dataList.jqlyTj = res.map(item => {
      return {
        name: item.name,
        value: item.number
      }
    })
  })
}

//分析报告-时间维度-月分析
const getfxbgYdfx = () => {
  let params = {
    ...pageData.parameter,
  }
  fxbgYdfx(params).then(res => {
    sortingRatioValue.Ydfx = sortingRatio(res)
    dataList.ydTj = res.map(item => {
      return {
        name: item.month,
        value: item.number
      }
    })
  })
}
// 分析报告-处理结果分析
const getfxgbCljgf = () => {
  let params = {
    ...pageData.parameter,
  }

  fxgbCljgf(params).then(res => {
    sortingRatioValue.Cljgf = sortingRatio(res)
    dataList.CljgfTj = res.map(item => {
      return {
        name: item.name,
        value: item.number
      }
    })
  })
}
// 分析报告-处置率分析
const getfxgbCzlfx = () => {
  let params = {
    ...pageData.parameter,
  }
  fxgbCzlfx(params).then(res => {
    dataList.withinTj = [{
      name: "超时分流(超过24小时)",
      value: res.within24h ? res.within24h : 0
    }, {
      name: "按时分流(24小时内)",
      value: res.over24h ? res.over24h : 0
    }]
    sortingRatioValue.Czlfx = sortingRatio(dataList.withinTj)
  })
}

const getfxbgTj = () => {
  let params = {
    ...pageData.parameter,
  }
  fxbgTj(params).then(res => {
    console.log(res, "xxx");
    dataList.XsfxTj = res
  })
}
const TimeValue = ref({
  startTime: '',
  endTime: ''
})
const nd = ref()

watch(() => pageData.parameter, (newVal) => {
  if (newVal.startTime) {
    TimeValue.value.startTime = newVal.startTime
    TimeValue.value.endTime = newVal.endTime
    if (timeValidate(newVal.startTime, 'yd') == timeValidate(newVal.endTime, 'yd')) {
      nd.value = timeValidate(newVal.startTime, 'yd')
    } else {
      nd.value = `${timeValidate(newVal.startTime, 'yd')}至${timeValidate(newVal.endTime, 'yd')}`
    }
  }
}, { deep: true })

const deptId = ref({
  name: ''
})
const Time = () => {
  const currentYear = new Date().getFullYear();
  const startOfYear = new Date(currentYear, 0, 1); // 今年1月1日
  const endOfYear = new Date(currentYear, 11, 31, 23); // 今年12月31日23:59:59.999
  const year = startOfYear.getFullYear();
  const month = String(startOfYear.getMonth() + 1).padStart(2, '0');
  const day = String(startOfYear.getDate()).padStart(2, '0');
  const endYear = endOfYear.getFullYear();
  const endMonth = String(endOfYear.getMonth() + 1).padStart(2, '0');
  const endDay = String(endOfYear.getDate()).padStart(2, '0');
  const devt = getItem('deptId')
  deptId.value.name = devt[0].deptName
  nd.value = timeValidate('', 'yd')
  deptId.value.time = timeValidate('', 'ydm')
  deptId.value.ord=timeValidate('', 'mm')+ Math.floor(Math.random() * 90000) + 10000;
  TimeValue.value.startTime = `${year}-${month}-${day}`
  TimeValue.value.endTime = `${endYear}-${endMonth}-${endDay}`

}
Time()
const funAll = () => {
  getfxbgDywdtj()
  getfxbgJqlxtj()
  getfxbgJqlytj()
  getfxgbCljgf()
  getfxbgYdfx()
  getfxgbCzlfx()
  getfxbgTj()
}

const getDictItemList = () => {
  const promes = {
    dictCode: "00000000"
  }
  getDictItem(promes).then(res => {
    dictItemList.value = res
    funAll()
  })
}

const data = ref()
watch(() => dictItemList.value, (val) => {
  data.value = val
}, { deep: true })
getDictItemList()

const tableBox = ref(null);


</script>

<style lang="scss" scoped>
.headline {
  text-align: center;
  color: red;
}

p {
  text-indent: 2em;
  /* 首行缩进2个汉字 */
  margin: 1em 0;
  /* 段落间距 */
  line-height: 1.6;
  /* 行高 */
  font-size: 16px;
  /* 字体大小 */
  text-align: justify;
  /* 两端对齐 */
}

/* 特殊情况处理 */
p.no-indent {
  text-indent: 0;
  /* 不需要缩进的段落 */
}

p.first-no-indent:first-of-type {
  text-indent: 0;
  /* 第一个段落不缩进 */

}
</style>
