<template>
    <el-dialog title="sku报价详情" v-model="visible" width="700px" append-to-body>
        <el-row>
            <el-col :span="24" style="border-right: 1px solid #e5e6e7; padding-left: 5px">
                <el-descriptions column="1" label-width="120" border>
                    <el-descriptions-item label="内部编号：">{{ detail.ssdSkuCode }}</el-descriptions-item>
                    <el-descriptions-item label="规格：">
                        <!--                        {{ detail.name }}-->
                        <template v-if="detail.ssdSkuCode != '外部产品' && detail.ssdSkuCode != '其他费用'">
                            <span class="ss">{{ detail.connectorType }}<small>|</small>{{ detail.productSize
                                }}<small>|</small>{{ detail.connectorProtocol }}<small>|</small>{{ detail.coreChipType
                                }}<small>|</small>{{ detail.productLevel }}<small>|</small>{{ detail.flashChipType
                                }}<small>|</small>{{ detail.capacity }}</span>
                        </template>
                        <template v-else>
                            <span>
                                {{ detail.specificationRemarks }}
                            </span>
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item label="配置功能：">
                        <template v-if="detail.ssdSkuCode != '外部产品' && detail.ssdSkuCode != '其他费用'">
                            <label style="color:#999999;">逻辑销毁：</label><span style="color: #555555;">{{
                                detail.forceOpenLogicDestroy ? '开通' : '不开通' }} </span><br>
                            <label style="color:#999999;">物理销毁：</label><span style="color: #555555;">{{
                                detail.forceOpenPhysicalDestroy ? '开通' : '不开通' }}</span><br>
                            <label style="color:#999999;">AES加密：</label><span style="color: #555555;">{{
                                detail.forceOpenAesEncrypt ? '开通' : '不开通' }}</span><br>
                            <label style="color:#999999;">r-Backup：</label><span style="color: #555555;">{{
                                detail.forceOpenRapidBackup ? '开通' : '不开通' }}</span>
                        </template>
                        <template v-else>
                            <span>
                                {{ detail.functionRemarks }}
                            </span>
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item label="数量：">{{ detail.productCount }}
                    </el-descriptions-item>
                    <el-descriptions-item label="国内不含税价格(￥)：">
                        <!--                        <span>总价(￥):{{ $formatNumber(detail.skuPriceCNYWithNoRate)}}</span><br>-->
                        <!--                        <span>单价(￥):{{  $formatNumber(detail.unitPriceCNYWithNoRate)  }}</span>-->
                        <template v-if="detail.ssdSkuCode != '外部产品' && detail.ssdSkuCode != '其他费用'">
                            <p style="font-weight: 600">标准价格：</p>
                            <p>总价:{{ $formatNumber(detail.skuPriceCNYWithNoRate) }}</p>
                            <p>单价:{{ $formatNumber(detail.unitPriceCNYWithNoRate) }}</p>
                            <p style="font-weight: 600"> 报价金额：</p>
                            <p>总价:{{ $formatNumber(detail.skuPriceCNYWithNoRateActual) }}</p>
                            <p>单价:{{ $formatNumber(detail.unitPriceCNYWithNoRateActual) }}</p>
                        </template>
                        <template v-else>
                            <p style="font-weight: 600"> 报价金额：</p>
                            <p>总价:{{ $formatNumber(detail.skuPriceCNYWithNoRateActual) }}</p>
                            <p>单价:{{ $formatNumber(detail.unitPriceCNYWithNoRateActual) }}</p>
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item label="国内含13%增值税价格(￥)：">
                        <!--                        <span>总价(￥):{{ $formatNumber(detail.skuPriceCNY) }}</span><br>-->
                        <!--                        <span>单价(￥):{{ $formatNumber(detail.unitPriceCNY) }}</span>-->
                        <template v-if="detail.ssdSkuCode != '外部产品' && detail.ssdSkuCode != '其他费用'">
                            <p style="font-weight: 600">标准价格：</p>
                            <p>总价:{{ $formatNumber(detail.skuPriceCNY) }}</p>
                            <p>单价:{{ $formatNumber(detail.unitPriceCNY) }}</p>
                            <p style="font-weight: 600">报价金额：</p>
                            <p>总价：{{ $formatNumber(detail.skuPriceCNYActual) }}</p>
                            <p>单价：{{ $formatNumber(detail.unitPriceCNYActual) }}</p>
                        </template>
                        <template v-else>
                            <p style="font-weight: 600"> 报价金额：</p>
                            <p>总价:{{ $formatNumber(detail.skuPriceCNYActual) }}</p>
                            <p>单价:{{ $formatNumber(detail.unitPriceCNYActual) }}</p>
                        </template>
                    </el-descriptions-item>

                    <el-descriptions-item :label="`国外价格($)(不含税，美元汇率${USDToCNYRate ? USDToCNYRate.toFixed(4) : ''})：`">
                        <!--                        <span>总价($):{{ $formatNumber(detail.skuPriceUSD) }}</span><br>-->
                        <!--                        <span>单价($):{{ $formatNumber(detail.unitPriceUSD) }}</span>-->
                        <template v-if="detail.ssdSkuCode != '外部产品' && detail.ssdSkuCode != '其他费用'">
                            <p style="font-weight: 600">标准价格：</p>
                            <p>总价:{{ $formatNumber(detail.skuPriceUSD) }}</p>
                            <p>单价:{{ $formatNumber(detail.unitPriceUSD) }}</p>
                            <p style="font-weight: 600">报价金额：</p>
                            <p>总价:{{ $formatNumber(detail.skuPriceUSDActual) }}</p>
                            <p>单价:{{ $formatNumber(detail.unitPriceUSDActual) }}</p>
                        </template>
                        <template v-else>
                            <p style="font-weight: 600"> 报价金额：</p>
                            <p>总价:{{ $formatNumber(detail.skuPriceUSDActual) }}</p>
                            <p>单价:{{ $formatNumber(detail.unitPriceUSDActual) }}</p>
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item label="预计生产天数：">
                        <span>{{ detail.deliveryDays ? detail.deliveryDays : '--' }}</span>
                    </el-descriptions-item>

                </el-descriptions>
            </el-col>
        </el-row>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="downPdf(1)">下载中文报价单</el-button>
                <el-button type="primary" @click="downPdf(2)">下载英文报价单</el-button>
                <el-button v-if="detail.ssdSkuCode != '外部产品' && detail.ssdSkuCode != '其他费用'" type="primary" block
                    @click="downPdf(3)">下载规格书</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup lang="ts">
