<template>
  <div class="defaut-container">
    <el-card class="box-card">
      <div slot="header">
        <span>诊断记录>查看结果</span>
      </div>
      <div class="box-content">
        <div class="box-main">
          <el-form label-width="84px" v-loading="tableLoading">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="诊断编号：">{{tableData.id}}</el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="发起时间：">{{tableData.createTime}}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发起人：">{{tableData.uid}}</el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="数据编号：">{{tableData.dataNum}}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="诊断疾病：">{{tableData.taskType}}</el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4">
                <el-form-item label="完成时间：">{{tableData.modifyTime}}</el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="诊断结果：">
                  <el-row :gutter="20" v-if="tableResult && tableResult.length>0">
                    <el-col :span="6" v-for="item in tableResult" :key="item.index">
                      <div class="res-pic">
                        <img class="res-pic" :src="item.img" :alt="item.img || '图片缺失'" />
                      </div>
                      <p class="res-word" :style="item.text === '文件缺失' ? 'color: #F56C6C': ''">{{item.text}}</p>
                    </el-col>
                  </el-row>
                  <span v-else style="color:#F56C6C">文件缺失</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </el-card>
    <!-- <el-card style="margin-top:10px">
      <div slot="header">
        <span @click="queryRelateInfo">查看相似病例>></span>
      </div>
      <div class="box-content" v-loading="relateLoading" element-loading-text="查找中...">
        <div class="box-main">
          <el-carousel :interval="5000" arrow="always" v-if="relateData.length">
            <el-carousel-item v-for="item in relateData" :key="item">
              <img :src="item" :alt="item || '病例文件缺失'" width="100%">
            </el-carousel-item>
          </el-carousel>
          <span v-else style="color:#F56C6C">未发现相似病例</span>
        </div>
      </div>
    </el-card> -->
    <PicPreview v-if="tableResult && tableResult.length>0" ref="PicPreview" :previewList="tableResult"></PicPreview>
  </div>
</template>

<script>
import axios from 'axios'
import queryBase from '@/utils/queryBase'
import { taskResult, pageTaskOne, pageRelateTask } from '@/api/api'
import { urlParse, parseTime } from '@/utils'
import '@/styles/roleuser.scss'
import PicPreview from '@/components/PicturePreview'

export default {
  data() {
    return {
      tableData: {},
      tableResult: [],
      tableLoading: false,
      relateData: [],
      relateLoading: false,
      resultId: ''
    }
  },
  components: {
    PicPreview
  },
  created() {
    this.resultId = urlParse('id')
    this.queryTaskCon()
    this.queryResultCon()
    // this.queryRelateInfo()
  },
  methods: {
    queryTaskCon() {
      var that = this
      that.tableLoading = true
      that.$http.get(pageTaskOne, {
        id: that.resultId
      }, function(res) {
        that.tableLoading = false
        if (res.success && res.data) {
          const obj = res.data
          if (obj.createTime) {
            obj.createTime = parseTime(obj.createTime)
          }
          if (obj.modifyTime) {
            obj.modifyTime = parseTime(obj.modifyTime)
          }
          if (obj.taskType === 1) {
            obj.taskType = '先心病房缺'
          }
          queryBase.getUserBase(obj.uid, function(sc, value) {
            if (sc) {
              obj.uid = value.name
            }
          })
          that.tableData = obj
        }
      })
    },
    queryResultCon() {
      var that = this
      that.$http.get(taskResult + that.resultId, {}, function(res) {
        if (res.success && res.data) {
          const obj = res.data
          if (obj.length > 0) {
            var resArr = []
            var result = []
            for (let i = 0; i < obj.length; ++i) {
              const src = '/task/result/' + that.resultId + '/RESULT/' + obj[i].split('.')[0]
              if (resArr.indexOf(src) === -1) {
                resArr.push(src)
              }
            }
            var hData = { num: 0, data: resArr }
            for (let j = 0; j < resArr.length; ++j) {
              hData.num++
              axios({
                url: resArr[j] + '.txt'
              }).then(res => {
                hData.num--
                if (res.status === 200 && res.statusText) {
                  result.push({
                    img: resArr[j] + '.jpg',
                    text: res.data
                  })
                } else {
                  result.push({
                    img: resArr[j] + '.jpg',
                    text: '文件缺失'
                  })
                }
                if (hData.num === 0) {
                  that.tableResult = result
                }
              }).catch((err) => {
                if (err) {
                  console.log(err)
                }
                hData.num--
                result.push({
                  img: resArr[j] + '.jpg',
                  text: '文件缺失'
                })
                if (hData.num === 0) {
                  that.tableResult = result
                  console.log(result)
                }
              })
            }
          } else {
            that.tableResult = []
          }
        }
      })
    },
    openPreview(index) {
      this.$refs.PicPreview.initIndex = index
      this.$refs.PicPreview.bigImgShow()
    },
    queryRelateInfo() {
      var that = this
      that.relateLoading = true
      that.$http.get(pageRelateTask, {
        dataNum: that.searchText,
        taskType: that.selectMode,
        pageSize: that.pageSize,
        pageNo: that.pageNo
      }, function(res) {
        that.relateLoading = false
        if (res.success && res.data) {
          const obj = res.data.data
          that.relateData = obj
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.defaut-container {
  margin:10px;
  .box-card{
    width: 100%;
    .box-operate{
      overflow: hidden;
      .box-filter{
        float: right;
      }
      .box-input{
        width: 200px;
      }
    }
    .box-main{
      .el-form-item{
        margin: 0
      }
      .res-pic{
        /*cursor: -webkit-zoom-in;*/
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #DCDFE6;
        box-sizing:border-box;
        width:100%;
        height:302px;
        margin-top:20px;
        border-radius: 4px;
        background-size:cover;
        background-position: center center;
        img{
          max-width: 100%;
          max-height: 100%;
        }
      }
      .res-word{
        line-height: 20px;
        margin-top: 10px; 
      }
    }
  }
}
</style>
