<template>
  <div v-loading="loading" class="research_detal_wrapper">
    <div class="d_title">{{ $t('trials:researchForm:title:question') }}</div>
    <div class="d_content">

      <!-- 项目基本信息 -->
      <BasicInfo ref="basicInfo" :IsOnlyUploadFile="IsOnlyUploadFile" :IsSupportUploadFile="IsSupportUploadFile" />
      <!-- 历史人员 -->
      <HistoricalParticipants ref="historicalParticipant" class="mt5" />
      <!-- 新增人员 -->
      <Participants ref="participants" class="mt5" />
      <!-- 设备调研 -->
      <Equipments ref="equipments" class="mt5" v-if="!siteSurveyNoteInfo.IsCloseEquipmentSurvey" />
      <!-- 备注 -->
      <Notes ref="notes" class="mt5" />
    </div>
    <div class="d_footer">
      <div class="d_func_row">
        <div v-if="state === 0 && userTypeEnumInt === 0" class="d_func" @click="handleSave">
          {{ $t('common:button:save') }}
        </div>
        <div v-if="(state === 0 && userTypeEnumInt === 0)" class="d_func" @click="handleSubmit('submit')">
          {{ $t('trials:researchForm:button:submit') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSiteSurveyInfo, trialSurveySubmit } from '@/api/research'
import { getQueryString } from '@/utils/history.js'
import BasicInfo from './components/BasicInfo'
import HistoricalParticipants from './components/HistoricalParticipants'
import Participants from './components/Participants'
import Equipments from './components/Equipments'
import Notes from './components/Notes'
export default {
  name: 'ResearchMobileDetail',
  components: {
    BasicInfo,
    HistoricalParticipants,
    Participants, Equipments, Notes
  },
  data() {
    return {
      trialId: this.$route.query.trialId,
      trialSiteSurveyId: '',
      loading: false,
      state: null,
      userTypeEnumInt: 0,
      rejectVisible: false,
      rejectForm: { reason: '' },
      siteSurveyNoteInfo: {},
      IsSupportUploadFile: false,
      IsOnlyUploadFile: false
    }
  },
  mounted() {
    this.trialSiteSurveyId = getQueryString('trialSiteSurveyId')
    this.initPage()
    if (zzSessionStorage.getItem('userTypeEnumInt')) {
      this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
    }
  },
  methods: {
    // 初始化页面
    async initPage() {
      try {
        this.loading = true
        const res = await getSiteSurveyInfo(this.trialId, this.trialSiteSurveyId)
        if (res.Result) {
          if (res.Result.SiteSurveyFiledConfig && res.Result.SiteSurveyFiledConfig.ModifyFiledList.length > 0) {
            this.siteSurveyNoteInfo = res.Result.SiteSurveyFiledConfig.ModifyFiledList.find(i => i.NeedModifyFiled === 'SiteSurveyNote')
          }
          this.IsSupportUploadFile = res.Result.SiteSurveyFiledConfig.IsSupportUploadFile
          this.IsOnlyUploadFile = res.Result.SiteSurveyFiledConfig.IsOnlyUploadFile
          this.siteSurveyNoteInfo.IsCloseEquipmentSurvey = res.Result.SiteSurveyFiledConfig.IsCloseEquipmentSurvey
          this.state = res.Result.TrialSiteSurvey.State
          this.$refs['basicInfo'].initForm(res.Result.TrialInfo, res.Result.TrialSiteSurvey, res.Result.SiteSurveyFiledConfig ? res.Result.SiteSurveyFiledConfig.NotShowFieldList : null)
          var historicalArr = []
          var newArr = []
          res.Result.TrialSiteUserSurveyList.map(i => {
            if (i.IsHistoryUser) {
              historicalArr.push(i)
            } else {
              newArr.push(i)
            }
          })

          this.$refs['historicalParticipant'].initList(historicalArr, res.Result.TrialSiteSurvey)
          this.$refs['participants'].initList(newArr, res.Result.TrialSiteSurvey)
          this.$refs['equipments'].initList(res.Result.TrialSiteEquipmentSurveyList, res.Result.TrialSiteSurvey, res.Result.SiteSurveyFiledConfig.EquipmentControlFieldList)
          this.$refs['notes'].initPage(this.siteSurveyNoteInfo)
        }
        this.loading = false
      } catch (e) {
        this.loading = false
        console.log(e)
      }
    },
    // 保存
    handleSave() {
      this.$refs['basicInfo'].handleSave(false)
    },
    // 提交
    async handleSubmit(type) {
      if (this.userTypeEnumInt === 0) {
        try {
          this.loading = true
          const res = await this.$refs['basicInfo'].handleSave(true)
          this.loading = false
          if (res) {
            this.submit(type)
          }
        } catch (e) {
          this.loading = false
          console.log(e)
        }
      } else {
        this.submit(type)
      }
    },
    async submit(type) {
      try {
        const confirm = await this.$confirm(
          this.userTypeEnumInt === 0 ? this.$t('trials:researchForm:message:submitWarning') : this.$t('trials:researchForm:message:submitWarning2'),
          {
            type: 'warning',
            distinguishCancelAndClose: true,
            customClass: "mobile_confirm"
          }
        )
        if (confirm !== 'confirm') return
        var param = {
          TrialId: this.trialId,
          TrialSiteSurveyId: this.trialSiteSurveyId
        }
        const res = await trialSurveySubmit(param)
        this.loading = false
        if (res.IsSuccess) {
          this.initPage()
          if (type === 'approve') {
            this.$message.success(this.$t('common:message:approvedSuccessfully'))
          } else {
            this.$message.success(this.$t('trials:researchForm:message:savedSuccessfully'))
          }
        }
      } catch (e) {
        this.loading = false
        console.log(e)
      }
    },
    // 退出
    handleBack() {
      this.$router.push({ path: `/researchLogin_m?trialId=${this.trialId}&lang=${this.$i18n.locale}` })
    }
  }
}
</script>
<style lang="scss" scoped>
.research_detal_wrapper {
  background-color: #f5f7fa;

  .d_title {
    margin-bottom: 5px;
    line-height: 80px;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  // .d_content{

  // }
  .d_footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: #f8f8f8;
    line-height: 50px;
    text-align: center;
    // padding: 20px;
  }

  .d_func_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .d_func {
    flex: 1;
    margin: 20px;
    color: #fff;
    background-color: #428bca;
    border-color: #428bca;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    transition: .1s;
    font-weight: 500;
    box-sizing: border-box;
    outline: 0;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;

    &:hover {
      background: #68a2d5;
      border-color: #68a2d5;
      color: #fff;
    }
  }

  .mt5 {
    margin-top: 5px
  }
}
</style>
