<template>
  <div class="defaut-container">
    <el-card class="box-card">
      <div slot="header">
        <span>诊断记录</span>
      </div>
      <div class="box-content">
        <div class="box-operate clearfix">
          <el-button type="primary" @click="startDiagnosis">发起诊断</el-button>
          <div class="box-filter">
            <el-input class="box-input" placeholder="请输入数据编号" v-model="searchText" @keyup.enter.native="pageQueryList"></el-input>
            <el-select
              class="box-input"
              v-model="selectMode"
              @change="selectChange">
              <el-option label="全部诊断疾病" value="" selected></el-option>
              <el-option label="先心病房缺" value="1"></el-option>
            </el-select>
            <el-button type="primary" @click="pageQueryList">搜索</el-button>
            <el-button type="primary" @click="refreshList" plain>刷新列表</el-button>
          </div>
        </div>
        <div class="box-main">
          <el-table
            :data="tableData"
            height="600"
            v-loading="tableLoading"
            border>
            <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center">
            </el-table-column>
            <el-table-column
              v-for="item in tableItem"
              :key="item.index"
              :prop="item.prop ? item.prop : ''"
              :label="item.tit ? item.tit : ''"
              :width="item.width ? item.width : ''"
              align="center">
              <template slot-scope="scope">
                <div v-if="scope.row[item.prop] && !item.operate">
                  <span>{{scope.row[item.prop]}}</span>
                </div>
                <div class="operate-row" v-if="item.operate && typeof scope.row === 'object'">
                  <div v-if="scope.row[item.prop].toString().match(/(50|51|52)$/)">
                    <el-button
                      size="medium"
                      type="text"
                      @click="seeResultErr(scope.row)">查看结果</el-button>
                  </div>
                  <div v-if="scope.row[item.prop]===699">
                    <el-button
                      size="medium"
                      type="text"
                      @click="seeResult(scope.row.id)">查看结果</el-button>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="pageNo"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>
    <startDiag ref="startDiag"></startDiag>
  </div>
</template>

<script>
import '@/styles/roleuser.scss'
import startDiag from './startDiag'
import { parseTime } from '@/utils'
import { pageQueryTask } from '@/api/api'
import { stateMsg } from '@/utils/stateMsg'

export default {
  data() {
    return {
      searchText: '',
      selectMode: '',
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableData: [],
      tableLoading: true,
      tableItem: [
        {
          prop: 'id',
          tit: '诊断编号',
          width: '320'
        },
        {
          prop: 'createTime',
          tit: '发起时间',
          width: '180'
        },
        {
          prop: 'dataNum',
          tit: '数据编号'
        },
        {
          prop: 'taskType',
          tit: '诊断疾病'
        },
        {
          prop: 'stateMsg',
          tit: '当前状态'
        },
        {
          prop: 'state',
          operate: true,
          tit: '操作',
          width: '200'
        }
      ]
    }
  },
  components: {
    startDiag
  },
  created() {
    this.pageQueryList()
  },
  methods: {
    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')
    },
    pageQueryList() {
      var that = this
      that.tableLoading = true
      that.$http.get(pageQueryTask, {
        dataNum: that.searchText,
        taskType: that.selectMode,
        pageSize: that.pageSize,
        pageNo: that.pageNo
      }, function(res) {
        that.tableLoading = false
        if (res.success && res.data) {
          const obj = res.data.data
          if (obj.length) {
            for (let i = 0; i < obj.length; ++i) {
              if (obj[i].createTime) {
                obj[i].createTime = parseTime(obj[i].createTime)
              }
              if (obj[i].state) {
                obj[i].stateMsg = stateMsg(obj[i].state)
              }
              if (obj[i].taskType === 1) {
                obj[i].taskType = '先心病房缺'
              }
            }
          }
          that.total = res.data.total
          that.tableData = obj
        } else {
          that.total = 0
          that.tableData = []
        }
      })
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.pageQueryList()
    },
    refreshList() {
      this.searchText = ''
      this.selectMode = ''
      this.pageNo = 1
      this.total = 0
      this.tableData = []
      this.pageQueryList()
    },
    selectChange(val) {
      this.pageQueryList()
    },
    startDiagnosis() {
      this.$refs.startDiag.openDiag()
    }
  }
}
</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{
      margin-top: 20px;
    }
  }
  .plat-pic{
    margin: 40px auto 0;
  }
  .plat-tit{
    font-size: 34px;
    line-height: 40px;
    letter-spacing: 2px;
    span{
      color: #0f76c4;
    }
  }
  .plat-tip{
    font-size: 20px;
    padding: 12px 26px;
    letter-spacing: 2px;
  }
}
</style>
