<template>
    <div class="nav_detail">
        <div class="nav_sec">
            <div class="title flex">
                <span class="bold">基本信息</span>
            </div>
            <div class="form_area flex">
                <div class="form_item">
                    <div class="flex">
                        <div class="label">商机标题：</div>
                        <div class="value">{{ detailData?.title }}</div>
                    </div>
                    <div class="flex">
                        <div class="label">关联订单：</div>
                        <div class="value">
                            <a style="color: #1874FF" v-if="detailData?.orderFormId"  target="_blank"
                                :href="`/order/detail?id=${detailData?.orderFormId}`">
                                {{ detailData?.orderFormTitle }}</a>
                            <span v-else> --</span>
                        </div>
                    </div>
                    <div class="flex">
                        <div class="label">预计销售金额({{ !detailData?.currency ||  detailData?.currency == 1? 'CNY' : `USD`  }})：</div>
                        <div class="value flex justify-between">
                            <div>{{ detailData?.initialSalesAmount ?
                                detailData?.initialSalesAmount.toFixed(2) : '--' }}</div>
                            <div>{{ !detailData?.currency ||  detailData?.currency == 1? '' : `汇率${detailData?.exchangeRate},折算人民币${detailData?.estimatedSalesAmount}元`  }}</div>
                        </div>

                    </div>
                    <div class="flex">
                        <div class="label">销售阶段：</div>
                        <div class="value">{{ detailData?.stageName }}</div>
                    </div>
                    <div class="flex">
                        <div class="label">成交机率：</div>
                        <div class="value">{{ detailData?.stransactionProbabilityName || '--' }}</div>
                    </div>
                    <div class="flex">
                        <div class="label">获取日期：</div>
                        <div class="value">{{ detailData?.getedDate || '--' }}</div>
                    </div>
                    <!-- <div class="flex">
                        <div class="label">备注信息：</div>
                        <div class="value">{{ detailData?.remark || '--' }}</div>
                    </div> -->

                </div>
                <div class="form_item">
                    <div class="flex">
                        <div class="label">关联客户：</div>
                        <div class="value">
                            <a style="color: #1874FF" v-if="detailData?.customerId" type="primary" target="_blank"
                                :href="`/customer/customerDetail?id=${detailData?.customerId}`"> {{
                                    detailData?.customerName }}</a>
                            <span v-else> --</span>
                        </div>
                    </div>
                    <div class="flex">
                        <div class="label">主要联系人：</div>
                        <div class="value">{{ detailData?.liaisonName || '--' }}</div>
                    </div>
                    <div class="flex">
                        <div class="label">预计签单日期：</div>
                        <div class="value">{{ detailData?.expectedSigningDate || '--' }}</div>
                    </div>
                    <div class="flex">
                        <div class="label">商机类型：</div>
                        <div class="value">{{ detailData?.businessTypeName || '--' }}</div>
                    </div>
                    <div class="flex">
                        <div class="label">商机来源：</div>
                        <div class="value">{{ detailData?.sourcesOfBusinessName || '--' }}</div>
                    </div>
                    <div class="flex">
                        <div class="label"> 归属人员：</div>
                        <div class="value">{{ detailData?.ownerByName || '--' }}</div>
                    </div>
                    <!-- <div class="flex">
                        <div class="label"> </div>
                        <div class="value"></div>
                    </div> -->
                </div>
            </div>
            <div class="form_area flex" style="border:none">
                <div class="flex form_item" style="flex:1">
                    <div class="label">备注信息</div><div class="value">{{ detailData?.remark || '--' }}</div>
                </div>
                <div class="flex form_item" style="flex:1">
                    <div class="label"></div><div class="value"></div>
                </div>
            </div>
        </div>
        <div class="nav_sec">
            <div class="title flex">
                <span class="bold">系统信息</span>
            </div>
            <div class="form_area flex">
                <div class="form_item">
                    <div class="flex">
                        <div class="label">系统编号：</div>
                        <div class="value">{{ detailData?.dataCode || '--' }}</div>
                    </div>
                    <div class="flex">
                        <div class="label">所属部门：</div>
                        <div class="value">{{ detailData?.deptName || '--' }}</div>
                    </div>
                    <div class="flex">
                        <div class="label">前归属人：</div>
                        <div class="value">{{ detailData?.formerOwnerByName || '--' }}</div>
                    </div>
                    <div class="flex">
                        <div class="label">创建时间：</div>
                        <div class="value">{{ detailData?.createTime || '--' }}</div>
                    </div>
                    <div class="flex">
                        <div class="label">最后跟进：</div>
                        <div class="value">{{ detailData?.lastFollowUpTime || '--' }}</div>
                    </div>
                </div>
                <div class="form_item">
                    <div class="flex">
                        <div class="label">协作人员：</div>
                        <div class="value">{{detailData?.collaboratorName || '--'}}</div>
                    </div>
                    <div class="flex">
                        <div class="label"> 创建人员：</div>
                        <div class="value">{{detailData?.createByName || '--'}}</div>
                    </div>
                    <div class="flex">
                        <div class="label">前所属部门：</div>
                        <div class="value">{{detailData?.formerDeptName || '--'}}</div>
                    </div>
                    <div class="flex">
                        <div class="label">更新时间：</div>
                        <div class="value">{{detailData?.updateTime || '--'}}</div>
                    </div>
                    <div class="flex">
                        <div class="label">下次跟进：</div>
                        <div class="value">{{detailData?.nextFollowUpTime || '--'}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav_sec">
            <div class="title flex">
                <span class="bold">商机动态</span>
                <span class="flex-center">
                    <el-checkbox v-model="onlyFollow" size="large" />
                    <span style="margin: 0 16px 0 4px;">只看跟进</span>
                    <el-button type="primary" @click="openDialog()">写跟进</el-button>
                </span>
            </div>
            <div>
                <Follow :btnRole="leftBtn" :onlyShowFollow="onlyFollow" :followParams="followParams"
                    :showAll="onlyFollow"></Follow>
            </div>
        </div>
        <AddFollow ref="addFollowRef"></AddFollow>
    </div>
</template>


<script setup lang="ts">
    import Follow from '@/components/Follow/index.vue'
    import AddFollow from '@/components/Follow/add.vue'
    const props = defineProps({
        //关联客户id
        detailData: {
            type: Object,
            default: {}
        },

    })
    const addFollowRef = ref()
    const onlyFollow = ref(false)
    const router: any = useRouter();
    let queryData = router.currentRoute.value.query
    const followParams:any = ref({
        resourceType:30,
        resourceTypeId: queryData.id,
    })
    const customerDetail = reactive({})
    const {detailData} = toRefs(props)
    const openDialog = ()=>{
        let param = {
            type: 'add',
            customerId: detailData?.value?.customerId,
            customerName: detailData?.value?.customerName,
            resourceType: 30,
            resourceTypeId: detailData?.value?.id,
            resourceName: detailData?.value?.title,
            resourceStageName: detailData?.value?.stageName,
            resourceStageDictValue: detailData?.value?.stage
        }
        addFollowRef.value.open(param)
    }


const leftBtn = ref([
    { type: 'detail', hasPermi: `business:detail:tab_gjjl_xq` },
    { type: 'commit', hasPermi: `business:detail:tab_gjjl_tj` },
    { type: 'remove', hasPermi: `business:detail:tab_gjjl_sc` },
    { type: 'edit', hasPermi: `business:detail:tab_gjjl_bj` },

])
    defineExpose({
        open
    })


</script>
<style lang="scss" scoped>

</style>
