<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">{{ address }}</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 { mapActions } from 'vuex';
import { formatQuery } from 'utils/util';
import { SCAN_SIGN } from 'api/api';

export default {
  name: 'SignScan',
  data() {
    return {
      address: '图书馆',
      siteId: '',
      siteName: '',
      success: false,
      type: 0, // 0进 / 1出
    };
  },

  computed: {
    typeText() {
      return this.type === 0 ? '进场打卡' : '出场打卡';
    },
  },

  onLoad(options) {
    try {
      const query = formatQuery(decodeURIComponent(options.scene));
      console.log('query: ', query);
      const { d, t } = query;
      this.siteId = d;
      this.type = +t;
    } catch (error) {
      console.log('error: ', error);
    }
  },

  methods: {
    ...mapActions('site', ['sign']),
    /**
     * 扫码打卡
     * @param {string} siteId 场所id
     */
    async handleSign(siteId) {
      try {
        console.log('打卡');
        const params = { param: { siteId } };
        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>
