<template>
    <div>
        <el-dialog
            title='巡检结果详情'
            :visible.sync='dialogVisible'
            width='60%'>
            <el-row>
                <el-col v-for='(item,index) in resultData' :span='8'>
                    <el-card :body-style="{ padding: '10px',height: '140px' }">
                        <div style='height: 100px;'>
                            <el-tag size='small' type='info'>{{ item.inspectionProjectName }}</el-tag>
                            <div style='padding:2px 10px;' v-for='img in item.fileList'>
                                <el-popover
                                    placement='top-start'
                                    title=''
                                    width='200'
                                    trigger='hover'>
                                    <img :src='img.filePath'
                                         :alt=" img.sourceName ? img.sourceName : '无照片' "
                                         class='img-class'>
                                    <el-link slot='reference'>{{ img.sourceName|ellipsis }}</el-link>
                                </el-popover>
                            </div>
                        </div>
                        <div class='remark-and-result'>
                          <span>
                            <el-tooltip class='item' effect='dark' :content='item.remark' placement='top-start'>
                              <span>{{ item.remark|ellipsis }}</span>
                            </el-tooltip>
                          </span>
                            <span>
                                <el-tag size='small' v-if='item.result == 10' type='success'>正 常</el-tag>
                                <el-tag size='small' v-if='item.result == 20' type='danger'>异 常</el-tag>
                            </span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <div slot='footer' class='dialog-footer'>
                <el-button @click='dialogVisible=false'>关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'inspectionDetails',
    filters: {
        ellipsis(value) {
            if (!value) return '';
            if (value.length > 10) {
                return value.slice(0, 10) + '...';
            }
            return value;
        }
    },
    data() {
        return {
            dialogVisible: false,
            resultData: [],
        };
    },
    methods: {
        show(data) {
            let _this = this;
            this.dialogVisible = true;
            _this.$axios.get('/api/inspection/record/queryDetails?id=' + data.id).then(res => {
                this.resultData = res.data.data.inspectionResultVoList;
            });
        }
    }
};
</script>

<style scoped>
.el-col {
    padding: 10px;
}

.remark-and-result {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.img-class {
    width: 100%;
    height: 100%;
}
</style>