<template>
  <el-scrollbar height="100vh">
    <div class="wrapper">
      <datav-header/>
      <el-row>
        <el-col :span="6"></el-col>
        <el-col :span="12">
          <div class="datav-col">
            <span style="font-size: 22px">执法监督灵敏感知体系</span>
          </div>
          <div class="datav-col">
            <datav-date-picker v-model="time"/>
          </div>
          <div class="flex gap-42">
            <datav-statistic
                :value="statisticsTotal.aTotal"
                title="接处警"
                isDecimal
                style="width: 20%"
            />
            <datav-statistic
                :value="statisticsTotal.caseTotal"
                title="执法办案"
                isDecimal
                style="width: 20%"
            />
            <datav-statistic
                :value="statisticsTotal.negativeTotal"
                isDecimal
                title="总问题数"
                style="width: 20%"
            />
            <datav-statistic
                :value="statisticsTotal.peopleCount"
                isDecimal
                title="涉及人数"
                style="width: 20%"
            />
            <datav-statistic
                :value="statisticsTotal.avgPeople"
                title="人均问题数"
                isDecimal="true"
                style="width: 20%"
            />
          </div>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <el-row style="margin-top: 20px" :gutter="16">
        <el-col :span="8">
          <datav-card>
            <div class="card-header">
              <span class="card-title">分县市局</span>
              <div class="select-container">
                <el-select v-model="type1" placeholder="请选择指标">
                  <el-option label="涉及问题数" value="涉及问题数"></el-option>
                  <el-option label="涉及人数" value="涉及人数"></el-option>
                  <el-option label="人均问题数（查实）" value="人均问题数（查实）"></el-option>
                </el-select>
              </div>
            </div>
            <datav-tabs
                type="bottom-button"
                ref="rxsjTabs"
                v-model="groupId1"
            >
              <datav-tab-item label="高业务量" name="23">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list1"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
              <datav-tab-item label="中业务量" name="24">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list1"
                      :max="11"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
              <datav-tab-item label="低业务量" name="25">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list1"
                      :max="11"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
            </datav-tabs>
          </datav-card>
        </el-col>
        <el-col :span="8">
          <datav-card>
            <div class="card-header">
              <span class="card-title">派出所</span>
              <div class="select-container">
                <el-select v-model="type2" placeholder="请选择指标">
                  <el-option label="涉及问题数" value="涉及问题数"></el-option>
                  <el-option label="涉及人数" value="涉及人数"></el-option>
                  <el-option label="人均问题数（查实）" value="人均问题数（查实）"></el-option>
                </el-select>
              </div>
            </div>
            <datav-tabs
                type="bottom-button"
                ref="pcsTabs"
                v-model="groupId2"
            >
              <datav-tab-item label="高业务量" name="17">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list2"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
              <datav-tab-item label="中业务量" name="18">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list2"
                      :max="11"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
              <datav-tab-item label="低业务量" name="19">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list2"
                      :max="11"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
            </datav-tabs>
          </datav-card>
        </el-col>
        <el-col :span="8">
          <datav-card>
            <div class="card-header">
              <span class="card-title">交警大队</span>
              <div class="select-container">
                <el-select v-model="type3" placeholder="请选择指标">
                  <el-option label="涉及问题数" value="涉及问题数"></el-option>
                  <el-option label="涉及人数" value="涉及人数"></el-option>
                  <el-option label="人均问题数（查实）" value="人均问题数（查实）"></el-option>
                </el-select>
              </div>
            </div>
            <datav-tabs
                type="bottom-button"
                ref="jjddTabs"
                v-model="groupId3"
            >
              <datav-tab-item label="高业务量" name="20">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list3"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
              <datav-tab-item label="中业务量" name="21">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list3"
                      :max="11"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
              <datav-tab-item label="低业务量" name="22">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list3"
                      :max="11"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
            </datav-tabs>
          </datav-card>
        </el-col>
      </el-row>

      <el-row style="margin-top: 20px" :gutter="16">
        <el-col :span="8">
          <datav-card>
            <div class="card-header">
              <span class="card-title">领导</span>
              <div class="select-container">
                <el-select v-model="groupId4" placeholder="请选择指标">
                  <el-option label="派出所" value="10"></el-option>
                  <el-option label="交警" value="11"></el-option>
                </el-select>
              </div>
            </div>
            <datav-tabs
                type="bottom-button"
                ref="ldTabs"
                v-model="selectedLdTabs"
            >
              <datav-tab-item label="问题数" name="1">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list4"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
            </datav-tabs>
          </datav-card>
        </el-col>
        <el-col :span="8">
          <datav-card>
            <div class="card-header">
              <span class="card-title">民警</span>
              <div class="select-container">
                <el-select v-model="groupId5" placeholder="请选择指标">
                  <el-option label="派出所" value="10"></el-option>
                  <el-option label="交警" value="11"></el-option>
                </el-select>
              </div>
            </div>
            <datav-tabs
                type="bottom-button"
                ref="mjTabs"
                v-model="selectedMjTabs"
            >
              <datav-tab-item label="问题数" name="1">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list5"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
            </datav-tabs>
          </datav-card>
        </el-col>
        <el-col :span="8">
          <datav-card>
            <div class="card-header">
              <span class="card-title">协辅警</span>
              <div class="select-container">
                <el-select v-model="groupId6" placeholder="请选择指标">
                  <el-option label="派出所" value="10"></el-option>
                  <el-option label="交警" value="11"></el-option>
                </el-select>
              </div>
            </div>
            <datav-tabs
                type="bottom-button"
                ref="xfjTabs"
                v-model="selectedXfjTabs"
            >
              <datav-tab-item label="问题数" name="1">
                <el-scrollbar height="200px">
                  <datav-chart-bar-fixbug
                      :data="list6"
                      size="small"
                      :color="colors"
                  />
                </el-scrollbar>
              </datav-tab-item>
            </datav-tabs>
          </datav-card>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>
