<template>
<div>
    <common ref="common" @asynCallBack="asynCallBack"></common>

    <top-header :pageTitle="pageTitle" v-if="step==3"></top-header>
    <div class="mui-content" v-if="step==3">
        <div class="mui-content-padded vongi-editme vongi-qingjiadt">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>业主姓名</label>
                    <span>{{info.applicationName}}</span>
                </div>
                <div class="mui-input-row">
                    <label>手机号码</label>
                    <span>{{info.telephone}}</span>
                </div>

                <div class="mui-input-row">
                    <label>车牌号</label>
                    <span>{{info.carNum}}</span>
                </div>
            </form>
        </div>
        <div class="mui-content-padded vongi-editme vongi-qingjiadt">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>申请车位</label>
                    <span>{{info.parkingName}}</span>
                </div>
                <div class="mui-input-row">
                    <label style="width:40%">租用起止时间</label>
                    <span style="width:60%">{{info.rentTime}}</span>
                </div>
                <div class="mui-input-row">
                    <label>租用时长</label>
                    <span>{{info.contractDuration}}</span>
                </div>

            </form>
        </div>

        <div class="mui-content-padded vongi-editme vongi-qingjiadt">
            <form class="mui-input-group">

                <div class="mui-input-row">
                    <label>申请时间</label>
                    <span>{{info.applicationTime}}</span>
                </div>

                <div class="mui-input-row">
                    <label>状态</label>
                    <span>{{info.statusN}}</span>
                </div>
            </form>
        </div>

    </div>
    <top-header :pageTitle="pageTitle" v-if="step==1"></top-header>
    <div class="mui-content" v-if="step==1">
        <div class="mui-content-padded vongi-qingjiadt vongi-editme">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>业主姓名</label>
                    <span>{{person_data.name}}</span>
                </div>
                <div class="mui-input-row">
                    <label>手机号码</label>
                    <span>{{person_data.phone}}</span>
                </div>

                <div class="mui-input-row">
                    <label>车牌号</label>
                    <input type="text" class="mui-input-clear" v-model="detail.carNum" placeholder="输入车牌号">
                </div>
            </form>
        </div>
        <div class="mui-content-padded vongi-qingjiadt vongi-editme">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>选择车位</label>
                    <button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%;color: red" v-if="!number" @click="selectCar" >暂无车位</button>

                    <button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%" @click="selectCar" v-if="number" v-text="carName">请选择</button>
                </div>
                <div class="mui-input-row">
                    <label>开始时间</label>
                    <button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%" @click="selectTime" v-text="detail.startTime?detail.startTime:'请选择'"></button>
                </div>
                <div class="mui-input-row">
                    <label>租用时长</label>
                    <input type="number" class="mui-input-clear" style="width: 50%" v-model="detail.num" placeholder="租用时长">

                    <span style="width: 10%">{{unitName}}</span>

                </div>

            </form>
        </div>
    </div>
    <div class="fyy-footer" v-if="step==1">
        <div class="bindfyy-btn"><button class="mui-btn mui-btn-primary " v-if="issubmit" @click="submit()">提交</button></div>
    </div>

    <header class="mui-bar mui-bar-nav" v-show="step==2">
        <a class="  mui-icon mui-icon-left-nav mui-pull-left" @click="step=1"></a>
        <h1 class="mui-title">车位选择</h1>
    </header>
    <div class="mui-content margin60" v-show="step==2">
        <div class="mui-content-padded">
            <viewer :images="picList">

                <div id="slider" class="mui-slider">
                    <div class="mui-slider-group">

                        <div class="mui-slider-item" v-for="src in picList">
                            <a>
                                <img :src="src" key="src" height="100px">
                            </a>
                        </div>

                    </div>
                    <div class="mui-slider-indicator">
                        <template v-for="(mod,index) in picList">
                            <div class="mui-indicator" :class="index==0?'mui-active':''"></div>
                        </template>
                    </div>
                </div>
            </viewer>

        </div>
        <div class="vongi-meform-pho vongi-car">
            <h5>车位筛选</h5>
            <ul class="mui-table-view mui-table-view-radio flew" v-for="(cen,i) in listcen">
                <span v-show="false">{{tempi=0}}</span>

                <template v-for="m in map.get(cen)">

                    <li class="mui-table-view-cell " @click="ckbtn(m,i,cen)" v-if="m.enableLease&&(m.number==null||m.number!=0)" :class="m.show?'mui-selected':''">
                        <span v-show="false">{{tempi=1}}</span>
                        <a>{{m.parkingName}}</a>
                        <span v-if="false&&m.number" style="font-size: 1px;color: red;position: relative;top: -30px;left: 27px;">({{m.number}})</span>
                    </li>

                </template>
                <li v-if="tempi==0">
                    <a>
                        当前选择下无车位， 请选择其他
                    </a>
                </li>
            </ul>

        </div>
    </div>
    <div class="vongi-cashier-btn-row" v-show="step==2">
        <div class="vongi-cashier-btn-white">
            <span>当前选择：{{selectName}}</span>
            <div class="vongi-cashier-btn" v-if="parkingId" @click="okCar">确认选择</div>
        </div>
    </div>
    <loading :visible="isLoading"></loading>

