<template>
  <div style="width: 100%;height: 100%">

    <div class="pitop">
      <span>剩余&nbsp;&nbsp;<span class="imagfz">{{ $route.query.idleberths }}</span>&nbsp;&nbsp;空位</span>
      <!--<span>暂未开通停车场</span>-->
    </div>
    <div class="pmiddle">
			<span>
				<div id="pname">{{ $route.query.name }}</div>
				<div>
					<span id="paddress">{{ $route.query.address }}</span>
					<span class="flan" id="distace">距离您 {{ $route.query.julis }}km</span>
				</div>
			</span>
      <span class="daohang" @click="gaodec">
				<div class="icon iconfont flan">&#xe6ce;</div>
				<div class="flan">导航</div>
			</span>
    </div>
    <div class="shoufei">
      <div class="sftip">收费详情</div>
      <div id="chargeDetail">
        <div v-for="item in list">{{ item.standard }}：{{ item.standardInfo }}</div>
      </div>
    </div>

    <popComponents
      :latitude="$route.query.latitude"
      :longitude="$route.query.longitude"
      :popupFlag="popupVisible" :parkName="$route.query.name" :idleberths="$route.query.idleberths"  :juli="$route.query.julis" :num="n">

    </popComponents>

  </div>
</template>

<script>

import popComponents from './popComponents.vue'
export default {
  name: 'parkinfo',
  components:{
    popComponents
  },
  data() {
    return {
      list: [],
      popupVisible: false,
      n:10,
      setTimeoutTimer:'',
    }
  },
  created() {
    this.list = JSON.parse(this.$route.query.guiz)
    console.log(this.list)
  },
  methods:{
    gaodec: function () {
      let me = this
      this.n = 10
      this.popupVisible = true
      this.setTimeoutTimer = setInterval(function () {
        if(me.n == 0){
          window.location.href = "http://api.map.baidu.com/marker?location="+this.$route.query.latitude+","+this.$route.query.longitude+"&title=目标地址&content="+this.$route.query.name+"&output=html&src=webapp.baidu.openAPIdemo"
          return
        }
         me.n --
        console.log(me.n)
      },1000)
    },
  }
}
</script>

<style scoped lang="scss">
  .pitop {
    width: 100%;
    height: 30%;
    position: relative;
    font-size: 13px;
    background: url('../../assets/images/map/pinfo.png') no-repeat center;
    background-size: 100% 100%;
  }

  .pitop > span {
    position: absolute;
    bottom: 15px;
    left: 10px;
    z-index: 12;
    color: #fff;
  }

  .pitop .imagfz {
    font-size: 18px;
  }

  .pmiddle {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-size: 15px;
    background: #fff;
    float: left;
    margin-bottom: 15px;
  }

  .pmiddle > span {
    display: inline-block;
    float: left;
  }

  .pmiddle > span:first-child {
    width: 80%;
  }

  .pmiddle > span:first-child > div:last-child {
    font-size: 12px;
    margin-top: 8px;
  }

  .pmiddle > span:last-child {
    width: 20%;
    text-align: center;
  }

  .pmiddle > span:last-child > div:first-child {
    font-size: 25px;
  }

  .pmiddle > span:last-child > div:last-child {
    font-size: 13px;
  }

  .flan {
    color: #0D9BF2;
  }

  .shoufei {
    width: 100%;
    float: left;
  }

  .shoufei .sftip {
    padding: 10px;
    color: #ACB3BB;
    border-bottom: 1px solid #EFEFF4;
  }

  .shoufei > div:last-child {
    font-size: 13px;
  }

  .shoufei > div:last-child > div {
    padding: 5px 10px;
    border-bottom: 1px solid #EFEFF4;
  }


</style>
