<template>
    <!-- 报警数据 -->
        <div class="alarmInfo">
            <div class="content whiteBlock">
                <el-table
                        :data="tableData"
                        class="tables"
                        style="width: 100%"
                        height="650"
                >
                    <!-- 设备名称 -->
                    <el-table-column align="center" prop="devName" :label="$t('message.towerCrane.equipmentName')">
                    </el-table-column>
                    <!-- 设备编号 -->
                    <el-table-column align="center" width="180px" prop="nutHostId" :label="$t('message.towerCrane.equipmentNumber')">
                    </el-table-column>
                    <!-- 螺母数 -->
                    <el-table-column align="center" width="180px" prop="afterAnalysisData.nutNum" :label="$t('message.towerCrane.numberOfNuts')">
                    </el-table-column>
                    <!-- 离线数量 -->
                    <el-table-column
                            prop="afterAnalysisData.offLineNum"
                            :label="$t('message.towerCrane.offlineQuantity')"
                            align="center"
                    >
                    </el-table-column>
                    <!-- 预警数量 -->
                    <el-table-column
                            prop="afterAnalysisData.alarmNum"
                            :label="$t('message.towerCrane.earlyWarningQuantity')"
                            align="center"
                    >
                    </el-table-column>
                    <!-- 操作 -->
                    <el-table-column
                            prop="dipYAlarm"
                            :label="$t('message.towerCrane.operation')"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <span @click="nutDetails(scope.row.afterAnalysisData)" style="color: #5181f6;cursor:pointer;">
                                <!-- 查看详情 -->
                                {{ $t('message.towerCrane.viewDetails') }}
                            </span>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column prop="date" :label="$t('message.lifter.reportTime')"> </el-table-column> -->

                    <!-- <el-table-column
                      prop="maintenanceRecord"
                      :label="$t('message.lifter.maintenanceRecord')"
                    >
                    </el-table-column> -->
                </el-table>
<!--                <el-pagination-->
<!--                        class="pagerBox"-->
<!--                        @size-change="handleSizeChange"-->
<!--                        @current-change="handleCurrentChange"-->
<!--                        :current-page="pageNo"-->
<!--                        :page-sizes="$store.state.PAGESIZRS"-->
<!--                        :page-size="pageSize"-->
<!--                        layout="total, sizes, prev, pager, next"-->
<!--                        :total="total"-->
<!--                        background-->
<!--                ></el-pagination>-->
            </div>
            <!-- 螺母信息 -->
            <el-dialog :modal-append-to-body="false" :visible.sync="dialogVisible" :before-close="handleClose" :title="$t('message.towerCrane.nutInformation')">
                <vue-scroll style="height: 100%">
                    <el-table
                            :data="details"
                            class="tables"
                            style="width: 100%"
                            height="650"
                    >       
                            <!-- 设备编号 -->
                            <el-table-column align="center" prop="nutNo" :label="$t('message.towerCrane.equipmentNumber')">
                            </el-table-column>
                            <!-- 是否在线 -->
                            <el-table-column align="center" prop="onLine" :label="$t('message.towerCrane.isOnline')">
                                <template slot-scope="scope">
                                    <!-- 在线':'离线 -->
                                    <span>{{scope.row.onLine == 1? $t('message.towerCrane.onLine') : $t('message.towerCrane.offLine') }}</span>
                                </template>
                            </el-table-column>
                            <!-- 是否预警 -->
                            <el-table-column align="center" prop="alarm" :label="$t('message.towerCrane.alertOrNot')">
                                <template slot-scope="scope">
                                    <!-- '正常':'预警' -->
                                    <span>{{scope.row.alarm == 0? $t('message.towerCrane.normal') : $t('message.towerCrane.earlyWarning') }}</span>
                                </template>
                            </el-table-column>
                    </el-table>
                </vue-scroll>
            </el-dialog>
        </div>
</template>
<script>
    import {
        selectTowerNutByNutHostIdApi,//通过id查询螺栓信息
        selectTowerNutListApi//列表
    } from "@/assets/js/api/towerCrane";
    export default {
        props:['sn'],
        data() {
            return {
                projectSn: "",
                towerList: [],
                devSn: "",
                time: [],
                pageNo: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
                uploadUrl: "",
                fileUrl: "",
                dialogVisible: false,
                managementInfoList: [],
                maintenanceForm: {
                    devSn: "",
                    devType: 3,
                    maintenanceTime: "",
                    maintenanceStatus: "",
                    personLiable: "",
                    maintenanceUnit: "",
                    remark: "",
                    maintenanceImage: "",
                },
                value1:"",//开始结束时间
                details:''
            };
        },

        created() {
            this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
            this.uploadUrl = this.$store.state.UPLOADURL;
            this.fileUrl = this.$store.state.FILEURL;
            this.selectTowerNutListApi()
        },
        computed:{
            transformTimestamp(){
                return function(timestamp){
                    if(timestamp){
                        let a = new Date(timestamp).getTime();
                        const date = new Date(a);
                        const Y = date.getFullYear() + '-';
                        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                        const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  ';
                        const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
                        const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
                        const s = date.getSeconds() ; // 秒
                        const dateString = Y + M + D + h + m + s;
                        return dateString;
                    }
                }
            },
        },
        methods: {
            handleClose(){
                this.dialogVisible = false
            },
            //监听时间选择
            selectTime(val){
                // console.log(this.transformTimestamp(this.value1[0]));
                // console.log(val);
                // console.log(this.value1);
            },
            //获取详情
            nutDetails(obj){
                this.dialogVisible = true
                this.details = obj.list
                console.log(this.details);
            },
            //获取螺母列表
            selectTowerNutListApi() {
                let data = {
                    projectSn: this.projectSn,
                };
                selectTowerNutListApi(data).then((res) => {
                    console.log(res.result);
                    if (res.code == 200) {
                        res.result.forEach(item => {
                            item.afterAnalysisData = JSON.parse(item.afterAnalysisData)
                        })
                        this.tableData = res.result;
                    }
                });
            },

            //刷新
            refresh() {
                this.devSn = "";
                this.pageNo = 1;
                this.pageSize = 10;
                this.value1 = ""
                this.getGantryCraneAlarmList();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getGantryCraneAlarmList();
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.getGantryCraneAlarmList();
            },
        },
    };
</script>

<style lang="less" scoped>
    .alarmInfo {
        width: 100%;
        height: 100%;
        .title {
            // background-color: #ffffff;
            padding: 0 20px;
            padding-top: 17px;
            height: 70px;
            box-sizing: border-box;
        }
        .content {
            // margin-top: 10px;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            // background-color: #ffffff;
        }
    }
    .demo-ruleForm {
        width: 90%;
    }
    .dialog_content{
        margin: 0 20px;
    }
    .dialog-footer{
        display: flex;
        justify-content: flex-end;
    }
</style>
