<template>
    <div class="edit-popup">
        <popup ref="popupRef" :title="popupTitle" :async="true" width="80vw" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="协议名称" prop="contract_name">
                            <el-input v-model="formData.contract_name" clearable placeholder="请输入协议名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="协议性质" prop="agreement_nature">
                            <el-select class='  flex-1' v-model="formData.agreement_nature">
                                <el-option v-for="(item, index) in  dictData.agreement_nature " :key="index"
                                    :label="item.name" :value="parseInt(item.value)"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="甲方签订单位" prop="part_a">
                            <el-input v-model="formData.part_a_name" clearable placeholder="点击选择甲方签约单位"
                                @click="showDialog1 = true" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系人" prop="part_a_contact">
                            <el-input v-model="formData.part_a_contact" clearable placeholder="请输入联系人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="业主地址" prop="part_a_address">
                            <el-input v-model="formData.part_a_address" clearable placeholder="请输入业主地址" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="乙方签约单位" prop="part_b">
                            <el-input v-model="formData.part_b" clearable placeholder="请输入乙方签约单位" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="乙方签约人" prop="part_b_signatory">
                            <el-input v-model="formData.part_b_signatory_name" clearable placeholder="请输入乙方签约人"
                                @click="userclick('part_b_signatory')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="业务性质" prop="business_nature">
                            <el-select class='  flex-1' v-model="formData.business_nature">
                                <el-option v-for="(item, index) in  dictData.cost_consultation_business_nature "
                                    :key="index" :label="item.name" :value="parseInt(item.value)"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="暂估签订金额" prop="signed_amount">
                            <el-input v-model="formData.signed_amount" clearable placeholder="请输入暂估签订金额" type="number" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="签订费率(%)" prop="signed_rate">
                            <el-input v-model="formData.signed_rate" clearable placeholder="请输入签订费率" type="number" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="协议有效期" prop="service_duration">
                            <el-input v-model="formData.service_duration" clearable placeholder="请输入协议有效期" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="取消规则" prop="payment_method">
                            <el-input v-model="formData.payment_method" clearable placeholder="请输入取消规则" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="协议主要内容" prop="content">
                            <el-input v-model="formData.content" clearable placeholder="请输入协议主要内容" type="textarea" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="附件" prop="">
                            <upload-annex :form-data="formData"></upload-annex>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="签订部门" prop="signed_dept">
                            <el-select v-model="formData.signed_dept" placeholder="请选择部门" class="flex-1">
                                <el-option :label="item.name" :value="item.id" v-for="item in deptList">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="签订负责人" prop="signed_head">
                            <el-input v-model="formData.signed_head_name" readonly clearable placeholder="点击选择签订负责人"
                                @click="userclick('signed_head')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="盖章名称" prop="seal_name">
                            <el-select class='  flex-1' v-model="formData.seal_name">
                                <el-option v-for="(item, index) in  dictData.cost_consultation_seal_name " :key="index"
                                    :label="item.name" :value="parseInt(item.value)"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否限制次数" prop="is_limit">
                            <el-select class='  flex-1' v-model="formData.is_limit">
                                <el-option label="是" :value="parseInt(1)"></el-option>
                                <el-option label="否" :value="parseInt(0)"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if='formData.is_limit'>
                        <el-form-item label="限制次数" prop="limit_num">
                            <el-input v-model="formData.limit_num" clearable placeholder="请输入限制次数" type='number' />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="文件类型" prop="file_type">
                            <el-select class='  flex-1' v-model="formData.file_type">
                                <el-option v-for="(item, index) in  dictData.cost_consultation_file_type " :key="index"
                                    :label="item.name" :value="parseInt(item.value)"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="盖章份数" prop="seal_num">
                            <el-input v-model="formData.seal_num" clearable placeholder="请输入盖章份数" type='number' />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="盖章人" prop="seal_user_name">
                            <el-input v-model="formData.seal_user_name" clearable placeholder="点击选择盖章人" readonly
                                @click="userclick('seal_user')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="骑缝盖章" prop="plance_seal">
                            <el-select class='  flex-1' v-model="formData.plance_seal">
                                <el-option v-for="(item, index) in  dictData.isqfgz " :key="index" :label="item.name"
                                    :value="parseInt(item.value)"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发出日期" prop="send_date">
                            <el-date-picker class="flex-1 !flex" v-model="formData.send_date" clearable type="date"
                                value-format="YYYY-MM-DD" placeholder="选择发生日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="邮寄编号" prop="mailing_number">
                            <el-input v-model="formData.mailing_number" clearable placeholder="请输入邮寄编号" type='number' />
                        </el-form-item>
                    </el-col>
                    <createUserLable :form-data='formData' name='录入' flag></createUserLable>
                </el-row>
            </el-form>
            <div v-if="showDialog">
                <personnelselector ref="personnel" @confirm="submituser" type="1">
                </personnelselector>
            </div>
            <el-dialog v-model="showDialog1" title="选择甲方签订单位" width="70%">
                <dialogTable :config="marketing_custom" @customEvent="customEvent">
                </dialogTable>
            </el-dialog>
        </popup>
    </div>
</template>

<script lang="ts" setup name="marketingContractEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apimketingFrameworkAgreementAdd, apimketingFrameworkAgreementEdit } from '@/api/marketing_framework_agreement'
import { marketing_custom } from "@/components/dialogTable/dialogTableConfig";



defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    },
    deptList: Array

})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const showDialog = ref(false)
const showDialog1 = ref(false)
const personnel = ref(null)


// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑市场经营--框架协议' : '新增市场经营--框架协议'
})

// 表单数据
const formData = reactive({
    id: "",
    "contract_name": "",
    "agreement_nature": '',
    "part_a": '',
    "part_a_name": '',
    "part_a_contact": "",
    "part_a_address": "",
    "part_b": "",
    "part_b_signatory": '',
    "part_b_signatory_name": '',
    "business_nature": '',
    "signed_amount": '',
    "signed_rate": '',
    "service_duration": "",
    "payment_method": "",
    "content": "",
    "annex": [],
    "signed_dept": '',
    "signed_head": '',
    "signed_head_name": '',
    "seal_name": '',
    "is_limit": '',
    "limit_num": '',
    "file_type": '',
    "seal_num": '',
    "seal_user": '',
    seal_user_name: "",
    "plance_seal": '',
    "send_date": "",
    "mailing_number": "",
    "create_user": "",
    "create_time": ""
})

const customEvent = (e) => {
    formData.part_a = e.id
    formData.part_a_name = e.name
    showDialog1.value = false
}



let value;
const userclick = async (val) => {
    showDialog.value = true
    value = val
    await nextTick()
    personnel.value.open()

}

//确认
const submituser = (e: any) => {
    formData[value + '_name'] = e.name
    formData[value] = e.id
    showDialog.value = false
}


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

})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }


}




// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate()
    const data = { ...formData, }
    mode.value == 'edit'
        ? await apimketingFrameworkAgreementEdit(data)
        : await apimketingFrameworkAgreementAdd(data)
    popupRef.value?.close()
    emit('success')
}

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

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



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