import {
    downLodaQuotation,
    downLodaQuotationById, getUSDtoCnyRate,
    listProductType,
    querySkuVoList,
    ssdStep1GetSku
} from '@/api/product/index'
import downloadPlugins from '@/plugins/download'
import { ProductTypeVo, SkuVo, SkuQueryVo, ProductTypeQuery, MakeOrderSkuDetailVO } from '@/api/product/types'
const visible = ref(false)
const deptCheckStrictly = ref(false)
const deptOptions = ref([])
const skuData = ref([])

const productTypeListVo = ref<Array<ProductTypeVo>>()
const skuVoList = ref<Array<SkuVo>>()

const detail = ref<MakeOrderSkuDetailVO>()

const open = (data) => {
    console.log(data)
    detail.value = data
    visible.value = true
    getRate()
}
const USDToCNYRate = ref(0)
const getRate = () => {
    getUSDtoCnyRate().then(res => {
        USDToCNYRate.value = res.result
    })

}

const getName = (url) => {
    return url ? url.substring(url.lastIndexOf('/')) : '';
}
const downPdf = async (type) => {
    if (type == 3) {
        let url = detail.value.datasheetUrl
        let a = document.createElement("a");
        a.download = decodeURI(getName(url));
        a.style.display = "none";
        a.target = '_blank'
        a.href = url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        return
    }
    if (detail.value.productCount <= 0) {
        ElMessage.error('请添加产品')
        return
    }

    let param = {
        skuDetailId: detail.value.id,
        languageType: type
    }
    let time = new Date().getTime()
    let name = type === 1 ? `报价单-${time}.docx` : `Quotation-${time}.docx`
    await downLodaQuotationById(param, name)
}


defineExpose({
    open
})
const downPdfCn = ()=>{


}
</script>

<style lang="scss" scoped>

</style>
