<template>
  <div class="app-container">
    <div class="ImageReviewTask-list app-container">
      <el-collapse v-model="activeNames">
        <el-collapse-item
          title="Timepoint Efficacy Assessment"
          name="TimepointEfficacy"
        >
          <el-table
            ref="TimepointEfficacyTable"
            :data="timepointEfficacyList"
            stripe
            size="small"
          >
            <el-table-column type="index" width="60" />
            <el-table-column
              prop="VisitName"
              label="Visit"
              show-overflow-tooltip
              min-width="120"
            >
              <template
                slot-scope="scope"
              >{{ scope.row.VisitName + '    ' }}
                <el-button
                  type="text"
                  size="small"
                  @click="goCRF(scope.row)"
                >CRF</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="goVisitImage(scope.row)"
                >Image</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="OverallResponse"
              label="Timepoint Efficacy Assessment"
              show-overflow-tooltip
              min-width="100"
            />

            <el-table-column
              prop="Agree"
              label="Agree or not"
              show-overflow-tooltip
              min-width="100"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.GlobalRSSelect.Agree"
                  style="width: 100%"
                  size="small"
                >
                  <!-- <el-option label="Please select" /> -->
                  <el-option :value="true" label="Agree" />
                  <el-option :value="false" label="Disagree" />
                </el-select>
              </template>
            </el-table-column>

            <el-table-column
              prop="newRS"
              label="Updated Timepoint Efficacy Assessment"
              show-overflow-tooltip
              min-width="100"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.GlobalRSSelect.NewRS"
                  style="width: 100%"
                  size="small"
                >
                  <!-- <el-option
                    v-for="item in VisitLymphNodeTargetList"
                    :key="item.value"
                    :label="item.TRORRES"
                    :value="item.TRORRES"
                  /> -->
                  <el-option value="test1" label="test1" />
                  <el-option value="test2" label="test2" />
                </el-select>
              </template>
            </el-table-column>

            <el-table-column
              prop="Note"
              label="Comments for This Timepoint"
              min-width="100"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.GlobalRSSelect.Note"
                  type="text"
                  placeholder=""
                  size="small"
                  :disabled="isReportSaved"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>

        <el-collapse-item
          title="Comments for the Subject"
          name="CommentsForSubject"
        >
          <el-input
            v-model="subjectNote"
            type="text"
            placeholder=""
            size="small"
            :disabled="isReportSaved"
          />
        </el-collapse-item>

        <el-collapse-item
          title="Previous Global Reads"
          name="PreviousGlobalReads"
        >
          <el-table
            ref="GlobalReadsTable"
            :data="previousGlobalReadsList"
            stripe
            size="small"
          >
            <el-table-column type="index" width="60" />
            <el-table-column
              prop="VisitName"
              label="Visit"
              show-overflow-tooltip
              min-width="100"
            />
            <el-table-column
              prop="OverallResponse"
              label="Timepoint Efficacy Assessment"
              show-overflow-tooltip
              min-width="100"
            />
          </el-table>
        </el-collapse-item>
      </el-collapse>
      <div id="footer">
        <el-button
          type="primary"
          style="float: left; margin-left: 500px"
          :disabled="isReportSaved"
          @click="AddGlobalReport"
        >Save</el-button>
        <!-- <el-button
          type="primary"
          style="float: left; margin-left: 600px"
          :disabled="isReportSaved"
          @click="submiteReport"
          >Submit Report</el-button
        > -->
      </div>
    </div>
    <div v-if="dialogVisible">
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="90%">
        <baseline-task v-if="rowVisitNum == 1" />
        <visit-task
          v-if="rowVisitNum != 1"
          :global-row-visit-num="rowVisitNum"
          :visit-tp-code="rowTpCode"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getHistoryVisitRsList,
  getHistoryGlobalRsList,
  AddGlobalReport
} from '@/api/reading'
import BaselineTask from '../tp/baselineTask.vue'
import VisitTask from '../tp/visitTask.vue'

