<template>
    <el-dialog title="认定办结" top="5vh" width="900px" v-model="show">
        <h3>问题赋分情况</h3>
        <p>
            基础风险值 + (基础风险值 * 问题严重等级系数 ) + (基础风险值 * 问题发生频次系数)
            <a
                class="link"
                :href="`${BASE_PATH}/templates/长沙公安数字督察灵敏感知体系问题赋分及风险预警机制.pdf`"
                target="__blank"
            >
                <span>查看文档</span>
            </a>
        </p>
        <el-form :label-width="120" ref="formRef" :model="formData">
            <div v-for="(item, index) in blames" :key="index">
                <h5>涉及人员{{ index + 1 }}</h5>
                <div class="row">
                    <div class="col col-6">
                        <label>姓名</label>
                        <span>{{ item.blameName }}</span>
                    </div>
                    <div class="col col-6">
                        <label>警号</label>
                        <span>{{ item.blameEmpNo }}</span>
                    </div>
                </div>
                <div class="row">
                    <div
                        class="col col-24"
                        v-for="problem in item.problems"
                        :key="problem"
                    >
                        <label>问题类型</label>
                        <span>
                            <span>{{ problem.oneLevelContent }}</span>
                            <span>{{
                                problem.twoLevelContent
                                    ? " / " + problem.twoLevelContent
                                    : ""
                            }}</span>
                            <span>{{
                                problem.threeLevelContent
                                    ? " / " + problem.threeLevelContent
                                    : ""
                            }}</span>
                        </span>
                    </div>
                </div>
                <el-form-item
                    label="严重等级"
                    :rules="{
                        required: true,
                        message: '请选择严重等级',
                        trigger: ['blur'],
                    }"
                    :prop="`blames.${index}.negativeLevel`"
                >
                    <el-radio-group
                        v-model="formData.blames[index].negativeLevel"
                    >
                        <el-radio
                            v-for="item in dict.negativeLevel"
                            :key="item.dictCode"
                            :value="item.dictValue"
                            >{{ item.dictLabel
                            }}{{
                                item.remark ? `(${item.remark})` : ""
                            }}</el-radio
                        >
                    </el-radio-group>
                </el-form-item>
                <div class="mb-8" style="color: #333">问题赋分</div>
                <el-row>
                    <el-col :span="12">
                        <div class="mb-4">问题严重等级系数</div>
                        <div>
                            <span class="text-primary">{{
                                getNegativeLevelScore(
                                    formData.blames[index].negativeLevel
                                )
                            }}</span>
                            <span class="ml-8">{{
                                formData.blames[index].negativeLevel
                                    ? "(" +
                                      getDictLable(
                                          dict.negativeLevel,
                                          formData.blames[index].negativeLevel
                                      ) +
                                      ")"
                                    : ""
                            }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="mb-4">问题发生频次系数(年)</div>
                        <div>
                            <span class="text-primary">{{ item.frequencyScore }}</span>
                            <span class="ml-8">(总计{{ item.frequency }}次)</span>
                        </div>
                    </el-col>
                </el-row>
                <div class="row mt-8">
                    <div class="col col-24">
                        <label style="--label-width: 60px"
                            ><span>分值计算</span></label
                        >
                        <span
                            >{{ item.baseScore }} + (1 *
                            {{
                                getNegativeLevelScore(
                                    formData.blames[index].negativeLevel
                                )
                            }}) + (1 * {{ item.frequencyScore }}) =
                            <span class="text-danger">{{
                                getScore(item, index)
                            }}</span>
                            分</span
                        >
                    </div>
                </div>
            </div>
            <div class="mt-10 mb-20 text-small">
                <p>
                    一般影响：当问题导致一般性投诉或轻微的内部管理问题时，分值为基础分值。
                </p>
                <p>
                    严重影响：当问题导致较大投诉或内部管理问题时，分值将在基础分值的基础上增加
                    20%。
                </p>
                <p>
                    重大影响：当问题导致重大法律责任或产生严重负面社会影响时，分值将在基础分值的基础上增加
                    50%。
                </p>
            </div>
            <h3>认定办结情况</h3>
            <el-row>
                <el-col :span="12">
                    <el-form-item
                        label="核查办理情况"
                        prop="verifySituation"
                        :rules="{
                            required: true,
                            message: '请选择核查办理情况',
                            trigger: ['blur'],
                        }"
                    >
                        <el-radio-group v-model="formData.verifySituation">
                            <el-radio
                                v-for="item in dict.verifySituation"
                                :key="item.dictCode"
                                :value="item.dictValue"
                                >{{ item.dictLabel
                                }}{{
                                    item.remark ? `(${item.remark})` : ""
                                }}</el-radio
                            >
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="佐证材料情况"
                        prop="verifyFileSituation"
                        :rules="{
                            required: true,
                            message: '请选择佐证材料情况',
                            trigger: ['blur'],
                        }"
                    >
                        <el-radio-group v-model="formData.verifyFileSituation">
                            <el-radio
                                v-for="item in dict.verifyFileSituation"
                                :key="item.dictCode"
                                :value="item.dictValue"
                                >{{ item.dictLabel
                                }}{{
                                    item.remark ? `(${item.remark})` : ""
                                }}</el-radio
                            >
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item
                label="认定办结意见"
                prop="completionComment"
                :rules="{
                    required: true,
                    message: '请输入认定办结意见',
                    trigger: ['blur'],
                }"
            >
                <el-input
                    type="textarea"
                    v-model="formData.completionComment"
                    placeholder="请输入"
                    :autosize="{ minRows: 4 }"
                />
            </el-form-item>
        </el-form>
        <footer class="flex end">
            <el-button size="large">取消</el-button>
            <el-button type="primary" size="large" @click="submit"
                >认定办结</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import { BASE_PATH } from "@/api/request";
