<template>
  <el-dialog
      title="个人问题详情"
      v-model="show"
      width="85vw"
      top="1vh"
      style="margin: 1vh auto"
  >
    <header class="flex center v-center gap">
      <label>统计范围</label>
      <div style="width: 320px">
        <date-time-range-picker-ext
            v-model="time"
            style="width: 300px"
            @change="getProfileData"
        />
      </div>
      <el-button type="primary" @click="getProfileData">查询</el-button>
    </header>
    <el-scrollbar
        max-height="calc(98vh - 120px)"
        v-loading="loading"
        element-loading-text="个人问题详情加载中..."
    >
      <main>
        <el-row class="mb-20">
          <el-col :span="8">
            <h5>民警基本情况</h5>
            <el-row>
              <el-col :span="6">
                <img v-if="policeInfo.avatarUrl" :src="`${BASE_PATH}/file/stream/${policeInfo.avatarUrl}`"
                     class="police-avatar" style="width: 94px"/>
                <icon name="local-icon-police" :size="120" v-else/>
              </el-col>
              <el-col :span="18">
                <div class="row">
                  <div class="col col-12">
                    <label>姓名</label>
                    <span>{{ policeInfo.name }}</span>
                  </div>
                  <div class="col col-12">
                    <label>性别</label>
                    <span>{{
                        getGenderFromIdCode(
                            policeInfo.idCode
                        )
                      }}</span>
                  </div>
                  <div class="col col-24">
                    <label>所属单位</label>
                    <span>
                                            <span
                                            >{{
                                                activeRow.parentDepartName
                                                    ? activeRow.parentDepartName +
                                                    "/"
                                                    : activeRow.parentDepartName
                                              }}{{
                                                activeRow.departName
                                              }}</span
                                            >
                                        </span>
                  </div>
                  <div class="col col-12">
                    <label>警号</label>
                    <span>{{ policeInfo.empNo }}</span>
                  </div>
                  <div class="col col-12">
                    <label>身份证号</label>
                    <span>{{ policeInfo.idCode }}</span>
                  </div>
                  <div class="col col-12">
                    <label>入职时间</label>
                    <span>{{
                        policeInfo.employmentDate || "/"
                      }}</span>
                  </div>
                  <div class="col col-12">
                    <label>手机号</label>
                    <span>{{
                        policeInfo.mobile || "/"
                      }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <h5>问题情况</h5>
            <el-row
                class="flex v-center"
                style="height: calc(100% - 76px)"
            >
              <el-col :span="6" class="text-center">
                <div
                    class="text-primary"
                    style="font-size: 34px"
                >
                  {{ negativeInfo.size }}
                </div>
                <div class="mb-10">问题总数</div>
                <div
                    class="text-danger"
                    style="font-size: 34px"
                >
                  {{ negativeInfo.score }}
                </div>
                <div>风险值</div>
              </el-col>
              <el-col :span="18">
                <el-row>
                  <el-col
                      :span="12"
                      class="mb-20"
                      v-if="
                                            negativeInfo.jcj110BusinessSize ||
                                            negativeInfo.jcj110Size
                                        "
                  >
                    <description-pair
                        label="110接处警"
                        label1="量"
                        label2="问题数"
                        :value1="
                                                negativeInfo.jcj110BusinessSize
                                            "
                        :value2="negativeInfo.jcj110Size"
                    />
                  </el-col>
                  <el-col
                      :span="12"
                      v-if="
                                            negativeInfo.jcj122BusinessSize ||
                                            negativeInfo.jcj122Size
                                        "
                  >
                    <description-pair
                        label="122接处警"
                        label1="量"
                        label2="问题数"
                        :value1="
                                                negativeInfo.jcj122BusinessSize
                                            "
                        :value2="negativeInfo.jcj122Size"
                    />
                  </el-col>
                  <el-col :span="12">
                    <description-pair
                        label="执法办案"
                        label2="问题数"
                        :value1="
                                                negativeInfo.zfbaBusinessSize
                                            "
                        :value2="negativeInfo.zfbaSize"
                    />
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <h5 style="margin-bottom: 0">风险指数</h5>
            <div class="flex center">
              <el-progress
                  type="dashboard"
                  :percentage="score"
                  :stroke-width="16"
                  :width="220"
                  :color="colors"
              >
                <div class="score-progress-body">
                  <div v-if="score">
                    <div>
                                            <span
                                                class="score-progress_score score-theme text-bold"
                                                :type="getType(score)"
                                            >{{ score }}</span
                                            >
                      <span>分</span>
                    </div>
                    <div
                        style="font-size: 14px"
                        class="mb-16"
                    >
                      风险指数
                    </div>
                  </div>
                  <div
                      v-else
                      style="
                                            font-size: 60px;
                                            line-height: 84px;
                                            color: #999;
                                        "
                  >
                    -
                  </div>
                  <div
                      class="score-progress_title score-theme"
                      :type="getType(score)"
                  >
                    {{ getScoreLabel() }}
                  </div>
                </div>
              </el-progress>
            </div>
          </el-col>
        </el-row>
        <el-row class="mb-20">
          <el-col :span="8">
            <h5>问题来源占比</h5>
            <v-charts
                style="height: 320px"
                :option="problemSourcesPieOptions"
                autoresize
            />
          </el-col>
          <el-col :span="8">
            <h5>问题类型占比</h5>
            <v-charts
                style="height: 320px"
                :option="problemTypePieOptions"
                autoresize
            />
          </el-col>
          <el-col :span="8">
            <h5 style="margin-bottom: 0">风险构成</h5>
            <div class="flex center">
              <v-charts
                  style="height: 340px; width: 280px"
                  :option="radarOption"
                  autoresize
              />
            </div>
          </el-col>
        </el-row>
        <h5>问题变化趋势</h5>
        <v-charts
            style="height: 320px"
            :option="barOption"
            autoresize
        />
        <div></div>
        <h5>问题清单</h5>
        <el-table :data="negativeList">
          <el-table-column label="发现时间" prop="discoveryTime"/>
          <el-table-column label="问题来源" prop="problemSources"/>
          <el-table-column label="业务类别" prop="businessTypeName"/>
          <el-table-column
              label="涉及单位"
              prop="involveDepartName"
          />
          <el-table-column
              label="核查情况"
              prop="checkStatusName"
              width="140"
              align="center"
          />
          <el-table-column label="操作" width="160">
            <template #default="{ row }">
              <el-button
                  type="primary"
                  link
                  @click="handleAction(row)"
              >查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex end mt-8">
          <el-pagination
              @size-change="getNegativeList"
              @current-change="getNegativeList"
              :current-page="negativeQuery.current"
              :page-sizes="[10, 20, 50]"
              :page-size="negativeQuery.size"
              v-model:current-page="negativeQuery.current"
              layout="total, sizes, prev, pager, next"
              :total="negativeTotal"
          >
          </el-pagination>
        </div>
      </main>
    </el-scrollbar>
  </el-dialog>
</template>
<script setup>
import vCharts from "vue-echarts";
import {BASE_PATH} from "@/api/request";
import {InspectCase} from "@/enums/dictEnums";
import {
  getDepartProfile,
  listNegativeMonthly,
} from "@/api/sensitivePerception/profileDepart";
import {listNegative} from "@/api/work/negative";
import moment from "moment";
import {getGenderFromIdCode} from "@/utils/util.ts";
import {getPoliceProfile, listNegativeByPoliceIdCode} from "@/api/sensitivePerception/profilePolice.ts";

const props = defineProps({
  empNo: {
    type: String,
    default: 0,
  },
});
const activeRow = ref({});
const policeInfo = ref({});
const time = ref([
  moment().subtract(12, "month").format("YYYY-MM-DD HH:mm:ss"),
  moment().format("YYYY-MM-DD HH:mm:ss"),
]);
const colors = [
  {color: "#5AD8A6", percentage: 40},
  {color: "#F6BD16", percentage: 60},
  {color: "#E8684A ", percentage: 80},
];
const colors2 = [
  {color: "var(--success-color)", percentage: 60},
  {color: "#DC6231", percentage: 80},
  {color: "var(--danger-color)", percentage: 100},
];
const loading = ref(false);
const departInfo = ref({});
const negativeInfo = ref({});
const negativeQuery = ref({
  checkStatusList: [InspectCase.TRUE, InspectCase.TRUE],
});
const negativeList = ref([]);
const negativeTotal = ref(0);
const problemTypeBarList = ref([]);
const score = ref(0);
const problemTypePieOptions = ref({
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      data: [],
    },
  ],
});

