<!--预案执行记录-->
<template>
  <div class="app-container approval_handle">
    <div class="page-container approval_handle-page" v-if="pageType == 1">
      <div class="page-form-title-box">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="" prop="name">
            <el-input
              v-model="queryParams.searchValue"
              placeholder="预案名称/实验室"
              clearable
              maxLength="30"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
          </el-form-item>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" border v-loading="loading" :data="dataList">
          <el-table-column label="预案名称" align="left" prop="riskPlanName"/>
          <el-table-column label="实验室名称" align="left" prop="subName"></el-table-column>
          <el-table-column label="预案发生时间" align="left" prop="eventStartTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.eventStartTime,'{y}-{m}-{d} {h}:{i}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="预案结束时间" align="left" prop="eventEndTime">
            <template slot-scope="scope">
              <span>{{ scope.row.eventEndTime?parseTime(scope.row.eventEndTime,'{y}-{m}-{d} {h}:{i}'):'--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120" v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p" v-hasPermiRouter="['lab:riskEvent:detail']"
                   @click="tableButton(1,scope.row,'detail')">查看</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <!--详情页面-->
    <detail-page v-if="pageType==2" :pageData="pageData"></detail-page>
  </div>
</template>

<script>
  import detailPage from './planExecuteRecordDetail'
  import {
    laboratoryEventList
  } from '@/api/emergencyManagement/index'

  export default {
    name: 'Approval',
    components: {
      detailPage
    },
    data() {
      return {
        tableButtonType:this.hasPermiDom(['lab:riskEvent:detail']),
        //页面状态
        pageType: 1,
        loading: false,
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 20,
          searchValue: ''
        },
        dataList: [],
        total: 0,
        pageData: {}
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      tableButton(type,row) {
        if (type == '1') {//详情
          this.$set(this,'pageData',row);
          this.$set(this,'pageType',2);
        } else if (type == '2') {//返回
          this.$set(this,'pageType',1);
          this.getList()
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'queryParams',{
          page:1,
          pageSize: 20,
          searchValue: ''
        })
        this.handleQuery()
      },
      getList() {
        this.loading = true
        laboratoryEventList(this.queryParams).then(response => {
          this.$set(this, 'total', response.data.total)
          this.$set(this, 'dataList', response.data.records)
          this.loading = false
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .approval_handle {
    .approval_handle-page {

    }
  }
</style>
