<template>
  <view class="visit-route">
    <view class="route-list">
      <view class="route-item" @click="chooseRoute(item, index)" v-for="(item, index) in routeList" :key="index">
        <img class="_banner" :src="`${imgUrlPre}/static${item.coverSrc}`" />
        <view class="item-text">
          <view class="_name">{{item.routeTitle}}</view>
          <view class="_info">
            <text>{{item.visitNum}}个景点</text>
            <text style="margin: 0 30rpx;">{{item.visitTime}}小时</text>
            <text>{{item.distance}}公里</text>
          </view>
          <text class="_tag">{{item.routeTag}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getVisitRoutes } from '../api/index.js'
export default {
  computed: {
	imgUrlPre() {
		return 'https://xqg.zjhmit.com/hmit-admin'
	}
  },
  data() {
    return {
      routeList: []
    }
  },
  methods: {
	chooseRoute(item, index) {
		uni.navigateTo({
			url: 'visit-page?routeIndex=' + index
		})
	},
    getList() {
      getVisitRoutes().then(res => {
		  if (res.code === 0) {
			  this.routeList = res.data.list
			  this.routeList.forEach(i => {
				  i.visitNum = i.guideIds.split(',').length
				  i.visitTime = i.remark.split(',')[0]
				  i.distance = i.remark.split(',')[1]
			  })
		  }
	  })
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.visit-route{
  .route-list{
    padding: 28rpx;
    .route-item{
      padding: 28rpx 0;
      display: flex;
      align-items: center;
      color: #333;
      border-bottom: 1px solid #EBEBEB;
      ._banner{
        width: 208rpx;
        height: 146rpx;
        border-radius: 14rpx;
      }
      .item-text{
        margin-left: 28rpx;
        ._name{
          font-size: 32rpx;
          font-weight: bold;
        }
        ._info{
          margin: 10rpx 0 6rpx;
          text{
            font-size: 22rpx;
          }
        }
        ._tag{
          padding: 6rpx 12rpx;
		  font-size: 20rpx;
          color: #76b062;
          background-color: #f1f7ef;
          border-radius: 7rpx;
        }
      }
    }
  }
}
</style>