<template>
  <div class="trialDocument">
    <div class="left">
      <div class="top" v-if="isManage">
        <div class="viewCheck">
          <span>{{ $t('trials:trialDocument:view') }}</span>
          <el-switch
            v-model="viewStatus"
            active-color="#13ce66"
            inactive-color="#409eff"
            :active-value="false"
            :inactive-value="true"
            :active-text="$t('trials:trialDocument:viewStatus:manage')"
            :inactive-text="$t('trials:trialDocument:viewStatus:inspect')"
            @change="handleChange"
          >
          </el-switch>
        </div>
      </div>
      <div
        :class="{
          menuBox: true,
          noTop: !isManage,
        }"
      >
        <Menu
          ref="Menu"
          :viewStatus="viewStatus"
          :Id.sync="Id"
          :SubIdentificationEnum.sync="SubIdentificationEnum"
          :ArchiveTypeEnum.sync="ArchiveTypeEnum"
          :rowData.sync="rowData"
        />
      </div>
    </div>
    <div class="main">
      <report-doc
        v-if="[0, 1].includes(SubIdentificationEnum)"
        :viewStatus="viewStatus"
        :Id="Id"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
        @getMenu="getMenu"
      />
      <file-record
        v-if="[2].includes(SubIdentificationEnum)"
        :viewStatus="viewStatus"
        :Id="Id"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
        @getMenu="getMenu"
      />
      <!--v-if="[4].includes(SubIdentificationEnum)"-->
      <train-record
        v-if="[4].includes(SubIdentificationEnum)"
        :viewStatus="viewStatus"
        :Id="Id"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
        @getMenu="getMenu"
      />
      <temp
        v-if="[6].includes(SubIdentificationEnum)"
        :viewStatus="viewStatus"
        :Id="Id"
        :ArchiveTypeEnum="ArchiveTypeEnum"
        :rowData="rowData"
        @getMenu="getMenu"
      />
    </div>
  </div>
</template>
<script>
import BaseContainer from '@/components/BaseContainer'
import Menu from './components/menu.vue'
import reportDoc from './components/report_doc/index.vue'
import fileRecord from './components/fileRecord/index.vue'
import trainRecord from './components/trainRecord/index.vue'
import temp from './components/template/index.vue'
export default {
  name: 'trialDocument',
  components: { BaseContainer, Menu, reportDoc, fileRecord, trainRecord, temp },
  data() {
    return {
      viewStatus: false,
      Id: null,
      SubIdentificationEnum: null,
      ArchiveTypeEnum: null,
      rowData: {},
    }
  },
  computed: {
    isInspect() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:inspect',
      ])
    },
    isManage() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:manage',
      ])
    },
  },
  methods: {
    handleChange() {
      this.Id = null
      this.SubIdentificationEnum = null
      this.ArchiveTypeEnum = null
      this.rowData = {}
    },
    getMenu() {
      this.$refs.Menu.getMenu()
    },
  },
}
</script>
<style lang="scss" scoped>
.trialDocument {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  .left {
    width: 300px;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid #e4e7ed;
    .top {
      width: 100%;
      max-height: 75px;
      display: flex;
      flex-wrap: wrap;
      padding: 0 15px;
      margin-bottom: 5px;
      .viewCheck {
        width: 100%;
        line-height: 30px;
        margin-bottom: 10px;
      }
    }
    .menuBox {
      width: 100%;
      height: calc(100% - 80px);
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }
    .noTop {
      height: 100%;
    }
  }
  .main {
    width: calc(100% - 300px);
    height: 100%;
    padding: 10px;
  }
}
</style>