<template>
  <div>
    <ul class="park-wrap">
      <li class="park-main" v-for="(i, index) in list">
        <div class="park-top" @click="parkInfo(i)">
          <div>
            <p style="margin-bottom: 6px">
              <span class="park-status bgcz" v-if="i.idleberths>10">充足</span>
              <span class="park-status bgjz" v-else-if="i.idleberths>0&&i.idleberths<=10">紧张</span>
              <span class="park-status bgtm" v-else-if="i.idleberths==0&&i.totalberths&&i.totalberths!=0&&i.totalberths!='0'">停满</span>
              <span class="park-status bgcz" v-else>充足</span>
              {{ i.name}}</p>
            <p style="margin-bottom: 6px">
              当前车位数: <span class="park-num-color">{{ i.idleberths }}</span> / {{ i.totalberths }}
            </p>
            <p style="color: #ccc">{{ i.address }}</p>
          </div>
        </div>
        <div class="park-bottom">
          <div style="flex: 1">
            距离您:{{ toDecimal2((parseFloat(i.distance)*0.001)) }}KM
          </div>
          <p @click="gaodec(i)">导航</p>
        </div>
      </li>
    </ul>

    <popComponents
      :latitude="latitude"
      :longitude="longitude"
      :popupFlag="popupVisible" :parkName="name" :idleberths="idleberths"  :juli="juli" :num="n">

    </popComponents>

  </div>
</template>

<script>

import { queryParkingLots } from '@/api/map/map.js'
import popComponents from './popComponents.vue'

export default {
  name: 'parkList',
  components:{
    popComponents
  },
  data() {
    return {
      lat: '',
      lng: '',
      list: [],
      popupVisible: false,
      n:10,
      setTimeoutTimer:'',
      latitude:'',
      longitude:'',
      name:'',
      idleberths:'',
      juli:''
    }
  },
  created() {
    this.lat = this.$route.query.lat
    this.lng = this.$route.query.lng
    this.queryParkingLots()
  },
  methods: {
    queryParkingLots() {  // 获取列表
      var salt = this.$utils.myCommonSalt(32);
      var jsondata = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: "md5",
        latitude: this.lat,
        longitude: this.lng,
        type: '02',
        limit: '50',
        isShowOther: '0'
      }
      jsondata.sign = this.$utils.signObject(jsondata)

      // jsondata.sign = md5sign
      queryParkingLots(jsondata).then(response => {
        this.list = response.data
        console.log(this.list)
      })
    },

    // 进入列表详情
    parkInfo: function(i){
      console.log(i)
      this.$router.push({
        name:'parkinfo',
        query: {
          idleberths:i.idleberths,
          name:i.name,
          address:i.address,
          julis:this.toDecimal2((parseFloat(i.distance)*0.001)),
          guiz:JSON.stringify(i.chargeDetail),
          longitude:i.longitude,
          latitude:i.latitude,
          pklNo:i.pklNo
        }
      })
    },

    gaodec: function (i) {
      let me = this
      this.latitude = i.latitude
      this.longitude = i.longitude
      this.name = i.name
      this.idleberths = i.idleberths
      this.juli = this.toDecimal2((parseFloat(i.distance)*0.001))
      this.popupVisible = true
      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.latitude+","+this.longitude+"&title=目标地址&content="+this.name+"&output=html&src=webapp.baidu.openAPIdemo"
          return
        }
        me.n --
        console.log(me.n)
      },1000)
    },

    toDecimal2: function (x) {
      var f = parseFloat(x);
      if (isNaN(f)) {
        return false;
      }
      var f = Math.round(x * 100) / 100;
      var s = f.toString();
      var rs = s.indexOf('.');
      if (rs < 0) {
        rs = s.length;
        s += '.';
      }
      while (s.length <= rs + 2) {
        s += '0';
      }
      return s;
    }
  }
}
</script>

<style scoped lang="scss">
  .park-wrap > li {
    height: 130px;
    padding: 10px 0 0 10px;
    margin-bottom: 20px;
    background: #fff url("../../assets/images/map/pinfo.png") right 10px top 10px no-repeat;
    background-size: 37% 80px;
  }

  .park-main {
  }

  .park-left {
    /*flex: 1;*/
    /*padding: 10px;*/
  }

  .park-status {
    padding: 2px 8px;
    color: #FFF;
    border-radius: 4px;
  }

  .bgcz{
    background: #07b530;
  }
  .bgjz{
    background: #FC3817;
  }
  .bgtm{
    background: #f00;
  }

  .park-num-color {
    color: #4caf50;
  }

  .park-bottom {
    margin-top: 20px;
    display: flex;
    color: #0d72e2;
    p {
      width: 37%;
      text-align: center;
    }
  }
</style>
