<template>
  <el-dialog title="人工智能诊断" class="dialog-box" :visible.sync="userDialogVisible" width="800px">
    <div class="step-01"
      v-if="showStep"
      v-loading="stepOneLoading"
      element-loading-text="搜索数据中，请稍后...">
      <el-input class="num-input" v-model="dataBh" placeholder="请输入数据编号"></el-input>
      <div class="el-btn-col">
        <div class="el-btn-col-box">
          <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
      </div>
    </div>
    <div class="step-02"
      v-if="!showStep"
      v-loading="stepTwoLoading"
      element-loading-text="处理中，请稍后...">
      <el-table
        :data="tableResult"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        border>
        <el-table-column
          type="selection"
          :selectable="checkboxInit"
          width="100"
          align="center">
          <!-- <template slot-scope="scope">
            <span v-if="!scope.row.check && scope.row.dis" :class="{'table-disabled': !scope.row.check}">即将开通</span>
            <label v-else role="checkbox" class="el-checkbox">
              <span aria-checked="mixed" class="el-checkbox__input">
                <span class="el-checkbox__inner"></span>
                <input type="checkbox" aria-hidden="true" class="el-checkbox__original" value="">
              </span>
            </label>
          </template> -->
        </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-column
          align="center"
          label="数据校验"
          prop="">
          <template slot-scope="scope">
            <span v-if="scope.row.check && scope.row.dis">数据完整</span>
            <span v-if="!scope.row.check && !scope.row.dis">-------</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="el-btn-col">
        <div class="el-btn-col-box">
          <el-button type="primary" @click="submitReq">提交申请</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import { addTask } from '@/api/api'
  export default {
    data() {
      return {
        userDialogVisible: false,
        showStep: true,
        stepOneLoading: false,
        stepTwoLoading: false,
        dataBh: '',
        multipleSelection: [],
        tableResult: [{
          type: '先心病房缺(先天性心脏病房间隔缺损)',
          check: 1,
          dis: 1
        }, {
          type: '先心病室缺(先天性心脏病室间隔缺损)',
          check: 0,
          dis: 0
        }, {
          type: '冠心病(冠状动脉粥样硬化性心脏病)',
          check: 0,
          dis: 0
        }]
      }
    },
    methods: {
      openDiag() {
        this.dataBh = ''
        this.multipleSelection = []
        // this.tableResult = []
        this.userDialogVisible = true
        this.showStep = true
      },
      nextStep() {
        var that = this
        if (this.dataBh.length > 0) {
          that.stepOneLoading = true
          setTimeout(function() {
            that.stepOneLoading = false
            that.showStep = false
          }, 1000)
          // this.$http.post(addTask, {
          //   dataNum: that.dataBh,
          //   taskType: '1'
          // }, function(res) {
          //   that.stepOneLoading = false
          //   if (res.success) {
          //     console.log(res)
          //   }
          // })
        } else {
          that.$message({
            type: 'warning',
            message: '请输入数据编号'
          })
        }
      },
      submitReq() {
        var that = this
        if (this.multipleSelection.length > 0) {
          that.stepTwoLoading = true
          // setTimeout(function() {
          //   that.stepTwoLoading = false
          //   that.$alert('诊断申请已提交，正在处理中，请稍后查看。', '提交成功', {
          //     type: 'success',
          //     callback: action => {
          //       that.userDialogVisible = false
          //     }
          //   })
          // }, 1000)
          this.$http.post(addTask, {
            dataNum: that.dataBh,
            taskType: '1'
          }, function(res) {
            that.stepTwoLoading = false
            if (res.success) {
              console.log(res)
              that.$alert('诊断申请已提交，正在处理中，请稍后查看。', '提交成功', {
                type: 'success',
                callback: action => {
                  that.userDialogVisible = false
                  that.$parent.pageQueryList()
                }
              })
            }
          })
          // this.$http.post(addTask, {
          //   id: that.multipleSelection
          // }, function(res) {
          //   that.stepTwoLoading = false
          //   if (res.success) {
          //   }
          // })
        } else {
          that.$message({
            type: 'warning',
            message: '请选择诊断疾病种类'
          })
        }
      },
      checkboxInit(row) {
        if (!row.dis) {
          return 0 // 不可勾选
        } else {
          return 1 // 可勾选
        }
      },
      handleSelectionChange(selection) {
        console.log(selection)
        this.multipleSelection = selection
      },
      tableRowClassName({ row }) {
        if (!row.check && !row.dis) {
          return 'table-disabled'
        }
        return ''
      }
    }
  }
</script>

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