<template>
  <div class="measurement-wrapper">

    <div class="container">
      <h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
        核医学评估
      </h4>
      <div class="lesion_list">
        <div class="flex-row" style="margin:3px 0;">
          <div class="title">盆腔淋巴结</div>
        </div>
        <el-table
          :data="questions"
          style="width: 100%"
          row-key="rowIndex"    
          :expand-row-keys="expands"
          @expand-change="expandSelect"
          size="mini"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form :ref="props.row.rowIndex" size="small" :model="props.row" label-width="80px" style="padding-right: 10px">
                <el-form-item label="部位">
                  <el-input
                    v-model="props.row.part"
                    disabled
                  />
                </el-form-item>
                <el-form-item 
                  label="转移灶"
                  prop="distraction"
                  :rules="[
                    { required: true,
                      message:$t('common:ruleMessage:select'), trigger: ['blur', 'change']},
                  ]"
                >
                  <el-select v-model="props.row.distraction" style="width:100%;">
                    <el-option label="阴性" :value="1"></el-option>
                    <el-option label="阳性" :value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="SUVmax">
                  <el-input
                    v-model="props.row.suvMax"
                    disabled
                  />
                </el-form-item>
                <el-form-item >
                  <div style="text-align:right">
                    <el-button v-if="props.row.annotation" size="mini" @click="clearAnnotation(props.row)">{{ $t('trials:reading:button:removeMark') }}</el-button>
                    <el-button size="mini" @click="handleSave(props.row)">{{ $t('common:button:save') }}</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="部位"
            prop="part">
          </el-table-column>
          <el-table-column
            label="转移灶"
            prop="distraction">
            <template slot-scope="scope">
              {{scope.row.distraction === 1 ? '阴性' : scope.row.distraction === 2 ? '阳性' : ''}}
            </template>
          </el-table-column>
          <el-table-column
            label="SUVmax"
            prop="suvMax">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import FusionEvent from './../FusionEvent'
