<template>
  <view style="width: 100%; height: 100vh">
    <zj-page-container>
      <zj-page-fill
        @scrolltolower="loadMore"
        :scrollAttribute="{
          'refresher-enabled': false
        }"
      >
        <view class="box_list" v-for="item in websitList" :key="item.websitId">
          <view>
            <text>{{ item.name }}</text>
            <text>距离{{ item.distance }}km</text>
          </view>
          <view class="flex_abs">
            <text style="width: 520rpx; margin-right: 20rpx">地址：{{ item.address }}</text>
            <tag
              style="
                width: 150rpx;
                height: 50rpx;
                background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
                border-radius: 30rpx;
              "
            >
              <text @tap.stop="toApplicationPartsForm(item)">申请</text>
            </tag>
          </view>
        </view>
      </zj-page-fill>
      <view
        style="width: 100%; height: auto; padding: 20rpx 20rpx 40rpx 20rpx; box-sizing: border-box; background: #fff"
      >
        <!-- 申请记录按钮 -->
        <view class="record-application" @tap.stop="toNavigate" :style="{ top: StatusBar + 'px' }"> 申请记录 </view>
      </view>
    </zj-page-container>
  </view>
</template>

<script>
const sysInfo = uni.getSystemInfoSync()
import api from '@/common/http/'
import tag from '@/components/tag.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
import wx from 'weixin-js-sdk'
export default {
  components: {
    tag,
    zjPageFill
  },
  data() {
    return {
      StatusBar: sysInfo.statusBarHeight,
      latitude: '',
      longitude: '',
      markers: [
        {
          id: 'm_1',
          latitude: 23.183466,
          longitude: 113.35709,
          iconPath: '/static/images/order_call.png'
        }
      ],
      websitList: [],
      page: 1,
      pageSize: 3
    }
  },
  async onLoad() {
    await this.getWebsitList()
  },
  methods: {
    toNavigate() {
      this.$navToPage({
        url: `/packageAttachment/pages/orderOfSales/index`
      })
    },
    toApplicationPartsForm(item) {
      var { websitId, name, partsWebsitId } = item
      this.$navToPage({
        url: `/packageAttachment/pages/applicationParts/applicationPartsForm?websitId=${websitId}&websitName=${name}&partsWebsitId=${partsWebsitId}`
      })
    },
    loadMore() {
      this.page++
      this.getWebsitList()
    },
    getWebsitList() {
      this.getCurrentWebsit(() => {
        let params = {
          latitude: this.latitude,
          longitude: this.longitude,
          pageNo: this.page,
          pageSize: this.pageSize
        }
        api.post('/app/buy/websit/list', params).then(res => {
          this.websitList = this.websitList.concat(res.data.records).filter(item => item.partsWebsitId)
        })
      })
    },
    async getCurrentWebsit(cb) {
      if (this.latitude && this.longitude) {
        cb?.()
      } else {
        try {
          var { latitude, longitude } = await this.$getLocation()
          this.latitude = latitude
          this.longitude = longitude
          cb?.()
        } catch (error) {
          console.log(error)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.record-application {
  width: 100%;
  height: 60rpx;
  border-radius: 30rpx;
  box-sizing: border-box;
  background: #6da7ff;
  font-size: 28rpx;
  font-weight: 500;
  text-align: center;
  color: #ffffff !important;
  line-height: 60rpx;
}

.box_list {
  width: 100%;
  height: auto;
  padding: 20rpx;
  background: #ffffff;
  border-bottom: 1rpx solid #bebebe;
}
.flex_abs {
  width: 100%;
  height: auto;
  display: flex;
}
</style>
