<template>
  <div class="share-image-container">
    <div class="share-image-banner">
      <h2 style="text-align:center;">{{ $t('trials:trials:title:eics') }}</h2>
      <el-card shadow="hover">
        <h4>{{ $t('trials:studyList:message:message7') }}</h4>
        <el-form ref="validateForm" :inline="true" :rules="rules" :model="form">
          <el-form-item label="" prop="ExtractionCode">
            <el-input v-model="form.ExtractionCode" :max-length="100" style="width:400px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{ $t('common:button:submit') }}</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
import { verifyShareImage } from '@/api/share'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      resourceId: '',
      form: { ExtractionCode: '' },
      rules: {
        ExtractionCode: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur,change' },
          {
            validator: (rule, value, callback) => {
              if (value) {
                if (value.length !== 4) {
                  callback(new Error(this.$t('trials:studyList:message:length4')));
                }
                if (!(/^[a-z0-9]+$/.test(value))) {
                  callback(new Error(this.$t('trials:studyList:message:testError')));
                }
                callback();
              }
              callback();
            }
          }
        ]
      }
    }
  },
  created() {
    this.resourceId = this.$route.query.id
    localStorage.setItem('location', this.location)
    this.$i18n.locale = 'zh'
    this.setLanguage('zh')
    this.$updateDictionary()
  },
  methods: {
    ...mapMutations({ setLanguage: 'lang/setLanguage' }),
    onSubmit() {
      this.$refs['validateForm'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            target: document.querySelector('.share-image-banner'),
            fullscreen: false,
            lock: true,
            text: 'Loading...',
            spinner: 'el-icon-loading'
          })
          if (!this.resourceId) return
          verifyShareImage(this.resourceId, this.form.ExtractionCode).then(res => {
            loading.close()
            if (res.IsSuccess) {
              zzSessionStorage.clear()
              this.$store.dispatch('user/setToken', res.Result.Token)
              zzSessionStorage.setItem('studyId', res.Result.StudyId)
              zzSessionStorage.setItem('TokenKey', res.Result.Token)
              // zzSessionStorage.setItem('studyId', res.Result.StudyId)
              // zzSessionStorage.setItem('TokenKey', res.Result.Token)
              // this.$store.dispatch('user/setToken', zzSessionStorage.getItem('TokenKey'))
              // 跳转
              // this.$router.push({
              //   name: 'showdicoms',
              //   query: { type: 'Share' }
              // })
              const userString = decodeURIComponent(escape(window.atob(res.Result.Token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/'))))
              const user = JSON.parse(userString)
              zzSessionStorage.setItem('userTypeEnum', user.userTypeEnum)
              this.$router.push({ path: `${res.Result.RouteUrl}&TokenKey=${res.Result.Token}` })
            }
          }).catch(() => { loading.close() })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.share-image-container {
  padding: 50px;

  .share-image-banner {
    height: 500px;
    width: 600px;
    margin: 0 auto;
  }
}
</style>