export default {
  name: 'TableQuestionList',
  components: {
  },
  data() {
    return {
      height: window.innerHeight - 140,
      questions: [
        { 
          rowIndex: '001',
          part: '髂内',
          distraction: '',
          suvMax: null,
          saveTypeEnum: 1,
          annotation: null
        },
        {
          rowIndex: '002',
          part: '髂外',
          distraction: '',
          suvMax: null,
          saveTypeEnum: 1,
          annotation: null
        },
        {
          rowIndex: '003',
          part: '髂总',
          distraction: '',
          suvMax: null,
          saveTypeEnum: 1,
          annotation: null
        },
        {
          rowIndex: '004',
          part: '闭孔',
          distraction: '',
          suvMax: null,
          saveTypeEnum: 1,
          annotation: null
        }
      ],
      visitTaskId: '',
      isCurrentTask: false,
      loading: false,
      readingTaskState: 1,
      isBaseLineTask: false,
      taskBlindName: '',
      expands:[]
    }
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    expandSelect(row, expandedRows) {
      this.expands = []
      if (expandedRows.length > 0) {
        row ? this.expands.push(row.rowIndex) : ''
      }
      if (this.expands.length > 0 && row.annotation) {
        FusionEvent.$emit('imageLocation', { annotation: row.annotation })
      }
    },
    async clearAnnotation(row) {
       // 是否确认清除标记？
      const confirm = await this.$confirm(
        this.$t('trials:reading:warnning:msg47'),
        {
          type: 'warning',
          distinguishCancelAndClose: true
        }
      )
      if (confirm !== 'confirm') return
      let i = this.questions.findIndex(i=>i.rowIndex === row.rowIndex)
      FusionEvent.$emit('removeAnnotation', { annotation: this.questions[i].annotation })
      this.questions[i].annotation = null
      this.questions[i].suvMax = null
    },
    async handleSave(row) {
      let loading = null
      try {
        let valid = await this.$refs[row.rowIndex].validate()
        if (!valid) return
        loading = this.$loading({ fullscreen: true })
        setTimeout(() => {
          // 模拟保存成功
          loading.close()
          this.$message.success(this.$t('common:message:savedSuccessfully'))

          // 可以在这里添加更多的逻辑，比如更新页面上的某些元素
        }, 2000); 
      } catch(e) {
        if (loading) {
          loading.close()
        }
      }
    },
    setActiveCollapse(annotationUID) {
      for (let i = 0; i < this.questions.length; i++) {
        let obj = this.questions[i]
        if (obj.annotation && obj.annotation.data && obj.annotation.data.annotationUID === annotationUID) {
          this.expands = [this.questions[i].rowIndex]
          break
        }
      }
    },
    isCanActiveTool(toolName) {
      if (this.expands.length > 0) {
        let isExist = this.isExistMeasureData(this.expands[0])
        return { isCanActiveTool: isExist, reason: '' }
      } else {
        return { isCanActiveTool: false, reason: '' }
      }
    },
    isExistMeasureData(rowIndex) {
      let i = this.questions.findIndex(i=>i.rowIndex === rowIndex)
      if (this.questions[i].annotation) {
        return false
      } else {
        return true
      }
    },
    // modifyMeasuredData(measureObj) {
    //   if (measureObj.questionInfo) {
    //     this.activeItem.activeCollapseId = measureObj.questionInfo.QuestionId
    //     this.activeItem.activeRowIndex = String(measureObj.questionInfo.RowIndex)
    //     this.activeName = `${this.activeItem.activeCollapseId}_${this.activeItem.activeRowIndex}`
    //     const refName = `${this.activeItem.activeCollapseId}_${this.activeItem.activeRowIndex}`
    //     if (this.$refs[refName]) {
    //       this.$refs[refName][0].setMeasureData(measureObj.measureData)
    //     }
    //   }
    // },
    // 设置测量数据
    setMeasuredData(measureData) {
      if (measureData.data && measureData.data.data && measureData.data.data.remark ) {
        // 编辑
        // 展开并更新标记信息
        let remark = measureData.data.data.remark
        let i = this.questions.findIndex(i=>i.part === remark)
        this.questions[i].suvMax = measureData.suvMax
        this.questions[i].annotation = measureData
        this.expands = [this.questions[i].rowIndex]
      } else {
        if (this.expands.length > 0) {
        let i = this.questions.findIndex(i=>i.rowIndex === this.expands[0])
        if (measureData.data && measureData.data.data) {
          measureData.data.data.remark = this.questions[i].part
        }
        
        this.questions[i].annotation = measureData
      }
      }
      
    },

  }
}
</script>
<style lang="scss" scoped>
.measurement-wrapper{

  // .container{
  //   padding: 10px;
  // }
  .title{
    padding: 5px;
    font-weight: bold;
    color: #ddd;
    font-size: 15px;

  }
  .add-icon{
    padding: 5px;
    font-weight: bold;
    color: #ddd;
    font-size: 15px;
    border: 1px solid #938b8b;
    margin-bottom: 2px;
    cursor: pointer;
  }
  .add-icon:hover{
    background-color: #607d8b;
  }

  .flex-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #424242;

  }
  .lesion_list{
    position: relative;
    ::v-deep .el-table, .el-table__expanded-cell {
      background-color: #000;
      color: #fff;
      border-color:#444444;
      .el-form-item__label {
        color: #fff;
      }
      .el-input__inner {
        background-color: rgba(0, 0, 0, .1);
        border-color: #606266;
        color: #fff;
      }
      .el-input.is-disabled .el-input__inner {
        background-color: #303133;
        border-color: #444444;
        color: #c0c4cc;
        cursor: not-allowed;
      }
    }
    

    ::v-deep .el-table th, .el-table tr {
      background-color: #000;
      color: #fff;
      border-color:#444444;
    }
    ::v-deep .el-table__body tr > td{
      background-color:#000 !important;
      color: #fff;
      border-color:#444444;
    }
    // ::v-deep .el-table__body tr:hover > td{
    //   background-color:#858282 !important;
    //   color: #fff;
    //   border-color:#444444;
    // }
    ::v-deep .el-table--border th.gutter:last-of-type{
      border: none;
    }
    ::v-deep .el-card__header{
      border: none;
      padding: 10px;
    }
  }
  .el-collapse{
    border-bottom:none;
    border-top:none;
    ::v-deep .el-collapse-item{
      background-color: #000!important;
      color: #ddd;

    }
    ::v-deep .el-collapse-item__header{
      background-color: #000!important;
      color: #ddd;
      border-bottom-color:#5a5a5a;
      padding-left: 5px;
      height: 35px;
      line-height: 35px;
    }
    ::v-deep .el-collapse-item__wrap{
      background-color: #000!important;
      color: #ddd;
    }
    ::v-deep .el-collapse-item__content{
      width:260px;
      position: absolute;
      top: 0px;
      right: 0px;
      // border: 1px solid #ffeb3b;
      border: 1px solid #fff;
      z-index: 1;
      color: #ddd;
      padding: 5px;
      background-color:#1e1e1e;
    }

  }
}
</style>
