<template>
	<div class="his_not_pass">
		<headNav title="历史隐患" class="headNav"></headNav>
        <div class="his_not_content">
            <div class="his_item" v-for="(item, index) in list" :key="item.id" @click="goHisDetail(item)">
                <div class="his_index">
                    <span>{{index + 1}}</span>
                </div>
                <div class="his_content">
                    <div class="his_line his_top">
                        <div class="his_lf">{{item.report_content}}</div>
                        <div class="his_rt"><van-icon name="arrow" /></div>
                    </div>
                    <div class="his_line his_mid">
                        <span>{{item.job_result_content}}</span>
                    </div>
                    <div class="his_line his_bottom">
                        <div class="his_lf">检查情况：<span>异常</span></div>
                        <div class="his_rt">{{dayjs(item.start_time).format('YYYY-MM-DD HH:mm:ss')}}</div>
                    </div>
                </div>
            </div>
        </div>
		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
	</div>
</template>

<script>
import dayjs from 'dayjs';
import headNav from '@/components/headNav.vue';
import { get, post } from '@/utils/http.js';
import mask_overLay from '@/components/overLay_xy.vue';

export default {
	name: 'historyNotPass',
	components: {
		headNav,
		'v-mask': mask_overLay
	},
	data() {
		return {
            dayjs,
            tipMsg: '数据加载中...',
            showOverLay: false,
            list: []
		};
	},
    computed: {
        id() {
            return this.$route.params.id
        }
    },
	created() {
        this.getListData()
	},
	methods: {
        async getListData() {
            this.showOverLay = true;
			await this.$http.get(`/v2/api/enforce-job`, {
				params: {
					page: 1,
					size: 10000,
					query: `enforce_obj_id=='${this.id}';enforce_result=='NOT_PASS'`
				}
			})
				.then((res) => {
					this.list = res.data.data
				})
				.catch((err) => {
					this.$toast.fail("获取历史隐患失败");
				})
                .finally(() => {
                    this.showOverLay = false;
                })
        },
        goHisDetail(item) {
            this.$router.push({
                path: `/reportJobHistoryNotPassDetail/${item.id}`
            })
        }
	}
};
</script>

<style lang="scss" scoped>
.his_not_pass {
    display: flex;
    font-size: 14px;
    height: 100vh;
    overflow: hidden;
    flex-direction: column;
    .headNav {
        flex: 0 0 50px;
        position: static;
    }
    .his_not_content {
        flex: 1;
        overflow-y: auto;
    }
}
.his_bottom {
    .his_lf span {
        color: red;
    }
}
.his_item {
    display: flex;
    background-color: #fff;
    padding: 10px 0;
    margin-bottom: 10px;
    border: 1px solid #ddd;
}
.his_index {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
        display: inline-block;
        width: 25px;
        height: 25px;
        line-height: 25px;
        border-radius: 50%;
        border: 3px solid blue;
        text-align: center;
        font-size: 18px;
        color: blue;
    }
}
.his_content {
    flex: 1;
    overflow: hidden;
}
.his_line {
    display: flex;
}
.his_mid {
    margin: 10px 0;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.his_lf, .his_rt {
    flex: 1;
}
.his_rt {
    padding-right: 15px;
    text-align: right;
}
</style>
