<template>
  <div v-loading="loading" class="preview-wrapper">
    <div class="left-wrapper">
      <div class="basic-info">
        <span v-if="srInfo.SubjectCode">{{ `${srInfo.SubjectCode}` }}</span>
        <span v-if="srInfo.TaskBlindName">({{ `${srInfo.TaskBlindName}` }})</span>
      </div>
      <div class="basic-content">
        <div v-for="(item,index) in srInfo.SrList" :key="index" class="sr-wrapper">

          <div class="sr-item" :class="{activeBtn:index === selectedIdx}" @click.prevent="preview(item,index)">
            {{ index+1 }}
          </div>
        </div>
      </div>
      <!-- <div v-else class="basic-content-empty">
        <span>{{ $t('trials:clinicaldara:title:nodata') }}</span>
      </div> -->
    </div>
    <div class="right-wrapper">
      <template v-for="item in srhtmls">
        <div v-if="item.index === selectedIdx" :key="item.index" class="right-content" v-html="item.htmlData" />
      </template>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'SrList',
  props: {
    srInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isShow: false,
      selectedIdx: -1,
      loading: false,
      srhtmls: [],
      seletedHtml: ''
    }
  },
  mounted() {
    this.initList()
  },
  methods: {
    async initList() {
      if (this.srInfo.SrList.length > 0) {
        this.loading = true
        for (let i = 0; i < this.srInfo.SrList.length; i++) {
          var htmlUrl = this.OSSclientConfig.basePath + this.srInfo.SrList[i]
          var res = await axios.get(htmlUrl)
          this.srhtmls.push({ index: i, htmlData: res.data })
        }
        this.loading = false

        this.selectedIdx = 0
        // this.getHtml(this.srInfo.SrList[0], 0)
      }
    },
    getHtml(url, index) {
      this.loading = true
      var htmlUrl = this.OSSclientConfig.basePath + url
      axios.get(htmlUrl).then(response => {
        this.seletedHtml = response.data
        this.srhtmls.push({ index: index, htmlData: response.data })

        this.loading = false
        return
      }).catch(() => {
        this.loading = false
      })
    },

    preview(url, index) {
      // var i = this.srhtmls.findIndex(i => i.index === index)
      // if (i === -1) {
      //   this.getHtml(url, index)
      // } else {
      //   this.seletedHtml = this.srhtmls[i].htmlData
      // }
      this.selectedIdx = index
    }
  }
}
</script>
<style lang="scss">
.preview-wrapper{
  display: flex;
  flex-direction: row !important;
  width: 100%;
  height: 100%;
  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: 150px;
    border: 1px solid #ddd;

    .basic-info{
      height: 30px;
      line-height: 30px;
      padding: 5px 10px;
      font-size: 20px;
      font-weight: bold;
      background-color: #fff;
      color: #fbfbfb;
    }
    .activeBtn{
      color: #428bca;
      border-color: #428bca;
    }
    .basic-content{
      height: 100%;
      overflow: auto;
    }
    .basic-content-empty{
      padding: 5px;
      font-size: 16px;
    }
    .sr-wrapper{
      padding: 5px;

    }
    .sr-item{
      box-sizing: border-box;
      border-bottom: 2px solid #f3f3f3;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      padding-left: 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .right-wrapper{
    flex: 1;
    height: 100%;
    border: 1px solid #ddd;
  }
  .right-content{
    height:100%;
    overflow-y: auto;
    padding: 0 10px;
    // color: #ddd;
    .footnote{
      display: none;
    }
  }

}
</style>