import { getCompletionInfo } from "@/api/work/negative";
import { getDictLable } from "@/utils/util";
import useCatchStore from "@/stores/modules/catch";

const catchStore = useCatchStore();
const dict = catchStore.getDicts([
    "verifySituation",
    "verifyFileSituation",
    "negativeLevel",
]);

const formData = ref({
    blames: [],
});
const formRef = ref(null);

const negative = inject("negative");
const loading = ref(false);
const blames = ref([]);
let negativeLevels = [];
watch(negative, () => {
    init();
});

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

async function init() {
    if (!negative.value.id) {
        return;
    }
    loading.value = true;
    formData.value = {
        blames: [],
    };
    const data = await getCompletionInfo(negative.value.id);
    formData.value.blames = data.blames.map((item) => {
        return {
            blameIdCode: item.blameIdCode,
            baseScore: item.baseScore,
            frequencyScore: item.frequencyScore,
            incidenceRateScore: item.incidenceRateScore,
        };
    });
    blames.value = data.blames;
    blames.value = data.blames;
    negativeLevels = data.negativeLevels;
    loading.value = false;
}

function getNegativeLevelScore(val) {
    const results = negativeLevels.filter((item) => item.value === val);
    if (!results.length) {
        return 0;
    }
    return results[0].score;
}

function getScore(item, index) {
    return (
        item.baseScore +
        (1 *
            getNegativeLevelScore(formData.value.blames[index].negativeLevel)) +
        (1 * item.frequencyScore)
    ).toFixed(2);
}

const emit = defineEmits(["submit"]);
const show = ref(false);

async function submit() {
    await formRef.value.validate();
    show.value = false;
    emit("submit", formData.value);
}

function open() {
    show.value = true;
}

defineExpose({
    open,
});
</script>
<style lang="scss" scoped>
h3 {
    margin-top: 0;
    margin-bottom: 10px;
}
h5 {
    margin-bottom: 10px;
}
p {
    margin: 0;
}
</style>