<template>
    <div class="bigBox">
        <div class="hearder">
            <svg-icon style="font-size: 20px;" icon-class="castingDetailsLlxx" class="sidebar-logo" />
            <span>来料信息</span>
        </div>
        <div class="content">
            <div class="contentTitile">
                <div class="reddDian"></div>
                <span class="contentTitileOne">精炼出钢实绩</span>
            </div>
            <div class="contentBig" v-for="(item, index) in lftappingData">
                <div class="contentBigTitle">
                    <span class="no">NO{{ index + 1}}</span>
                    <span>炉号：{{ item.lfHeatNo }}</span>
                </div>
                <div class="contentBigOne">
                    <div>钢种：<span>{{ item.steelGrade }}</span></div>
                    <div>精炼结束时间：<span>{{ item.leEndDate }}</span></div>
                    <div>精炼包烘烤温度：<span>{{ item.lfBakeTemp }}</span></div>
                    <div>耗氮量：<span>{{ item.n2Consumption }}</span></div>
                </div>
                <div class="contentBigOne">
                    <div>钢种代号：<span>{{ item.matQulCd }}</span></div>
                    <div>工艺符号：<span>{{ item.technologyMark }}</span></div>
                    <div>精炼包烘烤时间：<span>{{ item.lfBakeTime }}</span></div>
                    <div>出钢量：<span>{{ item.lfSteelWgt }}</span></div>
                </div>
                <div class="contentBigOne">
                    <div>产品类型：<span>{{ item.productType }}</span></div>
                    <div>工艺编号：<span>{{ item.processNo }}</span></div>
                    <div>耗氩量：<span>{{ item.arConsumption }}</span></div>
                    <div>出钢温度：<span>{{ item.tapTemp }}</span></div>
                </div>
                <div class="contentBigOne">
                    <div>精炼开始时间：<span>{{ item.lfBeginDate }}</span></div>
                    <div>精炼包号：<span>{{ item.ladleNo }}</span></div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="contentTitile">
                <div class="reddDian"></div>
                <span class="contentTitileOne">检验实绩</span>
            </div>
            <div class="bigTable" v-for="item in queryListAPiData">
                <div class="tableH">
                    <div class="tableTtile">试样编号</div>
                    <div class="tableContent rightBorderNone">{{ item.smpNo }}</div>
                    <div class="tableTtile">试样类型</div>
                    <div class="tableContent rightBorderNone">{{ item.smpType }}</div>
                    <div class="tableTtile">炉号</div>
                    <div class="tableContent">{{ item.heatNo }}</div>
                </div>
                <div class="tableH">
                    <div class="tableTtile">炉座号</div>
                    <div class="tableContent rightBorderNone">{{ item.station }}</div>
                    <div class="tableTtile">物料号</div>
                    <div class="tableContent rightBorderNone">{{ item.materId }}</div>
                    <div class="tableTtile">物料名称(钢种)</div>
                    <div class="tableContent">{{ item.materName }}</div>
                </div>
                <div class="tableH">
                    <div class="tableTtile">物料代码(钢种代号)</div>
                    <div class="tableContent rightBorderNone">{{ item.materCode }}</div>
                    <div class="tableTtile">试验次数</div>
                    <div class="tableContent rightBorderNone">{{ item.smpCnt }}</div>
                    <div class="tableTtile">检验项目编码</div>
                    <div class="tableContent">{{ item.smpItemCode }}</div>
                </div>
                <div class="tableH">
                    <div class="tableTtile">检验项目名称</div>
                    <div class="tableContent rightBorderNone">{{ item.smpItemName }}</div>
                    <div class="tableTtile">检验项目序号</div>
                    <div class="tableContent rightBorderNone">{{ item.smpItemNo }}</div>
                    <div class="tableTtile">是否合格</div>
                    <div class="tableContent">{{ item.zjuge }}</div>
                </div>
                <div class="tableH">
                    <div class="tableTtile">单位</div>
                    <div class="tableContent rightBorderNone">{{ item.itemUnit }}</div>
                    <div class="tableTtile">C</div>
                    <div class="tableContent rightBorderNone">{{ item.c }}</div>
                    <div class="tableTtile">Si</div>
                    <div class="tableContent">{{ item.si }}</div>
                </div>
                <div class="tableH">
                    <div class="tableTtile">Mn</div>
                    <div class="tableContent rightBorderNone">{{ item.mn }}</div>
                    <div class="tableTtile">P</div>
                    <div class="tableContent rightBorderNone">{{ item.p }}</div>
                    <div class="tableTtile">S</div>
                    <div class="tableContent">{{ item.s }}</div>
                </div>
                <div class="tableH">
                    <div class="tableTtile">Cr</div>
                    <div class="tableContent rightBorderNone">{{ item.cr }}</div>
                    <div class="tableTtile">AL</div>
                    <div class="tableContent rightBorderNone">{{ item.al }}</div>
                    <div class="tableTtile">Mo</div>
                    <div class="tableContent">{{ item.mo }}</div>
                </div>
                <div class="tableH">
                    <div class="tableTtile">Ni</div>
                    <div class="tableContent rightBorderNone">{{ item.ni }}</div>
                    <div class="tableTtile">V</div>
                    <div class="tableContent rightBorderNone">{{ item.v }}</div>
                    <div class="tableTtile">Ti</div>
                    <div class="tableContent">{{ item.ti }}</div>
                </div>
                <div class="tableH">
                    <div class="tableTtile bottomBorder">Sn</div>
                    <div class="tableContent rightBorderNone bottomBorder">{{ item.sn }}</div>
                    <div class="tableTtile bottomBorder"></div>
                    <div class="tableContent rightBorderNone bottomBorder"></div>
                    <div class="tableTtile bottomBorder"></div>
                    <div class="tableContent bottomBorder"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup >
