<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" class="cu-btn lg bg-purple margin sign-btn">打卡</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 { formatQuery } from 'utils/util';
import { SCAN_SIGN } from 'api/api';

export default {
  name: 'SignScan',
  data() {
    return {
      address: '图书馆',
      siteId: '',
      siteName: '',
      success: true,
    };
  },

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

  methods: {
    /**
     * 扫码打卡
     * @param {string} siteId 场所id
     */
    async handleSign(siteId) {
      try {
        console.log('打卡');
        const params = { param: { siteId } };
        const res = await this.$http.post(SCAN_SIGN, params);
        const { success, code, msg, data } = res.data;
        if (success && code === 200) {
          this.success = true;
        } else {
          uni.showToast({ title: msg || '打卡失败', icon: 'none' });
        }
      } catch (error) {
        console.log('error: ', error);
        if (error.msg) {
          uni.showToast({ title: error.msg || '打卡失败', icon: 'none' });
        }
      }
    },
  },
};
</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>
