<template>
    <div class="side-wrp">
        <div class="side-list" :style="{transform: isShow ? 'translate(0px)' : 'translate(300px)'}">
            <div class="show-switch" @click="isShow=!isShow">
                <i class="el-icon-caret-left" :style="{color: isShow ? '#409EFF' : '#999'}" />
            </div>

            <div class="list-switch" @click="clickListSwitch" v-show="isShow">
                <i class="el-icon-printer" :style="{color: isInfo ? '#999' : '#409EFF'}" />
            </div>

            <div class="info-list" v-show="isInfo">
                <el-card class="info-card" v-for="(item, i) in bikeList" :key="i" @click.native="clickBike(item)">
                    <svg-icon icon-class='riding' class="rid-status" v-if="item.troubleStatus==1" />
                    <div class="info-item">
                        <i class="el-icon-news icon"/><span>{{ item.plateNumber }}</span>
                    </div>
                    <div class="info-item">
                        <i class="el-icon-tickets icon"/><span>{{ item.boxCode }}</span>
                    </div>
                    <div class="info-item">
                        <i class="el-icon-location-outline icon"/><span>{{ item.address }}</span>
                    </div>
                    <div class="info-item">
                        <i class="el-icon-time icon"/>
                        <span v-show="item.noUseTime!=0">{{ item.noUseTime }} </span>
                        <span> {{ item.ifRiding ? '' : '未使用' }}</span>
                    </div>
                    <!--<div class="info-item">-->
                        <!--<i class="el-icon-bell icon"/><span>{{ item.ifRiding ? '骑行中' : '未使用' }}</span>-->
                    <!--</div>-->
                </el-card>
            </div>

            <div class="info-list" v-show="!isInfo">
                <div class="back-head">
                    <i class="el-icon-close" style="cursor: pointer" @click="isInfo=true"/>
                    <el-tabs v-model="listQuery.parkType" @tab-click="handleClick">
                        <el-tab-pane label="还车点" name="Permit"></el-tab-pane>
                        <el-tab-pane label="骑行区" name="RidingCanton"></el-tab-pane>
                        <el-tab-pane label="禁停区" name="Forbid"></el-tab-pane>
                    </el-tabs>

                    <div class="filter-container">
                        <el-input :placeholder="`请输入${typeText}`" v-model="listQuery.keyword" size="mini" class="inp">
                            <el-button slot="append" icon="el-icon-search" class="inp-btn" @click="handleClick"></el-button>
                        </el-input>
                        <el-button size="mini" type="primary" style="padding: 7px 8px;" @click="addPart">添加{{ typeText }}</el-button>
                    </div>
                </div>
                <div class="dot-list">
                    <div class="dot-item" v-for="(item, i) in parkList" :key="i" @click="showPartDot(item)">
                        <div class="dot-main">
                            <div class="title">{{ item.name }}</div>
                            <div class="time">{{ item.createTime }}</div>
                        </div>
                        <div class="dot-main">
                            <div class="unlock">
                                <span>是否开启</span>
                                <div class="bar" :class="{'lock':!item.ifDisenable}" @click.stop="clickChange(item)">
                                    <div class="dot"></div>
                                </div>
                            </div>
                            <div class="action">
                                <span @click="updatePart(item)">编辑</span>
                                <span @click="delPark(item.id, i)">删除</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <park-dot ref="ParkDot" :action="action" :type="typeText"></park-dot>
    </div>
</template>

