<template>
    <div class='compute-item'>
        <div class='compute-table'>
            <el-table
                :border='true'
                v-loading='loading'
                :data='table5'
                style='width: 100%'
                :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
            >
                <el-table-column type='index' label='序号' width='50'></el-table-column>
                <el-table-column prop label='设备名称' show-overflow-tooltip resizable>
                    <template slot-scope='{row}'>{{row.sbmc||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='设备编号' :show-overflow-tooltip='true'>
                    <template slot-scope='{row}'>{{row.assetnum||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='核心维保事项记录' :show-overflow-tooltip='true' min-width='130'>
                    <template slot-scope='{row}'>{{row.matters||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='现场照片' :show-overflow-tooltip='true'>
                    <template slot-scope='{row}'>
                        <div
                            style='cursor:pointer;color: #0091ff;'
                            @click='clickPic(row.glsmsImage)'
                        >{{row.glsmsImage?row.glsmsImage.length+'张':'--'}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop label='维保任务' align='center'>
                    <el-table-column prop label='任务编号' :show-overflow-tooltip='true'>
                        <template slot-scope='{row}'>
                            <div style='cursor:pointer;color: #0091ff;'>{{row.wb_gzglid||'--'}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop label='维保任务名称' :show-overflow-tooltip='true' min-width='100'>
                        <template slot-scope='{row}'>{{row.wbrwmc || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='任务状态' :show-overflow-tooltip='true'>
                        <template slot-scope='{row}'>{{row.status||'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='开始时间' :show-overflow-tooltip='true' width='130'>
                        <template slot-scope='{row}'>{{row.sjkssj?formatter(row.sjkssj):'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='完成时间' :show-overflow-tooltip='true' width='130'>
                        <template slot-scope='{row}'>{{row.sjwcsj?formatter(row.sjwcsj):'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='执行耗时（天）' :show-overflow-tooltip='true' min-width='130' :sortable='true'>
                        <template slot-scope='{row}'>{{row.sjcxsjt||'--'}}</template>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop label='是否正常' :show-overflow-tooltip='true' width='80'>
                    <template slot-scope='{row}'>{{row.zt||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='异常工单' align='center'>
                    <el-table-column prop label='异常工单编号' :show-overflow-tooltip='true' min-width='110'>
                        <template slot-scope='{row}'>{{row.wonum||'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='描述' :show-overflow-tooltip='true'>
                        <template slot-scope='{row}'>{{row.description||'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='填报时间' :show-overflow-tooltip='true' width='130'>
                        <template slot-scope='{row}'>{{row.reportdate?formatter(row.reportdate):'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='验收时间' :show-overflow-tooltip='true' width='130'>
                        <template slot-scope='{row}'>{{row.sjjssj?formatter(row.sjjssj):'--'}}</template>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
        <div class='foot'>
            <el-pagination
                background
                layout='prev, pager, next'
                :total='total'
                :page-size='size'
                @prev-click='pageChanged'
                @next-click='pageChanged'
                @current-change='pageChanged'
            ></el-pagination>
            <pic-large :imgUrl='imgUrl' ref='picLargeOpen'></pic-large>
        </div>
    </div>
</template>
<script>
import Select from '@/components/Select/Select.vue'
import moment from 'moment'

export default {
    props: ['table5', 'total', 'page', 'size', 'loading'],
    data() {
        return {
            value1: '',
            searVal: '',
            dateVal: '',
            imgUrl: []
        }
    },
    components: { Select },
    mounted() {},
    methods: {
        pageChanged(page) {
            this.page = page
            this.$emit('Index4')
        },
        formatter(date) {
            return moment.unix(date / 1000).format('YYYY.MM.DD HH:mm')
        },
        clickPic(row) {
            this.imgUrl = []
            if (row) {
                row.forEach(el => {
                    let obj = {
                        name: el.DESCRIPTION,
                        url: el.URLNAME
                    }
                    this.imgUrl.push(obj)
                })
            }
            this.$refs.picLargeOpen.open(this.imgUrl)
        }
    }
}
</script>
<style lang="less" scoped>
</style>
<style lang="less">
.compute-item {
    .compute-center {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
}
</style>