
<template>
    <div class="bigBox">
        <div class="hearder">
            <svg-icon style="font-size: 20px;" icon-class="castingDetailsZlxx" class="sidebar-logo" />
            <span>质量信息</span>
        </div>
        <div class="content">
            <div class="contentBig" v-for="(item, index) in qualityListData" :key="index">
                <div class="contentBigOne">
                    <div class="contentTitle" v-show="item.qualityLevelName == '良好'">{{ item.qualityLevelName }}</div>
                    <div class="contentTitleYb" v-show="item.qualityLevelName == '一般'">{{ item.qualityLevelName }}</div>
                    <div class="contentCent">缺陷类型：{{ item.defectTypeName }}</div>
                </div>
                <div class="contentBigTwo">
                    <div>缺陷长度：<span>{{ item.defectLength }}mm</span></div>
                    <div>缺陷深度：<span>{{ item.defectDepth }}mm</span></div>
                    <div>缺陷宽度：<span>{{ item.defectWidth }}mm</span></div>
                    <div>缺陷位置：
                        <el-tooltip effect="dark" content="此处指缺陷距离头部位置" placement="top">
                            <span>{{ item.defectLocation }}mm <el-icon>
                                    <InfoFilled />
                                </el-icon></span>
                        </el-tooltip>
                    </div>
                </div>
                <div class="contentBigThree">
                    <div>缺陷描述：<span>{{ item.defectDesc }}</span></div>
                </div>
                <div class="contentBigFore">
                    <div>缺陷图片：
                        <img style="cursor:zoom-in;" v-for="iten in item.imgInfos" :src="iten.url" alt=""
                            @click="imgBig(iten)">
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogTableVisible" title="预览" width="1000">
            <div style="display: flex;justify-content: center;">
                <img :src="imgBigUrl" alt="" style="max-width:1000px">
            </div>
        </el-dialog>
    </div>
</template>
      
<script setup >
import png404 from '../../../../assets/404_images/404.png'
const props = defineProps({
    qualityListData: {
        type: Array,
        default: []
    },
});
// const img = png404
window.addEventListener('error', event => {
    let target = event.target || event.srcElement;
    if (target instanceof HTMLImageElement) {
        target.src = png404
    };
}, true);
// 图片放大
const dialogTableVisible = ref(false)
const imgBigUrl = ref('')
const imgBig = (iten) => {
    dialogTableVisible.value = true
    imgBigUrl.value = iten.url
}
</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-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;

        .contentBig {
            padding-bottom: 20px;
            padding-top: 10px;
            border-bottom: 1px solid rgba(235, 237, 238, 1);

            .contentBigOne {
                display: flex;

                .contentTitle {
                    width: 44px;
                    height: 24px;
                    line-height: 24px;
                    border: 1px solid rgba(207, 238, 199, 1);
                    color: rgba(57, 186, 21, 1);
                    text-align: center;
                    align-items: center;
                    background-color: rgba(235, 248, 232, 1);
                    font-size: 12px;
                    margin-right: 7px;
                }

                .contentTitleYb {
                    width: 44px;
                    height: 24px;
                    line-height: 24px;
                    border: 1px solid #FEE6C2;
                    color: #FC9700;
                    text-align: center;
                    align-items: center;
                    background-color: #FFF5E6;
                    font-size: 12px;
                    margin-right: 7px;
                }

                .contentCent {
                    font-weight: 500;
                    font-size: 14px;
                    height: 24px;
                    line-height: 24px;
                }
            }

            .contentBigTwo {
                display: flex;

                div {
                    margin-top: 5px;
                    height: 24px;
                    line-height: 24px;
                    width: 180px;
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(123, 130, 142, 1);

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

            .contentBigThree {
                div {
                    margin-top: 5px;
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(123, 130, 142, 1);

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

            .contentBigFore {
                div {
                    margin-top: 5px;
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(123, 130, 142, 1);

                    img {
                        width: 72px;
                        height: 72px;
                        margin-right: 5px;
                        vertical-align: top;
                    }
                }
            }
        }
    }
}
</style>