<template>
  <div class="table-list-container" v-loading="loading">
    <h3 v-if="isReadingShowSubjectInfo">
      <span v-if="subjectCode">{{ subjectCode }} </span>
      <span style="margin-left:5px;">{{ taskBlindName }}</span>
    </h3>
    <h3 v-if="tableQuestion && tableQuestion.GroupName">
      {{ language === 'en' ? tableQuestion.GroupEnName : tableQuestion.GroupName }}
    </h3>
    <h4 v-if="tableQuestion && tableQuestion.QuestionName">
      {{ tableQuestion.QuestionName }}
    </h4>
    <el-table 
      v-if="tableQuestion && tableQuestion.Type === 'basicTable' && tableQuestion.TableQuestions" 
      :ref="tableQuestion.Id"
      :data="tableQuestion.TableQuestions.Answers"
      height="100%"
    >
      <el-table-column 
        v-for="q of tableQuestion.TableQuestions.Questions" 
        :key="q.Id" 
        :prop="q.Id"
        :label="q.QuestionName" 
        show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="q.Unit > 0 && !isNaN(parseFloat(scope.row[q.Id]))">
            {{ `${scope.row[q.Id]} ${$fd('ValueUnit', parseInt(q.Unit))}` }}
          </span>
          <span v-else-if="q.DictionaryCode">
            {{`${scope.row[q.Id] instanceof Array ? scope.row[q.Id].map(item => $fd(q.DictionaryCode,
              parseInt(item))).join(',') : $fd(q.DictionaryCode, parseInt(scope.row[q.Id]))}`}}
          </span>
          <span v-else-if="q.OptionTypeEnum === 1">
            {{ `${scope.row[q.Id] instanceof Array ? scope.row[q.Id].join(',') : scope.row[q.Id]}` }}
          </span>
          <span v-else>
            {{ `${scope.row[q.Id]}` }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getFilterTableQuestion } from '@/api/reading'
import store from '@/store'
import { mapGetters } from 'vuex'
import { changeURLStatic } from '@/utils/history.js'
export default {
  name: 'DicomTableList',
  data() {
    return {
      isReadingShowSubjectInfo: false,
      subjectCode: null,
      taskBlindName: null,
      questionId: null,
      tableQuestion: null,
      loading: false
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  created() {
    if (this.$route.query.TokenKey) {
      store.dispatch('user/setToken', this.$route.query.TokenKey)
      changeURLStatic('TokenKey', '')
    }
    this.subjectCode = localStorage.getItem('subjectCode')
    this.taskBlindName = localStorage.getItem('taskBlindName')
    this.isReadingShowSubjectInfo = localStorage.getItem('isReadingShowSubjectInfo')
    this.getList()
  },
  methods: {
    async getList() {
      try {
        this.loading = true
        let params = {
          trialId: this.$route.query.trialId,
          visitTaskId: this.$route.query.visitTaskId,
          questionId: this.$route.query.questionId
        }
        let res = await getFilterTableQuestion(params)
        if (res.IsSuccess) {
          this.tableQuestion = res.Result
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
      
    },
    resetList() {

    }
  }
}
</script>
<style lang="scss" scoped>
.table-list-container {
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

h3, h4 {
  flex-shrink: 0;
  margin: 10px 0 10px;
}

</style>