<template>
    <div class="bit-matching" v-loading="loading">
        <div class="page-header">
            <h2>钻头匹配</h2>
        </div>

        <!-- 钻头匹配表格 -->
        <div class="matching-table">
            <div v-for="(bit, index) in bitData" :key="index" class="bit-entry">
                <!-- 主表格行 -->
                <el-table :data="[bit]" border fit class="main-table">
                    <el-table-column prop="ztbh" label="钻头编号" min-width="100" align="center" />
                    <el-table-column prop="ztcc" label="钻头尺寸mm" min-width="100" align="center" />
                    <el-table-column prop="ztxh" label="钻头型号" min-width="120" align="center" />
                    <el-table-column prop="ztlb" label="钻头类别" min-width="100" align="center" />
                    <el-table-column prop="sccj" label="生产厂家" min-width="100" align="center" />
                    <el-table-column label="操作" min-width="80" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 子表格行 -->
                <el-table :data="[bit]" border fit class="sub-table">
                    <el-table-column width="60" align="center">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.selected" @change="handleSelectionChange(scope.row)" />
                        </template>
                    </el-table-column>
                    <el-table-column label="刀翼总数" min-width="80" align="center">
                        <template slot-scope="scope">
                            <span :class="['status-icon', scope.row.t01match === '匹配' ? 'match' : 'no-match']">
                                {{ scope.row.t01match === '匹配' ? '✓' : '✗' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="布齿密度" min-width="80" align="center">
                        <template slot-scope="scope">
                            <span :class="['status-icon', scope.row.t02match === '匹配' ? 'match' : 'no-match']">
                                {{ scope.row.t02match === '匹配' ? '✓' : '✗' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="切削齿尺寸mm" min-width="100" align="center">
                        <template slot-scope="scope">
                            <span :class="['status-icon', scope.row.t03match === '匹配' ? 'match' : 'no-match']">
                                {{ scope.row.t03match === '匹配' ? '✓' : '✗' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="切削齿后倾角°" min-width="100" align="center">
                        <template slot-scope="scope">
                            <span :class="['status-icon', scope.row.t04match === '匹配' ? 'match' : 'no-match']">
                                {{ scope.row.t04match === '匹配' ? '✓' : '✗' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="冠部轮廓" min-width="80" align="center">
                        <template slot-scope="scope">
                            <span :class="['status-icon', scope.row.t05match === '匹配' ? 'match' : 'no-match']">
                                {{ scope.row.t05match === '匹配' ? '✓' : '✗' }}
                            </span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="保径" min-width="60" align="center">
                        <template slot-scope="scope">
                            <span :class="['status-icon', scope.row.t06match === '匹配' ? 'match' : 'no-match']">
                                {{ scope.row.t06match === '匹配' ? '✓' : '✗' }}
                            </span>
                        </template>
                    </el-table-column> -->
                </el-table>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <!-- <el-button type="primary" @click="handleSave">保存</el-button> -->
            <el-button @click="handleReturn">返回</el-button>
        </div>

        <!-- 钻头详情弹窗 - 直接引入BitSelectionInfo组件 -->
        <el-dialog title="查看钻头信息" :visible.sync="dialogVisible" width="90%" :before-close="handleCloseDialog">
            <BitSelectionInfo v-if="dialogVisible && selectedBitId" :bitId="selectedBitId" :bitData="selectedBitData"
                @close="handleCloseDialog" />
        </el-dialog>
    </div>
</template>

<script>
import { ppZtxx } from "@/api/system/cjsjLas";
import BitSelectionInfo from './BitSelectionInfo.vue';

export default {
    name: 'BitMatching',
    components: {
        BitSelectionInfo
    },
    data() {
        return {
            // 接收的参数
            queryParams: {
                jh: '',
                qk: '',
                ztcc: '',
                t01: '',
                t02: '',
                t03: '',
                t04: '',
                t05: '',
                t06: ''
            },
            // API返回的数据
            apiData: null,
            bitData: [],
            // 弹窗相关
            dialogVisible: false,
            selectedBitId: null,
            selectedBitData: null,
            loading: false // 加载状态
        }
    },
    mounted() {
        this.initFromQuery()
        this.fetchBitMatchingData()
    },
    methods: {
        // 初始化页面参数
        initFromQuery() {
            console.log('BitMatching - 初始化参数');
            const query = this.$route.query;

            // 接收所有参数
            this.queryParams = {
                jh: query.jh || '',
                qk: query.qk || '',
                ztcc: query.ztcc || '',
                t01: query.t01 || '',
                t02: query.t02 || '',
                t03: query.t03 || '',
                t04: query.t04 || '',
                t05: query.t05 || '',
                t06: query.t06 || ''
            };

            console.log('接收到的参数:', this.queryParams);
        },

        // 调用钻头匹配接口
        fetchBitMatchingData() {
            console.log('调用ppZtxx接口');

            // 开始加载
            this.loading = true;

            // 构建接口参数
            const params = {
                jh: this.queryParams.jh,
                qk: this.queryParams.qk,
                ztcc: this.queryParams.ztcc,
                t01: this.queryParams.t01,
                t02: this.queryParams.t02,
                t03: this.queryParams.t03,
                t04: this.queryParams.t04,
                t05: this.queryParams.t05,
                t06: this.queryParams.t06
            };

            console.log('ppZtxx接口参数:', params);

            ppZtxx(params).then(response => {
                console.log('ppZtxx接口返回数据:', response);
                this.apiData = response;

                // 如果接口返回了钻头数据，更新bitData
                if (response && response.data) {
                    this.updateBitData(response.data);
                }

            }).catch(error => {
                console.error('调用ppZtxx接口失败:', error);
                this.$message.error('获取钻头匹配数据失败，请重试');
            }).finally(() => {
                // 结束加载
                this.loading = false;
            });
        },

        // 更新钻头数据
        updateBitData(data) {
            console.log('更新钻头数据:', data);

            if (!Array.isArray(data)) {
                console.warn('返回的数据不是数组格式');
                return;
            }

            // 将API返回的数据转换为表格需要的格式
            this.bitData = data.map((item, index) => {
                return {
                    // 主表格需要的字段
                    ztbh: item.ztbh,           // 钻头编号
                    ztcc: item.ztcc,           // 钻头尺寸
                    ztxh: item.ztxh,           // 钻头型号
                    ztlb: item.ztlb,           // 钻头类别
                    sccj: item.sccj,           // 生产厂家

                    // 匹配状态字段 - 直接使用API返回的字段
                    t01match: item.t01match,   // 刀翼总数匹配状态
                    t02match: item.t02match,   // 布齿密度匹配状态
                    t03match: item.t03match,   // 切削齿尺寸匹配状态
                    t04match: item.t04match,   // 切削齿后倾角匹配状态
                    t05match: item.t05match,   // 冠部轮廓匹配状态
                    t06match: item.t06match,   // 保径匹配状态

                    // 其他字段
                    id: item.id,
                    totalscore: item.totalscore, // 总分
                    selected: index === 0,      // 默认选中第一个

                    // 保存完整的原始数据用于详情查看（包含所有图片链接）
                    originalData: {
                        ...item,  // 包含所有原始字段，包括 slt01-slt06 图片链接
                        // 确保基本信息字段存在
                        ztbh: item.ztbh,
                        ztcc: item.ztcc,
                        ztxh: item.ztxh,
                        ztlb: item.ztlb
                    }
                };
            });

            console.log('转换后的钻头数据:', this.bitData);
        },

        // 查看钻头详情
        handleView(row) {
            console.log('查看钻头信息:', row)
            this.selectedBitId = row.id
            // 传递完整的原始数据，包含所有图片链接
            this.selectedBitData = row.originalData || row
            console.log('传递给BitSelectionInfo的数据:', this.selectedBitData)
            this.dialogVisible = true
        },

        // 关闭弹窗
        handleCloseDialog() {
            this.dialogVisible = false
            this.selectedBitId = null
            this.selectedBitData = null
        },

        handleSelectionChange(row) {
            console.log('选择状态改变:', row.serialNumber, row.selected)
        },

        handleSave() {
            const selectedBits = this.bitData.filter(bit => bit.selected)
            console.log('保存选中的钻头:', selectedBits)
            // 这里可以调用API保存数据
            this.$message.success('保存成功')
        },

        handleReturn() {
            console.log('返回上一页')
            // 使用 go(-1) 返回上一页，确保上一页状态保持
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
.bit-matching {
    padding: 10px;

    .page-header {
        margin-bottom: 10px;

        h2 {
            margin: 0;
            color: #409EFF;
            font-size: 18px;
            font-weight: bold;
        }
    }

    .matching-table {
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;

        .bit-entry {
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            align-items: stretch;

            &:last-child {
                margin-bottom: 0;
            }

            /* 关键：让主表和子表宽度、边框、布局一致 */
            .el-table {
                box-sizing: border-box;
                table-layout: fixed;
                // height: 100%;
            }

            /* 确保表格行高度一致 */
            .el-table .el-table__body tr {
                height: 48px;
            }

            .el-table .el-table__header tr {
                height: 48px;
            }

            /* 确保表格单元格内容垂直居中 */
            .el-table .el-table__body td,
            .el-table .el-table__header th {
                vertical-align: middle;
                padding: 8px 0;
            }

            /* 强制两个表格高度一致 */
            .main-table .el-table__body-wrapper,
            .sub-table .el-table__body-wrapper {
                height: 48px;
                overflow: hidden;
            }

            .main-table .el-table__header-wrapper,
            .sub-table .el-table__header-wrapper {
                height: 48px;
                overflow: hidden;
            }

            .main-table {
                flex: 1;
                width: 100% !important;
                border-left: 1px solid #EBEEF5;
                border-right: none;
                border-top: 1px solid #EBEEF5;
                border-bottom: 1px solid #EBEEF5;
            }

            .sub-table {
                flex: 1;
                width: 100% !important;
                border-left: 1px solid #EBEEF5;
                border-right: 1px solid #EBEEF5;
                border-top: 1px solid #EBEEF5;
                border-bottom: 1px solid #EBEEF5;
            }
        }

        .status-icon {
            font-size: 16px;
            font-weight: bold;

            &.match {
                color: #67C23A;
            }

            &.no-match {
                color: #F56C6C;
            }
        }
    }

    .action-buttons {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 10px;
    }
}
</style>