<script>
import ParkDot from "./parkDot"
import api from  "@/api/bike"
export default {
    components: {ParkDot},
    name: "side-list",
    props: {
        parkList: Array,
        bikeList: Array
        // type: {
        //     type: String,
        //     default: 'check'
        // },
    },
    data() {
        return {
            isShow: true,  
            isInfo: true,
            listQuery: {
                parkType: 'Permit',
                keyword: undefined
            },
            action: 'add',
            barSwitch: false,
            typeText: '还车点'
        }
    },
    watch: {
        isInfo(cur) {
            this.$emit('isShowPart', cur)
        },
        'listQuery.parkType'(cur) {
            if(cur=='Permit') { this.typeText = '还车点' }
            if(cur=='RidingCanton') { this.typeText = '骑行区' }
            if(cur=='Forbid') { this.typeText = '禁停区' }
        }
    },
    methods: {
        clickBike(data) {
            this.$emit('showInfo', data)
        },
        clickListSwitch() {
            this.isInfo = !this.isInfo
        },
        clickChange(data) {
            // console.log(data, bol)
            api.isParkFence({
                id: data.id,
                ifDisenable: data.ifDisenable
            }).then(res => {
                // console.log(res)
                this.$message({
                    type: 'success',
                    message: !data.ifDisenable ? '启动成功!' : '关闭成功!'
                })
                // 用id遍历列表 找到json里面要控制的对象
                this.parkList.forEach((item, i) => {
                    if(item.id == data.id) this.parkList[i].ifDisenable = !data.ifDisenable
                })
                this.$emit('isOpenPart', data)
            }).catch(err => {
                console.log(err)
            })
        },
        addPart() {
            this.action = 'add'
            this.$refs.ParkDot.open(this.listQuery.parkType)
        },
        updatePart(data) {
            this.action = 'edit'
            this.$refs.ParkDot.open(data)
        },
        delPark(id, index) {
            this.$confirm('你确定要删除这个区域吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                // center: true
            }).then(() => {
                api.deleteParkFence({ id }).then(res => {
                    // console.log(res)
                    this.parkList.splice(index, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.$emit('removePark', index)
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        showPartDot(dot) {
            // if(dot.ifDisenable) this.$emit('viewPart', dot)
            this.$emit('showPartInfo', dot)
        },
        handleClick(tab, event) {
            this.$bus.$emit('refreshPark', this.listQuery)
        }
    },
    mounted() {

    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.side-list {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .5s;
    .info-list {
        width: 300px;
        height: 100%;
        overflow-y: auto;
        background-color: rgba(255,255,255,.9);
        font-size: 14px;
        .info-card {
            .rid-status {
                color: darkorange;
                position: absolute;
                right: 10px;
                top: 60px;
                font-size: 28px;
            }
            .info-item {
                display: flex;
                /*align-items: center;*/
                padding-bottom: 8px;
                cursor: pointer;
                .icon {
                    margin-right: 3px;
                    font-size: 16px;
                }
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        .back-head {
            padding: 10px;
            padding-bottom: 0px;
            position: relative;
            i {
                position: absolute;
                z-index: 9;
                top: 20px;
                right: 10px;
                font-size: 20px;
            }
            .inp {
                width: 180px;
            }
        }
        .dot-list {
            padding: 10px;
            .dot-item {
                padding: 10px 0;
                border-bottom: 1px solid rgba(0,0,0,.1);
                .dot-main {
                    display: flex;
                    div:first-child {
                        flex: 1;
                    }
                    .title {
                        cursor: pointer;
                        margin-bottom: 5px;
                        font-size: 16px;
                    }
                    .time {
                        font-size: 14px;
                        color: #999;
                    }
                    .unlock {
                        color: #666;
                        display: flex;
                        position: relative;
                        .bar {
                            width: 30px;
                            height: 12px;
                            border-radius: 15px;
                            background-color: rgba(64,158,255, .5);
                            margin-left: 10px;
                            position: relative;
                            top: 2px;
                            transition: all .2s;
                            cursor: pointer;
                            .dot {
                                width: 16px;
                                height: 16px;
                                border-radius: 100%;
                                background-color: rgba(64,158,255, 1);
                                position: absolute;
                                left: 14px;
                                top: -2px;
                                transition: all .2s;
                            }
                        }
                        .lock {
                            background-color: rgba(120,120,120, .5);
                            .dot {
                                left: 0px;
                            }
                        }
                    }
                    .action {
                        color: #409EFF;
                        position: relative;
                        top: 2px;
                        span {
                            cursor: pointer;
                        }
                        span:first-child {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
    .list-switch {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #fff;
        position: absolute;
        top: 10px;
        left: -50px;
        transition: all .5s;
        cursor: pointer;
    }
    .show-switch {
        width: 15px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: -15px;
        margin-top: -25px;
    }
}
</style>
<style>
    .side-list .el-card__body {
        padding: 15px;
    }
</style>
