<template>
  <div class="log-list">
    <el-table v-loading="loading" :data="tableData" v-adaptive="{ bottomOffset: 40 }" height="100" style="width: 100%">
      <el-table-column prop="CreateTime" :label="$t('trials:researchForm:logList:label:CreateTime')" min-width="120"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.CreateTime ? moment(scope.row.CreateTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="Name" :label="$t('trials:researchForm:logList:label:Name')" min-width="100"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="UserType" :label="$t('trials:researchForm:logList:label:UserType')" min-width="100"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.UserType && $fd('UserType', scope.row.UserType) ? $fd('UserType', scope.row.UserType) : '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="OptType" :label="$t('trials:researchForm:logList:label:OptType')" min-width="100"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{ $fd('SiteSurveyOptTyp', scope.row.OptType) }}
        </template>
      </el-table-column>
      <el-table-column prop="Json" :label="$t('trials:researchForm:logList:label:Json')" min-width="100"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button v-if="scope.row.Json" type="text" @click="openLog(scope.row)">{{
            $t('trials:researchForm:logList:label:SurveyForm') }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="Reason" :label="$t('trials:researchForm:logList:label:Reason')" min-width="140"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getSiteSurveyLogList } from '@/api/research'
import moment from 'moment'
import { getToken } from '@/utils/auth'
export default {
  name: 'LogList',
  props: {
    trialSiteSurveyId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      moment,
      openWindow: null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        this.loading = true
        let res = await getSiteSurveyLogList({ trialSiteSurveyId: this.trialSiteSurveyId })
        if (res.IsSuccess) {
          this.tableData = res.Result
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    openLog(row) {
      if (this.openWindow) {
        this.openWindow.close()
      }
      var token = getToken()
      var path = `/researchLog?trialId=${this.$route.query.trialId}&trialSiteSurveyId=${this.trialSiteSurveyId}&logId=${row.Id}&TokenKey=${token}`

      this.openWindow = window.open(path, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.log-list {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
</style>
