<template>
    <div class="bike-list">
        <sum-head title="车辆列表" text="总车数" :sum="list.total+''" ></sum-head>

        <div class="filter-container">
            <span>故障状态：</span>
            <el-select v-model="listQuery.troubleStatus" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in faultOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <span>投放区域：</span>
            <el-select v-model="listQuery.manageAreaId" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <span>投放状态：</span>
            <el-select v-model="listQuery.putStatus" value-key="id" size="small" placeholder="请选择" class="filter-item" @change="putChange">
                <el-option v-for="item in putOptions" :key="item.id" :label="item.label" :value="item.value"/>
            </el-select>
            <span>在线状态：</span>
            <el-select v-model="listQuery.ifLink" value-key="id" size="small" placeholder="请选择" class="filter-item" @change="putChange">
                <el-option v-for="item in lineOptions" :key="item.id" :label="item.label" :value="item.value"/>
            </el-select>
            <el-input placeholder="车牌号/设备编号/投放区域" v-model="listQuery.keyword" size="small" style="width: 180px;" class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>

            <el-button class="filter-item add" size="small" type="primary" icon="el-icon-plus" @click="addBike">添加车辆</el-button>
            <el-button class="filter-item add" size="small" type="primary" icon="el-icon-upload2" @click="openImport">导入车辆</el-button>
            <el-button class="filter-item add" size="small" type="primary" icon="el-icon-picture-outline" @click="openQcode">导出二维码</el-button>
            <el-button class="filter-item add" size="small" type="primary" icon="el-icon-printer" @click="openSetup">批量设置</el-button>
        </div>

        <el-table
            ref="multipleTable"
            v-loading="listLoading"
            element-loading-text="Loading"
            :data="list.resultList"
            size="small"
            border
            @selection-change="handleSelectionChange">
            <!--checked-->
            <el-table-column align="center" type="selection" width="55">
            </el-table-column>
            <el-table-column prop="plateNumber" label="车牌号" align="center"></el-table-column>
            <el-table-column prop="boxCode" label="定位设备编号" align="center"></el-table-column>
            <el-table-column label="在线状态" align="center" width="100">
                <template slot-scope="scope">
                    {{ scope.row.ifLink ? '在线' : '离线' }}
                </template>
            </el-table-column>
            <el-table-column label="剩余电量" align="center" width="80">
                <template slot-scope="scope">
                    <span>{{ scope.row.batteryPower ? parseFloat(scope.row.batteryPower).toFixed(0) : '0' }}%</span>
                </template>
            </el-table-column>
            <el-table-column label="故障状态" align="center" width="100">
                <template slot-scope="scope">
                    {{ scope.row.troubleStatus | troubleFilter }}
                </template>
            </el-table-column>
            <el-table-column label="投放状态" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.putStatus=='1' ? 'success' : 'danger'">{{ scope.row.putStatus=='1' ? '已投放' : '未投放' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="putAreaName" label="所属行政区" align="center"></el-table-column>
            <el-table-column prop="manageAreaName" label="投放区域" align="center"></el-table-column>
            <el-table-column label="投放时间" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time" v-if="scope.row.putTime" />
                    <span>{{ scope.row.putTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="300px">
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" @click="showQcode(scope.row.plateNumber)">二维码</el-button>
                    <el-button type="success" size="mini" @click="checkBike(scope.row)">详情</el-button>
                    <el-button type="primary" size="mini" @click="editBike(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="delBike(scope.row.id, scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container" v-show="!listLoading">
            <el-pagination background layout="prev, pager, next" :page-size="10" :total="list.total" @current-change="curPage"></el-pagination>
        </div>

        <bike-details ref="bikeDetails" @updateList="getList"></bike-details>
        <batch-setup ref="batchSetup" @updateList="getList"></batch-setup>
        <import-template ref="importTemplate" @updateList="getList"></import-template>
        <view-qcode ref="viewQcode"></view-qcode>
        <download-qcode ref="downloadQcode"></download-qcode>
    </div>
</template>

<script>
import SumHead from '@/components/SumHead'
import bikeDetails from './components/bikeDetails'
import batchSetup from './components/batchSetup'
import importTemplate from './components/importTemplate'
import viewQcode from './components/viewQcode'
import downloadQcode from './components/downloadQcode'

import api from '@/api/bike'
export default {
    name: "list",
    components: {
        SumHead,
        bikeDetails,
        batchSetup,
        importTemplate,
        viewQcode,
        downloadQcode
    },
    data() {
        return {
            listQuery: {
                pageNumber: '1',
                pageSize: '12',
                troubleStatus: '',
                manageAreaId: '',
                putStatus: '',
                ifLink: '',
                keyword: undefined
            },
            faultOptions: [
                { label: '全部', value: ''},
                { label: '无故障', value: '0'},
                { label: '有故障', value: '1'},
                // { label: '正常', value: '0'},
                // { label: '控制器故障', value: '1'},
                // { label: '电池故障', value: '3'},
                // { label: '轮胎故障', value: '4'},
            ],
            putOptions: [
                { label: '全部', value: '', id: '1'},
                { label: '已投放', value: '1', id: '2'},
                { label: '未投放', value: '0', id: '3'}
            ],
            lineOptions: [
                { label: '全部', value: ''},
                { label: '在线', value: 1 },
                { label: '离线', value: 0 },
            ],
            listLoading: false,
            list: [],
            multipleSelection: []
        }
    },
    filters: {
        troubleFilter(status) {
            // let troubleMap = ['正常', '控制器故障', '电池故障', '轮胎故障']
            let troubleMap = ['无故障', '有故障']
            return troubleMap[status]
        }
    },
    methods: {
        getList() {
            this.listLoading = true
            api.getBikeList(this.listQuery).then(res => {
                console.log(res)
                this.listLoading = false
                this.list = res.results
            }).catch(err => {
                console.log(err)
            })
        },
        curPage(val) {
            console.log(val)
            this.listQuery.pageNumber = val
            this.getList()
        },
        putChange(data) {
            console.log(data)
        },
        handleFilter() {
            // this.listQuery.pageNumber = 1
            this.getList()
        },
        handleSelectionChange(val) {
            // console.log(val)
            this.multipleSelection = val;
        },
        openSetup() {
            let str = ''
            this.multipleSelection.forEach((item, i) => {
                str += item.id+','
            })
            // console.log(str.substr(0,str.length-1))
            this.$refs.batchSetup.open(str.substr(0,str.length-1), this.listQuery)
        },
        openImport() {
            this.$refs.importTemplate.open()
        },
        checkBike(id) {
            this.$refs.bikeDetails.open('check', id)
        },
        editBike(id) {
            this.$refs.bikeDetails.open('edit', id)
        },
        addBike() {
            this.$refs.bikeDetails.open('add')
        },
        showQcode(plateNumber) {
            this.$refs.viewQcode.open(plateNumber)
        },
        openQcode() {
            let str1 = '',
                str2 = ''
            this.multipleSelection.forEach((item, i) => {
                str1 += item.plateNumber+','
            })
            this.list.resultList.forEach((item, i) => {
                str2 += item.plateNumber+','
            })
            console.log([str1.substr(0,str1.length-1), str2.substr(0,str2.length-1)])
            this.$refs.downloadQcode.open([str1.substr(0,str1.length-1), str2.substr(0,str2.length-1)], this.listQuery)
        },
        delBike(id, index) {
            this.$confirm('你确定要删除这条车辆信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                // center: true
            }).then(() => {
                api.delBike({ id }).then(res => {
                    console.log(res)
                    this.list.resultList.splice(index, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    created() {
        this.getList()
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.bike-list {
    position: relative;
    padding: 5px 16px 0;
    margin-bottom: 30px;

    .filter-container {
        padding: 10px 0;
        .filter-item {
            width: 90px;
            margin-right: 10px;
        }
        .add {
            width: 100px;
            float: right;
            margin-right: 0px;
        }
    }

    .pagination-container {
        margin: 20px 0 30px;
        float: right;
    }
}
</style>
