<template>


<!-- 在 index.html 中 引入 百度以下 文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图密匙"></script> -->
    <div class="vant">
        <h1 class="animated tada">vant UI 库</h1>

        <van-field
            v-model="LocationCity"
            disabled
            right-icon="location"
            placeholder="点击获取当前位置"
            @click="getlocation"
        />



        <van-button class="animated tada" @click="demo"  type="info">提交</van-button>

        <!-- 遮罩层 -->
        <van-overlay :show="overlayshow" >
        <div class="wrapper" @click.stop>
            <div class="block" >
                <!--环形进度条-->
                        <van-circle
                            v-model="currentRate"
                            :rate="rate"
                            :color="gradientColor"
                            :size="180"
                            :speed="50"
                            text="提交中"
                            />
                <!--环形进度条-->
            </div>
        </div>
        </van-overlay>
        <!-- 遮罩层 -->

    </div>
</template>
<script>
import Vue from "vue";
import { Toast } from 'vant';

Vue.use(Toast);
export default {
    name:"Vant",
    data(){
        return{
            overlayshow: false,
            currentRate: 0,
            rate:0,
            gradientColor: {
                '0%': '#3fecff',
                '100%': '#6149f6',
            },
            LocationCity:""
            
        }
    },
    methods:{
       demo:function(){
           this.overlayshow = true;

            //进度条数字递增
            
            var i = parseInt(Math.random()*10+1);
            var num = parseInt(100/i);
            console.log(i);
            var jishi = setInterval(() => {
                 this.rate = this.rate + num;
                i--;
                if( i == 0){
                    // 使用 axios 提交数据 ，成功后，隐藏 模态框
                    this.overlayshow = false;
                    clearInterval(jishi);
                    
                }
            }, 1000);

       },

    //百度定位
       getlocation:function(){
         const geolocation = new BMap.Geolocation();
        var _this = this;
         if( _this.LocationCity.length == 0){
               Toast.loading({
                message: '定位中...',
                forbidClick: true,
                loadingType: 'spinner'
            }); 
        }
        geolocation.getCurrentPosition(function getinfo(position){
        let city = position.address.city;             //获取城市信息
        let province = position.address.province;     //获取省份信息  
        let district =  position.address.district     //获取县或区信息    
        _this.LocationCity = province+" "+city+" "+district;

         }, function(e) {
             _this.LocationCity = "定位失败"
        }, {provider: 'baidu'});  


       }
      
    }
}
</script>



<style scoped>
     .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 200px;
    height: 200px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
  }
</style>