<template>
    <div class="content">
        <div class="search-box">
                <div class="search-item">
                    <!-- 设备名称 -->
                    <span>{{ $t("message.lifter.devName") }}：</span>
                    <el-select style="margin-right: 20px" v-model="devSn" size="medium" :placeholder="$t('message.lifter.pleaseSelect')">
                        <el-option
                        v-for="item in lifterList"
                        :key="item.id"
                        :label="item.devName"
                        :value="item.devSn">
                        </el-option>
                    </el-select>
                    <el-date-picker
                            class="serarch_picker"
                            size="medium"
                            v-model="valueTime"
                            type="daterange"
                            range-separator="-"
                            :start-placeholder="$t('message.lifter.startDate')"
                            :end-placeholder="$t('message.lifter.deadline')">
                    </el-date-picker>
                    <!-- startDate 开始日期  deadline 结束日期 -->
                </div>
                <!-- <div class="search-item">
                    <el-date-picker
                        size="medium"
                        v-model="timeList"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div> -->
                <!-- 查询 -->
                <el-button size="medium" @click="quertData">{{ $t("message.lifter.demand") }}</el-button>
                <!-- 刷新 -->
                <el-button size="medium" @click="refresh">{{ $t("message.lifter.refresh") }}</el-button>
                <!-- 导出 -->
                <el-button size="medium" @click="exportExcel">{{ $t("message.lifter.export") }}</el-button>
            </div>
            <div class="table-box">
                <el-table
                    :data="tableData"
                    class="tables"
                    height="700"
                    style="width: 100%">
                    <el-table-column
                        :label="$t('message.lifter.equipmentInfo')"
                        width="600"
                    >
                        <template slot-scope="scope">
                           <div class="table-list f-2">
                               <div class="table-item">
                                   <!-- 设备名称 devName -->
                                   {{ $t("message.lifter.devName") }}：{{ scope.row.devName }}
                               </div>
                               <div class="table-item">
                                   <!-- 设备编号 devNumber -->
                                   {{ $t("message.lifter.devNumber") }}：{{ scope.row.devSn }}
                               </div>
                               <div class="table-item">
                                   <!-- 驾驶员姓名 driverNameTwo -->
                                   {{ $t("message.lifter.driverNameTwo") }}：{{ scope.row.driverName }}
                               </div>
                               <div class="table-item">
                                   <!-- 驾驶员证书编号 certificateNo -->
                                   	{{ $t("message.lifter.certificateNo") }}：{{ scope.row.driverLicence }}
                               </div>
                              <div class="table-item">
                                  <!-- 驾驶员身份证号 driverIdNumberTwo -->
                                   {{ $t("message.lifter.driverIdNumberTwo") }}：{{ scope.row.driverIdCard }}
                               </div>
                               <div class="table-item">
                                   <!-- 制动距离 brakingDistance -->
                                   	{{ $t("message.lifter.brakingDistance") }}：{{ scope.row.brakingDistance }}m
                               </div>
                               <div class="table-item">
                                   <!-- 倾角 dipAngle -->
                                   	{{ $t("message.lifter.dipAngle") }}X：{{ scope.row.dipAngleX }}°
                               </div>
                               <div class="table-item">
                                   <!-- 倾角 dipAngle -->
                                   	{{ $t("message.lifter.dipAngle") }}Y：{{ scope.row.dipAngleY }}°
                               </div>
                               <div class="table-item">
                                   <!-- 楼层数 numberOfFloors -->
                                   	{{ $t("message.lifter.numberOfFloors") }}：{{ scope.row.floorNum }}m
                               </div>
                               <div class="table-item">
                                   <!-- 开始运行高度 startRunningHeightTwo -->
                                   	{{ $t("message.lifter.startRunningHeightTwo") }}：{{ scope.row.height }}
                               </div>
                               <div class="table-item">
                                   <!-- 停止运行高度 stopOperationHeight -->
                                   	{{ $t("message.lifter.stopOperationHeight") }}：{{ scope.row.stopHeight }}
                               </div>
                               <div class="table-item">
                                   <!-- 前门状态 frontDoorStatus  shut 关 open 开-->
                                   	{{ $t("message.lifter.frontDoorStatus") }}：{{ scope.row.frontDoorState == 1? $t("message.lifter.shut"): scope.row.frontDoorState == 2? $t("message.lifter.open") :'' }}
                               </div>
                               <div class="table-item">
                                   <!-- 后门状态 backDoorStatus  shut 关 open 开-->
                                   	{{ $t("message.lifter.backDoorStatus") }}：{{ scope.row.backDoorState == 1? $t("message.lifter.shut") : scope.row.backDoorState == 2? $t("message.lifter.open") :'' }}
                               </div>
                               <div class="table-item">
                                   <!-- 倾斜度 inclination -->
                                   	{{ $t("message.lifter.inclination") }}：{{ scope.row.biasAngle }}°
                               </div>
                               <div class="table-item">
                                   <!-- 倾斜百分比 tiltPercentage -->
                                   	{{ $t("message.lifter.tiltPercentage") }}：{{ scope.row.biasRatio }}%
                               </div>
                               <div class="table-item">
                                   <!-- 高度比 heightRatio -->
                                   	{{ $t("message.lifter.heightRatio") }}：{{ scope.row.heightRatio }}%
                               </div>
                               
                               <div class="table-item">
                                   <!-- 本次运行最大载重百分比 maxLoadPercentageTwo -->
                                   	{{ $t("message.lifter.maxLoadPercentageTwo") }}：{{ scope.row.loadRatio }}m/s
                               </div>
                                <div class="table-item">
                                    <!-- 本次运行载重 loadOfThisOperation -->
                                   	{{ $t("message.lifter.loadOfThisOperation") }}：{{ scope.row.loading }}kg
                               </div>
                               <div class="table-item">
                                   <!-- 最大载重 maximumPayloadTwo -->
                                   	{{ $t("message.lifter.maximumPayloadTwo") }}：{{ scope.row.maxLoad }}kg
                               </div>
                               <div class="table-item">
                                   <!-- 人数 numberOfPeople s-->
                                   	{{ $t("message.lifter.numberOfPeople") }}：{{ scope.row.peopleNumber }}
                               </div>
                               <div class="table-item">
                                   <!-- runningState 运行状态  rise 上升  decline 下降 -->
                                   	{{ $t("message.lifter.runningState") }}：{{ scope.row.runningState == 1? $t("message.lifter.rise") :scope.row.runningState == 2? $t("message.lifter.decline") :'' }}
                               </div>
                               <div class="table-item">
                                   <!--  runningSpeed 运行速度 -->
                                   	{{ $t("message.lifter.runningSpeed") }}：{{ scope.row.speed }}m/s
                               </div>
                               <div class="table-item">
                                   <!--receiveCreationTime  接收创建时间 -->
                                   	{{ $t("message.lifter.receiveCreationTime") }}：{{ scope.row.reciveTime }}
                               </div>
                               <!-- <div class="table-item">
                                   	开始工作时间：{{ scope.row.startTime }}
                               </div>
                               <div class="table-item">
                                   	停止工作时间：{{ scope.row.stopTime }}
                               </div> -->
                           </div>
                        </template>
                    </el-table-column>

                    <!-- receiveCreationTime 报警信息 -->
                    <el-table-column
                        :label="$t('message.lifter.receiveCreationTime')"
                        >
                        <template slot-scope="scope">
                            <div class="table-list f-2">
                                <div class="table-item">
                                    <!-- 下限位报警 -->
                                    {{ $t("message.lifter.lowerLimitAlarm") }}：
                                    <span :style="{'color': scope.row.bottomAlarm == 1 ? '#F56C6C':''}">{{ scope.row.bottomAlarm ? $t("message.lifter.alarm") : $t("message.lifter.normal") }}</span>
                                    <!-- alarm 报警    normal正常 -->
                                </div>
                                <div class="table-item">
                                    <!-- 防坠器报警 -->
                                    {{ $t("message.lifter.fallArresterAlarm") }}：
                                    <span :style="{'color': scope.row.fallAlarm == 1 ? '#F56C6C':''}">{{ scope.row.fallAlarm ? $t("message.lifter.alarm") : $t("message.lifter.normal") }}</span>
                                    <!-- alarm 报警    normal正常 -->
                                </div>
                                <div class="table-item">
                                    <!-- 高度报警 -->
                                    {{ $t("message.lifter.altitudeAlarm") }}：
                                    <span :style="{'color': scope.row.heightAlarm == 1 ? '#F56C6C':''}">{{ scope.row.heightAlarm ? $t("message.lifter.alarm") : scope.row.heightPreAlarm ? $t("message.lifter.earlyWarning"): $t("message.lifter.normal") }}</span>
                                    <!-- alarm 报警  earlyWarning 预警   normal正常 -->
                                </div>
                                <div class="table-item">
                                    <!-- 1号电机报警 -->
                                    {{ $t("message.lifter.firstAlarm") }}：
                                    <span :style="{'color': scope.row.motor1Alarm == 1 ? '#F56C6C':''}">{{ scope.row.motor1Alarm ? $t("message.lifter.alarm") : $t("message.lifter.normal") }}</span>
                                    <!-- alarm 报警    normal正常 -->
                                </div>
                                <div class="table-item">
                                    <!-- 2号电机报警 -->
                                    {{ $t("message.lifter.secondAlarm") }}：
                                    <span :style="{'color': scope.row.motor2Alarm == 1 ? '#F56C6C':''}">{{ scope.row.motor2Alarm ? $t("message.lifter.alarm") : $t("message.lifter.normal") }}</span>
                                    <!-- alarm 报警    normal正常 -->
                                </div>
                                <div class="table-item">
                                    <!-- 3号电机报警 -->
                                    {{ $t("message.lifter.thirdAlarm") }}：
                                    <span :style="{'color': scope.row.motor3Alarm == 1 ? '#F56C6C':''}">{{ scope.row.motor3Alarm ? $t("message.lifter.alarm") : $t("message.lifter.normal") }}</span>
                                    <!-- alarm 报警    normal正常 -->
                                </div>
                                <div class="table-item">
                                    <!-- 倾角X报警 -->
                                    {{ $t("message.lifter.inclinationXAlarm") }}：
                                    <span :style="{'color': scope.row.obliguityXAlarm == 1 ? '#F56C6C':''}">{{ scope.row.obliguityXAlarm ? $t("message.lifter.alarm") :scope.row.obliguityXPreAlarm? $t("message.lifter.earlyWarning"): $t("message.lifter.normal") }}</span>
                                    <!-- alarm 报警  earlyWarning 预警   normal正常 -->
                                </div>
                                <div class="table-item">
                                    <!-- 倾角Y报警 -->
                                    {{ $t("message.lifter.inclinationYAlarm") }}：
                                    <span :style="{'color': scope.row.obliguityYAlarm == 1 ? '#F56C6C':''}">{{ scope.row.obliguityYAlarm ? $t("message.lifter.alarm") :scope.row.obliguityYPreAlarm? $t("message.lifter.earlyWarning"): $t("message.lifter.normal") }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 人数报警 -->
                                    {{ $t("message.lifter.numberAlarm") }}：
                                    <span :style="{'color': scope.row.peopleCntAlarm == 1 ? '#F56C6C':''}">{{ scope.row.peopleCntAlarm ?  $t("message.lifter.alarm") : $t("message.lifter.normal") }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 速度报警 -->
                                   {{ $t("message.lifter.speedAlarm") }}：
                                    <span :style="{'color': scope.row.speedAlarm == 1 ? '#F56C6C':''}">{{ scope.row.speedAlarm ? $t("message.lifter.alarm") : scope.row.speedPreAlarm? $t("message.lifter.earlyWarning"): $t("message.lifter.normal") }}</span>
                                    <!-- alarm 报警  earlyWarning 预警   normal正常 -->
                                </div>
                                <div class="table-item">
                                    <!-- 防冲顶报警 -->
                                    {{ $t("message.lifter.antiImpactRoofAlarm") }}：
                                    <span :style="{'color': scope.row.topAlarm == 1 ? '#F56C6C':''}">{{ scope.row.topAlarm ?  $t("message.lifter.alarm") : $t("message.lifter.normal")  }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 载重报警 -->
                                    {{ $t("message.lifter.loadAlarm") }}：
                                    <span :style="{'color': scope.row.weightAlarm == 1 ? '#F56C6C':''}">{{ scope.row.weightAlarm ?  $t("message.lifter.alarm") :scope.row.weightPreAlarm ? $t("message.lifter.earlyWarning"): $t("message.lifter.normal") }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 风速报警 -->
                                    {{ $t("message.lifter.windSpeedAlarm") }}：
                                    <span :style="{'color': scope.row.windSpeedAlarm == 1 ? '#F56C6C':''}">{{ scope.row.windSpeedAlarm ? $t("message.lifter.alarm"): scope.row.windSpeedPreAlarm ? $t("message.lifter.earlyWarning"): $t("message.lifter.normal") }}</span>
                                    <!-- alarm 报警  earlyWarning 预警   normal正常 -->
                                </div>
                                
                            </div>
                        </template>
                    </el-table-column>

                    <!-- faultInformation 故障信息 -->
                    <el-table-column
                        :label="$t('message.lifter.faultInformation')"
                        width="300"
                        >
                        <template slot-scope="scope">
                           <div class="table-list">
                               <div class="table-item">
                                   <!-- 楼层传感器故障： -->
                                   {{ $t("message.lifter.floorSensorFault") }}：
                                   <span :style="{'color': scope.row.floorError ? '#F56C6C':''}">{{ scope.row.floorError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                                   <!-- faulty有故障  noFault无故障 -->
                               </div>
                               <div class="table-item">
                                   <!-- GPS故障： -->
                                    {{ $t("message.lifter.gpsFault") }}：
                                    <span :style="{'color': scope.row.gpsError ? '#F56C6C':''}">{{ scope.row.gpsError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 高度传感器故障： -->
                                    {{ $t("message.lifter.heightSensorFault") }}：
                                    <span :style="{'color': scope.row.heightError ? '#F56C6C':''}">{{ scope.row.heightError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                                    <!-- faulty有故障  noFault无故障 -->
                               </div>
                               <div class="table-item">
                                   <!-- 身份识别模块故障： -->
                                    {{ $t("message.lifter.identityModuleFailure") }}：
                                    <span :style="{'color': scope.row.idError ? '#F56C6C':''}">{{ scope.row.idError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                               </div>
                               <!-- <div class="table-item">
                                    有无任何外设故障：
                                    {{ scope.row.noError ?"无任何外设故障" : "有外设故障" }}
                               </div> -->
                               <div class="table-item">
                                   <!-- 倾角X传感器故障： -->
                                   {{ $t("message.lifter.inclinationXFault") }}：
                                    <span :style="{'color': scope.row.obliguityXError ? '#F56C6C':''}">{{ scope.row.obliguityXError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 倾角Y传感器故障： -->
                                    {{ $t("message.lifter.inclinationYFault") }}：
                                    <span :style="{'color': scope.row.obliguityYError ? '#F56C6C':''}">{{ scope.row.obliguityYError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 人数识别装置故障： -->
                                    {{ $t("message.lifter.numberFault") }}：
                                    <span :style="{'color': scope.row.peopleCntError ? '#F56C6C':''}">{{ scope.row.peopleCntError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                                    <!-- faulty有故障  noFault无故障 -->
                               </div>
                               <div class="table-item">
                                   <!-- 速度传感器故障： -->
                                    {{ $t("message.lifter.speedSensorFault") }}：
                                   <span :style="{'color': scope.row.speedError ? '#F56C6C':''}"> {{ scope.row.speedError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 载重传感器故障： -->
                                    {{ $t("message.lifter.loadSensorFailure") }}：
                                   <span :style="{'color': scope.row.weightError ? '#F56C6C':''}"> {{ scope.row.weightError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                                   <!-- faulty有故障  noFault无故障 -->
                               </div>
                               <div class="table-item">
                                   <!-- 风速传感器故障： -->
                                    {{ $t("message.lifter.windSpeedFault") }}：
                                   <span :style="{'color': scope.row.windSpeedError ? '#F56C6C':''}"> {{ scope.row.windSpeedError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 楼层呼叫装置故障： -->
                                    {{ $t("message.lifter.floorDeviceFailure") }}：
                                   <span :style="{'color': scope.row.wirelessError ? '#F56C6C':''}"> {{ scope.row.wirelessError ? $t("message.lifter.faulty") : $t("message.lifter.noFault") }}</span>
                                   <!-- faulty有故障  noFault无故障 -->
                               </div>
                           </div>
                        </template>
                    </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>
    </div>
</template>

<script>
import moment from "moment";
import { getLifterListApi, selectLifterCurrentDataApi } from "@/assets/js/api/lifter";

export default {
    data(){
        return{
            devSn: "",
            projectSn: "",
            lifterList:[],
            tableData:[],
            pageNo: 1,
            pageSize: 10,
            total: 0,
            timeList: "",
            startTime: "",
            endTime: "",
            valueTime:''
        }
    },
    created(){
        this.projectSn = this.$store.state.projectSn;
        this.startTime = this.endTime = moment(new Date()).format('YYYY-MM-DD')
        console.log(this.startTime, this.endTime)
        this.getLifterList()
        this.selectNowDate()
        this.selectLifterCurrentData()
    },
   
    methods:{
        //获取设备列表下拉
        getLifterList() {
            let data = {
                projectSn: this.projectSn,
            };
            getLifterListApi(data).then((res) => {
                if (res.code == 200) {
                this.lifterList = res.result;
                }
            });
        },
        // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
        selectNowDate(){
			var date = new Date(),
			year = date.getFullYear(),
			month = date.getMonth() + 1,
			day = date.getDate(),
            hours = date.getHours(), //获取当前小时数(0-23)
            minutes = date.getMinutes(),//获取当前分钟数(0-59)
            seconds = date.getSeconds()
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
            hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
            minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
            seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
			// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
            var timer = year + '-' + month + '-' + day
            this.valueTime = [timer,timer]
			console.log(timer)
			// return timer;
		},
       
        //刷新
        refresh(){
            this.pageNo = 1
            this.pageSize = 10
            this.devSn = ''
            this.valueTime = ''
            this.selectLifterCurrentData()
        },
        quertData(){
            this.pageNo = 1
            this.pageSize = 10
            console.log(this.devSn)
            this.selectLifterCurrentData()
        },
        selectLifterCurrentData(){
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let data = {
                devSn: this.devSn,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                projectSn: this.projectSn,
                startTime:this.valueTime?this.valueTime[0]:"",
                endTime:this.valueTime?this.valueTime[1]:""
            }
            console.log(data);
            selectLifterCurrentDataApi(data).then(res=>{
                console.log(res)
                if(res.code == 200 && res.result){
                    this.tableData = res.result.records
                    this.total = res.result.total
                    loading.close();
                }
            })
        },
        handleSizeChange(value){
            this.pageSize=value;
            this.selectLifterCurrentData()
        },
        handleCurrentChange(value){
            this.pageNo=value;
            this.selectLifterCurrentData()
        },
        exportExcel(){
            console.log('点击this.valueTime',this.valueTime)
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            if(this.valueTime){
                window.location.href =
                    this.$http.defaults.baseURL +
                    "xmgl/download/exporExcelTowerAlarm?projectSn=" + this.projectSn +
                    "&devSn=" + this.devSn + "&startTime=" + this.valueTime[0] + "&endTime=" + this.valueTime[1];
                    loading.close();
            }else {
                window.location.href =
                    this.$http.defaults.baseURL +
                    "xmgl/download/exporExcelTowerAlarm?projectSn=" + this.projectSn +
                    "&devSn=" + this.devSn;
            }
        }
    }
}
</script>

<style lang="less" scoped>
.content{
    display: flex;
    flex-direction: column;
    height: 100%;
    .search-box{
        background: #fff;
        padding: 25px;
        margin-bottom: 14px;
        .search-item{
            display: inline-block;
            margin-right: 26px;
        }
    }
    .table-box{
        flex: 1;
        background: #fff;
        /deep/.el-table{
            td{
                vertical-align: top;
            }
            .cell{
                padding-left: 44px;
            }
        }
        .f-2{
            display: flex;
            flex-wrap: wrap;
            .table-item{
                width: 50%
            }
        }
    }
}
</style>
