<template>
  <div style="display: flex;justify-content: center">
    <div style="width: 600px;padding-top: 100px">
      <div class="trial-myinfo-head" style="font-size: 16px;line-height: 40px;text-indent:30px;">
        是否参与的临床试验项目：<span style="color:#428bca">{{ trialInfo.ExperimentName }}</span>（试验方案号：<span style="color:#428bca">{{ trialInfo.ResearchProgramNo }}</span>）  的独立影像评估工作。请选择:
      </div>
      <div style="padding: 20px;">
        <el-radio-group v-model="form.IsJoin">
          <el-radio :disabled="disabled" :label="true">是</el-radio>
          <el-radio :disabled="disabled" :label="false">否</el-radio>
        </el-radio-group>
      </div>
      <div v-if="form.IsJoin === false" style="margin-bottom: 40px;">
        <textarea v-model="form.RejectReason" :disabled="disabled" placeholder="请说明拒绝原因" style="padding:10px;font-size:14px;background: #f3f3f3;border-radius: 10px;width: 100%;height: 120px;font-size: 12px;border: none;outline: none;resize: none" />
      </div>
      <div style="margin-top: 20px;text-align: right">
        <el-button
          type="primary"
          size="small"
          style="min-width: 100px;"
          :loading="loading"
          :disabled="disabled"
          @click="save"
        >确定</el-button>
      </div>

    </div>
  </div>
</template>
<script>
import { trialExternalUserJoinTrial, trialSiteSurveyUserJoinTrial, joinBasicInfo } from '@/api/joinVerify/index'
import moment from 'moment'
export default {
  data() {
    return {
      loading: false,
      disabled: false,
      Id: null,
      IsExternalUser: null,
      form: {
        IsJoin: null,
        RejectReason: null
      },
      trialInfo: {}
    }
  },
  mounted() {
    this.Id = this.$route.query.Id
    this.IsExternalUser = this.$route.query.IsExternalUser
    this.getInfo()
  },
  methods: {
    getInfo() {
      var params = {
        Id: this.Id,
        IsExternalUser: this.IsExternalUser === '1'
      }
      joinBasicInfo(params).then(res => {
        this.trialInfo = res.Result
        this.form.IsJoin = this.trialInfo.IsJoin
        this.form.RejectReason = this.trialInfo.RejectReason
        if (this.trialInfo.IsJoin === true || this.trialInfo.IsJoin === false) {
          this.disabled = true
        }
      })
    },
    goLogin() {
      setTimeout(() => {
        this.$router.replace({ path: '/login' })
      }, 2000)
    },
    closeWindow() {
      window.colse()
    },
    save() {
      var loginUrl = `${location.protocol}//${location.host}/login`
      var params = {
        Id: this.Id,
        IsJoin: this.form.IsJoin,
        ConfirmTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        RejectReason: this.form.RejectReason,
        BaseUrl: loginUrl
      }
      if (this.form.IsJoin === null) {
        this.$alert('请选择是否加入项目')
        return
      }
      if (this.form.IsJoin === false && !this.form.RejectReason) {
        this.$alert('拒绝请填写详细原因')
        return
      }
      this.disabled = true
      this.loading = true
      if (this.IsExternalUser === '1') {
        trialExternalUserJoinTrial(params).then((res) => {
          if (params.IsJoin) {
            this.$message.success('加入项目成功！即将自动跳转登录页面')
            this.goLogin()
          } else {
            this.$message.success('已拒绝加入项目')
            this.loading = false
            this.disabled = true
          }
        }).catch(() => {
          this.disabled = false
          this.loading = false
        })
      } else {
        trialSiteSurveyUserJoinTrial(params).then((res) => {
          if (params.IsJoin) {
            this.$message.success('加入项目成功！即将自动跳转登录页面')
            this.goLogin()
          } else {
            this.$message.success('已拒绝加入项目')
            this.loading = false
            this.disabled = true
          }
        }).catch(() => {
          this.disabled = false
          this.loading = false
        })
      }
    }
  }
}
</script>
<style>
  .reset-wrapper {
    padding: 20px;
  }
  .reset-wrapper .el-page-header {
    line-height: 50px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #fff;
  }
  .reset-wrapper .box-wrapper {
    width: 60%;
    margin: 20px auto;
    padding: 10px;
    color: #303133;
  }
</style>