const props = defineProps({
    lftappingData: {
        type: Array,
        default: []
    },
    queryListAPiData: {
        type: Array,
        default: []
    },
});
</script>

<style lang="scss" scoped>
.bigBox {
    border: 1px solid rgba(235, 237, 238, 1);
    border-radius: 4px;

    .hearder {
        height: 44px;
        line-height: 44px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        background-color: rgba(250, 251, 252, 1);
        border-bottom: 1px solid rgba(235, 237, 238, 1);
        padding-left: 15px;

        .sidebar-logo {
            vertical-align: middle;
        }

        span {
            vertical-align: middle;
            display: inline-block;
            color: rgba(11, 24, 45, 1);
            font-weight: 600;
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            margin-left: 7px;
        }
    }

    .content {
        padding: 20px;

        .contentTitile {
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            .reddDian {
                width: 6px;
                height: 6px;
                background: red;
                border-radius: 25px;
                margin-right: 7px;
                vertical-align: middle;
            }

            .contentTitileOne {
                font-weight: 500;
                font-size: 14px;
                color: rgba(11, 24, 45, 1);
                height: 22px;
                line-height: 22px;
            }
        }

        .contentBig {
            padding: 10px;
            background: rgba(245, 247, 249, 1);
            border-radius: 4px;

            .contentBigTitle {
                font-size: 14px;
                font-weight: 500;
                height: 22px;
                line-height: 22px;

                .no {
                    color: #E83333;
                    display: inline-block;
                    margin-right: 4px;
                }
            }

            .contentBigOne {
                display: flex;

                div {
                    width: 280px;
                    font-weight: 400;
                    height: 22px;
                    line-height: 22px;
                    font-size: 14px;
                    color: rgba(123, 130, 142, 1);

                    span {
                        color: rgba(11, 24, 45, 1);
                    }
                }
            }
        }
    }

    .bigTable {
        margin-bottom: 30px;

        .tableH {
            width: 100%;
            display: flex;
            height: 40px;
            line-height: 40px;

            .tableTtile {
                width: 12%;
                border-top: 1px solid rgba(235, 237, 238, 1);
                border-left: 1px solid rgba(235, 237, 238, 1);
                height: 40px;
                line-height: 40px;
                background: rgba(245, 247, 249, 1);
                font-weight: 600;
                font-size: 14px;
                color: rgba(123, 130, 142, 1);
                text-indent: 1em
            }

            .tableContent {
                width: 21%;
                border-top: 1px solid rgba(235, 237, 238, 1);
                border-left: 1px solid rgba(235, 237, 238, 1);
                border-right: 1px solid rgba(235, 237, 238, 1);
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                font-weight: 400;
                color: rgba(11, 24, 45, 1);
                text-indent: 1em
            }

            .rightBorderNone {
                border-right: none;
            }

            .bottomBorder {
                border-bottom: 1px solid rgba(235, 237, 238, 1);
            }
        }
    }
}
</style>
