<template>
    <div class="edit-popup">
        <popup ref="popupRef" :title="popupTitle" :async="true" width="80%" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" :model="formData" label-width="160px" :rules="formRules">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="合同编号" prop="subcontracting_contract_id" @click="showDialog = true" :rules="[
                            { required: true, message: '不可为空', trigger: 'change' },
                        ]">
                            <el-input v-model="contract_no" clearable placeholder="请输入合同编号" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="供应商名称" prop="subcontracting_contract_id">
                            <el-input v-model="supplier_name" clearable disabled placeholder="系统自动填写" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商编码" prop="subcontracting_contract_id">
                            <el-input v-model="supplier_code" clearable disabled placeholder="系统自动填写" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="项目名称" prop="subcontracting_contract_id" :rules="[
                            { required: true, message: '不可为空', trigger: 'change' },
                        ]">
                            <el-input v-model="project_name" clearable disabled placeholder="系统自动填写" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目编码" prop="subcontracting_contract_id" :rules="[
                            { required: true, message: '不可为空', trigger: 'change' },
                        ]">
                            <el-input v-model="project_code" clearable disabled placeholder="系统自动填写" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="洽商编号" prop="negotiation_no">
                            <el-input v-model="formData.negotiation_no" clearable disabled placeholder="系统自动生成" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="洽商单名称" prop="negotiation_name">
                            <el-input v-model="formData.negotiation_name" clearable placeholder="请输入洽商单名称" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="签订日期" prop="sign_date">
                            <el-date-picker class="flex-1 !flex" v-model="formData.sign_date" clearable
                                value-format="YYYY-MM-DD" placeholder="选择签订日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="洽商金额" prop="negotiation_amount" :rules="[
                            { required: true, message: '不可为空', trigger: 'change' },
                        ]">
                            <el-input v-model="formData.negotiation_amount" clearable placeholder="请输入合同金额" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="洽商内容" prop="negotiation_content">
                            <el-input v-model="formData.negotiation_content" clearable placeholder="请输入洽商内容" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="具体说明" prop="negotiation_detail">
                            <el-input v-model="formData.negotiation_detail" clearable placeholder="请输入具体说明" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="洽商类别" prop="negotiation_type">
                            <el-radio-group v-model="formData.negotiation_type" placeholder="请选择付款方式">
                                <el-radio v-for="(item, index) in dictData.negotiation_type" :key="index"
                                    :label="parseInt(item.value)">
                                    {{ item.name }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="洽商质保金额" prop="warranty_amount">
                            <el-input v-model="formData.warranty_amount" clearable placeholder="请输入不含税金额" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="洽商质保到期时间" prop="warranty_expire_date">
                            <el-date-picker class="flex-1 !flex" v-model="formData.warranty_expire_date" clearable
                                value-format="YYYY-MM-DD" placeholder="选择洽商质保到期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="签证报价表">
                            <uploadAnnex :formData="formData" value="negotiation_quotation">
                            </uploadAnnex>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="洽商依据">
                            <uploadAnnex :formData="formData" value="negotiation_basis">
                            </uploadAnnex>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-dialog v-model="showDialog" title="选择分包合同" width="70%">
                <dialogTable :config="subcontracting_contract" :query="{ project_id: project?.id || '' }"
                    @customEvent="customEvent">
                </dialogTable>
            </el-dialog>
        </popup>
    </div>
</template>

<script lang="ts" setup name="procurementContractEdit">
import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue";
import { useDictData } from "@/hooks/useDictOptions";
import {
    apinegotiationAdd,
    apinegotiationEdit,
    apinegotiationDetail,
} from "@/api/subcontractor";
import { subcontracting_contract } from "@/components/dialogTable/dialogTableConfig"



const { dictData } = useDictData("negotiation_type");
let props = defineProps({
    project: Object,
});
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
const showDialog = ref(false);
const project_name = ref("");
const project_code = ref("");
const formDataannex = reactive([]);
const formDataannex1 = reactive([]);
const supplier_name = ref("");
const supplier_code = ref("");
const contract_no = ref("");
const tableData = reactive([]);
const tableData1 = reactive([]);
import feedback from "@/utils/feedback";
import configs from "@/config";
const base_url = configs.baseUrl + configs.urlPrefix;
import useUserStore from "@/stores/modules/user";
const userStore = useUserStore();

// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == "edit" ? "编辑分包洽商" : "新增分包洽商";
});
// 表单数据
const formData = reactive({
    id: "",
    subcontracting_contract_id: "1",
    negotiation_name: "",
    negotiation_no: "",
    negotiation_amount: "",
    negotiation_type: "",
    sign_date: "",
    warranty_amount: "",
    warranty_expire_date: "",
    negotiation_content: "",
    negotiation_quotation: [],
    negotiation_basis: [],
    negotiation_detail: "",
});

const customEvent = (e: any) => {
    contract_no.value = e.contract_no;
    supplier_name.value = e.supplier_name;
    supplier_code.value = e.supplier_code;
    formData.sign_date = e.signing_date;
    project_name.value = e.project_name;
    formData.subcontracting_contract_id = e.id;
    project_code.value = e.project_code;
    showDialog.value = false;
};
if (props.project) {
    project_name.value = props.project.name;
    project_code.value = props.project.project_code;
}


const chekcDate = (rule: any, value: any, callback: any) => {
    if (new Date(formData.warranty_expire_date) < new Date(formData.sign_date)) {
        callback(new Error('洽商质保到期时间早于签订日期'))
    } else {
        callback()
    }
}

// 表单验证
const formRules = reactive<any>({

    warranty_expire_date: [{
        required: true,
        message: '洽商质保到期时间',
        trigger: ['blur']
    },
    {
        validator: chekcDate,
        trigger: ['blur']
    }],

});

// 获取详情
const setFormData = async (data: Record<any, any>) => {
    project_name.value = data.project_name;
    project_code.value = data.project_code;
    contract_no.value = data.contract_no;
    supplier_name.value = data.supplier_name;
    supplier_code.value = data.supplier_code;

    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key];
        }
    }
};

const getDetail = async (row: Record<string, any>) => {
    const data = await apinegotiationDetail({
        id: row.id,
    });
    setFormData(data);
};

// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate();
    const data = { ...formData };
    mode.value == "edit"
        ? await apinegotiationEdit(data)
        : await apinegotiationAdd(data);
    popupRef.value?.close();
    emit("success");
};

//打开弹窗
const open = (type = "add") => {
    mode.value = type;
    popupRef.value?.open();
};

// 关闭回调
const handleClose = () => {
    emit("close");
};

defineExpose({
    open,
    setFormData,
    getDetail,
});
</script>