async function getProfileData() {
  loading.value = true;
  negativeQuery.value.idCode = props.empNo;
  getNegativeList();
  const data = await getPoliceProfile(props.empNo, {
    beginTime: time.value.length ? time.value[0] : "",
    endTime: time.value.length ? time.value[1] : "",
  });
  score.value = Math.round(data.score);
  console.log(data.expression);
  console.log(data.remarks);
  policeInfo.value = data.policeInfo;
  negativeInfo.value = data.negativeInfo;
  problemSourcesPieOptions.value.series[0].data = data.problemSourcesList;
  problemTypePieOptions.value.series[0].data = data.problemTypeList;
  radarOption.value.radar.indicator = data.businessTypeRadarIndicator;
  radarOption.value.series[0].data[0].value = data.businessTypeScoreRadarData;
  radarOption.value.series[0].data[1].value = data.businessTypeWeightRadarData;
  loading.value = false;
}

function getNegativeList() {
  if (time.value.length === 2) {
    negativeQuery.value.beginTime = time.value[0];
    negativeQuery.value.endTime = time.value[1];
  }
  listNegativeByPoliceIdCode(
      props.empNo,
      negativeQuery.value
  ).then((data) => {
    negativeList.value = data.records;
    negativeTotal.value = data.total;
  });
}

