<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div class="trialsTab">
    <el-tabs v-model="trialsTab" @tab-click="clickTab">
      <template v-for="item of trialsRouter.children.find(v => { return v.name == 'TrialsPanel' }).children">
        <el-tab-pane :key="`tab${item.path}`"
          :disabled="TotalNeedSignTrialDocCount !== 0 && item.path !== '/trials/trials-panel/attachments'"
          :label="$t(item.LanguageMark)" :name="item.path" v-if="isShowNode(item)">
          <el-tabs v-if="!item.tabHiddn" v-model="trialsTabChild" @tab-click="clickTab"
            style="background-color: #f5f7fa;">
            <template v-for="item1 of item.children">
              <el-tab-pane v-if="TrialConfig && isShow(item1.path)" :key="`tab1${item1.path}`"
                :disabled="TotalNeedSignTrialDocCount !== 0 && item1.path !== '/trials/trials-panel/attachments/self-attachment' || (TrialStatusStr === 'Initializing' && (item1.path === '/trials/trials-panel/setting/personnel-manage' || item1.path === '/trials/trials-panel/setting/qc-question' || item1.path === '/trials/trials-panel/setting/reading-unit' || item1.path === '/trials/trials-panel/setting/medical-audit' || item1.path === '/trials/trials-panel/setting/email-manage'))"
                :label="$t(item1.LanguageMark)" :name="item1.path" />
            </template>
          </el-tabs>
        </el-tab-pane>
      </template>

    </el-tabs>
    <div style="position: absolute;top: 0;right: 0;display: flex;justify-content: space-between;align-items: center">
      <trials-select />
      <div>
        <i class="iconfont" style="font-size: 30px;color:#ccc">&#xe680;</i>
      </div>
      <!-- 返回项目列表 -->
      <el-button type="primary" size="small" @click="goBack">
        <i class="iconfont">&#xe670;</i>
        <span>{{ $t('trials:trials:title:back') }}</span>
      </el-button>
      <!-- <div class="my_icon_box" :title="$t('trials:trials:title:backTrialList')" @click="goBack">
        <i class="iconfont">&#xe670;</i>
        <span>{{ $t('trials:trials:title:back') }}</span>
      </div> -->
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getTrialSelect } from '@/api/trials'
import TrialsSelect from '@/components/TrialsSelect/index.vue'
import { getUserDocumentList } from '@/api/trials'
import store from '@/store'
export default {
  name: 'TrialsTab',
  components: {
    TrialsSelect
  },
  data() {
    return {
      trialsRouter: this.$store.getters.routes.find(v => { return v.name === 'Trials' }),
      trialsTab: null,
      trialsTabChild: null,
      tabTrialsId: null,
      options: [],
      TrialConfig: {},
      TrialStatusStr: null,
      trialId: null,
      IsAdditionalAssessment: false,
      isReload: false
    }
  },
  computed: {
    ...mapGetters(['TotalNeedSignTrialDocCount'])
  },
  watch: {
    $route(v, ov) {
      this.trialId = this.$route.query.trialId
      this.selectedTab()
      var query = ``
      var url = window.location.href
      if (~url.indexOf('?')) {
        query = url.split('?')[1]
      }
      if (!this.isReload) {
        zzSessionStorage.setItem('lastWorkbench', `${v.path}${query ? '?' : ''}${query}`)
      } else {
        this.isReload = false
      }
      var firstGoIn = this.trialsRouter.children.find(v => { return v.name === 'TrialsPanel' }).children[0]
      if (this.trialsTab === '/trials/trials-panel') {
        var targetPath = firstGoIn.path
        if (firstGoIn.children && firstGoIn.children.length > 0) {
          targetPath = firstGoIn.children[0].path
        }
        this.$router.replace({ path: `${targetPath}${query ? '?' : ''}${query}` })
      }
      // document.cookie = 'TrialId=' + this.$route.query.trialId + ';path=/'
    },
    trialId(v) {
      if (!this.$route.query.trialId) return
      getUserDocumentList({ TrialId: this.$route.query.trialId }).then(async res => {
        var total = res.OtherInfo.NeedSignCount
        var TrialStatusStr = res.OtherInfo.TrialStatusStr
        this.IsAdditionalAssessment = res.OtherInfo.IsAdditionalAssessment
        this.TrialStatusStr = TrialStatusStr
        await store.dispatch('user/setTotalNeedSignTrialDocCount', total)
        await store.dispatch('user/setTrialStatusStr', TrialStatusStr)
        this.TrialConfig = res.OtherInfo.TrialConfig
      })
    }
  },
  mounted() {
    this.$EventBus.$on("reload", () => {
      this.isReload = true
    })
    var query = ``
    var url = window.location.href
    if (~url.indexOf('?')) {
      query = url.split('?')[1]
    }
    if (this.$route.query.trialId) {
      getUserDocumentList({ TrialId: this.$route.query.trialId }).then(async res => {
        var total = res.OtherInfo.NeedSignCount
        var TrialStatusStr = res.OtherInfo.TrialStatusStr
        this.IsAdditionalAssessment = res.OtherInfo.IsAdditionalAssessment
        this.TrialStatusStr = TrialStatusStr
        await store.dispatch('user/setTotalNeedSignTrialDocCount', total)
        await store.dispatch('user/setTrialStatusStr', TrialStatusStr)
        this.TrialConfig = res.OtherInfo.TrialConfig
      })
    }
    this.selectedTab()
    this.getTrialList()
    var firstGoIn = this.trialsRouter.children.find(v => { return v.name === 'TrialsPanel' }).children[0]
    if (this.trialsTab === '/trials/trials-panel') {
      var targetPath = firstGoIn.path
      if (firstGoIn.children && firstGoIn.children.length > 0) {
        targetPath = firstGoIn.children[0].path
      }
      this.$router.replace({ path: `${targetPath}${query ? '?' : ''}${query}` })
    }
  },
  methods: {
    isShowNode(item) {
      if (item.path === '/trials/trials-panel/trial-summary' && item.children.length === 1 && item.children[0].path === '/trials/trials-panel/trial-summary/report-forms' && !this.$store.state.trials.config.IsExternalViewTrialChart && this.hasPermi(['role:cmm', 'role:cpm', 'role:ea', 'role:mc', 'role:smm', 'role:spm'])) {
        return false
      }
      return true
    },
    isShow: function (path) {
      var isShow = true
      let chartList = [
        '/trials/trials-panel/trial-summary/report-forms'
      ]
      let dataSyncList = [
        `/trials/trials-panel/trial-summary/data-sync`
      ]
      var qualityList = [
        '/trials/trials-panel/visit/crc-question',
        '/trials/trials-panel/visit/qc-check',
        '/trials/trials-panel/visit/qc-question'
      ]
      var consistencyList = [
        '/trials/trials-panel/visit/consistency-check'
      ]
      var additionalAssessmentList = [
        '/trials/trials-panel/subject/brain-metastasis'
      ]
      let dicomList = [
        '/trials/trials-panel/trial-summary/image-inspect',
        '/trials/trials-panel/trial-summary/push-record',
      ]
      if (this.$store.state.trials.config.TrialDataStoreType !== 1 && ~dataSyncList.indexOf(path)) {
        isShow = false
      }
      if (!this.$store.state.trials.config.IsExternalViewTrialChart && ~chartList.indexOf(path) && this.hasPermi(['role:cmm', 'role:cpm', 'role:ea', 'role:mc', 'role:smm', 'role:spm'])) {
        isShow = false
      }
      if (this.TrialConfig.QCProcessEnum === 0 && ~qualityList.indexOf(path)) {
        isShow = false
      }
      if (!this.TrialConfig.IsImageConsistencyVerification && ~consistencyList.indexOf(path)) {
        isShow = false
      }
      if (!this.IsAdditionalAssessment && ~additionalAssessmentList.indexOf(path)) {
        isShow = false
      }
      if ((!this.TrialConfig.IsPACSConnect || !this.TrialConfig.IsTrialPACSConfirmed) && ~dicomList.indexOf(path)) {
        isShow = false
      }
      return isShow
    },
    goBack() {
      zzSessionStorage.removeItem('lastWorkbench')
      this.$router.push({ path: '/trials/trials-list' })
    },
    selectTrials(v) {
      var trial = this.options.find(o => {
        return o.Id === v
      })
      this.$router.push({ path: `/trials/trials-panel?trialId=${trial.Id}&trialCode=${trial.TrialCode}` })
    },
    getTrialList() {
      getTrialSelect()
        .then(res => {
          this.options = res.Result
          this.tabTrialsId = this.$route.query.trialId
        })
        .catch(() => {
        })
    },
    selectedTab() {
      var path = this.$route.path
      if (this.$route.path.split('/').length > 4) {
        this.trialsTab = this.getValue(path)
        this.trialsTabChild = path
      } else {
        this.trialsTab = path
      }
    },
    getValue(url) {
      var site = url.lastIndexOf('\/')
      return url.substring(0, site)
    },
    clickTab(v) {
      try {
        var query = ``
        var url = window.location.href
        if (~url.indexOf('?')) {
          query = url.split('?')[1]
        }
        var trialsPanelList = this.trialsRouter.children.find(item => { return item.name === 'TrialsPanel' }).children
        var currentRoute = trialsPanelList.find(c => { return c.path === v.name })

        if (currentRoute && currentRoute.tabHiddn) {
          this.$router.push({ path: `${v.name}${query ? '?' : ''}${query}` })
          return
        }
        var isHasChild = currentRoute && currentRoute.children
        if (isHasChild && isHasChild.length > 0) {
          this.trialsTabChild = isHasChild[0].path
          this.$router.push({ path: `${this.trialsTabChild}${query ? '?' : ''}${query}` })
        } else {
          this.$router.push({ path: `${v.name}${query ? '?' : ''}${query}` })
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style lang="scss">
.trialsTab {
  .my_icon_box {
    padding: 0 20px 0 0;
    transition: color, transform .3s;
    cursor: pointer;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      color: #428bca;
    }

    span {
      margin-left: 3px;
      font-size: 14px;
    }
  }

  .el-tabs__header {
    margin-bottom: 3px;
  }

  .el-tabs__item.is-active {
    font-weight: bold;
  }

  position: relative;

  .el-input--medium .el-input__inner {
    height: 44px;
    line-height: 44px;
    width: 280px;
    border: none;
    text-align: right;
  }
}

.base-model-wrapper {
  .el-dialog__header {
    padding: 10px;

    .el-dialog__headerbtn {
      top: 10px;
      right: 10px;
    }
  }

  .el-dialog__body {
    padding: 10px 10px 10px 10px;

    .base-modal-body {
      min-height: 100px;
      max-height: 650px;
      overflow-y: auto;
      padding: 10px;
      border: 1px solid #e0e0e0;
    }
  }

  .el-dialog__footer {
    padding: 10px;
  }
}
</style>
