<template>
    <div class="relative p-12px">
        <el-form
            ref="formRef"
            :model="formModel"
            :rules="formRules"
            label-width="auto"
            size="large"
        >
            <el-row :gutter="60">
                <el-col :span="12">
                    <el-form-item label="项目名称：" prop="projectName">
                        <el-input
                            v-model="formModel.projectName"
                            clearable
                            placeholder="项目名称"
                        />
                    </el-form-item>
                    <el-form-item label="项目别名：" prop="projectAlias">
                        <el-input
                            v-model="formModel.projectAlias"
                            clearable
                            placeholder="项目别名"
                        />
                    </el-form-item>
                    <el-form-item label="项目编号：">
                        <el-input
                            v-model="formModel.projectNumber"
                            clearable
                            placeholder="项目编号"
                        />
                    </el-form-item>
                    <el-form-item label="公路等级：">
                        <el-select
                            v-model="formModel.projectGrade"
                            filterable
                            clearable
                            block
                            placeholder="公路等级"
                        >
                            <el-option
                                v-for="item in highwayGradeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="计划开工：" prop="planStartTime">
                        <el-date-picker
                            v-model="formModel.planStartTime"
                            class="block"
                            format="YYYY 年 MM 月 DD 日"
                            type="date"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="计划开工日期"
                        />
                    </el-form-item>
                    <el-form-item label="实际开工：" prop="actualStartTime">
                        <el-date-picker
                            v-model="formModel.actualStartTime"
                            class="block"
                            format="YYYY 年 MM 月 DD 日"
                            type="date"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="实际开工日期"
                        />
                    </el-form-item>
                    <el-form-item label="预算投资：">
                        <el-input
                            v-model="formModel.estimatedAmount"
                            clearable
                            placeholder="项目预算投资"
                        >
                            <template #append>万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="电签类别：" prop="remarkType">
                        <div class="form-item-div">
                            <el-radio-group v-model="formModel.remarkType">
                                <el-radio :value="1">安心签</el-radio>
                                <el-radio :value="2">东方中讯</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="电签方式：">
                        <div class="form-item-div">
                            <el-radio-group v-model="formModel.approvalType">
                                <el-radio :value="1">流程审批</el-radio>
                                <el-radio :value="2">平行审批</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="计量单元：">
                        <el-select
                            v-model="formModel.meterTemplateId"
                            filterable
                            clearable
                            block
                            placeholder="系统计量单元"
                        >
                            <el-option
                                v-for="item in meterTemplateOption"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目概况：">
                        <el-input
                            v-model="formModel.projectGist"
                            :rows="7"
                            type="textarea"
                            placeholder="项目概况"
                        />
                    </el-form-item>
                    <el-form-item label="内置里程：">
                        <el-radio-group
                            v-model="formModel.radioType"
                            class="mr-14px"
                        >
                            <el-radio-button label="总里程" value="总里程" />
                            <el-radio-button label="路面" value="路面" />
                            <el-radio-button label="路基" value="路基" />
                        </el-radio-group>
                        <el-input-number
                            v-if="formModel.radioType === '总里程'"
                            v-model="formModel.projectAllMileage"
                            :precision="3"
                            :min="0"
                        />
                        <el-input-number
                            v-if="formModel.radioType === '路面'"
                            v-model="formModel.projectPavement"
                            :precision="3"
                            :min="0"
                        />
                        <el-input-number
                            v-if="formModel.radioType === '路基'"
                            v-model="formModel.projectSubgrade"
                            :precision="3"
                            :min="0"
                        />
                        <span class="ml-12px">公里(KM)</span>
                    </el-form-item>
                    <el-form-item label="计划完工：" prop="planEndTime">
                        <el-date-picker
                            v-model="formModel.planEndTime"
                            class="block"
                            format="YYYY 年 MM 月 DD 日"
                            type="date"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="计划完工日期"
                        />
                    </el-form-item>
                    <el-form-item label="实际完工：" prop="actualEndTime">
                        <el-date-picker
                            v-model="formModel.actualEndTime"
                            class="block"
                            format="YYYY 年 MM 月 DD 日"
                            type="date"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="实际完工日期"
                        />
                    </el-form-item>
                    <el-form-item label="随机数：" prop="isOpenRandomNumber">
                        <div class="form-item-div">
                            <el-radio-group
                                v-model="formModel.isOpenRandomNumber"
                            >
                                <el-radio :value="0">不开启</el-radio>
                                <el-radio :value="1">开启</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { getDictionaryData } from "~uti/tools";
import { formValidate, getArrValue } from "js-fast-way";
import measureApi from "~api/measure/template";

//双向绑定
const modelData = defineModel("modelValue", {
    default: {},
});

//渲染完成
onMounted(() => {
    getHighwayGradeList();
    getBusinessUserOpinion();
});

//监听数据
const formModel = ref({});
watch(
    () => modelData.value,
    (data) => {
        data.radioType = data.radioType || "总里程";
        formModel.value = data;
        formModel.value.projectAllMileage = Number(
            formModel.value.projectAllMileage
        );
    },
    { immediate: true, deep: true }
);

//监听表单数据
watch(
    () => formModel.value,
    (data) => {
        modelData.value = data;
    },
    { deep: true }
);

//表单
const formRef = ref(null);
const formRules = {
    projectName: { required: true, trigger: "blur", message: "请输入项目名称" },
    projectAlias: {
        required: true,
        trigger: "blur",
        message: "请输入项目别名",
    },
    planStartTime: {
        required: true,
        trigger: "blur",
        message: "请选择计划开工日期",
    },
    actualStartTime: {
        required: true,
        trigger: "blur",
        message: "请选择实际开工日期",
    },
    remarkType: { required: true, trigger: "blur", message: "请选择电签类别" },
};

//公路等级
const highwayGradeList = ref([]);
const getHighwayGradeList = async () => {
    highwayGradeList.value = await getDictionaryData("highway_grade");
};

//系统计量单元
const meterTemplateOption = ref([]);
const getBusinessUserOpinion = async () => {
    const { data } = await measureApi.queryBusinessUserOpinionList();
    meterTemplateOption.value = getArrValue(data);
};

//验证表单
const isForm = async () => {
    return await formValidate(formRef.value);
};

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