const barOption = ref({
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [],
      type: "bar",
      color: "#5B8FF9 ",
    },
  ],
});

watch(
    () => props.empNo,
    () => {
      getProfileData();
      listNegativeMonthly(props.empNo).then((data) => {
        barOption.value.xAxis.data = data.months;
        barOption.value.series[0].data = data.values;
      });
    });


const radarOption = ref({
  radar: {
    indicator: [],
  },
  series: [
    {
      type: "radar",
      data: [
        {
          value: [],
        },
        {
          value: [],
        },
      ],
      label: {
        show: true,
      },
    },
  ],
});
const problemSourcesPieOptions = ref({
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      data: [],
    },
  ],
});
const businessTypePieOptions = ref({
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      data: [],
    },
  ],
});

const policeBarList = ref([]);

function getType(val) {
  if (val < 60) {
    return "success";
  }
  if (val < 80) {
    return "warning";
  }
  return "danger";
}

function getScoreLabel() {
  if (score.value === 0) {
    return "无法预测";
  }
  if (score.value < 60) {
    return "低风险";
  }
  if (score.value < 80) {
    return "中风险";
  }
  return "高风险";
}

const negativeShow = ref(false);
const activeNegativeId = ref("");

function handleAction(row) {
  negativeShow.value = true;
  activeNegativeId.value = row.id;
}
</script>
<style lang="scss" scoped>
main {
  overflow: hidden;
}

.col {
  --label-width: 60px;
}

.score-progress-body {
  text-align: center;
  font-size: 18px;

  .score-progress_score {
    font-size: 60px;
    line-height: 84px;
  }

  .score-progress_title {
    font-size: 26px;
    line-height: 22px;
  }
}

.score-theme {
  &[type="success"] {
    color: var(--success-color);
  }

  &[type="warning"] {
    color: #e87749;
  }

  &[type="danger"] {
    color: var(--danger-color);
  }
}
</style>