<template>
  <view class="padding-top-lg">
    <template v-if="!success">
      <view class="text-xxl padding text-center margin-top-xl">
        <text class="text-black text-bold">{{ site.siteName }}</text>
      </view>
      <button @tap="handleSign(siteId)" class="cu-btn lg bg-purple margin sign-btn">{{ typeText }}</button>
    </template>
    <view class="success" v-else>
      <view class="cuIcon-roundcheckfill text-green"></view>
      <text class="text-black margin-top">打卡成功</text>
      <button @tap="goHome" class="cu-btn lg bg-purple margin-lg sign-btn">返回首页</button>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { formatQuery } from 'utils/util';
import { SCAN_SIGN } from 'api/api';

export default {
  name: 'SignScan',
  data() {
    return {
      siteId: '',
      siteName: '',
      success: false,
      type: 0, // 0进 / 1出
      timer: null, 
      latitude: 37.80079,
      longitude: 112.58679,
    };
  },

  computed: {
    ...mapState('site', ['site']),
    ...mapState('user', ['token']),
    typeText() {
      return this.type === 0 ? '进场打卡' : '出场打卡';
    },
  },

  onLoad(options) {
    console.log('options: ', options);
    this.init(options);
    this.getLocation();
  },

  methods: {
    ...mapActions('site', ['sign', 'getSiteByQrId']),

    init(options) {
      try {
        const query = formatQuery(decodeURIComponent(options.scene));
        console.log('query: ', query);
        const { d, t } = query;
        if (!d || !t) {
          uni.showToast({
            title: '二维码参数错误',
            icon: 'none',
            duration: 3000,
          });
        }
        this.siteId = d;
        this.type = +t;
        this.getSignInfo({ param: { id: d, type: t } });
      } catch (error) {
        console.log('error: ', error);
      }
    },

    /**
     * 获取场所的基本信息
     * @param {object} params 提交给后端的参数
     */
    getSignInfo(params) {
      this.timer && clearInterval(this.timer);
      if (!this.token) {
        this.timer = setTimeout(() => {
          this.getSignInfo(params);
        }, 100);
      } else {
        this.getSiteByQrId(params);
      }
    },
    
    // 获取当前的地址位置
    // 注意用国测局的数据 map只支持gcj02
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: res => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
        },
      });
    },

    /**
     * 扫码打卡
     * @param {string} siteId 场所id
     */
    async handleSign(siteId) {
      try {
        const params = { param: { siteId, locationLatitude: this.latitude, locationLongitude: this.longitude } };
        await this.sign(params);
        this.success = true;
      } catch (error) {
        console.log('error: ', error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sign-btn {
  display: flex;
}
.success {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;

  .cuIcon-roundcheckfill {
    font-size: 200rpx;
  }
}
</style>
