<template>
    <el-dialog
        width="50vw"
        align-center
        title="自建信件"
    >
    <el-form
                ref="formRef"
                :model="form"
                label-width="200px"
                :rules="rules"
                style="width: 100%"
            >
                <el-form-item
                    label="信件信息"
                    prop="source"
                    required
                    style="
                        display: flex;
                        flex-direction: column;
                        justify-content: start;
                    "
                >
                    <template #label>
                        <span
                            class="main-label"
                            style="text-align: left; width: 100%"
                            >途径来源</span
                        >
                    </template>
                    <el-row style="width: 100%">
                        <el-col :span="12">
                            <el-select
                                v-model="form.source"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in dictData.mail_source"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-divider />
                <el-row class="title-label">
                    <el-col>
                        <span class="main-label">联系人信息</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="姓名"
                            class="info-input"
                            prop="contactName"
                            required
                        >
                            <el-input
                                v-model="form.contactName"
                                placeholder="请输入姓名"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="性别"
                            class="info-input"
                            prop="contactSex"
                        >
                            <el-select
                                v-model="form.contactSex"
                                placeholder="请选择性别"
                            >
                                <el-option label="男" value="M"></el-option>
                                <el-option label="女" value="F"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="证件号码"
                            class="info-input"
                            prop="contactIdCard"
                        >
                            <el-input
                                v-model="form.contactIdCard"
                                placeholder="请输入证件号码"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="联系电话"
                            class="info-input"
                            prop="contactPhone"
                        >
                            <el-input
                                v-model="form.contactPhone"
                                placeholder="请输入联系电话"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider />
                <el-row class="title-label">
                    <el-col>
                        <span class="main-label">信件内容</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="案件编号" prop="caseNumber" class="info-input">
                            <el-input
                                v-model="form.caseNumber"
                                placeholder="请输入案件编号"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="被投诉/涉及单位"
                            prop="involvedDeptId"
                            class="info-input"
                        >
                            <el-select
                                v-model="form.involvedDeptId"
                                @change="handleDeptChange"
                            >
                                <el-option
                                    v-for="item in optionsData.dept"
                                    :key="item.id"
                                    :value="item.id"
                                    :label="item.name"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item
                            label="信件内容"
                            style="width: 100%"
                            prop="content"
                        >
                            <el-input
                                type="textarea"
                                v-model="form.content"
                                placeholder="请您尽量完整的描述您的信件内容，如发生事件、涉及单位、设计对象姓名、警号以及具体事项"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="上传附件">
                        <Upload v-model="form.fileList" accept="image/*" />
                    </el-form-item>
                </el-row>
                <div
                    style="
                        width: 100%;
                        display: flex;
                        justify-content: flex-end;
                    "
                >
                    <el-button
                        type="primary"
                        @click="handleSubmit"
                        style="height: 40px"
                        >提交信件</el-button
                    >
                </div>
            </el-form>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useDictOptions } from "@/hooks/useDictOptions";
import { listSecond } from "@/api/org/department";
import { useDictData } from "@/hooks/useDictOptions";
import { addMail } from "@/api/mail";
import feedback from "@/utils/feedback";
import { validatorIdCard, validatorPhone } from "@/utils/util";

const { dictData } = useDictData(["mail_source"]);

interface FormData {
    source: string;
    contactName: string;
    contactSex: string;
    contactIdCard: string;
    contactPhone: string;
    caseNumber: string;
    involvedDeptId: number;
    involvedDeptName: string;
    content: string;
    fileList: any[];
    attachments: String;
}

const defaultForm = {
    source: "",
    contactName: "",
    contactSex: "",
    contactIdCard: "",
    contactPhone: "",
    caseNumber: "",
    involvedDeptName: "",
    content: "",
    fileList: [],
};
const formRef = ref<FormInstance>();
const form = ref({
    source: "",
    contactName: "",
    contactSex: "",
    contactIdCard: "",
    contactPhone: "",
    caseNumber: "",
    involvedDeptName: "",
    content: "",
    fileList: [],
});

const rules = reactive<FormRules<FormData>>({
    source: [{ required: true, message: "请选择途径来源" }],
    contactName: [
        { required: true, message: "请输入姓名" },
    ],
    contactIdCard: [
        { required: true, validator: validatorIdCard },
    ],
    contactPhone: [
        { required: true, validator: validatorPhone },
    ],
    content: [
        {
            required: true,
            message:
                "请您尽量完整的描述您的信件内容，如发生事件、涉及单位、设计对象姓名、警号以及具体事项",
            trigger: "blur"
        },
    ],
});
const { optionsData } = useDictOptions<{
    dept: any[];
}>({
    dept: {
        api: listSecond,
    },
});

const emit = defineEmits(["success", "close"]);


const handleSubmit = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            form.value.attachments = JSON.stringify(form.value.fileList);
            addMail(form.value).then(() => {
                emit("success");
                emit("close");
                feedback.msgSuccess("操作成功");
                formRef.value.resetFields()
                form.value.fileList = []
                form.value.involvedDeptName = ''
            });
        }
    });
};

function handleDeptChange(val) {
    const dept = optionsData.dept.find((item) => item.id === val);
    form.value.involvedDeptName = dept.name;
}
</script>
<style lang="scss" scoped>
.main-label {
    width: 80px;
    height: 22px;
    font-size: 20px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 22px;
}

.title-label {
    margin-bottom: 20px;
}
.info-input {
    width: 100%;
}

.el-upload__inner {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>