<template>
    <ele-modal custom-class="ele-dialog-form long-dialog-form" :visible.sync="visibleDialog" title="报价单"
        :close-on-click-modal="false" width="55%" append-to-body @close="handleClose" :maxable="true">
        <div id="printBill">
            <div class="titleStyle">售后信息</div>
            <div>
                <el-descriptions title="" :column="2" border>
                    <el-descriptions-item>
                        <template slot="label"> 客户编码 </template>
                        {{ form ? form.afterSalesDemandVO?.contactCode : '' }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label"> 客户名称 </template>
                        {{ form ? form.afterSalesDemandVO?.contactName : '' }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label"> 发货单编号 </template>
                        {{ form ? form.afterSalesDemandVO?.orderCode : '' }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label"> 售后时间 </template>
                        {{ form ? form.afterSalesDemandVO?.createTime : '' }}
                    </el-descriptions-item>

                </el-descriptions>
            </div>
            <ele-pro-table ref="tableRef" :columns="columnsDetail" :datasource="productDetailList" height="200"
                class="marginBto" :toolbar="false" :needPage="false">

            </ele-pro-table>
            <div>
                <el-descriptions title="人工费用清单" :column="2" border>
                    <el-descriptions-item label="耗时">{{ form?.laborCosts?.timeConsuming || 0 }}分钟</el-descriptions-item>
                    <el-descriptions-item label="单价">{{ form?.laborCosts?.unitPrice || 0 }}</el-descriptions-item>
                    <el-descriptions-item label="总价">{{ form?.laborCosts?.totalPrice || 0 }}</el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="titleStyle">费用清单</div>
            <div style="margin-top: 12px;">
                <ele-pro-table ref="tableRef" :columns="columns" :datasource="tableList" cache-key="systemRoleTable"
                    :pageSize="20" :initLoad="false" :toolbar="false" :needPage="false">
                </ele-pro-table>
            </div>
        </div>
        <template v-slot:footer>
            <el-button type="primary" @click="downForm">下载报价单</el-button>
        </template>
    </ele-modal>
</template>

<script>

import { generateQuotationSheet, SalesPlanDownload } from '@/api/salesServiceManagement/index'

import print from 'print-js';

export default {
    props: {
    },
    components: {
    },
    watch: {},
    computed: {
    },
    data() {
        return {
            title: '',
            visibleDialog: false,
            form: {},
            tableList: [],
            productDetailList: [],
            columnsDetail: [
                {
                    columnKey: 'index',
                    label: '序号',
                    type: 'index',
                    width: 55,
                    align: 'center',
                    showOverflowTooltip: true
                },
                {
                    prop: 'categoryCode',
                    label: '编码',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'categoryName',
                    label: '名称',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'batchNo',
                    label: '批次号',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'barcodes',
                    label: '发货条码',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'measureQuantity',
                    label: '计量数量',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'materielDesignation',
                    label: '物料代号',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'engrave',
                    label: '刻码',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'type',
                    label: '问题类型',
                    align: 'center',
                    showOverflowTooltip: true,
                    width: 120,
                    formatter: (_row, _column, cellValue) => {
                        return cellValue == 1 ? '维修' : cellValue == 2 ? '保养' : cellValue == 3 ? '安装' : '';
                    }
                },
                {
                    prop: 'typeDescribe',
                    slot: 'typeDescribe',
                    label: '问题描述',
                    align: 'center',
                    showOverflowTooltip: true,
                    width: 300
                },
            ],
            columns: [
                {
                    columnKey: 'index',
                    label: '序号',
                    type: 'index',
                    width: 55,
                    align: 'center',
                    showOverflowTooltip: true,
                    fixed: 'left'
                },
                {
                    prop: 'categoryCode',
                    label: '物品编码',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'categoryName',
                    label: '物品名称',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'specification',
                    label: '规格',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'categoryModel',
                    label: '型号',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'singlePrice',
                    label: '单价',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'totalPrice',
                    label: '总价',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'warehouseName',
                    label: '仓库名称',
                    align: 'center',
                    showOverflowTooltip: true,
                },
            ],
            rowData: {}
        }
    },
    created() {
    },
    methods: {
        open(row) {
            console.log(row,'row ----')
            // this.addForm = row;
            this.visibleDialog = true;
            this.getDetail(row);
        },

        handleClose() {
            this.visibleDialog = false;
        },

        async getDetail(row) {
            const res = await generateQuotationSheet(row.id);
            console.log(res,'res ----')
            this.rowData = row;
            console.log(res, 'fffff');
            this.form = res;
            this.tableList = res.details;
            this.productDetailList = res?.afterSalesDemandVO.productDetail || [];
        },
        async downForm() {
            printJS({
                printable: 'printBill',
                type: 'html',
                targetStyles: ['*'], // 保留所有样式
                style: '@page { size: auto; margin: 0mm; }' // 调整页面边距
            });
        }

    }
};
</script>

<style lang="scss" scoped>
.titleStyle {
    font-size: 16px;
    font-weight: bold;
    margin: 12px 0;
}

.repair_row {
    margin-bottom: 15px;

    .repair_column {
        display: flex;

        >span {
            &:first-child {
                font-weight: 700;
                text-align: right;
                width: 120px;
            }
        }
    }
}

.el-descriptions--medium.is-bordered .el-descriptions-item__cell {
    min-width: 120px !important;
}
</style>