<template>
    <div class="nav_detail">
        <Table
            ref="quotationFormTable"
            :tableParams="tableParams"
            @selectionChange="handleSelectionChange"
            :btnRole="btnRole"
            :right-btn="[]"
        >
        </Table>
        <QuotationDetail ref="quotationRef"></QuotationDetail>
    </div>
</template>

<script setup lang="ts">
import { quotationList} from '@/api/customer';
import { ElButton } from 'element-plus';
import Table from '@/components/Table/index.vue'
import QuotationDetail from '@/components/common/quotationDetail.vue'
import {downLodaQuotationById,} from '@/api/product/index'
import { tableTypes } from '@/components/Table/types'
import auth from "@/plugins/auth";
const props = defineProps({
    perPrefix: {
        type: String
    },
	customerId: {
		type: String
	}
})

const btnRole = ref([
    { type: 'export', hasPermi: `${ props.perPrefix }:detail:tab_bjjl_dc` }
])

const tableParams = reactive({
	tableColumn: [
        { show: true, label: '报价时间', prop: 'updateTime', sortable: true },
        { show: true, label: '所属商机', prop: 'businessTitle'},
        { show: true, label: '所属订单', prop: 'orderFormTitle' },
        { show: true, label: '总金额', width:120, prop: 'totalOrderAmt', sortable: true },
        { show: true, label: '对接人员', width:120, prop: 'abutmentUserName' },
        { show: true, label: '报价人员', width:120, prop: 'createByName' },
        { show: true, label: '创建时间', prop: 'createTime', sortable: true },
		{
			show: true, label: '操作', width: 300, prop: 'operation', disabledMove: true, render: ({ column }) => {
				return [
                    auth.hasPermi(`${ props.perPrefix }:detail:tab_bjjl_xq`) ?
                    h(ElButton, { link: true, type: 'primary', onClick: () => { detail(column.id) } }, '详情') : '',
                    auth.hasPermi(`${ props.perPrefix }:detail:tab_cpbj_xzzwbjd`) ?
                    h(ElButton, { link: true, type: 'primary', onClick: () => { downPdf(1,column.id) } }, '下载中文报价') : '',
                    auth.hasPermi(`${ props.perPrefix }:detail:tab_cpbj_xzywbjd`) ?
                    h(ElButton, { link: true, type: 'primary', onClick: () => { downPdf(2,column.id) } }, '下载英文报价') : '',
				]
			}
		},
	],
	queryParams: {
		customerId: props.customerId,
	},
	listFn: quotationList,
	keyId: 'id',
    exportCode: 'EXPORT_QUOTATION_EXCEL',
    commonQueryOrderBy: 'updateTime'
})

const { queryParams } = toRefs(tableParams);

const router = useRouter()

const quotationRef = ref()

// 报价单详情
const detail = (id: string | number) => {
    let params = {
        perPrefix:props.perPrefix,
        id
    }
    quotationRef.value.open(params)
}


/** 多选框选中数据 */
const ids = refAutoReset([])
const handleSelectionChange = (selection) => {
    ids.value = selection
}

const quotationFormTable = ref()

const downPdf = async (type,id)=>{
    let time = new Date().getTime()
    let name = type === 1 ? `报价单-${time}.docx` : `Quotation-${time}.docx`
    let param:{businessId?:number|string, orderFormId?:number|string, languageType: number, id:number|string} = {
        languageType: type,
        id: id
    }
    await downLodaQuotationById(param, name)
}
</script>
