<template>
    <div class="zj-main">
        <mt-header :title="headname">
            <span @click="gotoback" slot="left">
                <mt-button icon="back"></mt-button>
            </span>
        </mt-header>
        <div class="addAddress-edit-main">
            <div class="block">
                <mt-field label="收货人" placeholder="请输入收货人" :value="buyerNickName" v-model="buyerNickName"></mt-field>
                <mt-field label="联系电话" placeholder="请输入联系电话" :value="buyerMobile" v-model="buyerMobile"></mt-field>
                <mt-cell title="所在地区" is-link :value="selectArea" @click.native="popupvisible=true"></mt-cell>
                <textarea placeholder="请输入详细地址" class="addAddress-textarea" :value="detailAddress"
                          v-model="detailAddress"></textarea>
            </div>
            <div class="block defaultaddAddress">
                <mt-cell title="设为默认地址">
                    <mt-switch v-model="selectswitch"></mt-switch>
                </mt-cell>
            </div>
            <mt-popup v-model="popupvisible" position="bottom" style="width:100%;display:none">
                <mt-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="5" :showToolbar="true">
                    <span @click="popupvisible=!popupvisible">取消</span><span @click="Determine">确定</span>
                </mt-picker>
            </mt-popup>
        </div>
        <div class="addAddress-edit-bottom">
            <!--删除按钮在编辑地址页面显示-->
            <button class="zj-bottom-btn addAddress-edit-btn del" @click="delmessage">删除</button>

            <button class="zj-bottom-btn addAddress-edit-btn" @click="editAddress">保存</button>
        </div>

    </div>
</template>
<script type="text/ecmascript-6">
    import addressItem from '../address/addressItem.vue'
    import {Popup, MessageBox, Toast} from 'mint-ui';
    import {address}  from '../../utils/commonUtil';
    import {getselectAddress, posteditAddress, deleteAddress, postaddAddress} from '../../vuex/actions'
    export default {
        methods: {
            gotoback(){
                this.$router.go(-1)
            },
            onAddressChange(picker, values) {
                picker.setSlotValues(1, Object.keys(address[values[0]][0]));
                picker.setSlotValues(2, address[values[0]][0][values[1]]);
                this.addressProvince = values[0];
                this.addressCity = values[1];
                this.addressRegion = values[2];
            },
            /* 切换省市区 */
            Determine(){
                this.popupvisible = false;
                this.selectArea = this.addressProvince + ' ' + this.addressCity + ' ' + this.addressRegion;
            },
            /*删除地址*/
            delmessage(){
                var self = this;
                MessageBox.confirm('确定删除该地址?', '提示').then(action => {
                    self.deleteAddress(self.$route.params.Id).then(function () {
                        Toast({
                            message: '删除成功',
                            position: 'bottom',
                            duration: 5000
                        });
                        self.$router.go(-1)
                    });
                });
            },
            /*保存地址*/
            editAddress(){
                console.log(this.detailAddress);
                var data = {
//                    buyerAddressId       : this.$route.params.Id,     // 地址id
                    buyerNickName: this.buyerNickName,
                    buyerMobile: this.buyerMobile,      // 买家电话
                    city: this.addressCity,                       // 城市Id
                    province: this.addressProvince,                    // 省份ID
                    area: this.addressRegion,                        // 区县ID
                    detailAddress: this.detailAddress,           // 详细地址
                    isDefault: this.selectswitch ? 1 : 0,                           // 是否设为默认
                };
                if (this.$route.params.teype == 'edit') {
                    data.buyerAddressId = this.$route.params.Id;
                    this.posteditAddress(data).then(function () {
                        Toast({
                            message: '修改地址成功',
                            position: 'bottom',
                            duration: 5000
                        });
                        self.$router.go(-1)

                    });
                } else {
                    this.postaddAddress(data).then(function () {
                        Toast({
                            message: '新增地址成功',
                            position: 'bottom',
                            duration: 5000
                        });
                        self.$router.go(-1)
                    });
                }

            },
            selectArea(){
                if (this.$route.params.teype == 'edit') {
                    this.selectArea = this.selectAddress.provinceName + ' ' + this.selectAddress.cityName + ' ' + this.selectAddress.areaName
                } else {
                    this.selectArea = '请选择'
                }

            },
            buyerNickName(){
                if (this.$route.params.teype == 'edit') {
                    this.buyerNickName = this.selectAddress.buyerNickName
                } else {
                    this.buyerNickName = ''
                }
            },
            buyerMobile(){
                if (this.$route.params.teype == 'edit') {
                    this.buyerMobile = this.selectAddress.buyerMobile
                } else {
                    this.buyerMobile = ''
                }
            },
            detailAddress(){
                if (this.$route.params.teype == 'edit') {
                    this.detailAddress = this.selectAddress.detailAddress
                } else {
                    this.detailAddress = ''
                }
            },
            addressProvince(){
                if (this.$route.params.teype == 'edit') {
                    this.addressProvince = this.selectAddress.provinceName
                } else {
                    this.addressProvince = '北京'
                }
            },
            addressCity(){
                if (this.$route.params.teype == 'edit') {
                    this.addressCity = this.selectAddress.cityName
                } else {
                    this.addressCity = '北京'
                }
            },
            addressRegion(){
                if (this.$route.params.teype == 'edit') {
                    this.addressRegion = this.selectAddress.areaName
                } else {
                    this.addressRegion = '海淀'
                }
            }


        },
        data() {
            return {
                buyerNickName: '',
                buyerMobile: '',
                detailAddress: '',
                selectArea: '',
                popupvisible: false,
                selectswitch: false,
                addressSlots: [
                    {
                        flex: 1,
                        values: Object.keys(address),
                        className: 'slot1',
                        textAlign: 'center'
                    }, {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                    }, {
                        flex: 1,
                        values: Object.keys(address['北京'][0]),
                        className: 'slot3',
                        textAlign: 'center'
                    }, {
                        divider: true,
                        content: '-',
                        className: 'slot4'
                    }, {
                        flex: 1,
                        values: ['海淀', '东城'],
                        className: 'slot5',
                        textAlign: 'center'
                    }
                ],
                addressProvince: '',
                addressCity: '',
                addressRegion: '',
            }
        },
        components: {
            addressItem

        },

        vuex: {
            getters: {
                selectAddress: ({addressData}) => {
                    return addressData.selectAddress;
                },
            },
            actions: {
                getselectAddress,
                posteditAddress,
                deleteAddress,
                postaddAddress,

            }
        },
        computed: {
            headname(){
                if (this.$route.params.teype == 'edit') {
                    return '编辑地址'
                } else {
                    return '新增地址'
                }
            }
        },

        beforeRouteEnter (to, from, next){
            next(vm => {
                if (vm.$route.params.teype == 'edit') {
                    vm.getselectAddress().then(function () {
                        vm.buyerNickName();
                        vm.selectArea();
                        vm.buyerMobile();
                        vm.detailAddress();
                        vm.addressProvince();
                        vm.addressCity();
                        vm.addressRegion();

                    });
                } else {
                    vm.buyerNickName();
                    vm.selectArea();
                    vm.buyerMobile();
                    vm.detailAddress();
                    vm.addressProvince();
                    vm.addressCity();
                    vm.addressRegion();
                }


            });
        },
        beforeRouteLeave (to, from, next){

            next();

        }
    }
</script>