<template>
    <el-container>
        <el-header class="panel_title">
            <div class="left-panel">
                厂内运输车辆台账
            </div>
            <div class="right-panel">
                <el-button type="primary" @click="backtoMap">返回地图</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <el-container>
                <el-header class="searchWrap">
                    <div class="left-panel">
                        <div style="font-size: 1.8vh;">
                            进出厂运输车辆总数：<span class="totalNumber">{{ count }}</span>
                        </div>
                    </div>
                    <div class="right-panel">
                        <el-select v-model="query.level" placeholder="排口等级" style="width:10vw" clearable
                            @change="handleQuery">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-header>
                <el-main>
                    <scTable ref="table" :apiObj="apiObj" :params="params" size="large" style="" @row-click="rowClick"
                        :query="query" @dataChange="updateCount">
                        <el-table-column type="index" width="50" />
                        <el-table-column prop="number" label="车牌号码/登记号码"></el-table-column>
                        <el-table-column prop="name" label="车辆识别代码(VIN)"></el-table-column>
                        <el-table-column prop="level" label="生产日期"></el-table-column>
                        <el-table-column prop="color" label="车牌颜色"></el-table-column>
                        <el-table-column prop="eqpment" label="注册登记日期"></el-table-column>
                        <el-table-column prop="eqpment" label="车辆品牌型号"></el-table-column>
                        <el-table-column prop="eqpment" label="发动机号码"></el-table-column>
                        <el-table-column prop="eqpment" label="燃料类型"></el-table-column>
                        <el-table-column prop="eqpment" label="排放阶段"></el-table-column>
                        <el-table-column prop="eqpment" label="联网状态"></el-table-column>
                        <el-table-column prop="eqpment" label="随车清单"></el-table-column>
                        <el-table-column prop="eqpment" label="行驶证"></el-table-column>
                        <el-table-column prop="eqpment" label="车辆所有人(单位)"></el-table-column>
                    </scTable>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
import * as echarts from "echarts";
export default {
    props: {
        directDetail: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        eqId: {
            type: String,
            default: () => {
                return '';
            },
        },
    },
    data() {
        return {
            count: 0,
            apiObj: this.$API.enp.drain.list,
            params: { type: 10 },
            query: {
                search: ''
            },
            searchInputStyle: {
                color: '#fff',
            },
            tableData: [],
            detailItem: {},
            detailForm: {
                day: 18,
                year: 2024,
                month: 1
            },
            biquery: {
                end_time: '2024-02-01',
                start_time: '2024-01-29',
                time_bucket: "1 minute",
                equipment_id: "3491356310052896768",
            },
            showEqInfo:true,
            resizeTimeout:null,
        }
    },
    mounted() {
    },
    methods: {
        hiddenChange(){
            let that = this;
            that.showEqInfo = !that.showEqInfo;
            that.addListener();
        },
        handleQuery() {
            this.$refs.table.queryData(this.query);
        },
        updateCount(res, tableData) {
            this.count = res.count
        },
        initTimeNow() {
            var now = new Date();
            let year = now.getFullYear(); // 年份
            let month = now.getMonth() + 1; // 月份
            let day = now.getDate(); // 日期
            this.detailForm.year = year;
            this.detailForm.month = month;
            this.detailForm.day = day;
        },
        backtoMap() {
            this.$emit('close')
        },
        getEquipments(ids) {
            let that = this;
            let reqs = [];
            ids.forEach(id => {
                reqs.push(that.$API.em.equipment.item.req(id).then(res => {
                    if (res.type == 10) {
                        that.eqs = res;
                    } else if (res.type == 40) {
                        that.eqc = res;
                    } else if (res.type == 30) {
                        that.eqz = res;
                    }
                }))
            });
            const promise = Promise.all(reqs);
            promise.then(() => {
                // this.getDetailData()
            })

        },
       
        
    }
}
</script>
<style>
.tableBg {
    width: 100%;
    height: 88vh;
    background-image: url('/public/img/enp_blue/bigtableBg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.leftCard {
    height: 80vh;
    flex: 1;
    color: #ffffff;
    font-size: 0.75vw;
    background-image: url('/public/img/enp_blue/smallTableBg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 1vw;
}

.rightCard {
    flex: 2;
    height: 80vh;
    color: #ffffff;
    background-image: url('/public/img/enp_blue/tableBg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}



.totalWrap {
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-size: 1.6vh;
    padding: 0 0.5vw;
    height: 3vh;
    line-height: 3vh;
}

.totalNumber {
    color: #64D2FF;
    font-size: 2vh;
    font-weight: bold;
}

.searchBtn {
    width: 4.7vw;
    height: 3vh;
    background-size: 100% 100%;
    background-image: url('/public/img/enp_blue/search.png');
}

.backMap {
    height: 25px;
    line-height: 25px;
    position: absolute;
    right: 1vw;
    top: 15px;
    font-size: 1vh;
    width: -moz-fit-content;
    width: fit-content;
    color: #ffffff;
    padding: 0 0.5vw;
    background-image: url('/public/img/enp_blue/back.png');
}

.pageTitle {
    height: 5vh;
    line-height: 5vh;
    color: #ffffff;
    font-size: 1.2vw;
    padding-left: 1vw;
}

/*  */
.headerTitle {
    color: #ffffff;
    height: 4vh;
    line-height: 4vh;
    font-size: 2vh;
    position: relative
}

.backBtn {
    font-size: 1vh;
    position: absolute;
    top: 1vh;
    right: 1vh;
    line-height: 2vh
}

.greenBlock {
    width: 1vh;
    height: 1vh;
    background-image: url('/public/img/enp_blue/greenBlock.png');
    background-size: 100% 100%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5vw;
}

.circles {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #aaaaaa;
    display: inline-block;
    margin: auto 0.5vw auto 0;
}

.circles_1 {
    background: #0ed877;
}

.circles_2 {
    background: orange;
}

.linesWrap {
    padding: 1vh 0.5vw;
    height: 93%;
    overflow: scroll;
    font-weight: bold;
    line-height: 3.5vh;
}

.typeLine {
    height: 3.5vh;
    line-height: 4vh;
    font-weight: normal;
}

.infoLine {
    line-height: 3vh;
    padding-left: 0.5vw;
    display: flex
}

.infotitle {
    font-weight: normal;
    color: #dddddd;
}

.hiddenIcon{
    top:45%;
    left:-25px;
    width:50px;
    height:50px;
    z-index: 100;
    position: absolute;
    border-radius: 25px;
    border: 1px solid rgba(254,254,254,.3);
    box-shadow: 0 0 7px 2px rgba(254,254,254,.5);
    background: rgba(255,255,255,.5);
}
.hiddenIcon_hidden{
    left:0;
}
.hiddenImg{
    font-size:40px;
    margin:4px;
}
</style>