</div>
</template>

<script>
require('$project/assets/js/mui.picker.min.js');

import * as API from '@/apis/Master/Property/car'
import Common from '$project/components/Common.vue'
import Loading from '$project/components/Loading.vue'
import TopHeader from '$project/components/TopHeader.vue'
import {
    mapGetters,
    mapMutations
} from 'vuex'
import {

} from '$project/utils'
export default {
    name: 'MasterPropertyCar',
    components: {
        Common,
        Loading,
        TopHeader
    },
    data() {
        return {
            pageTitle: '车位申请',
            step: '1',
            info: {},
            detail: {
                carNum: '',
                parkingId: '',
                startTime: '',
                num: '',
                unitId: '',
            },
            issubmit: true,
            carName: "请选择",
            unitName: '月',
            map: null,
            picList: null,
            isLoading: false,
            listcen: [],
            listcenindex: 0,
            selectName: '',
            parkingId: '',
            number:0,

        }
    },
    created() {
        this.map = new Map();
    },
    methods: {
        okCar() {
            this.detail.parkingId = this.parkingId;
            this.carName = this.selectName
            this.detail.parkingName = this.selectName
            this.step = '1';
        },
        ckbtn(m, i, cen) {

            this.listcen.splice(i + 1, this.listcen.length - i + 1);
            if (m.hasNext) {
                this.parkingId = "";
                this.getSelect(m.id);
            } else {
                this.parkingId = m.id;
            }

            m.show = true;
            this.selectName = "";
            for (var str in this.listcen) {

                if (eval(str + "+1") == this.listcen.length) {
                    if (str != "0") {
                        this.selectName += "-";
                    }
                    this.selectName += m.parkingName;
                    break;
                }
                var k = this.listcen[str]
                var k2 = this.listcen[eval(str + "+1")]

                var list = this.map.get(k);
                for (var i in list) {
                    var mod = list[i]
                    if (mod.id == k2) {
                        if (str != "0") {
                            this.selectName += "-";
                        }
                        this.selectName += mod.parkingName;

                    }
                }

            }
        },
        //表单校验
        checkForm() {

            if (!this.detail.unitId) {
                mui.toast('未配置租用单位，请联系管理员');
                return false;
            } else if (!this.detail.carNum) {
                mui.toast('请输入车牌号');
                return false;
            } else if (!this.detail.parkingId) {
                mui.toast('请选择租用车位');
                return false;
            } else if (!this.detail.startTime) {
                mui.toast('请输入开始时间');
                return false;
            } else if (!this.detail.num) {
                mui.toast('请输入租用时长');
                return false;
            } else if (!(/(^[1-9]\d*$)/.test(this.detail.num))) {
                mui.toast('请输入正整数');
                return false;
            } else {
                return true;
            }
        },
        submit() {
            if (this.checkForm()) {
                this.isLoading = true;

                API.submitParkingApply(this.detail).then(response => {
                    this.isLoading = false;
                    var _this = this;

                    mui.alert('您的车位申请信息已提交，请等待物业确认。', ' ', function () {
                        // _this.$router.push({
                        // 	name: 'Master',
                        // })
                        _this.getDetail(false)
                    });

                }).catch(error => {
                    this.isLoading = false;
                    mui.toast(error);
                })
            }

        },

        //选择时间
        selectTime() {
            var _this = this;

            var picker = new mui.DtPicker({
                "type": "date",
                "beginYear": 2020,
                "endYear": 2040,
                "beginDate": new Date(),

            });
            picker.show(function (rs) {
                _this.detail.startTime = rs.text;
            });
        },
        //选择停车位
        selectCar() {
            if(!this.number){
                var _this =this;
                var btnArray = ['返回', '联系物业'];
                 mui.confirm('抱歉！您的小区当前暂无车位可供租用，如有疑问请联系物业', '提示', btnArray, function(e) {
                    if (e.index == 1) {
                        _this.$router.push({
                            name: 'MasterPropertyContact',
                            query: {

                            }
                        })
                    }
                })
            }else{
                this.step = 2;
                if (!this.picList) {
                    this.getPic();
                }
            }
        },
        //获取详情
        getPic() {

            API.parkingPicList().then(response => {
                this.picList = response.list;
                this.$nextTick(() => {
                    var gallery = mui('.mui-slider');
                    var slider = gallery.slider({
                        interval: 3000, //自动轮播周期，若为0则不自动播放，默认为0；
                        bounce: true //是否启用回弹
                    });

                })

            }).catch(error => {
                mui.toast(error);
            })

            this.getSelect('');

        },

        //获取详情
        getSelect(val) {

            var list = this.map.get(val)
            var newlist = [];
            for (var i in list) {
                var mod = list[i];
                mod.show = false
                newlist.push(mod);
            }
            this.map.set(val, newlist)

            if (list) {
                this.listcen.push(val);
            } else {
                this.isLoading = true;

                API.parkingList({
                    id: val
                }).then(response => {
                    this.map.set(val, response.list)
                    this.isLoading = false;

                    this.listcen.push(val);

                }).catch(error => {
                    this.isLoading = false;
                    console.log(error)
                })

            }

        },

        //获取详情
        getDetail(bl) {
            this.isLoading = true;

            API.parkingUnit().then(response => {

                this.isLoading = false;
                this.number=response.number
                if (response.id) {
                    this.issubmit = false;
                    this.isLoading = true;

                    API.ParkingApplicationDetail({
                        id: response.id
                    }).then(info => {
                        this.isLoading = false;
                        this.step = 3;
                        this.info = info;
                    }).catch(error => {
                        this.isLoading = false;
                        mui.toast(error);
                    })
                    if(bl){
                        mui.toast("您已有一条待处理的车位申请记录");
                    }
                }
                if (!response.unit) {
                    mui.toast('未配置租用单位，请联系管理员');
                } else {
                    this.detail.unitId = response.unit.id;
                    this.unitName = response.unit.name;
                }
            }).catch(error => {
                this.isLoading = false;
                mui.toast(error);
            })
        },
        asynCallBack() {},
    },
    mounted() {

        this.getDetail(true);
    },

    destroyed() {

    },
    computed: {
        ...mapGetters({
            openId: 'wx_openid',
            token: 'token',
            person_data: 'person_data',
            person_popedom: 'person_popedom',
        })
    }
}
</script>

<style src="$project/assets/css/mui.picker.min.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>

</style>
