<template>
    <div>
        <base-search :formItemList="formItemList" @search="searchFrom" ref="baseSearchRef"> </base-search>
        <!-- 横向滚动操作栏 -->
        <div class="operation-scroll-bar">
            <div class="operation-scroll-container">
                <el-button type="primary" v-hasPermi="['delivery:add']" @click="showAddDialog(null)">新增运送清单</el-button>
            </div>
        </div>

        <div class="main-container">
            <el-table :data="rows" :key="data.tableKey" border v-loading="data.dataListLoading" element-loading-text="数据加载中..." style="width: 100%">
                <el-table-column label="运送清单编号" prop="deliveryNumber">
                    <template #default="scope">
                        {{ scope.row.deliveryNumber || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="清单标题" prop="deliveryTitle">
                    <template #default="scope">
                        {{ scope.row.deliveryTitle || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="起始地" prop="startLocation">
                    <template #default="scope">
                        {{ scope.row.startLocation || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="目的地" prop="endLocation">
                    <template #default="scope">
                        {{ scope.row.endLocation || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="车牌号" prop="licensePlate">
                    <template #default="scope">
                        {{ scope.row.licensePlate || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="司机姓名" prop="driverName">
                    <template #default="scope">
                        {{ scope.row.driverName || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="司机手机号" prop="driverMobile">
                    <template #default="scope">
                        {{ scope.row.driverMobile || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="status">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime">
                    <template #default="scope">
                        {{ scope.row.createTime || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" size="small" v-hasPermi="['delivery:view']" @click="showDetailDialog(scope.row)">详情</el-button>
                        <el-button type="warning" size="small" v-hasPermi="['delivery:export']" @click="handleDownload(scope.row)">下载文件</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <el-pagination
                v-model:current-page="form.pageNum"
                v-model:page-size="form.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="data.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>

        <!-- 对话框 -->
        <OrderDialog ref="OrderDialogRef" @success="getDataList" />
        <LookDialog ref="LookDialogRef" />
        <DetailDialog ref="DetailDialogRef" />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import baseSearch from '@/components/common/searchCustom/index.vue';
import { shippingList, orderDel } from '@/api/shipping.js';
import OrderDialog from './orderDialog.vue';
import LookDialog from './lookDialog.vue';
import DetailDialog from './detailDialog.vue';

const baseSearchRef = ref();
const OrderDialogRef = ref();
const LookDialogRef = ref();
const DetailDialogRef = ref();

const formItemList = reactive([
    {
        label: '运单号',
        type: 'input',
        param: 'deliveryNumber',
        span: 6,
        placeholder: '请输入运单号',
    },
    {
        label: '清单标题',
        type: 'input',
        param: 'deliveryTitle',
        span: 6,
        placeholder: '请输入清单标题',
    },
    {
        label: '目的地',
        type: 'input',
        param: 'endLocation',
        span: 6,
        placeholder: '请输入目的地',
    },
    {
        label: '车牌号',
        type: 'input',
        param: 'licensePlate',
        span: 6,
        placeholder: '请输入车牌号',
    },
    {
        label: '状态',
        type: 'select',
        param: 'status',
        span: 6,
        placeholder: '请选择状态',
        selectOptions: [
            { text: '待装车', value: 1 },
            { text: '已装车/待资金方付款', value: 2 },
            { text: '待核验/资金方已付款', value: 3 },
            { text: '已核验/待买家付款', value: 4 },
            { text: '买家已付款', value: 5 }
        ],
        labelKey: 'text',
        valueKey: 'value',
    },
    {
        label: '创建时间',
        type: 'daterange',
        param: 'createTimeRange',
        span: 6,
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期',
    },
]);

const data = reactive({
    total: 0,
    dataListLoading: false,
    tableKey: 0,
});

const rows = ref([]);
const form = reactive({
    pageNum: 1,
    pageSize: 10,
});

const searchFrom = () => {

    form.pageNum = 1;
    getDataList();
};

// 获取运送清单列表
const getDataList = () => {
    data.dataListLoading = true;
    const searchParams = baseSearchRef.value.penetrateParams();
    
    const params = {
        ...form,
        ...searchParams,
    };
    
    // 处理日期范围参数
    if (searchParams.createTimeRange && Array.isArray(searchParams.createTimeRange) && searchParams.createTimeRange.length === 2) {
        params.startTime = searchParams.createTimeRange[0];
        params.endTime = searchParams.createTimeRange[1];
        delete params.createTimeRange;
    }
    

    shippingList(params)
        .then((res) => {

            data.dataListLoading = false;
            
            if (res.data.rows && res.data.rows.length > 0) {
                rows.value = res.data.rows;
                data.total = res.data.total;
            } else {
                rows.value = [];
                data.total = 0;
            }
        })
        .catch((error) => {
            console.error('运送清单列表查询失败:', error);
            data.dataListLoading = false;
            ElMessage.error('查询失败');
        });
};

// 分页处理
const handleSizeChange = (val) => {
    form.pageSize = val;
    getDataList();
};

const handleCurrentChange = (val) => {
    form.pageNum = val;
    getDataList();
};

// 状态相关方法
const getStatusText = (status) => {
    const statusMap = {
        1: '待装车',
        2: '已装车/待资金方付款',
        3: '待核验/资金方已付款',
        4: '已核验/待买家付款',
        5: '买家已付款'
    };
    return statusMap[status] || '未知状态';
};

const getStatusType = (status) => {
    const typeMap = {
        1: 'warning',
        2: 'info',
        3: 'primary',
        4: 'success',
        5: 'success'
    };
    return typeMap[status] || 'info';
};

// 对话框方法
const showAddDialog = (row) => {
    OrderDialogRef.value.onShowDialog(row);
};

const showLookDialog = (row) => {
    LookDialogRef.value.onShowLookDialog(row);
};

const showDetailDialog = (row) => {
    DetailDialogRef.value.onShowDetailDialog(row);
};

// 下载方法 - 生成牛只验收单
const handleDownload = async (row) => {
    try {
        // 计算字段
        const landingWeight = parseFloat(row.landingEntruckWeight || 0);
        const emptyWeight = parseFloat(row.emptyWeight || 0);
        const totalWeight = ((landingWeight - emptyWeight) / 2).toFixed(2);
        const unitPrice = (parseFloat(row.firmPrice || 0) / 2).toFixed(2);
        const totalAmount = (parseFloat(totalWeight) * parseFloat(unitPrice)).toFixed(2);
        
        // 准备数据 - 使用回退机制
        const data = {
            supplierName: row.supplierName || row.supplierMobile || '',
            buyerName: row.buyerName || row.buyerMobile || '',
            startLocation: row.startLocation || '',
            createTime: row.createTime || '',
            endLocation: row.endLocation || '',
            driverName: row.driverName || '',
            driverMobile: row.driverMobile || '',
            licensePlate: row.licensePlate || '',
            ratedQuantity: row.ratedQuantity || '',
            totalWeight: totalWeight,
            unitPrice: unitPrice,
            totalAmount: totalAmount
        };
        

        // 生成HTML内容
        const htmlContent = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>牛只发车验收单</title>
    <style>
        @media print {
            body { margin: 0; }
            .no-print { display: none; }
        }
        body { 
            font-family: "Microsoft YaHei", "SimSun", Arial, sans-serif; 
            margin: 20px; 
            line-height: 1.4;
        }
        .header { 
            text-align: center; 
            font-size: 20px; 
            font-weight: bold; 
            margin-bottom: 30px;
            border-bottom: 2px solid #000;
            padding-bottom: 10px;
        }
        .order-number { 
            text-align: right; 
            margin-bottom: 20px; 
            font-size: 14px;
        }
        .info-grid { 
            width: 100%; 
            border-collapse: collapse; 
            margin-bottom: 20px; 
            font-size: 14px;
        }
        .info-grid td { 
            border: 1px solid #000; 
            padding: 10px; 
            vertical-align: top;
        }
        .info-grid .label { 
            background-color: #f5f5f5; 
            font-weight: bold; 
            width: 20%; 
            text-align: center;
        }
        .cattle-table { 
            width: 100%; 
            border-collapse: collapse; 
            margin-bottom: 20px; 
            font-size: 14px;
        }
        .cattle-table th, .cattle-table td { 
            border: 1px solid #000; 
            padding: 10px; 
            text-align: center; 
        }
        .cattle-table th { 
            background-color: #f5f5f5; 
            font-weight: bold; 
        }
        .signature-section { 
            width: 100%; 
            border-collapse: collapse; 
            margin-top: 20px; 
            font-size: 14px;
        }
        .signature-section td { 
            border: 1px solid #000; 
            padding: 10px; 
            vertical-align: top;
        }
        .signature-section .label { 
            background-color: #f5f5f5; 
            font-weight: bold; 
            width: 25%; 
            text-align: center;
        }
        .print-button {
            background-color: #409EFF;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 20px 0;
        }
        .print-button:hover {
            background-color: #66b1ff;
        }
    </style>
</head>
<body>
    <div class="header">牛只发车验收单</div>
    <div class="order-number">订单编号: </div>
    
    <table class="info-grid">
        <tr>
            <td class="label">供货单位</td>
            <td>${data.supplierName}</td>
            <td class="label">收货单位</td>
            <td>${data.buyerName}</td>
        </tr>
        <tr>
            <td class="label">发车地点</td>
            <td>${data.startLocation}</td>
            <td class="label">发车时间</td>
            <td>${data.createTime}</td>
        </tr>
        <tr>
            <td class="label">到达地点</td>
            <td>${data.endLocation}</td>
            <td class="label">动物检疫合格证明编号</td>
            <td></td>
        </tr>
        <tr>
            <td class="label">司机姓名及联系方式</td>
            <td>${data.driverName} ${data.driverMobile}</td>
            <td class="label">装车车牌号</td>
            <td>${data.licensePlate}</td>
        </tr>
    </table>
    
    <table class="cattle-table">
        <thead>
            <tr>
                <th>序号</th>
                <th>活牛品种</th>
                <th>单只体重范围 (斤)</th>
                <th>下车总数量 (头)</th>
                <th>下车总重量 (斤)</th>
                <th>单价 (元/斤)</th>
                <th>总金额 (元)</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td>${data.ratedQuantity}</td>
                <td>${data.totalWeight}</td>
                <td>${data.unitPrice}</td>
                <td>${data.totalAmount}</td>
                <td></td>
            </tr>
        </tbody>
    </table>
    
    <table class="signature-section">
        <tr>
            <td class="label">已支付货款时间</td>
            <td></td>
            <td class="label">已支付货款金额</td>
            <td></td>
        </tr>
        <tr>
            <td class="label">应支付尾款时间</td>
            <td></td>
            <td class="label">应支付尾款金额</td>
            <td></td>
        </tr>
        <tr>
            <td class="label">验收结论</td>
            <td></td>
            <td class="label">验收时间</td>
            <td></td>
        </tr>
        <tr>
            <td class="label">供货单位指定验收人签字及联系方式</td>
            <td></td>
            <td class="label">收货单位指定验收人签字及联系方式</td>
            <td></td>
        </tr>
        <tr>
            <td class="label">供货单位盖章</td>
            <td></td>
            <td class="label">收货单位盖章</td>
            <td></td>
        </tr>
    </table>
    
    <div class="no-print">
        <button class="print-button" onclick="window.print()">打印/保存为PDF</button>
        <p style="color: #666; font-size: 12px;">
            提示：点击"打印/保存为PDF"按钮可以将此文档打印或保存为PDF格式。
            在打印对话框中，您也可以选择"另存为PDF"来保存文档。
        </p>
    </div>
</body>
</html>`;
        
        // 在新窗口中打开HTML文档
        const newWindow = window.open('', '_blank');
        newWindow.document.write(htmlContent);
        newWindow.document.close();
        
        ElMessage.success('牛只验收单已生成，可以在新窗口中查看和打印');
        
    } catch (error) {
        console.error('生成牛只验收单失败:', error);
        ElMessage.error('生成牛只验收单失败，请重试');
    }
};

onMounted(() => {
    getDataList();
});
</script>

<style scoped>
.operation-scroll-bar {
    overflow-x: auto;
    margin-bottom: 10px;
}

.operation-scroll-container {
    display: flex;
    gap: 10px;
    min-width: max-content;
    padding: 10px;
    background: #fff;
}

.main-container {
    background: #fff;
    padding: 20px;
}
</style>
