<template>
  <div v-loading="loading" class="manuals-wrapper">
    <div class="left-wrapper">
      <div v-if="fileList.length > 0" class="basic-content">
        <div v-for="file in fileList" :key="file.Id" class="file-item" :class="{ activeItem: file.Id === selected.id }"
          @click.prevent="preview(file)">
          <!-- {{ file.Name }} -->
          <el-tooltip class="item" :content="file.Name" placement="bottom">
            <span>{{ file.Name }} </span>
          </el-tooltip>
        </div>
      </div>
      <div v-else class="basic-content-empty">
        <span>{{ $t('trials:clinicaldara:title:nodata') }}</span>
      </div>
    </div>
    <div class="right-wrapper">
      <div class="right-content">
        <iframe v-if="selected.filePath"
          :src="`/static/pdfjs/web/viewer.html?file=${OSSclientConfig.basePath}${selected.filePath}?userName=${currentUser}&COMPANY=${COMPANY}`"
          width="100%" height="100%" frameborder="0" />
      </div>
    </div>
  </div>
</template>
<script>
import { getManualList, getTrialCriterionKeyFileList } from '@/api/trials'
export default {
  name: 'Manuals',
  props: {
    trialId: {
      type: String,
      required: true
    },
    justKeyDoc: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selected: {
        id: '',
        filePath: ''
      },
      fileList: [],
      loading: false,
      currentUser: zzSessionStorage.getItem('userName'),
      COMPANY: process.env.VUE_APP_COMPANY_NAME
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      this.fileList = []
      try {
        var param = {
          TrialCriterionId: this.$router.currentRoute.query.TrialReadingCriterionId,
          PageIndex: 1,
          PageSize: 1000
        }
        const res = await getTrialCriterionKeyFileList(param)
        if (res.IsSuccess) {
          let list = res.Result.CurrentPageData.map(item => {
            return {
              Id: item.Id,
              Name: item.FileName,
              Path: item.FilePath
            }
          })
          this.fileList = [...this.fileList, ...list]
        }
        if (!this.justKeyDoc) {
          var param = {
            trialId: this.trialId
          }
          const res = await getManualList(param)
          if (res.IsSuccess) {
            this.fileList = [...this.fileList, ...res.Result]
          }
        }
        if (this.fileList.length > 0) {
          this.preview(this.fileList[0])
        }
        this.loading = false
      } catch (e) {
        this.loading = false
      }
    },
    preview(file) {
      this.$set(this.selected, 'filePath', file.Path)
      this.$set(this.selected, 'id', file.Id)
    }
  }
}
</script>
<style lang="scss" scoped>
.manuals-wrapper {
  display: flex;
  flex-direction: row !important;
  width: 100%;
  height: 95%;
  padding: 5px;
  overflow: hidden;

  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }

  .left-wrapper {
    box-sizing: border-box;
    margin-right: 10px;
    height: 100%;
    width: 300px;
    border: 1px solid #ddd;

    .basic-content {
      height: 100%;
      overflow: auto;
    }

    .basic-content-empty {
      padding: 5px;
      font-size: 16px;
    }

    .file-item {
      box-sizing: border-box;
      border-bottom: 1px solid #f3f3f3;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
      padding-left: 5px;
      color: #ddd;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }

    .activeItem {
      color: #428bca !important;
      border-bottom: 1px solid #f3f3f3 !important;
    }
  }

  .right-wrapper {
    flex: 1;
    height: 100%;
    border: 1px solid #ddd;
  }

  .right-content {
    height: 100%;
  }

}
</style>
