<template>
    <el-dialog title="报警详情" custom-class="alarm-detail-dlg" :visible.sync="open" width="960px" append-to-body
        :close-on-click-modal="false" :close-on-press-escape="false">
        <el-row class="row-header">
            <el-col>
                <span class="sp-label">工程:</span>
                <span class="sp-data">{{ row.structureName }}</span>
            </el-col>
        </el-row>
        <el-row class="row-header">
            <el-col :span="8">
                <span class="sp-label">监测项:</span>
                <span class="sp-data">{{ row.meName }}</span>
            </el-col>
            <el-col :span="8">
                <span class="sp-label">报警项:</span>
                <span class="sp-data">{{ row.variety }}</span>
            </el-col>
            <el-col :span="8">
                <span class="sp-label">报警阈值:</span>
                <span class="sp-data">{{ row.threshold }}</span>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="datas" border stripe  height="50vh">
            <el-table-column label="测点" align="center" prop="spName" />
            <el-table-column label="X方向位移(mm)" align="center" prop="displace">
                <template slot-scope="scope">{{scope.row.displace.toFixed(3) }}</template>
            </el-table-column>
            <el-table-column label="X方向累计变化量(mm)" align="center" prop="totalize" >
                <template slot-scope="scope">{{scope.row.totalize.toFixed(3) }}</template>
            </el-table-column>
            <el-table-column label="X方向单次变化量(mm)" align="center" prop="variation" >
                <template slot-scope="scope">{{scope.row.variation.toFixed(3) }}</template>
            </el-table-column>
            <el-table-column label="X方向变化速率(mm/d)" align="center" prop="changeRate" >
                <template slot-scope="scope">{{scope.row.changeRate.toFixed(3) }}</template>
            </el-table-column>
            <el-table-column label="Y方向位移(mm)" align="center" prop="displace2" >
                <template slot-scope="scope">{{scope.row.displace2.toFixed(3) }}</template>
            </el-table-column>
            <el-table-column label="Y方向累计变化量(mm)" align="center" prop="totalize2" >
                <template slot-scope="scope">{{scope.row.totalize2.toFixed(3) }}</template>
            </el-table-column>
            <el-table-column label="Y方向单次变化量(mm)" align="center" prop="variation2" >
                <template slot-scope="scope">{{scope.row.variation2.toFixed(3) }}</template>
            </el-table-column>
            <el-table-column label="Y方向变化速率(mm/d)" align="center" prop="changeRate2">
                <template slot-scope="scope">{{scope.row.changeRate2.toFixed(3) }}</template>
            </el-table-column>
            <el-table-column label="采集时间" align="center" prop="collectTime" />
        </el-table> 
        <pagination v-show="total > 0" :total="total" :page.sync="pageNum" 
            :limit.sync="pageSize"
            @pagination="loadData" />
    </el-dialog>
</template>

<script>
import { listPitData} from "@/api/device/pitData";

export default {
    data() {
        return {
            loading:false,
            open: false,
            row: {},
            pageNum: 1,
            pageSize: 10,
            total:0,
            datas:[],
        }
    },
    methods: {
        showDialog(row) {
            this.pageNum=1;
            this.row = row;
            this.open = true;
            this.loadData();
        },
        loadData(){
            let postData={
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                spId:this.row.spId,
                createTime:this.row.gmtCreate,
                updateTime:this.row.gmtModified
            };
            this.loading=true;
            listPitData(postData).then(d => {
                this.loading=false;
                this.total=d.total||0;
                this.datas=d.rows||[];
            });
        }
    }
}
</script>

<style lang="scss">
.alarm-detail-dlg {
    .row-header {
        line-height: 30px;

        .sp-label {
            color: #333;
            font-weight: bold;
        }

        .sp-data {
            margin-left: 4px;
            columns: #888;
        }
    }
    .el-table__header{
        th{
            background: #ccccccba;
        }
    }
    .el-table__body-wrapper{
        max-height: 50vh !important;
        height: unset !important;
    }    

}
</style>