<template>
    <div>
        <MOSTY.FromPage :title="props.editObj.title">
            <template #content>
                <MOSTY.Assort :title="'基本信息'" />
                <div class="box">
                    <div style="display: flex; justify-content: center; margin-top: 10px;width: 100%;">
                        <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px"
                            class="demo-ruleForm" status-icon :inline="true" style="display: inline-block;"
                            label-suffix="：" :disabled="!props.editObj.saveBtnShow">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="抽检地点" prop="jcdd">
                                        <el-input v-model="data.formData.jcdd" placeholder="请输入抽检地点"
                                            style="width: 750px">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="抽检时间" prop="jcsj">
                                        <el-date-picker v-model="data.formData.jcsj" format="YYYY-MM-DD HH:mm:ss"
                                            value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择抽检时间"
                                            style="width: 750px" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="驾驶员" prop="jsyName">
                                        <inputDriver v-model:ids="data.formData.jsyId" :Single="false"
                                            v-model:cName="data.formData.jsyName" width="750px" @change="jsyChange">
                                        </inputDriver>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="饮酒驾驶员" prop="yjJsyName">
                                        <el-input v-model="data.formData.yjJsyName" placeholder="请选择饮酒驾驶员"
                                            style="width: 750px"><template #append>
                                                <el-button @click="chooseYjJsyYuan" type="primary">选择</el-button>
                                            </template></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="醉驾驾驶员" prop="zjJsyName">
                                        <el-input v-model="data.formData.zjJsyName" placeholder="请选择醉驾驾驶员"
                                            style="width: 750px"><template #append>
                                                <el-button type="primary" @click="chooseZjJsyYuan">选择</el-button>
                                            </template></el-input>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                        </el-form>
                    </div>
                    <jsyChoose v-if="isShowYjJsyChoose" :allIds="data.formData.jsyId" :allNames="data.formData.jsyName"
                        v-model:ids="data.formData.yjJsyId" v-model:cName="data.formData.yjJsyName"
                        @close="isShowYjJsyChoose = false" />
                    <jsyChoose v-if="isShowZjJsyChoose" :allIds="data.formData.jsyId" :allNames="data.formData.jsyName"
                        v-model:ids="data.formData.zjJsyId" v-model:cName="data.formData.zjJsyName"
                        @close="isShowZjJsyChoose = false" />
                </div>
            </template>
            <template #footer>

                <el-button type="primary" v-loading='loadingshow' v-if="props.editObj.saveBtnShow"
                    @click="submit(ruleFormRef)">
                    <el-icon>
                        <DocumentChecked />
                    </el-icon>保存
                </el-button>
                <el-button @click="black">
                    <el-icon>
                        <DocumentDelete />
                    </el-icon>关闭</el-button>
            </template>
        </MOSTY.FromPage>


        <!-- 选择证书模板 -->
    </div>
</template>
<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import inputDriver from "@/views/fxgk/jcss/components/MostCom/inputDriver.vue";
import { ElMessage } from "element-plus";
import { postApi } from "@/api/tobAcco_api.js";
import * as rule from "@/utils/rules.js";
import jsyChoose from "./jsyChoose.vue";

const { proxy } = getCurrentInstance();
const { D_BZ_SGPD, D_BZ_SGZR2, D_BZ_GJJWZLX } = proxy.$dict("D_BZ_SGPD", "D_BZ_SGZR2", "D_BZ_GJJWZLX");
const props = defineProps({
    editObj: {
        type: Object,
        default: () => { },
    }
});
const loadingshow = ref(false)
/** 是否显示 饮酒驾驶员 弹框 */
const isShowYjJsyChoose = ref(false)
/** 是否显示 醉酒驾驶员 弹框 */
const isShowZjJsyChoose = ref(false)
const emit = defineEmits("changePage");
const ruleFormRef = ref();

const data = reactive({
    formData: {}
});
// 车辆选择框展示
// const showCar = ref(false)
// 车辆数据
const carData = ref(null)

const rules = {
    jcdd: [{ required: true, message: "请输入抽检地点", trigger: "change" }],
    jcsj: [{ required: true, message: "请选择抽检时间", trigger: "change" }],
    jsyName: [{ required: true, message: "请输入驾驶员", trigger: "change" }],
    yjJsyName: [], // 非必填
    zjJsyName: [], // 非必填

};
// 保存车辆数据
const getSonValue = (value) => {
    carData.value = value
    data.formData.userid = value.userid
    data.formData.username = value.drivername
    data.formData.driverid = value.driverid
    data.formData.carmsgid = value.carmsgid
    data.formData.carnumber = value.carnumber
}
const jsyChange = () => {
    data.formData.yjJsyId = '';	// 饮酒驾驶员id
    data.formData.yjJsyName = '';	// 饮酒驾驶员名字
    data.formData.zjJsyId = '';	// 醉驾驾驶员id
    data.formData.zjJsyName = '';	// 醉驾驾驶员名字
}
// 保存
const submit = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid) => {
        if (valid) {
            loadingshow.value = true
            if (!data.formData.id) {
                postApi(data.formData, "/mosty-jcgl/drunkDriving/addDrunkDriving")
                    .then(() => {
                        ElMessage.success("新增成功");
                        let obj = {
                            ...props.editObj
                        };
                        emit("changePage", "Main", obj);
                        loadingshow.value = false
                    })
            } else {
                postApi(data.formData, "/mosty-jcgl/drunkDriving/updateDrunkDriving")
                    .then(() => {
                        ElMessage.success("修改成功");
                        loadingshow.value = false
                        let obj = {
                            ...props.editObj
                        };
                        emit("changePage", "Main", obj);
                    })
            }
        } else {
            ElMessage.error("请检查表单!");
        }
    });
};
const chooseYjJsyYuan = () => {
    isShowYjJsyChoose.value = true
};
const chooseZjJsyYuan = () => {
    isShowZjJsyChoose.value = true
};
// // 关闭车辆选择
// const closeCarData = (val) => {
//     showCar.value = val
// }

const black = () => {
    if (props.editObj.saveBtnShow) {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
            .then(() => {
                let obj = {
                    ...props.editObj
                };
                emit("changePage", "Main", obj);
            })
            .catch(() => {
                // catch error
            })
    } else {
        let obj = {
            ...props.editObj
        };
        emit("changePage", "Main", obj);
    }

};

watchEffect(() => {
    if (props.editObj) {
        data.formData = props.editObj;
    }
});
</script>
<style lang="scss" scoped>
.box {

    width: 800px;
    color: black;
    font-size: 20px;
    margin: 0 auto;
}
</style>