<template>
    <div class="order-main">

        <el-row class="order-layout" style="margin-left: 150px; margin-bottom: 15px;">
            <el-radio-group v-model="orderInfo.type" :disabled="typeFlag" @change="changeType">
                <el-radio-button label="咨询" value="1000" />
                <el-radio-button label="建议" value="2000" /> 
                <el-radio-button label="投诉" value="3000" />
                <!-- <el-radio-button label="客户转运" value="4000" /> -->
            </el-radio-group>
        </el-row>
        <el-row class="order-layout">
            <component :is="currentComponent" :orderInfo="orderInfo" @updateSuccess="getRefresh"></component>
        </el-row>
    </div>
</template>

<script setup>
    import { shallowRef, reactive, ref } from 'vue'
    import consult from './src/form/consult';
    import complain from './src/form/complain';
    import transport from './src/form/transport';
    const props = defineProps({
        inCommingData: {
            type: Object,
            default: () => ({}),
        },
        getDefaultInfo: {
            type: Object,
            default: () => ({}),
        }
    });

    const orderInfo = ref({
        type:1000
    });
    const typeFlag = ref(false)
    watch(props, (nweProps) => {
        initMethod(props);
    });
    
    onMounted(() => {
        initMethod(props);
    });
    function initMethod(data) {
        typeFlag.value = false
        console.log(data.inCommingData);
        
        if (!data.getDefaultInfo.type) {
            data.getDefaultInfo.type = 1000
        }
        orderInfo.value = {...data.getDefaultInfo}
        if (data.getDefaultInfo.firsttype) {
            typeFlag.value = true
            orderInfo.value.type = data.getDefaultInfo.firsttype
            changeType(orderInfo.value.type)
        }
        if (data.inCommingData.CallID) {
            orderInfo.value.callId = data.inCommingData.CallID
            orderInfo.value.callnum = data.inCommingData.Number
        }
        console.log(orderInfo.value);
    }
    const compsObj = shallowRef({
        consult,
        complain,
        transport,
    });
    let currentComponent = shallowRef(consult)

   

    // 表单配置
    const formConfig = reactive({
        '1000': {
            page: 'consult',
        },
        '2000': {
            page: 'consult',
        },
        '3000': {
            page: 'complain',
        },
        '4000': {
            page: 'transport',
        },

    });
    const emit = defineEmits(["refreshOrder","orderTypeChange"]);

    const changeType = (val) => {
        emit('orderTypeChange',val);
        if (formConfig[`${val}`]) currentComponent.value = compsObj.value[formConfig[`${val}`].page];
        else currentComponent.value = compsObj.value[formConfig[''].page];
    }
   
    function getRefresh() {
        emit('refreshOrder');
    }

</script>


<style lang="scss" scoped>
    .order-main {
        width: 100%;
    }

    .order-layout {
        display: flex;
        margin-top: 10px;
    }
</style>