<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
            <div class="d-flex a-c pd-16 border-bottom">
                <div class="f-s-20 c-333 f-w-7 mr-10">套餐详情</div>
                <el-button @click="router.go(-1)" type="primary" text>
                    <el-icon>
                        <Back />
                    </el-icon>
                    返回上一级
                </el-button>
            </div>
            <div class="flex1 over-auto">
                <div class="pd-16">
                    <div class="info-title mb-16">套餐基本信息</div>
                    <el-descriptions :column="4">
                        <el-descriptions-item label="套餐名称:">{{ form?.name || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="套餐类型:">{{ selectDictLabel(dm_package_type, form?.publicFlag) || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="制定规则:">{{ selectDictLabel(dm_permit_type,form?.permitType ) }}</el-descriptions-item>
                        <el-descriptions-item v-if="form?.permitType === '1'" label="适用类型:">{{ selectDictLabels(vip_level, form?.permit, ',') || '-' }}</el-descriptions-item>
                        <el-descriptions-item v-if="form?.permitType === '2'" label="适用企业:">{{ form?.permitCpyNames.toString()|| '-' }}</el-descriptions-item>
                        <el-descriptions-item label="检测周期:">{{ form?.period || '-' }}天</el-descriptions-item>
                        <el-descriptions-item label="上架数量:">{{ form?.totalCount || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="检测类型:">{{ selectDictLabel(dm_test_type, form.testType) }}</el-descriptions-item>
                        <el-descriptions-item label="执行标准:">{{ form?.standard || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="送样信息:" :span="2">{{ form?.description || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="购买须知:" :span="2">{{ form?.purchaseNotes || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="失效日期:">{{ form?.validUntil || '-' }}</el-descriptions-item>
                    </el-descriptions>
                    <el-divider />
                    <el-descriptions :column="4" direction="vertical">
                        <el-descriptions-item label="封面图:">
                            <el-image style="width: 100px; height: 100px" :src="form?.coverImg" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[form?.coverImg]" fit="cover"></el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="产品图:">
                            <template v-for="(item, index) in form?.proImg?.split(',')" :key="index">
                                <el-image style="width: 100px; height: 100px;margin-right: 12px;" :src="item" fit="cover" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="index" :preview-src-list="[item]"></el-image>
                            </template>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-divider />
                    <div class="info-title mb-16 d-flex a-c">
                        <span>检测项目明细</span>
                        <span class="f-s-14 mr-10">（共{{itemsInfo?.length}}项, 合计{{ totalCountPrice }}元）</span>
                        <el-button type="primary" :text="true" @click="expend=!expend">{{ expend?'收起':'展开' }}</el-button>
                    </div>
                    <vxe-table v-show="expend" ref="tableRightRef" border :data="itemsInfo" :column-config="{ resizable: true }">
                        <vxe-column type="seq" width="60" title="序号" align="center" />
                        <vxe-column title="检测项目" align="center" field="name" min-width="100" :formatter="colNoData" />
                        <vxe-column title="单价（元、批次）" align="center" field="price" min-width="100" :formatter="colNoData" />
                        <vxe-column title="备注" align="center" field="description" min-width="100" :formatter="colNoData" />
                    </vxe-table>
                    <el-divider />
                    <div class="info-title mb-16">套餐价格</div>
                    <vxe-table ref="tableRightRef" border :data="form?.priceDetail" :column-config="{ resizable: true }">
                        <vxe-column type="seq" width="60" title="序号" align="center" />
                        <!-- <vxe-column v-if="form.permitType === '2'" title="企业名称" align="center" min-width="100" :formatter="colNoData">
                            <template #default="{ row }">{{ row?.cpyName }}</template>
                        </vxe-column> -->
                        <vxe-column title="适用类型" align="center" field="memberLevelName" min-width="100" :formatter="colNoData" />
                        <vxe-column title="折扣标准" align="center" min-width="100">
                            <template #default="{ row }">{{ NP.times(row?.memberDiscount, 10) }}折</template>
                        </vxe-column>
                        <vxe-column title="最终售价" align="center" min-width="100">
                            <template #default="{ row }">{{ row.price || '-' }}元</template>
                        </vxe-column>
                    </vxe-table>
                    <el-divider />
                    <div class="info-title mb-16">销售明细</div>
                    <saleLog></saleLog>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="Menus-detail" lang="ts">
import NP from 'number-precision';
import { colNoData } from '@/utils/noData';
import { debounce } from 'lodash';
import { getTestPackage, getTestPackageItems } from '@/api/cdt/menus';
import { saleLog } from '../../models';

const { query }: any = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dm_package_type, dm_permit_type, vip_level, dm_test_type } = toRefs<any>(proxy?.useDict('dm_package_type', 'dm_permit_type', 'vip_level', 'dm_test_type'));
const router = useRouter();
const form = ref<any>({
   items: [],
   priceDetail: [],
   permitCpys: [],
});
const getDetail = async () => {
    proxy?.$modal.loading('加载中...');
    const res = await getTestPackage(query?.id).finally(() => {
        proxy?.$modal.closeLoading();
    });
    if (!res || res.code !== 200) return;
    console.log(res);
    form.value = {
        ...res.data
    };
};
const itemsInfo = ref<any>([]);
const getItems = async () => {
    const res = await getTestPackageItems({
        pageNum: 1,
        pageSize: 1000,
        packageId: query?.id
    });
    if (!res || res.code !== 200) return;
    itemsInfo.value = res.rows;
};
// 合计价格
const totalCountPrice = computed(() => {
    return itemsInfo.value.reduce((total: number, item: any) => {
        return NP.plus(total, item.price);
    }, 0);
});
const expend=ref(true)
onMounted(() => {
    getDetail()
    getItems()
});
</script>
