<template>
  <div class="token-parse">
    <el-form ref="form" label-width="80px" :model="form" :rules="rules" style="margin-right: 20px;">
      <el-form-item :label="$t('pages.toolsOther.form.mode')">
        <el-radio v-model="model" label="TOKEN_PARSE">{{ $t('pages.toolsOther.tokenParse.parseToken') }}</el-radio>
        <el-radio v-model="model" label="GET_TOKEN">{{ $t('pages.toolsOther.tokenParse.getToken') }}</el-radio>
      </el-form-item>
      <el-form-item v-if="model === 'TOKEN_PARSE'" :label="$t('pages.toolsOther.tokenParse.token')" prop="token">
        <el-input v-model="form.token" :placeholder="$t('pages.toolsOther.placeholder.enterUserToken')" />
      </el-form-item>

      <el-form-item v-if="model === 'GET_TOKEN'" :label="$t('pages.toolsOther.form.userId')" prop="userId">
        <el-input v-model="form.userId" :placeholder="$t('pages.toolsOther.placeholder.enterUserId')" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="formLoading" :loading="formLoading" @click="submit">{{ $t('pages.toolsOther.action.confirm') }}</el-button>
      </el-form-item>

      <div v-if="formDataShow">
        {{ formResult }}
      </div>
    </el-form>
  </div>
</template>

<script>
import { getAccessTokenByUserId, getUserToken } from '@/api/tools'
export default {
  name: 'ToolsOther',
  data() {
    return {
      model: 'TOKEN_PARSE',
      form: {
        token: '',
        userId: ''
      },
      formLoading: false,
      formResult: {},
      formDataShow: false
    }
  },
  computed: {
    rules() {
      return {
        token: [{
          required: true,
          message: this.$t('pages.toolsOther.validation.requiredField'),
          trigger: 'blur'
        }],
        userId: [
          {
            required: true,
            message: this.$t('pages.toolsOther.validation.requiredField'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    submit() {
      const that = this
      that.$refs.form.validate((valid) => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }
        that.formDataShow = false
        that.formLoading = true
        if (that.model === 'TOKEN_PARSE') {
          getAccessTokenByUserId(that.form.token).then(res => {
            that.formLoading = false
            that.formResult = res.body || {}
            that.formDataShow = true
          }).catch(er => {
            that.formLoading = false
          })
        }

        if (that.model === 'GET_TOKEN') {
          getUserToken(that.form.userId).then(res => {
            that.formLoading = false
            that.formResult = res.body || {}
            that.formDataShow = true
          }).catch(er => {
            that.formLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
