<template>
  <div class="wrap">
    <!-- KV模块 -->
    <div class="module-kv">
      <div class="top-btn-box">
        <a class="top-btn rule-btn" @click="ruleModalOpen" />
      </div>
      <div class="date">兑换时间:2023年7月13日-9月9日</div>
    </div>
    <!-- 弹窗 -->
    <RuleModal :visible="ruleModalVisible" />
  </div>
</template>

<script>
import { reactive } from 'vue'
import RuleModal from '@/components/RuleModal.vue'
import { reqPublic, Tracker } from '@/scripts/requests/index.js'
import { getUrlSearchJson } from '@/scripts/util.js'
import { isIOS, isMobile } from 'detect-mobile-device'
import dayjs from 'dayjs'
export default {
  name: 'IndexPage',
  components: {
    RuleModal
  },
  setup() {
    // 公共上报字段
    const publicReportParams = reactive({
      game_appkey: 'nwDNza2ltADBAcETlnPO',
      game_id: '600025',
      plat_id: !isMobile() ? '4' : isIOS() ? '0' : '1', //上报平台代表的ID，ios 0/android 1/h5 3/pc 4
      client_time: dayjs().format('YYYY-MM-DD HH:mm:ss')
    })
    return {
      publicReportParams
    }
  },
  data() {
    return {
      ruleModalVisible: false //规则弹窗
    }
  },
  computed: {
    /**
     * Url携带参数，游戏中跳转带出
     */
    urlSearch() {
      return getUrlSearchJson()
    }
  },
  provide() {
    return {
      closeModal: this.closeModal
    }
  },
  created() {},
  methods: {
    /**
     * 登录
     * @param {Object} userOps 用户参数
     */
    login(userOps) {
      const { timestamp, gameId, signature, openId, roleId, serverId } = userOps
      reqPublic
        .login({ gameId, timestamp, signature }, { openId, roleId, serverId })
        .then(res => {
          if (process.env.VUE_APP_MODE === 'development') {
            //本地开发处理
            window.location.href =
              'http://localhost:8080/?' + window.location.href.split('?')[1]
            return
          }
          window.location.href = res.request.responseURL
        })
        .catch(err => {
          console.log('fail', err)
        })
    },
    /**
     * 关闭弹窗
     * @param {*} object 控制开关的变量名称
     */
    closeModal(object) {
      this[object] = false
    },
    /**
     * 打开规则弹窗
     */
    ruleModalOpen() {
      this.ruleModalVisible = true
    },
    /**
     * 页面加载上报（登录成功后）
     */
    onloadReport() {
      let params = [
        {
          ...this.publicReportParams,
          log_type: 'CustomEvent',
          event_id: 'enter_h5'
        }
      ]
      Tracker.report(params)
    }
  }
}
</script>
<style scoped lang="scss">
@import './index.scss';
</style>