<!-- *******************  定位  *******************  -->
<template>
  <view>
    <view class="list u-flex u-row-between">
      <image class="item-image" :src="mixingImage" v-if="item.required"></image>
      <view class="u-m-r-20">{{ item.fieldsTitle }}</view>
      <view class="u-flex-1 location-name" @click="getLocation">
        <u-icon name="map" color="#2979ff" size="30"></u-icon>自动定位
      </view>
    </view>
    <view class="u-flex-1 location">{{ valueTxt || '正在获取中...' }}</view>
  </view>
</template>

<script>
import arrMixin from './arrMixin'
export default {
  name: 'XhLocation',
  components: {},
  mixins: [arrMixin],
  props: {},
  filters: {},
  data() {
    return {}
  },
  computed: {
    valueTxt() {
      let str = ''
      const dataValue = this.dataValue
      if (dataValue && dataValue.length > 1) {
        str =
          '经度：' +
          dataValue[0].toFixed(4) +
          '，' +
          '纬度：' +
          dataValue[1].toFixed(4)
      }
      return str
    },
    mixingImage() {
      return process.uniEnv.qn_base_url + 'mixing.png'
    },
  },
  watch: {},
  created() {
    this.getLocation()
  },
  methods: {
    getLocation() {
      if (this.disabled) return
      let self = this
      const dataValue = this.dataValue || []
      const waterInfo = this.waterInfo
      uni.getLocation({
        type: 'gcj02',
        success: function(res) {
          dataValue.push(res.longitude)
          dataValue.push(res.latitude)
          self.dataValue = dataValue
          self.setValue(dataValue)
        },
        fail(err) {},
      })
    },
    setValue(txt) {
      this.valueChange(this.dataValue)
    },
  },
}
</script>
<style lang="scss" scoped>
.required {
  padding-right: 10rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #fa3534;
}
.item-image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}
.location-name {
  color: #2272ff;
  text-align: right;
}
.location {
  background: #f4f5f7;
  padding: 10rpx 20rpx;
  border-radius: 12rpx;
}
</style>
