<template>
  <el-dialog title="智能诊断" class="dialog-box" :close-on-click-modal="false" :visible.sync="userDialogVisible" width="600px">
    <div class="step-01" v-if="showStep" v-loading="stepOneLoading">
      <h3>第一步：选择诊断疾病</h3>
      <el-table
        :data="tableResult"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        border>
        <el-table-column
          type="selection"
          :selectable="checkboxInit"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          align="center"
          label="疾病种类"
          prop="" >
          <template slot-scope="scope">
            <span>{{scope.row.type}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="el-btn-col">
        <div class="el-btn-col-box">
          <el-button type="primary" :disabled="disabledBtnOne" @click="nextStep">下一步</el-button>
        </div>
      </div>
    </div>
    <div class="step-02"
      v-if="!showStep"
      v-loading="stepTwoLoading"
      element-loading-text="处理中，请稍后...">
      <h3>第二步：上传诊断数据</h3>
      <el-upload class="upload-demo" ref="uploadDCM" drag multiple
        :action="uploadTask"
        :accept="'.dcm, .DICOM'"
        :before-upload="handleUploadBefore"
        :before-remove="handleUploadRemove"
        :on-error="handelUploadError"
        :on-success="handleUploadSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传dcm文件</div>
      </el-upload>
      <div class="el-btn-col">
        <div class="el-btn-col-box">
          <el-button type="primary" @click="submitUpload" :disabled="disabledBtnTwo">开始诊断</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import { newTask, uploadTask, pageTaskOne } from '@/api/api'
  import { stateMsg } from '@/utils/stateMsg'
  export default {
    data() {
      return {
        uploadTask,
        userDialogVisible: false,
        showStep: true,
        stepOneLoading: false,
        stepTwoLoading: false,
        disabledBtnOne: true,
        disabledBtnTwo: true,
        multipleSelection: [],
        fileMutList: [],
        tableResult: [{
          type: '先心病(房间隔缺损)',
          check: 1,
          dis: 1
        }, {
          type: '冠心病',
          check: 0,
          dis: 0
        }, {
          type: '脑溢血',
          check: 0,
          dis: 0
        }],
        uploadFlag: 0
      }
    },
    watch: {
      uploadFlag(val) {
        console.log(val)
        if (val === 0) {
          this.disabledBtnTwo = false
        } else {
          this.disabledBtnTwo = true
        }
      }
    },
    methods: {
      openDiag() {
        this.multipleSelection = []
        this.userDialogVisible = true
        this.showStep = true
      },
      nextStep() {
        var that = this
        if (this.multipleSelection.length > 0) {
          that.stepOneLoading = true
          setTimeout(function() {
            that.stepOneLoading = false
            that.showStep = false
          }, 1000)
        }
      },
      submitUpload() {
        var that = this
        that.stepTwoLoading = true
        if (!this.fileMutList.length) {
          return
        }
        this.$http.post(newTask, {
          file: this.fileMutList,
          taskType: '1'
        }, function(res) {
          if (res.success) {
            that.queryTaskCon(res.data)
          }
        })
      },
      queryTaskCon(tid) {
        var that = this
        that.$http.get(pageTaskOne, {
          id: tid
        }, function(res) {
          if (res.success && res.data) {
            var obj = res.data
            if (obj.state) {
              obj.stateMsg = stateMsg(obj.state)
              if (obj.state.toString().match(/(50|51|52)$/)) {
                that.stepTwoLoading = false
                that.$parent.pageQueryList()
                that.seeResultErr(obj)
                that.userDialogVisible = false
                return
              }
              if (obj.state === 699) {
                that.stepTwoLoading = false
                that.$parent.pageQueryList()
                that.seeResult(obj.id)
                that.userDialogVisible = false
                return
              }
              setTimeout(() => {
                that.queryTaskCon(tid)
              }, 1000)
            }
          }
        })
      },
      seeResultErr(row) {
        var msgtype = row.stateMsg.split('-')[0]
        var msgbody = `数据在${msgtype}过程中失败，请重新尝试，或联系管理员。<br /> <small>错误代码：${row.stateCode}</small>`
        var msgtit = `${msgtype}失败`
        this.$alert(msgbody, msgtit, {
          dangerouslyUseHTMLString: true,
          callback: action => {}
        })
      },
      seeResult(id) {
        const routeData = this.$router.resolve({
          name: 'resultS',
          query: { id: id }
        })
        window.open(routeData.href, '_blank')
      },
      handleSelectionChange(selection) {
        if (selection.length) {
          this.disabledBtnOne = false
        } else {
          this.disabledBtnOne = true
        }
        this.multipleSelection = selection
      },
      handleUploadBefore(file) {
        this.uploadFlag++
      },
      handleUploadRemove(file, fileList) {
        this.uploadFlag--
      },
      handelUploadError(err, file, fileList) {
        if (err) {
          console.log(err.stack)
        }
        this.uploadFlag--
      },
      handleUploadSuccess(res, file, fileList) {
        this.uploadFlag--
        if (res.data.length) {
          for (let i = 0; i < res.data.length; ++i) {
            this.fileMutList.push(res.data[i].uri + '.' + res.data[i].name)
          }
        }
      },
      tableRowClassName({ row }) {
        if (!row.check && !row.dis) {
          return 'table-disabled'
        }
        return ''
      },
      checkboxInit(row) {
        if (!row.dis) {
          return 0
        } else {
          return 1
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .dialog-box{
    .num-input{
      width:320px;
      display: block;
      margin:auto
    }
    .el-button{
      width: 320px;
    }
    .step-01, .step-02{
      min-height: 240px;
    }
    .table-disabled {
      color: #999;
    }
    .el-upload{
      width:100%;
      .el-upload-dragger{
        width: 100%;
        height: 200px;
        .el-icon-upload{
          margin-top: 50px;
        }
      }
    }
  }
</style>
