<template>
    <div class="page">
        <headNav title="历史隐患"></headNav>
        <div class="content" v-if="list && list.length > 0">
            <div class="item" v-for="(item, index) in list" :key="item.id" @click="showDetail(item)">
                <div class="sort">
                    <div class="num">
                        <span>{{index+1}}</span>
                    </div>
                </div>
                <div class="info">
                    <div class="top">
                        <div class="name">{{ item.item_type == "1" ? '其他' : item.enforce_obj_class }}</div>
                        <div class="top">
                            <div v-if="!item.item_content" class="type">{{ item.item_name }}</div>
                            <van-icon name="arrow" size="14" color="#686868" />
                        </div>
                    </div>
                    <div class="desc">{{ item.item_content }}</div>
                    <div class="res">
                        <div class="result">
                            <span>检查情况：</span>
                            <span class="result-desc">{{parseStatus(item.check_result)}}</span>
                        </div>
                        <div class="date">{{ formatDate(item.create_time, true) }}</div>
                    </div>
                </div>
            </div>
        </div>
        <van-empty v-else description="暂无隐患数据" />

        <v-mask :showOverLay="showOverLay"></v-mask>
    </div>
</template>

<script>
import headNav from "@/components/headNav.vue"
import {formatDate} from '@/utils/tool'
import mask_overLay from "@/components/overLay_xy.vue"

export default {
    components: {
        headNav,
        "v-mask": mask_overLay,
    },
    computed: {
        objId() {
            return this.$route.params.ID
        },
        isItem() {
            return this.$route.params.isItem == 1
        }
    },
    data () {
        return {
            showOverLay: false,
            list: []
        }
    },
    mounted () {
        if (this.objId) {
            this.getHistory()
        }
    },
    methods: {
        formatDate,
        getHistory() {
            this.showOverLay = true
            let url = '/v2/api/enforce-job/item?page=1&size=100000&query=check_result==2;';
            if (this.isItem) {
                url += `item_id==${this.objId}`;
            }
            else {
                url += `enforce_obj_id==${this.objId}`;
            }
            this.$http.get(url).then(result => {
                const res = result.data;
                if (res.data) {
                    this.list = res.data || []
                }
                this.showOverLay = false
            })
        },
        showDetail(data) {
            this.$router.push({
                name: 'historyItemDetail',
                params: data
            })
        },
        parseStatus(status) {
            if (status == 0) {
                return '不涉及'
            }
            if (status == 1) {
                return '合格'
            }
            return '异常'
        }
    }
}
</script>

<style lang="scss" scoped>
.item {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    .sort {
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        .num {
            width: 36px;
            height: 36px;
            border-radius: 100%;
            border: 1px solid #02A7F0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #02A7F0;
            font-weight: bold;
            font-size: 20px;
        }
    }
    .info {
        padding: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        .top {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            .name {
                color: #343434;
                font-weight: bolder;
                font-size: 18px;
            }
            .type {
                color: #686868;
                font-size: 14px;
                font-weight: bold;
            }
        }
        .desc {
            margin: 10px 0;
            color: #686868;
            font-size: 12px;
        }
        .res {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .result {
                color: #343434;
                font-size: 14px;
                font-weight: bold;
                &-desc {
                    color: #ee0a24;
                }
            }
            .date {
                font-size: 14px;
                color: #888888;
            }
        }
    }
}
.item:not(:first-child) {
    margin-top: 14px;
}
</style>