<template>
    <div class='compute-item'>
        <div class='compute-table'>
            <el-table
                :border='true'
                v-loading='loading'
                :data='table4'
                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 resizable>
                    <template slot-scope='{row}'>{{row.location||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='重要事项记录' width='130' show-overflow-tooltip resizable>
                    <template slot-scope='{row}'>{{row.matters||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='描述' show-overflow-tooltip resizable>
                    <template slot-scope='{row}'>{{row.description||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='更换配件信息' align='center' show-overflow-tooltip resizable>
                    <el-table-column prop label='是/否更换' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>{{row.ismodel||'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='配件名称型号' width='130' min-width='110' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>{{row.model||'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='数量' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>{{row.cost||'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='费用（万元）' min-width='100' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>{{row.cost||'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='费用出处' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>{{row.source||'--'}}</template>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop label='现场照片' show-overflow-tooltip resizable>
                    <template slot-scope='{row}'>{{row.pics || '--'}}</template>
                </el-table-column>
                <el-table-column prop label='填报时间' show-overflow-tooltip resizable width='130'>
                    <template slot-scope='{row}'>{{row.reportedby?formatter(row.reportedby):'--'}}</template>
                </el-table-column>
                <el-table-column prop label='验收时间' show-overflow-tooltip width='130' resizable>
                    <template slot-scope='{row}'>{{row.sjjssj?formatter(row.sjjssj):'--'}}</template>
                </el-table-column>
                <el-table-column prop label='工单编号' show-overflow-tooltip resizable>
                    <template slot-scope='{row}'>{{row.wonum||'--'}}</template>
                </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>
        </div>
    </div>
</template>
<script>
import Select from '@/components/Select/Select.vue'
import moment from 'moment'

export default {
    props: ['table4', 'total', 'page', 'size', 'loading'],
    data() {
        return {
            dateVal: '',
            value1: '',
            searVal: ''
        }
    },
    components: { Select },
    methods: {
        formatter(date) {
            return moment.unix(date / 1000).format('YYYY.MM.DD HH:mm')
        },
        pageChanged(page) {
            this.page = page
            this.$emit('Index3Emit', page)
        }
    }
}
</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>