export default {
  name: 'GlobalTask',
  components: { VisitTask, BaselineTask },
  data() {
    return {
      isReportSaved: false,
      pageTPInfo: '',
      activeNames: [
        'TimepointEfficacy',
        'CommentsForSubject',
        'PreviousGlobalReads'
      ],
      subjectNote: '',
      subjectCode: '',

      dialogVisible: false,
      rowVisitNum: 0,
      rowTpCode: '',
      dialogTitle: '',

      globalInfo: {},
      timepointEfficacyList: [],
      previousGlobalReadsList: []
    }
  },

  created() {
    this.globalInfo = this.$route.query
  },

  mounted() {
    this.getTimepointEfficacy()
    this.getPreviousGlobalReads()
  },

  methods: {
    getTimepointEfficacy() {
      getHistoryVisitRsList(
        this.globalInfo.TrialId,
        this.globalInfo.SubjectId,
        this.globalInfo.VisitNum,
        this.globalInfo.Id,
        this.globalInfo.WorkloadCode
      ).then((res) => {
        this.timepointEfficacyList = res.Result
      })
    },

    getPreviousGlobalReads() {
      getHistoryGlobalRsList(
        this.globalInfo.TrialId,
        this.globalInfo.SubjectId,
        this.globalInfo.VisitNum,
        this.globalInfo.Id
      ).then((res) => {
        this.previousGlobalReadsList = res.Result.PreviousGlobalReadsList
        this.subjectNote = res.Result.SubjectNote
      })
    },

    AddGlobalReport() {
      var globalData = {}

      globalData.GlobalId = this.globalInfo.Id
      globalData.SubjectNote = this.subjectNote
      globalData.SubjectCode = this.globalInfo.SubjectCode
      globalData.SubjectId = this.globalInfo.SubjectId

      globalData.GlobalRSReportList = []
      this.timepointEfficacyList.forEach((element) => {
        globalData.GlobalRSReportList.push({
          GlobalId: this.globalInfo.Id,
          TpCode: element.TpCode,
          VisitNum: element.VisitNum,
          Agree: element.GlobalRSSelect.Agree,
          NewRS: element.GlobalRSSelect.NewRS,
          Note: element.GlobalRSSelect.Note
        })
      })

      AddGlobalReport(globalData).then((res) => {
        this.$message.success('Report saved successfully')
        // this.isReportSaved = true

        this.getTimepointEfficacy()
        this.getPreviousGlobalReads()
      })
    },

    goVisitImage(row) {
      const token = zzSessionStorage.getItem('TokenKey')
      const routes = this.$router.resolve({
        path: '/showdicom',
        query: { tpCode: row.TpCode, visitNum: row.VisitNum, studyId: row.StudyId, type: 'Global', token: token }
      })
      window.setTimeout(function() {
        window.open(routes.href, '_blank')
      }, 1000)
    },
    goCRF(row) {
      this.rowVisitNum = row.VisitNum
      this.dialogVisible = true
      this.rowTpCode = row.TpCode
      this.dialogTitle =
        this.globalInfo.TrialCode +
        '/' +
        this.globalInfo.SubjectCode +
        '/' +
        row.VisitName
    }
  }
}
</script>
<style lang="scss">
.ImageReviewTask-list {
  //   height: 100%;

  .el-collapse-item.is-disabled .el-collapse-item__header {
    color: black;
  }

  .el-collapse-item__header {
    // background-color: #f0f0f0;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    padding: 0 5px;
  }

  //   .el-collapse-item__wrap {
  //     padding: 0 5px;
  //   }
  //   .el-collapse {
  //     margin-bottom: 100px;
  //   }
  //   .toolbar {
  //     margin: 5px 0px;
  //     .mr {
  //       margin-right: 5px;
  //       width: 130px;
  //     }
  //   }

  #footer {
    position: fixed;
    bottom: 30px;
    width: 100%;
    // height: 30px; /*脚部的高度*/
    // background: #6cf;
    clear: both;
  }
}
</style>

