<template>
    <el-form :label-width="170" :model="form" :rules="rules" ref="formRef">
        <el-row>
            <el-form-item
                label="核办结果"
                prop="verifyDetails"
                style="width: 100%"
            >
                <el-input
                    type="textarea"
                    v-model="form.verifyDetails"
                    :rows="5"
                    style="width: 100%"
                />
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="是否属实" prop="verifyIsTrue">
                <el-radio-group v-model="form.verifyIsTrue">
                    <el-radio label="1" size="large">属实</el-radio>
                    <el-radio label="2" size="large">基本属实</el-radio>
                    <el-radio label="3" size="large">不属实</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="被举报对象">
                <div>
                    <div
                        class="flex between gap mb-10"
                        v-for="(item, index) in reportedPolices"
                        :key="index"
                    >
                        <el-select
                            v-model="item.deptId"
                            @change="handleChangeDept"
                            style="width: 280px"
                        >
                            <el-option
                                v-for="item in threeDepts"
                                :key="item.id"
                                :value="item.id"
                                :label="item.name"
                            ></el-option>
                        </el-select>
                        <el-select v-model="item.empNo" style="width: 280px">
                            <el-option
                                v-for="item in polices"
                                :key="item.id"
                                :value="item.empNo"
                                :label="item.name"
                            ></el-option
                        ></el-select>
                        <div style="font-size: 12px">
                            <span v-if="item.empNo">
                                <span class="mr-4">警号</span>
                                <span class="mr-4">{{ item.empNo }}</span>
                            </span>
                            <span v-if="item.gender">
                                <span class="mr-4">性别</span>
                                <span class="mr-4">{{ item.gender }}</span>
                            </span>
                            <span v-if="item.birthday">
                                <span class="mr-4">出生年月</span>
                                <span>{{ item.birthday }}</span>
                            </span>
                        </div>
                        <el-button
                            type="darger"
                            plain
                            @click="reportedPolices.splice(index, 1)"
                            >删除</el-button
                        >
                    </div>
                </div>
            </el-form-item>
        </el-row>
        <div class="text-center">
            <el-button type="primary" plain @click="reportedPolices.push({})"
                >添加被举报对象</el-button
            >
        </div>
        <el-divider />
        <el-row>
            <el-form-item label="查证属实问题" prop="verifyProblem">
                <el-checkbox-group v-model="form.verifyProblem">
                    <el-checkbox
                        v-for="item in dictData.verify_problem"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                    />
                </el-checkbox-group>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="是否需要问责" prop="verifyNeedAccountability">
                <el-radio-group v-model="form.verifyNeedAccountability">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="2" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="责任追究">
                <el-checkbox-group v-model="form.verifyPunish">
                    <el-checkbox
                        v-for="item in dictData.verify_punish"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                    />
                </el-checkbox-group>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="群众反应事项解决情况" prop="verifyIsResolved">
                <el-radio-group v-model="form.verifyIsResolved">
                    <el-radio label="1" size="large">已解决</el-radio>
                    <el-radio label="2" size="large">未解决</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="办理反馈情况" prop="verifyFeedback">
                <el-radio-group v-model="form.verifyFeedback">
                    <el-radio label="1" size="large">满意</el-radio>
                    <el-radio label="2" size="large">基本满意</el-radio>
                    <el-radio label="2" size="large">不满意</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="回访人姓名" prop="verifyFollowupPolice">
                    <police-select v-model:data="form.verifyFollowupPolice" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="回访人电话">
                    <span>{{ form.verifyFollowupPolice?.phone }}</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-form-item label="回访人警号">
                <span>{{ form.verifyFollowupPolice?.empNo }}</span>
            </el-form-item>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="上传佐证">
                    <el-upload multiple>
                        <el-button>上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="佐证材料说明">
                    <div style="line-height: 1.5">
                        请上传《核查办理报告》、《处理反馈表》及相关的法律文件（比如：受案回执、立案决定书、不予立案决定书等）和佐证材料（比如：谈话笔录、调解协议等）。
                    </div>
                    <div>
                        <el-button type="primary" text
                            >《核查办理报告》 下载</el-button
                        >
                        <el-button type="primary" text
                            >《处理反馈表》 下载</el-button
                        >
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script setup>
import { useDictData } from "@/hooks/useDictOptions";
import { listByThree } from "@/api/org/department";
import { allLists } from "@/api/perms/admin";

const { dictData } = useDictData(["verify_problem", "verify_punish"]);
const threeDepts = ref([]);
const polices = ref([]);

const form = ref({});
const formRef = ref();
const reportedPolices = ref([]);

const rules = {
    verifyDetails: [
        {
            required: true,
            message: "请填写核办结果",
        },
    ],
    verifyIsTrue: [
        {
            required: true,
            message: "请选择是否属实",
        },
    ],
    verifyProblem: [
        {
            required: true,
            message: "请选择查证属实问题",
        },
    ],
    verifyNeedAccountability: [
        {
            required: true,
            message: "请选择是否需要问责",
        },
    ],
    verifyIsResolved: [
        {
            required: true,
            message: "请选择群众反应事项解决情况",
        },
    ],
    verifyFeedback: [
        {
            required: true,
            message: "请选择办理反馈情况",
        },
    ],
    verifyFollowupPolice: [
        {
            required: true,
            message: "请选择回访人",
        },
    ],
};

listByThree().then((data) => {
    threeDepts.value = data;
});

function handleChangeDept(deptId) {
    allLists({
        deptId,
    }).then((data) => {
        polices.value = data;
    });
}

function handleChangePolice(empNo, index) {
    const police = polices.value.filter(item => item.empNo === empNo)[0]
    reportedPolices.value[index].sex = police.gender
    reportedPolices.value[index].birthday = police.birthday
}

const props = defineProps({
    data: {
        type: Object,
        default: {},
    },
});

const emits = defineEmits(["update:data"]);

function validate() {
    return new Promise((resolve, reject) => {
        formRef.value.validate((valid) => {
            if (valid) {
                const verifyReportedPolices = reportedPolices.value.filter(item => item.empNo)
                form.value.verifyReportedPolices = JSON.stringify(verifyReportedPolices)
                form.value.verifyFollowupPolice = JSON.stringify(form.value.verifyFollowupPolice)
                emits("update:data", form.value);
                resolve(true);
            } else {
                reject();
            }
        });
    });
}

defineExpose({
    validate,
});
</script>