<template>
    <div class="content">
        <div class="search-box">
                <div class="search-item">
                    <!-- 设备名称 -->
                    <span>{{$t('message.unload.devName')}}：</span>
                    <el-select style="margin-right: 20px" v-model="devSn" size="medium" :placeholder="$t('message.unload.placeholderText3')">
                        <el-option
                            :label="$t('message.unload.all')"
                            value="">
                        </el-option>
                        <el-option
                        v-for="item in devList"
                        :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.unload.startTime')"
                            :end-placeholder="$t('message.unload.endTime')">
                    </el-date-picker>
                </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.unload.search')}}</el-button>
                <!-- 刷新 -->
                <el-button size="medium" @click="refresh">{{$t('message.unload.refresh')}}</el-button>
                <!-- <el-button size="medium" @click="exportExcel">导出</el-button> -->
            </div>
            <div class="table-box">
                <el-table
                    :data="tableData"
                    class="tables"
                    height="700"
                    style="width: 100%">
                    <!-- 设备名称 -->
                    <el-table-column
                        :label="$t('message.unload.devName')"
                        prop="devName"
                    >
                        
                    </el-table-column>

                    <!-- <el-table-column
                        label="设备编号"
                        prop="devSn"
                        >
                        
                    </el-table-column> -->
                    <!-- 位移 -->
                    <el-table-column
                        :label="$t('message.unload.displacement')+'(m)'"
                        prop="displacement"
                        >
                        
                    </el-table-column>
                    <!-- 载重 -->
                    <el-table-column
                        :label="$t('message.unload.load')+'(t)'"
                        prop="loading"
                        >
                        
                    </el-table-column>
                    <!-- X倾角 -->
                    <el-table-column
                        :label="$t('message.unload.XDip')+'(°)'"
                        prop="xDipAngle"
                        >
                        
                    </el-table-column>
                    <!-- "Y倾角 -->
                    <el-table-column
                        :label="$t('message.unload.YDip')+'(°)'"
                        prop="yDipAngle"
                        >
                        
                    </el-table-column>
                    <!-- 上传时间 -->
                    <el-table-column
                        :label="$t('message.unload.upLoadTime')"
                        >
                        <template slot-scope="scope">
                            {{moment(scope.row.reciveTime).format('YYYY-MM-DD HH:mm:ss')}}
                        </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 {
  getUnloadListApi,
  getUnloadCurrentListApi
} from "@/assets/js/api/unloadManage";
export default {
    data(){
        return{
            devSn: "",
            projectSn: "",
            devList:[],
            tableData:[],
            pageNo: 1,
            pageSize: 10,
            total: 0,
            timeList: "",
            startTime: "",
            endTime: "",
            valueTime:'',
            moment: ''
        }
    },
    created(){
        this.moment = moment
        this.projectSn = this.$store.state.projectSn;
        this.startTime = this.endTime = moment(new Date()).format('YYYY-MM-DD')
        console.log(this.startTime, this.endTime)
        this.getDevice()
        this.selectNowDate()
        this.getUnloadCurrentList()
    },
    
    methods:{
        getDevice() {
            getUnloadListApi({ projectSn: this.$store.state.projectSn }).then(
                (result) => {
                if (result.success) {
                    this.devList = result.result;
                    // if(this.devList.length>0){
                    //     this.devSn = this.devList[0].ammeterNo
                    // }
                    console.log("get设备列表", this.devList);
                }
                }
            );
        },
        // 获取当前时间 返回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;
		},
        getUnloadCurrentList(){
            let data = {
                devSn: this.devSn,
                projectSn: this.$store.state.projectSn,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                startTime: this.valueTime ? this.valueTime[0]:'',
                endTime: this.valueTime ? this.valueTime[1]:''
            }
            getUnloadCurrentListApi(data).then(res=>{
                console.log(res)
                if(res.success){
                    this.tableData = res.result.records
                    this.total = res.result.total
                }
            })
        },
        
        //刷新
        refresh(){
            this.pageNo = 1
            this.pageSize = 10
            this.selectNowDate()
            this.getUnloadCurrentList()
        },
        quertData(){
            this.pageNo = 1
            this.pageSize = 10
            console.log(this.devSn)
            this.getUnloadCurrentList()
        },
       
        handleSizeChange(value){
            this.pageSize=value;
            this.getUnloadCurrentList()
        },
        handleCurrentChange(value){
            this.pageNo=value;
            this.getUnloadCurrentList()
        },
        exportExcel(){
            if(this.valueTime){
                window.location.href =
                    this.$http.defaults.baseURL +
                    "xmgl/download/exporExcelTowerAlarm?projectSn=" + this.projectSn +
                    "&devSn=" + this.devSn + "&startTime=" + this.transformTimestamp2(this.valueTime[0]) + "&endTime=" + this.transformTimestamp2(this.valueTime[1]);
            }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: 30px;
            }
        }
        .f-2{
            display: flex;
            flex-wrap: wrap;
            .table-item{
                width: 50%
            }
        }
    }
}
</style>
