<template>
<view>
  <cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
    <block slot="backText">返回</block>
    <block slot="content">油站地图</block>
  </cu-custom>
  <view>
    <view class="cu-bar search bg-white">
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input confirm-type="search" @input="onInput" @confirm="onSearch" v-model="siteName" :adjust-position="false" type="text" placeholder="加油站名称" />

      </view>
      <view class="action" @tap="loadMore">
        更多
      </view>
    </view>
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map style="width: 100%; height:100vh;" :controls="controls" :polyline='polyline' :scale="scale" :latitude="latitude" @labeltap='makerTap' @markertap="makerTap" :longitude="longitude" :markers="covers">
        </map>
      </view>
    </view>

  </view>
  <view class="cu-modal  bottom-modal" :class="showSite">
    <view class="cu-dialog" @tap.stop="">
      <view class="cu-bar bg-white justify-end">
        <view class="content"> {{siteInfo.siteName?siteInfo.siteName:'油站名称'}}</view>
        <view class="action" @tap="showSite=''">
          <text class="cuIcon-close text-red"></text>
        </view>
      </view>
      <view class="flex-sub">
        <view class="cu-list menu  padding-sm  radius my-shadow  bg-white yu-card-xuan">
          <view class="cu-item ">
            <view class="content" @tap="toDetail(siteInfo.siteId)">
              <view class="strong padding-bottom-xs">
                {{siteInfo.siteName?siteInfo.siteName:'油站名称'}}
              </view>
              <view class="text-gray  flex">
                <view class="text-bold  yellow-oil; text-xl padding-right-xs">
                  {{siteInfo.oilProductCode}}
                </view>
                <view class="oil-main-color text-xl text-bold padding-right-xs">

                  ￥{{siteInfo.sitePrice|moneyFormat}}

                </view>
                <view class="">
                  <text class="cu-tag   oil-tag radius  text-xs" v-if="siteInfo.oilSitePrice - siteInfo.sitePrice>0">省￥{{(siteInfo.oilSitePrice - siteInfo.sitePrice)|moneyFormat}}</text>
                </view>

                <view class="text-cut padding-left-sm text-lg">

                  <text class="text-delete color-333 text-sm padding-right-xs">

                    ￥{{siteInfo.oilSitePrice|moneyFormat}}/L

                  </text>

                  <!-- 	<my-icon iconName="￥.png" class="padding-right-xs icon-rectangle"></my-icon>

