<template>
	<div class="consumption">
		<div class="help-header">
			<p class="now-road" @click="goMap">当前位置: {{pageMsg.nowAdd}}</p>
			<!-- <p class="help-tip">如需帮助请拨打12122</p> -->
			<!-- <div class="menu-box ">
        <div class="model-c-menu" hover-class="navigator-hover" @click="isPhone('96122')">
          
          <i class="ico-menu"><image src="https://eshangtech.com/ShopICO/icos/gsjj.png" mode="aspectFit" style="width:94rpx;height:94rpx;"></image></i>
          <span>事故报警</span>
        </div>
      
        <div class="model-c-menu" hover-class="navigator-hover" @click="isPhone('12122')">
          <i class="ico-menu"><image src="https://eshangtech.com/ShopICO/icos/jtfw.png" mode="aspectFit" style="width:94rpx;height:94rpx;"></image></i>
         
          <span>公路救援</span>
        </div>
        <div class="model-c-menu" hover-class="navigator-hover" @click="isPhone('12328')">
          <i class="ico-menu"><image src="https://eshangtech.com/ShopICO/icos/czrx.png" mode="aspectFit" style="width:94rpx;height:94rpx;"></image></i>
         
          <span>服务监督</span>
        </div>
        
      </div> -->
		</div>
		<div>
			<div class="location-title">我的附近</div>
			<div class="menu-position-box">
				<div class="menu-box">
					<div class="model-c-menu" v-for="(s,i) in severList" :key="i" @click="goDiscovery(s)">
						<image mode="aspectFit" src="https://eshangtech.com/ShopICO/icos/fwq-ico.png"></image>
						<div>
							<p class="server-name">{{s.ServerPart_Name}}</p>
							<p class='server-wz'>
								<van-icon name="location" color="#A5A5A5" size="20rpx" />
								<span style="display:inline-block;line-height:12rpx;">{{s.Distance}} km</span>
							</p>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="consumption-title">
			<div class="title-text" :class="{'active':pageMsg.tab==0}" @click="tab(0)"><image class="jy-ico" mode="aspectFit" src="https://eshangtech.com/ShopICO/icos/jy-ico.png"></image>救援</div>
			<div class="title-text" :class="{'active':pageMsg.tab==1}" @click="tab(1)">
				<image mode="aspectFit" class="cx-ico" src="https://eshangtech.com/ShopICO/icos/cx-ico.png"></image> 车险
			</div>
		</div>
		<div class="consumption-content" >
			<block v-for="(unit,i) in pageMsg.list[pageMsg.tab]" :key="i">
				<!-- <p class="consumption-content-date">{{unit.date}}</p> -->
				<div class="consumption-content-unit" >
					<div class='cp-u-left'>
						
						<image  :src="unit.image ? unit.image  : 'https://eshangtech.com/ShopICO/icos/bjdh.png'" mode="aspectFit" style="width:90rpx;height:90rpx;margin-right:20rpx;"></image>
						<div>
							<p class="cp-u-title">{{unit.name}}</p>
				
							<p class="cp-u-type">{{unit.value}} </p>
						</div>
					</div>
					<div>
						<image src="https://eshangtech.com/ShopICO/icos/bh.png" mode="aspectFit" style="width:72rpx;height:72rpx;" @click="isPhone(unit.value)"></image>
					</div>
				</div>
			</block>
		</div>
		
	</div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    const arr1 = [
      {
        id: 0,
        name: '人保车险',
        value: '95518',
        image: 'https://eshangtech.com/ShopICO/icos/picc.png'
      },
      {
        id: 1,
        name: '太平洋车险',
        value: '95500',
        image: 'https://eshangtech.com/ShopICO/icos/tpycx.png'
      },
      {
        id: 2,
        name: '中国人寿车险',
        value: '95519',
        image: 'https://eshangtech.com/ShopICO/icos/zgrs.png'
      },
      {
        id: 3,
        name: '平安车险',
        value: '95512',
        image: 'https://eshangtech.com/ShopICO/icos/pacx.png'
      },
      {
        id: 4,
        name: '阳光车险',
        value: '95510',
        image: 'https://eshangtech.com/ShopICO/icos/ygcx.png'
      },
      {
        id: 5,
        name: '中华联合车险',
        value: '95585',
        image: 'https://eshangtech.com/ShopICO/icos/zhlhcx.png'
      },
      {
        id: 6,
        name: '大地车险',
        value: '95590',
        image: 'https://eshangtech.com/ShopICO/icos/ddcx.png'
      },
      {
        id: 7,
        name: '永安车险',
        value: '95502',
        image: 'https://eshangtech.com/ShopICO/icos/yacx.png'
      },
      {
        id: 8,
        name: '中银车险',
        value: '95566',
        image: 'https://eshangtech.com/ShopICO/icos/zycx.png'
      }
    ]
    const arr2 = [
      {
        id: 0,
        name: '全国交通运输服务监督电话',
        value: '12328',
        image: 'https://eshangtech.com/ShopICO/icos/jtfw.png'
      },
      {
        id: 1,
        name: '全国高速公路救援电话',
        value: '12122',
        image: 'https://eshangtech.com/ShopICO/icos/czrx.png'
      },
      {
        id: 2,
        name: '全国交通事故报警电话',
        value: '96122',
        image: 'https://eshangtech.com/ShopICO/icos/gsjj.png'
      },
      {
        id: 3,
        name: '全国公安报警',
        value: '110',
        image: 'https://eshangtech.com/ShopICO/icos/110.png'
      },
      {
        id: 4,
        name: '全国急救电话',
        value: '120',
        image: 'https://eshangtech.com/ShopICO/icos/120.png'
      }

    ]
    return {
      pageMsg: {
        tab: 0,
        nowAdd: '',
        list: [ arr2, arr1 ]
      }
    }
  },
  computed: {
    ...mapGetters(['user', 'severList'])
  },
  methods: {
    ...mapMutations({

      'setServerPart': 'discoveryServerPart'

    }),
    tab (index) {
      this.pageMsg.tab = index
    },
    goMap () {
      mpvue.navigateTo({url: '/pages/map/main'})
    },
    goDiscovery (item) {
      this.setServerPart(item)
      mpvue.switchTab({url: '/pages/discovery/main'})
    },
    isPhone (value) {
      mpvue.makePhoneCall({
        phoneNumber: value
      })
    }

  },
  onUnload () {
    this.pageMsg.tab = 0
  },
  onLoad () {
    let _this = this
    wx.choosePoi({
      type: 'wgs84',
      success: function (res) {
        let latitude = res.latitude
        let longitude = res.longitude
        wx.request({
          url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=SVKBZ-P6QCJ-NH7F7-KOPJW-CBNEV-FUBRT`,
          success: res => {
            _this.pageMsg.nowAdd = res.data.result.address
          }
        })
      }
    })
    this.severList.map(n => {
      n.name = n.ServerPart_Name
      n.id = n.ServerPart_Id
      n.value = n.ServerPart_Tel
    })
    this.$utils.addUserBehaviorNew();
    // this.pageMsg.list[0] = this.severList
  },
  onShow () {

  }
}
</script>

<style lang="stylus" scoped>
.consumption
	background #fff
	height 100%
	overflow-y auto
.help-header
	border-top 2rpx solid #F0F1F5
	padding-top 24rpx
	text-align center
	font-size 28rpx
	line-height 2
	.now-road:before 
		content ''
		background url(https://eshangtech.com/ShopICO/icos/help-dingwei.png) no-repeat center
		background-size contain
		height 36rpx
		width 25rpx
		margin-right 8rpx
	.now-road
		color #EC6232
		display flex
		align-items center
		justify-content center
	.help-tip
		color #999999
		font-size 26rpx
.location-title
	padding-left 32rpx
	font-size 32rpx
	display flex
	align-items center
	margin-bottom 32rpx
	margin-top 32rpx
.location-title:before
	content ''
	background url(https://eshangtech.com/ShopICO/icos/fj-ico.png) no-repeat center
	background-size contain
	height 40rpx
	width 40rpx
	margin-right 8rpx
.menu-position-box
	width 686rpx
	padding 0 32rpx
	height 148rpx
	overflow hidden
.menu-box 
	display flex
	align-items center
	flex-wrap nowrap
	overflow-y auto
	position relative
	-webkit-overflow-scrolling touch
	padding-bottom 16rpx
	// justify-content space-around
	image
		height 96rpx
		width 96rpx
		margin-right 32rpx
.model-c-menu 
	display flex
	border-radius 8rpx
	align-items center
	background #F7F7F7
	padding 0 32rpx
	min-width 384rpx
	max-width 448rpx
	margin-right 24rpx
	height 148rpx
	font-family "PingFang SC Medium","SimHei"
	.server-name
		font-size 28rpx
		color #484b51
	.server-wz
		margin-top 36rpx
		font-size 20rpx
		color #555555
.ico,
.ico-menu 
	width 94rpx
	height 94rpx
.ico-menu 
	width 94rpx
	height 94rpx

	position relative
	text-align center
	overflow hidden

.consumption-title
	padding 0 32rpx
	font-size 30rpx
	line-height 80rpx
	color #777777
	margin-top 32rpx 
	display flex
	align-items center
	border-bottom 2rpx solid #F0F1F5
	image
		height 42rpx
		width 42rpx
		margin-right 8rpx
	.title-text
		display flex
		align-items center
		position relative

	.title-text + .title-text
		margin-left 72rpx

  .title-text.active
		color #000
	.title-text.active:after
		content ''
		width 55rpx
		height 4rpx 
		background #000
		position absolute
		bottom 0
		left 46rpx

.consumption-content 
	/* background-color #fff */
	padding-bottom 20rpx
	

.consumption-content-date 
	color #999
	font-size 12px
	padding-bottom 10rpx
	padding-left 40rpx

.consumption-content-unit 
	display flex
	padding 32rpx 32rpx
	line-height 42rpx
	justify-content space-between
	align-items center
	background-color #fff
	border-bottom 2rpx solid #eee

.ico-shop 
	/* background url(../../../static/img/xiaofei_shop.png) no-repeat center */
	background-size contain
	height 72rpx
	width 72rpx
	margin-right 8rpx

.cp-u-left 
	display flex
	justify-content flex-start
	align-items center

.cp-u-title 
	font-size 28rpx
	color #555555

.cp-u-type 
	font-size 24rpx
	color #333
.colorOr
	color #D86E35
.colorGr 
	color #45AB58
.cp-u-price 
	text-align right
	font-size 32rpx
	
	
</style>
