<template>
    <el-container class="flex-column">
        <el-main class="nopadding">
            <el-card header="衣服检测报告" shadow="never">
                <template #header>
                    <div class="card-title">衣服检测报告</div>
                </template>
                <div class="resp-body">
                    <div class="question-body">
                        <div class="question-title">检测衣物</div>
                        <div class="resp-qestion">
                            <img class="logo" src="img/1.jpg">
                            <img class="logo" src="img/2.jpg">
                        </div>
                    </div>
                    <div class="question-body">
                        <div class="question-title">检测结果</div>
                        <div class="resp-answer">
                            <el-table :data="tableData" style="width: 100%;" border>
                                <el-table-column fixed prop="type" label="问题类型" width="150"></el-table-column>
                                <el-table-column fixed prop="remark" label="问题说明" width="200"></el-table-column>
                                <el-table-column fixed prop="chengdu" label="严重程度" width="100" align="center"></el-table-column>
                                <el-table-column fixed prop="img" label="问题标记" width="200">
                                    <template #default="scope">
                                        <el-image :src="scope.row.img" style="width: 80px;" fit="fit"></el-image>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="question-body">
                        <div class="question-title">检测总结</div>
                        <div class="resp-qestion red">图1正面左侧腹部偏上有黑点，偏下有黄褐污渍；图2袖口及下摆有磨损脏迹。</div>
                    </div>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
export default {
    data(){
        return {
            tableData:[
                {
                    type:"微小点状污渍",
                    remark:"衣物正面左侧（腹部偏上位置），有一处微小的黑色/深褐色点状痕迹。",
                    chengdu:"中",
                    img:"img/1-mark.png"
                },
                {
                    type:"明显大面积污渍",
                    remark:"衣物正面左侧（腹部偏下位置），有一块明显的淡黄色/褐色液体干涸污渍。",
                    chengdu:"高",
                    img:"img/1-mark.png"
                },
                {
                    type:"边缘磨损脏迹",
                    remark:"袖口魔术贴附近及下摆边缘有轻微的灰黑色磨损脏迹。",
                    chengdu:"低",
                    img:"img/2-mark.png"
                }
            ]
        }
    }
}
</script>

<style>
.card-title{border-bottom: 1px solid #f8f8f8;padding-bottom: 10px;}
.resp-qestion{display: flex;align-items: center;gap: 5px;}
.resp-qestion img{width: 100px;height: 100px;border-radius: 10px;}
.question-title{font-size: 14px;color: #333;margin-right: 10px;}
.question-body{display: flex;margin-bottom: 10px;}
.red{color: red;}
</style>