<!-- 参与培训 -->
<template>
  <div class="app-container">
    <div class="title-bar">
      <span class="title">{{ $t('trainTarget.onlineTraining') }}</span>
      <el-button @click="cancel" class="cancel-button" icon="el-icon-remove-outline">
        {{ $t('common.cancel') }}
      </el-button>
    </div>

    <div :style="{height: containerMaxHeight}" class="participate-train-wrapper">


      <DocumentPreview :url="url" height="80%" width="70%" @toggle-fullscreen="toggleFullscreen"/>

      <el-button-group>
        <el-button
          :disabled="row.trainCompleteFlag != 0"
          type="primary"
          @click="row.trainCompleteFlag == 0 ? handleCompleteTrain() : null">
          {{ row.trainCompleteFlag == 0 ? $t('trainTarget.completeTrain') : $t('trainList.finished') }}
        </el-button>
        <!-- 参加考试 -->
        <el-button v-if="row.assessFlag == 1 && row.assessCompleteFlag != 2" icon="el-icon-plus" type="primary" @click="handleExam"
        >{{ $t('trainTarget.participateExam') }}
        </el-button>
      </el-button-group>


    </div>

  </div>
</template>

<script>

import DocumentPreview from '@/components/DocumentPreview/index.vue'

//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
import {getFileByTrainId} from '@/api/train/file'
import {editTargetStatus, getTarget} from "@/api/train/target";
import {participantTrainPage} from "@/api/train/train";
//引入相关样式

export default {
  name: 'Currency',
  components: {
    VueOfficeExcel,
    DocumentPreview
  },
  dicts: [],
  data() {
    return {
      trainId: null,
      trainFile: null,
      url: "",
      row: {},
    }
  },

  computed: {
    containerMaxHeight() {
      return (this.$store.getters.containerMaxHeight - 48) + 'px'
    }
  },

  created() {
    console.log("this.$route.query.data", JSON.parse(this.$route.query.data))
    // this.row = JSON.parse(this.$route.query.data)
    this.trainId = this.$route.params && this.$route.params.trainId;
    // 获取数据
    this.getTrainInfo()
  },

  mounted() {
  },

  methods: {

    async getTrainInfo() {
      try {
        const response = await getFileByTrainId(this.trainId)
        let query = {
          id: this.trainId
        }
        participantTrainPage(query).then(res => {
          console.log("res=========>", res.rows[0])
          this.row = res.rows[0]
        })
        // console.log("res=========>", response)
        this.trainFile = response.data
        this.url = response.data.file.filePath
        console.log('查询获取url：', this.url)
      } catch (e) {
        console.log(e)
      }
    },

    handleAdd() {

    },

    toggleFullscreen(isFull) {
    },
    // 完成培训
    handleCompleteTrain() {
      let query = {
        id: JSON.parse(this.$route.query.data).ttTargetId,
        updateTime: this.trainFile.updateTime,
      }
      // 更新培训状态
      editTargetStatus(query).then(response => {
        this.$message.success('培训完成')
        getTarget(query.id).then(response => {
          this.row.trainCompleteFlag = response.data.trainCompleteFlag
        })
      })
    },
    // 参加考试
    handleExam() {
      let query = {
        data: JSON.stringify({id: this.trainId})
      }
      this.$tab.openPage(this.$t('trainTarget.participateExam'), "/train/trainTarget/detail/testPaper", query)
    },
    cancel() {
      // this.$tab.closeOpenPage("/train/trainTarget/")
      this.$tab.closePage()
    },
  }
}

</script>


<style lang="scss" scoped>

.app-container {

  .title-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 24px;
  }


  .cancel-button {
    //margin-left: auto;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .account-title {
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
  }

  .button-group {
    display: flex;
  }


  .participate-train-wrapper {
    background-color: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .preview-desc {
      //background-color: lightpink;
      padding-bottom: 22px;

      max-width: 1024px;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 隐藏超出内容 */
      text-overflow: ellipsis; /* 使用省略号表示溢出内容 */

      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 28px;
      font-style: normal;
    }

    .el-button-group {
      padding-top: 60px;

      .el-button + .el-button {
        margin-left: 40px;
      }
    }
  }
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.frame-box {
  height: 40vh;
  width: 70vw;
}

</style>