<my-icon iconName="f.png" class="padding-right-xs "></my-icon> -->

                </view>

              </view>
              <view class="font-12 text-left color-999 site-label text-cut">
                {{siteInfo.address?siteInfo.siteName:'油站地址'}}
              </view>
            </view>
            <view class="action " @tap="openMap">
              <view class="oil-main-color">
                <my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
                {{siteInfo.juli|distanceFilter}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
import oilSiteApi from '@/api/oil-site.js'

export default {
  data() {
    return {
      siteInfo: {},
      showSite: '',
      imgUrl: this.global.imgURL,
      siteList: [],
      InputBottom: 0,
      show: false,
      siteCount: 1,
      currentPage: 1,
      isLoadMore: false, //是否加载中
      baseDriver: uni.getStorageSync('baseDriver'),
      selLocation: {},
      title: 'map',
      location: uni.getStorageSync('location'),
      latitude: 39.909,
      longitude: 116.39742,
      covers: [],
      fillColor: '#ffd75e',
      borderColor: '#12A1DD',
      scale: 12, //地图层级
      controls: [{ //在地图上显示控件，控件不随着地图移动
        id: 1, //控件id
        position: { //控件在地图的位置
          left: 0,
          top: 15,
          width: 50,
          height: 50
        },
      }],
      polyline: [{ //指定一系列坐标点，从数组第一项连线至最后一项
        points: [],
        color: "#0000AA", //线的颜色
        width: 2, //线的宽度
        dottedLine: true, //是否虚线
        arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
      }],

    };
  },
  onLoad() {
    let that = this
    this.getSiteList()
  },
  filters: {
    distanceFilter(value) {
      if (value) {
        return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
      }
    },
    moneyFormat(value) {
      if (value) {
        return value.toFixed(2)
      } else {
        return '0.00'
      }
    }
  },
  methods: {
    getSiteInfo(id) {
      let data2 = {
        ...uni.getStorageSync('location'),
        siteId: id
      }
      oilSiteApi.getSiteDetails(data2).then(res => {
        if (res.code == 20000) {
          this.siteInfo = res.data
        }
      })
    },
    openMap() {
      let that = this
      uni.openLocation({
        latitude: this.siteInfo.latitude,
        longitude: this.siteInfo.longitude,
        name: this.siteInfo.siteName,
        address: this.siteInfo.address,
        scale: 12,
        success: function () {
          // // console.log('success')
        },
        fail: (error) => {
          // // console.log('error')
          // // console.log(error)
        },
        complete: () => {
          // // console.log('made')
        },

      })

      var map = uni.createMapContext('map')
      map.moveToLocation()
    },
    makerTap(e) {
      // // console.log(e)
      // // console.log(e.detail)
      this.showSite = ''
      if (e.detail.markerId !== 0) {
        const index = this.siteList.findIndex(s => s.markerId === e.detail.markerId)
        // // console.log(index)
        this.showSite = 'show'
        this.siteInfo = this.siteList[index]
      }
    },
    refreshLocation() {
      uni.getLocation({
        type: 'wgs84',
        success: (res) => {
          uni.setStorageSync('location', res)
          this.location = res
          this.addLocationCurrent()

        }
      });
    },
    addLocationCurrent() {
      this.covers.push({
        id: 0,
        latitude: this.location.latitude, //纬度
        longitude: this.location.longitude, //经度
        label: { //为标记点旁边增加标签
          content: "我的位置", //文本
          color: '#12A1DD', //文本颜色
          anchorX: 5, //label的坐标，原点是 marker 对应的经纬度
          anchorY: -10, //label的坐标，原点是 marker 对应的经纬度 
          bgColor: '#fff', //背景色
          padding: 5, //文本边缘留白
          borderWidth: 1, //边框宽度
          borderRadius: 10,
          borderColor: '#12A1DD', //边框颜色		          textAlign: 'right' //文本对齐方式。
        }
      })
    },
    loadMore() {
      this.getSiteList()
    },
    getSiteList() {
      this.refreshLocation()

      let data1 = {
        currentPage: this.currentPage,
        pageSize: 20,
        params: { //类型：Object  必有字段  备注：// 筛选对象
          sort: "juli", //类型：String  必有字段  备注：// 智能排序 ( price：价格最低 juli：距离最近 ) 默认距离排序
          siteName: this.siteName,
          ...uni.getStorageSync('location'),
          ...this.filterData
          // siteBrand: "", //   备注：// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
          // channelCode: "", //   备注：// 渠道编码 ( OIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
          // oilProductCode: "" //   备注：// 油号选择 ( 0# 92# 92#)
        }

      }
      oilSiteApi.getSiteList(data1).then(res => {
        if (res.code == 20000) {
          const tmp = res.data.list
          tmp.forEach(e => {
            e.markerId = this.siteCount++
          })
          this.siteList = this.siteList.concat(tmp)
          if (this.siteList.length != 0) {
            this.latitude = this.siteList[0].latitude
            this.longitude = this.siteList[0].longitude
          } else {
            uni.showToast({
              title: '没有查到相关油站',
              icon: 'none'
            })
            this.latitude = this.location.latitude
            this.longitude = this.location.longitude
          }

          tmp.forEach(item => {
            this.addCover(item)
          })
          if (tmp.length == 0) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
            // this.$emit('changeLoad', 'nomore', true)
            uni.showToast({
              title: '没有更多油站了',
              icon: 'none'
            })
          } else {
            this.currentPage++
            // this.$emit('changeLoad', 'load', false)

          }
        }
      })
    },
    onInput() {
      setTimeout(() => {
        this.currentPage = 1
        this.siteList = []
        this.covers = []
        this.getSiteList()
      }, 100)
    },
    onSearch() {
      this.currentPage = 1
      this.siteList = []
      this.covers = []
      this.getSiteList()
    },
    toDetail(id) {
      uni.navigateTo({
        url: `/BagStation/pages/stationDetail/stationDetail?siteId=${id}`,
        fail: (err) => {
          // // console.log(err)
        },
        success: () => {
          // // console.log('err')
        }
      })
    },
    addCover(site) {
      // 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
      this.covers.push({
        id: site.markerId,
        latitude: site.latitude, //纬度
        longitude: site.longitude, //经度
        // iconPath: this.imgUrl + 'map-' + site.channelCode + '.png',
        iconPath: this.imgUrl + 'map-' +'XOIL' + '.png',
        width: 100,
        height: 50,
        title: site.siteName, //标注点名
        label: { //为标记点旁边增加标签
          content: '￥' + site.sitePrice, //文本
          // color: '#F76350', //文本颜色
          color: '#fff', //文本颜色
          fontSize: '16',
		  textAlign:'center',
          anchorX: -5, //label的坐标，原点是 marker 对应的经纬度
          anchorY: -45, //label的坐标，原点是 marker 对应的经纬度 
          // 		    x:39.909,//这个组件微信在1.2.0以后就废弃了
          // 		    y:116.39742,
          bgColor: '#FF0000', //背景色
          borderRadius: 10,
          // borderWidth: 1, //边框宽度
          // borderColor: '#D84C29', //边框颜色		          textAlign: 'center' //文本对齐方式。
        },
        callout: { //自定义标记点上方的气泡窗口 点击有效
          content: site.siteName,
          color: '#F76350',
          fontSize: 12,
          borderRadius: 5,
        },
        // 		 anchor:{//经纬度在标注图标的锚点，默认底边中点
        // 		 x:5,
        // 		 y:1,
        // 		  }
      })
    }
  }
}
</script>

<style scoped>
.cu-modal {
  background-color: transparent;
  top: initial;
}
</style>
