<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>
            <el-container>
                <el-aside width="69%" style="margin-right:1%;border-right:0">
                    <el-container>
                        <el-header class="searchWrap">
                            <div class="left-panel">
                                <div class="left-panel">洗车行为统计</div>
                            </div>
                            <div class="right-panel">
                                <el-select v-model="query.station" placeholder="洗车台" @change="handleQuery" clearable>
                                    <el-option v-for="item in stationOptions" :key="item" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </div>
                        </el-header>
                        <el-main class="nopadding">
                            <scTable ref="table" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id" :params="params"
                                :query="query">
                                <el-table-column type="index" width="50" />
                                <el-table-column label="洗车台" prop="station_name" />
                                <el-table-column label="车辆编号" prop="vehicle_number" />
                                <el-table-column prop="start_time" label="开始时间" width="180" />
                                <el-table-column label="洗车时长(s)" prop="duration"></el-table-column>
                                <el-table-column label="压力" prop="pressure" />
                                <el-table-column label="流量" prop="flux">
                                </el-table-column>
                            </scTable>
                        </el-main>
                    </el-container>
                </el-aside>
                <el-main class="nopadding">
                    <el-container>
                        <el-header class="searchWrap">
                            <div class="left-panel">环卫车智能调度</div>
                        </el-header>
                        <el-main class="nopadding">
                            <scTable style="width: 100%;" size="large" :apiObj="apiObj2" row-key="id" :params="params2"
                                hidePagination hideDo>
                                <el-table-column type="index" width="50" />
                                <el-table-column prop="name" label="环卫车名称" />
                                <el-table-column prop="type" label="环卫车类型" />
                                <el-table-column label="今日工作时长">
                                    <template #default="scope">
                                        <span v-if="scope.row.drain_">{{ scope.row.drain_.mgroup_name }}</span>
                                    </template>
                                </el-table-column>
                            </scTable>
                        </el-main>
                    </el-container>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            apiObj: null,
            params: {},
            apiObj2: null,
            params2: {},
            stationOptions: [],
            query: {}
        }
    },
    mounted() {
        this.apiObj = this.$API.enp.carwash;
        this.getStations();
    },
    methods: {
        getStations() {
            this.$API.em.equipment.list.req({ cate__code: 'wstation', page: 0 }).then(res => {
                this.stationOptions = res;
            })
        },
        handleQuery() {
            this.$refs.table.queryData(this.query);
        },
    }
}
</script>