<template>
  <div class="share-image-container">
    <div class="share-image-banner">
      <h2 style="text-align:center;">IRC Management System</h2>
      <el-card shadow="hover">
        <h4>请输入提取码：</h4>
        <el-form ref="validateForm" :inline="true" :rules="rules" :model="form">
          <el-form-item label="" prop="ExtractionCode">
            <el-input :maxLength="$inputMax" v-model="form.ExtractionCode" style="width:400px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
import { verifyShareImage } from '@/api/share'
export default {
  data() {
    return {
      resourceId: '',
      form: { ExtractionCode: '' },
      rules: {
        ExtractionCode: [
          { required: true, message: '请输入提取码', trigger: 'blur' },
          { min: 4, max: 6, message: '长度在 4 到 6 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.resourceId = this.$route.query.id
  },
  methods: {
    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.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' }
              // })
              this.$router.push({ path: `/showdicom?studyId=${res.Result.StudyId}&TokenKey=${res.Result.Token}&type=Share` })
            }
          }).catch(() => { loading.close() })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.share-image-container {
  padding:50px;
  .share-image-banner {
    height: 500px;
    width: 600px;
    margin: 0 auto;
  }
}
</style>