<script setup>

import {
  totalStatistics,
  cityNegative,
  threeNegative,
  leadNegative,
  policeNegative,
  auxNegative
} from '@/api/data/risk';
import moment from "moment";

let type1 = ref('涉及问题数');
let type2 = ref('涉及问题数');
let type3 = ref('涉及问题数');

const groupId1 = ref('23')
const groupId2 = ref('17')
const groupId3 = ref('20')
const groupId4 = ref('10');
const groupId5 = ref('10');
const groupId6 = ref('10');

let statisticsTotal = ref({
  caseTotal: 0,
  aTotal: 0,
  negativeTotal: 0,
  peopleCount: 0,
  avgPeople: 0.0
})

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

const list1 = ref([])
const list2 = ref([])
const list3 = ref([])
const list4 = ref([])
const list5 = ref([])
const list6 = ref([])
function getData() {
  totalStatistics(time.value).then(res => {
    statisticsTotal.value.aTotal = res.atotal;
    statisticsTotal.value.caseTotal = res.caseTotal;
    statisticsTotal.value.negativeTotal = res.negativeTotal;
    statisticsTotal.value.peopleCount = res.peopleCount;
    statisticsTotal.value.avgPeople = res.avgPeople;
  })
  getData1()
  getData2()
  getData3()
  getData4()
  getData5()
  getData6()
}

function getData1() {
  cityNegative({
    beginTime: time.value[0],
    endTime: time.value[1],
    groupId: groupId1.value,
    type: type1.value
  }).then(data => {
    list1.value = data
  });
}

function getData2() {
  threeNegative({
    beginTime: time.value[0],
    endTime: time.value[1],
    groupId: groupId2.value,
    type: type2.value
  }).then(data => {
    list2.value = data
  });
}

function getData3() {
  threeNegative({
    beginTime: time.value[0],
    endTime: time.value[1],
    groupId: groupId3.value,
    type: type3.value
  }).then(data => {
    list3.value = data
  });
}

function getData4() {
  leadNegative({
    beginTime: time.value[0],
    endTime: time.value[1],
    groupId: groupId4.value
  }).then(data => {
    list4.value = data
  });
}

function getData5() {
  policeNegative({
    beginTime: time.value[0],
    endTime: time.value[1],
    groupId: groupId5.value
  }).then(data => {
    list5.value = data
  });
}

function getData6() {
  auxNegative({
    beginTime: time.value[0],
    endTime: time.value[1],
    groupId: groupId6.value
  }).then(data => {
    list6.value = data
  });
}

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

watch(time, () => {
  getData()
})

watch(groupId1, () => {
  getData1()
})

watch(type1, () => {
  getData1()
})

watch(groupId2, () => {
  getData2()
})

watch(type2, () => {
  getData1()
})

watch(groupId3, () => {
  getData3()
})

watch(type3, () => {
  getData3()
})

watch(groupId4, () => {
  getData4()
})

watch(groupId5, () => {
  getData5()
})

watch(groupId6, () => {
  getData6()
})

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, #63E7AA 0%, #19674C 100%)",
    percentage: 40,
  },
];

</script>

<style lang="scss" scoped>
.lmgz {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/datav/lmgz.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@import "@/style/datav.scss";

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.card-title {
  font-size: 23px;
  font-weight: bold;
}

.select-container {
  width: 150px;
  margin-left: auto;
}

:deep(.el-select__wrapper) {
  background-color: #041a75;
  box-shadow: #0a113b 0px 0px 0px 1px;
}

:deep(.el-select__placeholder ) {
  color: #fff;
}
</style>
