<template>
  <div>
    <el-dialog
      :visible.sync="showModal"
      title="流程详情"
      fullscreen
      top="0"
    >
      <div>
        <!-- 执行顺序 -->
        <Alert class="equip_alert">
          <div>
            <table class="tableClass table1Class">
              <tbody>
                <tr>
                  <th>计划名称</th>
                  <td>{{ getObj.name }}</td>
                  <th>部门</th>
                  <td>{{ getObj.orgName }}</td>
                </tr>
                <tr>
                  <th>申请原因</th>
                  <td>{{ getObj.applyReason }}</td>
                  <th>申请人</th>
                  <td>{{ getObj.applyName }}</td>
                </tr>
                <tr>
                  <th>申请时间</th>
                  <td>{{ this.$dateformat(getObj.applyTime, 'yyyy-mm-dd HH:MM') }}</td>
                  <th>备注</th>
                  <td>{{ getObj.remark }}</td>
                </tr>
                <tr v-if="getObj.firstStepName!==undefined">
                  <th>中心主任</th>
                  <td>{{ getObj.firstStepName }}</td>
                  <th>中心主任审批时间</th>
                  <td>{{ this.$dateformat(getObj.firstStepTime, 'yyyy-mm-dd HH:MM') }}</td>
                </tr>
                <tr v-if="getObj.firstStepName!==undefined">
                  <th>中心主任意见</th>
                  <td colspan="3">
                    {{ getObj.firstStepAdvice }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </Alert>
        <div style="margin-bottom: 10px">
          <element-table
            ref="pageTable"
            :page-columns="pageColumns"
            :get-page="getPage"
            :table-height="360"
            hide-page
          >
            <el-table-column
              v-for="item in pageColumns"
              :key="item.key"
              show-overflow-tooltip
              :prop="item.key"
              :label="item.title"
              :min-width="item.width"
              :fixed="item.fixed?item.fixed:undefined"
            >
              <template slot-scope="scope">
                <div v-if="item.date">
                  {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM'):'' }}
                </div>
                <div v-else>
                  {{ scope.row[item.key] }}
                </div>
              </template>
            </el-table-column>
          </element-table>
        </div>
        <Form id="edit-form" :label-width="90" inline style="margin-top: 10px">
          <Form-item label="附件报告单" style="width: 98.6%;">
            <div v-for="item in lmsEquipFiles" :key="item.id" class="file-upload-list">
              <div>
                <div class="file-upload-list-cover">
                  <Icon type="ios-cloud-download-outline" @click.native="_downloadFile(item)" />
                </div>
              </div>
              {{ item.orginName }}
            </div>
          </Form-item>
        </Form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { equipCheck, equipFile } from '../../../../api'
import global from '../../../../api/config'

export default {
  data() {
    return {
      showModal: false,
      id: {},
      lmsEquipFiles: [], // 文件集合
      pageColumns: [
        {
          title: '仪器名称',
          key: 'equipName',
          width: 160,
          fixed: 'left'
        },
        { title: '仪器编号', key: 'labNum', width: 160 },
        { title: '核查内容', key: 'checkContent', width: 160 },
        {
          title: '计划核查开始时间',
          key: 'checkStartTimePlan',
          width: 160,
          date: true
        },
        {
          title: '计划核查结束时间',
          key: 'checkEndTimePlan',
          width: 160,
          date: true
        },
        { title: '负责人', key: 'checkName', width: 160 },
        { title: '制造厂商', key: 'productPlace', width: 160 },
        { title: '规格型号', key: 'spec', width: 160 },
        { title: '备注', key: 'remark', width: 160 }
      ],
      getObj: {},
      getPage: {
        records: []
      }
    }
  },
  methods: {
    _open(id) {
      this.showModal = true
      this.$nextTick(function() {
        this.id = id
        this._order()
        this._getEquipFileList()
      })
    },
    _order: async function() {
      this.getObj = await equipCheck.getById(this.id)
      this.getPage.records = this.getObj.lmsEquipCheckManageVO
      this.$refs.pageTable._initTable()
    },
    _getEquipFileList: async function() {
      this.lmsEquipFiles = await equipFile.getFileList({ relId: this.id })
    },
    _downloadFile(file) {
      // 下载文件
      this.$confirm('确认下载？')
        .then(_ => {
          const url =
            global.baseURL + '/res/v1/equip_check/downLoadFile?id=' + file.id
          window.open(url)
        })
        .catch(_ => {})
    }
  }
}
</script>
