<!-- 简报详情 -->
<template>
    <div v-loading="buttonLoading">
        <el-dialog title="简报详情" v-model="visible" width="850px">
            <div class="title title-one">{{ titleOne }}</div>
            <div class="title title-two">{{ titleTwo }}</div>
            <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item label="订单成交总金额：" label-class-name="my-label">{{detailData?.orderAmountTotal}}元</el-descriptions-item>
                <el-descriptions-item label="" label-class-name="my-label" v-if="detailData?.orderAmountRecords?.length>0">
                    <div class="summary_list">
                        <div v-for="item in detailData?.orderAmountRecords">
                            <span>{{ item.organization }}：</span>{{ item.totalNum }}元
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="客户新增总数：" label-class-name="my-label">{{detailData?.customerTotal}}条</el-descriptions-item>
                <el-descriptions-item label="" label-class-name="my-label" v-if="detailData?.customerRecords?.length>0">
                    <div class="summary_list">
                        <div v-for="item in detailData?.customerRecords">
                            <span>{{ item.organization }}：</span>{{ item.totalNum }}
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="商机新增总数：" label-class-name="my-label">{{detailData?.businessTotal}}条</el-descriptions-item>
                <el-descriptions-item label="" label-class-name="my-label" v-if="detailData?.businessRecords?.length>0">
                    <div class="summary_list">
                        <div v-for="item in detailData?.businessRecords">
                            <span>{{ item.organization }}：</span>{{ item.totalNum }}
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="订单新增总数：" label-class-name="my-label">{{detailData?.orderNumTotal}}条</el-descriptions-item>
                <el-descriptions-item label="" label-class-name="my-label" v-if="detailData?.orderNumRecords?.length>0">
                    <div class="summary_list">
                        <div v-for="item in detailData?.orderNumRecords">
                            <span>{{ item.organization }}：</span>{{ item.totalNum }}
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="线索新增总数：" label-class-name="my-label">{{detailData?.leadTotal}}条</el-descriptions-item>
                <el-descriptions-item label="" label-class-name="my-label" v-if="detailData?.leadRecords?.length>0">
                    <div class="summary_list">
                        <div v-for="item in detailData?.leadRecords">
                            <span>{{ item.organization }}：</span>{{ item.totalNum }}
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="跟进新增总数：" label-class-name="my-label">{{detailData?.followTotal}}条</el-descriptions-item>
                <el-descriptions-item label="" label-class-name="my-label" v-if="detailData?.followRecords?.length>0">
                    <div class="summary_list">
                        <div v-for="item in detailData?.followRecords">
                            <span>{{ item.organization }}：</span>{{ item.totalNum }}
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="邮件新增总数：" label-class-name="my-label">{{detailData?.mailTotal}}条</el-descriptions-item>
                <el-descriptions-item label="" label-class-name="my-label" v-if="detailData?.mailRecords?.length>0">
                    <div class="summary_list">
                        <div v-for="item in detailData?.mailRecords">
                            <span>{{ item.organization }}：</span>{{ item.totalNum }}
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" plain :disabled="!prevId" :loading="buttonLoading" @click="getData(prevId)">上一个</el-button>
                    <el-button @click="cancel">关闭</el-button>
                    <el-button type="primary" plain :disabled="!nextId" :loading="buttonLoading" @click="getData(nextId)">下一个</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    
</template>

<script setup lang="ts">
    import { getSketchData,getCycle } from '@/api/statistics/salesAnalysis'
    import { DataSummaryVO } from '@/api/statistics/salesAnalysis/types';
    const emits = defineEmits(['refresh'])
    const visible = ref(false)
    const buttonLoading = ref(false)
    const openData = ref()
    const open = (data) => {
        visible.value = true
        openData.value = data
        getData(data.id)
    }
    const typeList = [
        { label: '周报', value: 10 },
        { label: '月报', value: 20 },
        { label: '季度', value: 30 },
        { label: '半年度', value: 40 },
        { label: '年度', value: 50 }
    ]
    const nextId = ref()
    const prevId = ref()
    const titleOne = ref()
    const titleTwo = ref()
    const detailData = ref<DataSummaryVO>()
    const getData = (id) => {
        buttonLoading.value = true
        let data = JSON.parse(JSON.stringify(openData.value))
        data.id = id
        getSketchData(data).then(res => {
            if(res.success) {
                buttonLoading.value = false
                nextId.value = res.result.nextId
                prevId.value = res.result.prevId
                detailData.value = JSON.parse(res.result.sketchDataJson)
                const targetItem = typeList.find(item => item.value === detailData.value.sketchType);
                const targetLabel = targetItem?.label || '未知类型';
                titleOne.value = detailData.value.organizationName+targetLabel
                titleTwo.value = getCycle(detailData.value)
                console.log(898,detailData.value)
            }
        })
    }
    const cancel = () => {
        visible.value = false
    }

    defineExpose({
        open
    })
</script>

<style lang="scss" scoped>
.margin-top{
    :deep(.my-label){
        width: 150px;
    }
    :deep(.el-dialog__body){
        padding: 14px 10px 20px !important;
    }
    .summary_list{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }
}
.title-one{
    font-size: 16px;
}
.title-two{
    margin-bottom: 10px;
}
.title{
    text-align: center;
    font-weight: bold;
}
</style>
