<template>
  <div class="app-container">
    <div class="ImageReviewTask-list app-container">
      <el-row>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>Global1</span>
            </div>
            <el-collapse v-model="activeNames">
              <el-collapse-item
                title="Timepoint Efficacy Assessment"
                name="TimepointEfficacy"
              >
                <el-table
                  ref="TimepointEfficacyTable"
                  :data="Global1VisitRS"
                  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 :maxLength="$inputMax"
                        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 :maxLength="$inputMax"
                  v-model="SubjectNote1"
                  type="text"
                  placeholder=""
                  size="small"
                  :disabled="isReportSaved"
                />
              </el-collapse-item>

              <el-collapse-item
                title="Previous Global Reads"
                name="PreviousGlobalReads"
              >
                <el-table
                  ref="GlobalReadsTable"
                  :data="PreviousGlobalReadsList1"
                  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>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>Global2</span>
            </div>
            <el-collapse v-model="activeNames">
              <el-collapse-item
                title="Timepoint Efficacy Assessment"
                name="TimepointEfficacy"
              >
                <el-table
                  ref="TimepointEfficacyTable"
                  :data="Global2VisitRS"
                  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 :maxLength="$inputMax"
                        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 :maxLength="$inputMax"
                  v-model="SubjectNote2"
                  type="text"
                  placeholder=""
                  size="small"
                  :disabled="isReportSaved"
                />
              </el-collapse-item>

              <el-collapse-item
                title="Previous Global Reads"
                name="PreviousGlobalReads"
              >
                <el-table
                  ref="GlobalReadsTable"
                  :data="PreviousGlobalReadsList2"
                  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>
          </el-card>
        </el-col>
      </el-row>

      <div style="margin-top: 50px">
        <el-form ref="basicInfoForm" size="small">
          <el-row>
            <el-col :span="12" :offset="6">
              <el-form-item
                prop="Qualified"
                label="Which one do you prefer?"
                label-width="200px"
                :rules="[{ required: true, message: '', trigger: 'blur' }]"
              >
                <!-- v-model="reportResult.Qualified" -->
                <el-radio-group v-model="adReport.SelectGlobalId" :disabled="isReportSaved">
                  <el-radio :label="dbAdInfo.Global1Id">Global1</el-radio>
                  <el-radio :label="dbAdInfo.Global2Id">Global2</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="6">
              <el-form-item label="Note: " prop="Note">
                <el-input :maxLength="$inputMax"
                  v-model="adReport.AdNote"
                  type="textarea"
                  :rows="8"
                  placeholder="Please input Note"
                >
                  <!-- v-model="textarea" -->
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-form-item style="margin-left: 120px">
              <el-button
                type="primary"
                style="float: left; margin-left: 500px"
                :disabled="isReportSaved"
                @click="AddADReport"
              >Save</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </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 {
  GetAdReport,
  AddAdjudicationReport
} from '@/api/reading'
import BaselineTask from '../tp/baselineTask.vue'
import VisitTask from '../tp/visitTask.vue'

export default {
  name: 'GlobalTask',
  components: { VisitTask, BaselineTask },
  data() {
    return {
      token: zzSessionStorage.getItem('TokenKey'),
      pageAdInfo: '',
      dbAdInfo: '',
      isReportSaved: false,

      activeNames: [
        'TimepointEfficacy',
        'CommentsForSubject',
        'PreviousGlobalReads'
      ],

      // Global1:'',
      // Global2:'',
      PreviousGlobalReadsList1: [],
      PreviousGlobalReadsList2: [],
      SubjectNote1: '',
      SubjectNote2: '',

      Global1VisitRS: [],
      Global2VisitRS: [],

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

      adReport: {
        AdID: '',
        SelectGlobalId: '',
        AdNote: ''
      },

      timepointEfficacyList: [],
      previousGlobalReadsList: []
    }
  },

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

  mounted() {
    this.GetAdReport(this.pageAdInfo.Id)
  },

  methods: {
    GetAdReport(id) {
      GetAdReport(id).then((res) => {
        this.PreviousGlobalReadsList1 = res.Result.Global1.PreviousGlobalReadsList
        this.SubjectNote1 = res.Result.Global1.SubjectNote
        this.Global1VisitRS = res.Result.Global1VisitRS

        this.PreviousGlobalReadsList2 = res.Result.Global2.PreviousGlobalReadsList
        this.SubjectNote2 = res.Result.Global2.SubjectNote
        this.Global2VisitRS = res.Result.Global2VisitRS

        this.dbAdInfo = res.Result.ADInfo

        this.adReport.SelectGlobalId = this.dbAdInfo.SelectGlobalId
        this.adReport.AdNote = this.dbAdInfo.AdNote
      })

      //   getHistoryVisitRsList(
      //     this.globalInfo.TrialId,
      //     this.globalInfo.TrialCode,
      //     this.globalInfo.SubjectCode,
      //     this.globalInfo.WorkloadCode,
      //     this.globalInfo.VisitNum,
      //     this.globalInfo.Id
      //   ).then((res) => {
      //     this.timepointEfficacyList = res.Result
      //   })
    },

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

    AddADReport() {
      this.adReport.AdID = this.pageAdInfo.Id

      AddAdjudicationReport(this.adReport).then(res => {
        this.$message.success('Report saved successfully')

        this.GetAdReport(this.pageAdInfo.Id)
      })
    },

    goVisitImage(row) {
      const routes = this.$router.resolve({
        path: '/showdicom',
        query: { tpCode: row.TpCode, visitNum: row.VisitNum, token: zzSessionStorage.getItem('TokenKey') }
      })
      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;
  }

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