<template>
    <div class="container">
        <header>
            <el-form>
                <query-select
                    label="人员标签"
                    :data="tags"
                    v-model="query.tags"
                    @change="getList"
                />
                <query-select
                    label="风险因素"
                    :data="riskReasons"
                    v-model="query.smallTags"
                    @change="getList"
                />
                <query-select
                    label="学历"
                    :data="educations"
                    v-model="query.educationTags"
                    @change="getList"
                />
                <query-select
                    label="年龄"
                    :data="ages"
                    v-model="query.ageTags"
                    @change="getList"
                />
                <div class="query-row flex v-center">
                    <label class="text-center">人员信息</label>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="姓名">
                                <el-input
                                    size="small"
                                    style="width: 200px"
                                    placeholder="请输入"
                                    v-model="query.name"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="身份证">
                                <el-input
                                    size="small"
                                    style="width: 200px"
                                    placeholder="请输入"
                                    v-model="query.idCode"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="手机号">
                                <el-input
                                    size="small"
                                    style="width: 200px"
                                    placeholder="请输入"
                                    v-model="query.mobileNumber"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
            <div class="mb-25 flex end mt-8">
                <div>
                    <el-button type="primary" @click="getList">
                        <template #icon>
                            <icon name="el-icon-Search" />
                        </template>
                        查询
                    </el-button>
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </header>
        <div class="table-container" v-loading="loading">
            <el-table :data="list">
                <el-table-column label="姓名" prop="name" width="70" />
                <el-table-column
                    label="性别"
                    prop="gender"
                    width="56"
                    align="center"
                >
                    <template #default="{ row }">
                        <span>{{ getGender(row.gender) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="年龄" prop="age" width="56" />
                <el-table-column label="身份证号" prop="idCode" width="174" />
                <el-table-column
                    label="手机号"
                    prop="mobileNumber"
                    width="116"
                />
                <el-table-column
                    label="管控单位"
                    prop="controlDepartName"
                    width="120"
                    show-overflow-tooltip
                />
                <el-table-column label="人员标签" width="240">
                    <template #default="{ row }">
                        <div class="flex gap-4 wrap" v-if="row.tags">
                            <el-tag
                                v-for="item in row.tags.split(',')"
                                :key="item"
                                >{{ item }}
                            </el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="高风险因素">
                    <template #default="{ row }">
                        <el-scrollbar max-height="80px">
                            <div class="flex gap-4 wrap">
                                <el-tag
                                    v-for="item in getSmallTags(row.smallTags)"
                                    :type="item.type"
                                    :key="item"
                                    >{{ item.value }}
                                </el-tag>
                            </div>
                        </el-scrollbar>
                    </template>
                </el-table-column>
                <el-table-column
                    label="高风险指数"
                    prop="riskScore"
                    width="100"
                    align="center"
                >
                    <template #default="{ row }">
                        <span>{{ row.riskScore.toFixed(1) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template #default="{ row }">
                        <div>
                            <el-button
                                type="primary"
                                link
                                @click="handleShowDesc(row)"
                                >查看详情
                            </el-button>
                        </div>
                        <el-button
                            type="primary"
                            link
                            @click="handleShowNotification(row)"
                            >预警提醒
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex end mt-8">
            <el-pagination
                @size-change="getList"
                @current-change="getList"
                :current-page="query.current"
                :page-sizes="[10, 20, 50]"
                :page-size="query.size"
                v-model:current-page="query.current"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>

    <el-dialog
        title="风险人员详情"
        v-model="show"
        width="80vw"
        top="2vh"
        style="margin-bottom: 2vh"
        class="dialog-body-nopadding"
    >
        <el-row :gutter="20">
            <el-col :span="5">
                <el-scrollbar max-height="calc(96vh - 92px)" class="ml-16">
                    <div
                        v-for="item in personal.riskClues"
                        :key="item"
                    >
                        <div class="risk-anchor-title flex between">
                            <span>{{ item.riskName }}</span>
                            <span style="color: #999">
                                <span style="color: #333">{{
                                    item.score
                                }}</span>
                                分
                            </span>
                        </div>
                        <div
                            v-for="(risk, index) in item.riskIndexs"
                            :key="index"
                            class="risk-anchor pointer flex between"
                            :active="activeRiskIndex === risk.riskIndex"
                            @click="handlescrollbarTo(risk.riskIndex)"
                            :disabled="risk.score === 0"
                        >
                            <span>{{ risk.riskIndex }}</span>
                            <span style="color: #999">
                                <span style="color: #333">{{
                                    risk.score
                                }}</span>
                                分
                            </span>
                        </div>
                    </div>
                </el-scrollbar>
            </el-col>
            <el-col :span="19">
                <el-scrollbar
                    height="calc(96vh - 92px)"
                    style="padding-right: 16px"
                    ref="riskClueScrollbarRef"
                >
                    <el-row class="mt-20 mb-20">
                        <el-col :span="19">
                            <p class="text-primary mb-10">风险人员基本情况</p>
                            <el-row>
                                <el-col :span="4">
                                    <img
                                        :src="personal.riskPersonal?.avatar"
                                        v-if="personal.riskPersonal?.avatar"
                                        style="height: 180px; width: 140px"
                                    />
                                    <img
                                        src="/imgs/personal.svg"
                                        v-else
                                        style="height: 180px; width: 140px"
                                    />
                                </el-col>
                                <el-col :span="20">
                                    <div class="row">
                                        <div class="col col-12">
                                            <label>姓名</label>
                                            <span>{{ activeRow.name }}</span>
                                        </div>
                                        <div class="col col-12">
                                            <label>性别</label>
                                            <span>{{
                                                getGender(activeRow.gender)
                                            }}</span>
                                        </div>
                                        <div class="col col-12">
                                            <label>年龄</label>
                                            <span>{{ activeRow.age }}</span>
                                        </div>
                                        <div class="col col-12">
                                            <label>证件号码</label>
                                            <span>{{ activeRow.idCode }}</span>
                                        </div>
                                        <div class="col col-12">
                                            <label>手机号码</label>
                                            <span>{{
                                                activeRow.mobileNumber
                                            }}</span>
                                        </div>
                                        <div class="col col-12">
                                            <label>管控单位</label>
                                            <span>{{
                                                activeRow.controlDepartName
                                            }}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="5">
                            <div class="flex center column text-center">
                                <div
                                    class="socre-box"
                                    :type="
                                        getScoreType(
                                            personal.riskPersonal?.riskScore
                                        )
                                    "
                                >
                                    {{
                                        personal.riskPersonal?.riskScore.toFixed(
                                            1
                                        )
                                    }}
                                </div>
                                <span style="font-size: 24px" class="mt-10"
                                    >{{ getRiskTitle(personal.riskPersonal?.riskScore) }}</span
                                >
                            </div>
                        </el-col>
                    </el-row>

                    <div style="min-height: 50vh" class="risk-clue-container">
                        <div
                            v-for="(item, index) in personal.riskClues"
                            :key="index"
                            class="mb-20"
                        >
                            <h4>{{ item.riskName }}</h4>
                            <div v-for="risk in item.riskIndexs" :key="risk">
                                <div
                                    class="second-title mb-8 mt-20"
                                    :id="risk.riskIndex"
                                >
                                    {{ risk.riskIndex }}
                                </div>
                                <el-table :data="risk.clues">
                                    <el-table-column
                                        label="发生时间"
                                        prop="eventTime"
                                        width="180"
                                    />
                                    <el-table-column
                                        label="风险因素"
                                        prop="riskName"
                                        width="160"
                                        show-overflow-tooltip
                                    />
                                    <el-table-column
                                        label="风险内容"
                                        show-overflow-tooltip
                                    >
                                        <template #default="{ row }">
                                            <span
                                                style="white-space: pre-wrap"
                                                >{{ row.data }}</span
                                            >
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        width="80"
                                        label="分值"
                                        prop="scoreResult"
                                    >
                                        <template #default="{ row }">
                                            <span
                                                v-if="row.scoreResult != null"
                                                >{{ row.scoreResult }}</span
                                            >
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <div class="mb-20"></div>
                </el-scrollbar>
            </el-col>
        </el-row>
    </el-dialog>

    <alarm-dialog v-model="showNotification" :departId="activeDepartId" @close="showNotification = false" />
</template>
<script lang="ts" setup>
import {
    listRiskPersonnel,
    getRiskPersonnel,
} from "@/api/sensitivePerception/riskPersonnel";
import { alarmNotificationCommit } from "~/api/work/alarm";
import feedback from "~/utils/feedback";
import { listPoliceAll } from "~/api/system/police";

const query = ref({});
const list = ref<any[]>([]);
const total = ref(0);
const show = ref(false);

let showNotification = ref(false);
const activeDepartId = ref('')
const handleShowNotification = (row) => {
    showNotification.value = true;
    activeDepartId.value = row.controlDepartId
};

const loading = ref(false);
function getList() {
    loading.value = true;
    listRiskPersonnel(query.value).then((data) => {
        list.value = data.records;
        total.value = data.total;
        loading.value = false;
    });
}

function reset() {
    query.value = {};
    getList();
}

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

const activeRow = ref({});
const personal = ref({
    riskClueList: [],
});

async function handleShowDesc(row) {
    activeRow.value = row;
    activeRiskIndex.value = "";
    const data = await getRiskPersonnel(row.id);
    show.value = true;
    personal.value = data;
}

const filterJsonData = (row) => {
    if (row.data == undefined) {
        return "";
    }
    try {
        let j = JSON.parse(row.data);
        if (j.sourceData != undefined) {
            j = JSON.parse(row.sourceData);
        }
        let str = "";
        for (let key in j) {
            if (key == "eventTime") {
                continue;
            }
            if (key == "idCode") {
                continue;
            }
            if (key == "departId") {
                continue;
            }
            if (key == "personId") {
                continue;
            }
            if (key == "name") {
                continue;
            }
            str += j[key] + "\n";
        }
        return str;
    } catch (e) {
        return row.data;
    }
};

function getGender(val) {
    if (val == 1) {
        return "男";
    }
    if (val == 2) {
        return "女";
    }
    return "";
}

const tags = [
    {
        label: "涉相关警情人员",
        value: "涉相关警情人员",
    },
    {
        label: "涉违法犯罪人员",
        value: "涉违法犯罪人员",
    },
    {
        label: "涉投诉举报信访人员",
        value: "涉投诉举报信访人员",
    },
    {
        label: "涉诉讼人员",
        value: "涉诉讼人员",
    },
    {
        label: "重点人员",
        value: "重点人员",
    },
    {
        label: "专项排查关注人员",
        value: "专项排查关注人员",
    },
    {
        label: "推送排查人员",
        value: "推送排查人员",
    },
    {
        label: "110纠纷报警3次以上的人员",
        value: "110纠纷报警3次以上的人员",
    },
    {
        label: "执法办案嫌疑人员",
        value: "执法办案嫌疑人员",
    },
    {
        label: "矛盾纠纷排查人员",
        value: "矛盾纠纷排查人员",
    },
    {
        label: "精神疾病人员",
        value: "精神疾病人员",
    },
    {
        label: "案件受害人员",
        value: "案件受害人员",
    },
    {
        label: "刑事前科人员",
        value: "刑事前科人员",
    },
    {
        label: "吸毒涉毒人员",
        value: "吸毒涉毒人员",
    },
    {
        label: "个人极端人员",
        value: "个人极端人员",
    },
    {
        label: "四无人员",
        value: "四无人员",
    },
    {
        label: "涉酒驾人员",
        value: "涉酒驾人员",
    },
    {
        label: "借贷人员",
        value: "借贷人员",
    },
    {
        label: "违禁物品网购人员",
        value: "违禁物品网购人员",
    },
    {
        label: "其他人员",
        value: "其他人员",
    },
];
const riskReasons = [
    {
        label: "在逃人员",
        value: "在逃人员",
    },
    {
        label: "重大刑事犯罪前科人员",
        value: "重大刑事犯罪前科人员",
    },
    {
        label: "肇事肇祸等严重精神障碍患者",
        value: "肇事肇祸等严重精神障碍患者",
    },

    {
        label: "个人极端案事件重点人员",
        value: "个人极端案事件重点人员",
    },
    {
        label: "涉稳人员",
        value: "涉稳人员",
    },
    {
        label: "涉毒人员",
        value: "涉毒人员",
    },
    {
        label: "重点上访人员",
        value: "重点上访人员",
    },
    {
        label: "已被打击处理",
        value: "已被打击处理",
    },
    {
        label: "受到刑政处罚",
        value: "受到刑政处罚",
    },
    {
        label: "受到刑事处罚",
        value: "受到刑事处罚",
    },
    {
        label: "取保候审",
        value: "取保候审",
    },
    {
        label: "监视居住",
        value: "监视居住",
    },
    {
        label: "其它潜在危害人员",
        value: "其它潜在危害人员",
    },

    {
        label: "殴打他人",
        value: "殴打他人",
    },
    {
        label: "故意伤害",
        value: "故意伤害",
    },
    {
        label: "寻衅滋事",
        value: "寻衅滋事",
    },
    {
        label: "精神障碍患者",
        value: "精神障碍患者",
    },
    {
        label: "厌世情绪",
        value: "厌世情绪",
    },
    {
        label: "报复社会",
        value: "报复社会",
    },
    {
        label: "遭遇不公",
        value: "遭遇不公",
    },
    {
        label: "自杀",
        value: "自杀",
    },
    {
        label: "家暴",
        value: "家暴",
    },
    {
        label: "离婚",
        value: "离婚",
    },

    {
        label: "酗酒",
        value: "酗酒",
    },
    {
        label: "有车",
        value: "有车",
    },
    {
        label: "纠纷",
        value: "纠纷",
    },
    {
        label: "无业人员",
        value: "无业人员",
    },
];
const educations = [
    {
        label: "小学及以下",
        value: "小学及以下",
    },
    {
        label: "初中",
        value: "初中",
    },
    {
        label: "高中/中专",
        value: "高中/中专",
    },
    {
        label: "大学",
        value: "大学",
    },
    {
        label: "大学以上",
        value: "大学以上",
    },
];

const ages = [
    {
        label: "16~24岁",
        value: "年龄处于16岁至24岁之间",
    },
    {
        label: "25~34岁",
        value: "年龄处于25岁至34岁之间",
    },
    {
        label: "35~55岁",
        value: "年龄处于35岁至55岁之间",
    },
    {
        label: "56~65岁",
        value: "年龄处于56岁至65岁之间",
    },
    {
        label: "66~75岁",
        value: "年龄处于66岁至74岁之间",
    },
];

function getSmallTags(val) {
    if (!val) {
        return [];
    }
    const arr = val.split(",").map((tag) => {
        return getSmallTagObj(tag);
    });
    arr.sort((a, b) => a.sort - b.sort);
    return arr;
}

function getSmallTagObj(item) {
    if (
        item.includes("在逃") ||
        item.includes("重大刑事犯罪") ||
        item.includes("个人极端") ||
        item.includes("涉稳人员") ||
        item.includes("涉毒") ||
        item.includes("重点上访人员") ||
        item.includes("已被打击处理") ||
        item.includes("受到刑政处罚") ||
        item.includes("受到刑事处罚") ||
        item.includes("精神病") ||
        item.includes("自杀") ||
        item.includes("报复社会") ||
        item.includes("厌世情绪") ||
        item.includes("安排后事") ||
        item.includes("作案") ||
        item.includes("诱发刺激事件") ||
        item.includes("暴力伤害行为")
    ) {
        return {
            type: "danger",
            sort: 1,
            value: item,
        };
    }
    if (
        item.includes("取保候审") ||
        item.includes("监视居住") ||
        item.includes("其它潜在危害人员") ||
        item.includes("殴打他人") ||
        item.includes("故意伤害") ||
        item.includes("寻衅滋事") ||
        item.includes("精神障碍患者") ||
        item.includes("扬言滋事") ||
        item.includes("家暴") ||
        item.includes("离婚") ||
        item.includes("酗酒") ||
        item.includes("纠纷") ||
        item.includes("无业人员")
    ) {
        return {
            type: "warning",
            sort: 2,
            value: item,
        };
    }
    return {
        type: "info",
        sort: 3,
        value: item,
    };
}

function getColor(score) {
    if (score >= 80) {
        return "red";
    }
    return "#333";
}

const riskClueScrollbarRef = ref();
const activeRiskIndex = ref("");
function handlescrollbarTo(id) {
    activeRiskIndex.value = id;
    riskClueScrollbarRef.value.setScrollTop(
        document.getElementById(id).offsetTop
    );
}

function getScoreType(score) {
    if (score >= 80) {
        return "red";
    }
    if (score >= 60) {
        return "orange";
    }
    if (score >= 40) {
        return "yellow";
    }
    if (score >= 20) {
        return "blue";
    }
    return "green";
}

function getRiskTitle(score) {
    if (score >= 80) {
        return "极高风险";
    }
    if (score >= 60) {
        return "较高风险";
    }
    if (score >= 40) {
        return "中级风险";
    }
    if (score >= 20) {
        return "较低风险";
    }
    return "极低风险";
}
</script>
<style lang="scss" scoped>
.socre-box {
    border-radius: 9px;
    border: 2px solid #f11d16;
    height: 153px;
    line-height: 153px;
    text-align: center;
    font-size: 120px;
    color: #fff;
    &[type="red"] {
        background: linear-gradient( 180deg, #FF6641 0%, #D40505 100%);
        border-color: #C51B08;
    }
    &[type="orange"] {
        background: linear-gradient( 180deg, #FE9E00 0%, #EC360C 100%);;
        border-color: #CD7242;
    }
    &[type="yellow"] {
        background: linear-gradient( 180deg, #FBC203 0%, #F08A02 100%);
        border-color: #DFA100;
    }
    &[type="blue"] {
        background: linear-gradient(180deg, #01b0f1 0%, #026cf1 100%);
        border-color: #0693c9;
    }
    &[type="green"] {
        background: linear-gradient(180deg, #23e84b 0%, #07b303 100%);
        border-color: #0dc916;
    }
}
.person-photo {
    text-align: center;
    margin-bottom: 10px;
}

.person-photo img {
    max-height: 100%;
    width: 200px;
}
.query-row {
    padding: 8px 0;
    box-shadow: inset 0px -1px 0px 0px #ebebeb;
    label {
        width: 126px;
        line-height: 24px;
        & + * {
            width: calc(100% - 126px);
        }
    }
    .el-form-item {
        margin-bottom: 0;
    }
}
.risk-anchor-title {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    color: #222;
    font-weight: 700;
}
.risk-anchor {
    height: 40px;
    line-height: 40px;
    box-shadow: inset 0px -1px 0px 0px #e9ebfd;
    padding: 0 20px;
    &:hover,
    &[active="true"] {
        background: #d1d7ff;
    }
    &[disabled=true] {
        * {
            color: #c2c2c2 !important;
        }
    }
}
.risk-clue-container {
    > div:first-child {
        --color: #926509;
        --bg-color: #fff5df;
    }
    > div:nth-child(2) {
        --color: #023950;
        --bg-color: #e0f6ff;
    }
    > div:nth-child(3) {
        --color: #7f0f25;
        --bg-color: #f0f0f0;
    }
    > div {
        --color: var(--primary-color);
        --bg-color: #eff0f5;
        h4 {
            height: 58px;
            line-height: 58px;
            margin: 0;
            background: var(--bg-color);
            color: var(--color);
            padding-left: 8px;
        }
        .second-title {
            color: var(--color);
            padding-left: 8px;
            font-size: 16px;
        }
        :deep() {
            .el-table {
                thead {
                    color: #333;
                }
                th.el-table__cell {
                    background: var(--bg-color);
                }
            }
        }
    }
}
</style>