<template>
    <div v-if="componentDetail.type === 'radio'">
        <el-form ref="formIDVFRef" :model="formulaModalinfo" label-width="auto" size="large">
            <el-form-item :label="componentDetail.info.label">
                <!-- onkeyup="value = value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')" -->
                <el-radio-group v-model="formulaModalinfo.type" size="large">
                    <el-radio :label="componentDetail.info.value[0].value">
                        {{ componentDetail.info.value[0].label }}
                    </el-radio>
                    <el-radio :label="componentDetail.info.value[1].value" class="ml-4">
                        {{ componentDetail.info.value[1].label }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import wbsApi from '~api/data-fill/wbs'
import { getObjValue } from 'js-fast-way'

const props = defineProps({
    projectId: [String, Number],
    contractId: [String, Number],
    pkeyId: [String, Number],
    keyName: [String, Number],
    formparentId: [String, Number],
})


const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const pkey_id = ref(props.pkeyId)
const key_name = ref(props.keyName)
const formparent_id = ref(props.formparentId)

//监听
watch(() => [
    props.projectId,
    props.contractId,
    props.pkeyId,
    props.keyName,
    props.formparentId,
], ([pid, cid, pkeyId, keyName, formparentId]) => {
    projectId.value = pid
    contractId.value = cid
    pkey_id.value = pkeyId
    key_name.value = keyName
    formparent_id.value = formparentId
    getPanel()
})

onMounted(() => {
    getPanel()
})

const formIDVFRef = ref(null)
const componentDetail = ref({
    type: 'radio',
    info: {
        label: '是否引用公式数据',
        value: [
            { label: '是', value: 1 },
            { label: '否', value: 0 },
        ],
    },
})

const formulaModalinfo = ref({
    type: '',
})

//获取公式面板数据
const getPanel = async () => {
    const pkeyIds = pkey_id.value
    if (pkeyIds) {
        const { data } = await wbsApi.queryPanel({
            key: key_name.value,
            contractId: contractId.value,
            parentId: formparent_id.value,
            pkeyId: pkeyIds,
        }, false)
        const res = getObjValue(data)
        componentDetail.value = res
        formulaModalinfo.value.type = res?.info?.data ?? ''
    } else {
        window?.$message?.warning('pkeyId为空')
    }
}

const panelSave = async () => {
    const { error, code } = await wbsApi.savePanel({
        parentId: formparent_id.value,
        key: key_name.value,
        contractId: contractId.value,
        value: formulaModalinfo.value?.type,
        pkeyId: pkey_id.value,
        scope: componentDetail.value?.scope,
        code: componentDetail.value?.info?.code,
    })
    if (!error && code === 200) {
        window?.$message?.success('操作成功')
    }
}

// 暴露出去
defineExpose({
    panelSave,
})
</script>
