<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">工位号：</span>
        <el-select v-model="stationNumberValue" placeholder="工位号" filterable clearable size="small" style="width:240px">
          <el-option v-for="item in stationNumber" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <span style="margin-left: 10px">消息来源：</span>
        <el-input v-model="msgSourceNotLike" placeholder="消息来源" clearable size="small" style="width:150px" />
        <span style="margin-left: 10px">消息类型：</span>
        <el-select v-model="msgTypeValue" placeholder="消息类型" clearable size="small" style="width:120px">
          <el-option label="WARNING" value="WARNING" />
          <el-option label="ERROR" value="ERROR" />
          <el-option label="INFO" value="INFO" />
        </el-select>
        <span style="margin-left: 10px">内容：</span>
        <el-input v-model="contentSearchValue" placeholder="内容" clearable size="small" style="width:250px" />
        <span style="margin-left: 10px">时间：</span>
        <el-date-picker :clearable="false" v-model="dateTime" size="small" type="daterange" align="center"
          style="width: 240px;" value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="～"
          start-placeholder="开始日期" end-placeholder="结束日期" />
        <el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 5px"
          @click="pageSize = 50; pageCurrent = 1; searchTable()">查询</el-button>
        <el-button :loading="exportLoading" :disabled="exportLoading" type="info" size="small" icon="el-icon-download" style="margin-left: 5px" @click="exportExcel">Excel</el-button>
        <!--        <el-button type="success" plain icon="el-icon-document-copy" size="small" @click="copyData('form4')">复制</el-button>-->
      </div>
      <el-table v-loading="loading" :data="tableData" :row-style="rowStyle" border size="mini" height="570" center
        style="width: 90%">
        <el-table-column width="60" label="序号" type="index" align="center" />
        <el-table-column label="工位号" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.工位号 }}
          </template>
        </el-table-column>
        <el-table-column label="消息来源" align="center" width="100px">
          <template slot-scope="scope">
            {{ scope.row.操作类型 }}
          </template>
        </el-table-column>
        <el-table-column label="消息类型" align="center" width="100px">
          <template slot-scope="scope">
            {{ scope.row.消息类型 }}
          </template>
        </el-table-column>
        <el-table-column label="操作人" align="center" width="100px">
          <template slot-scope="scope">
            {{ scope.row.操作人 }}
          </template>
        </el-table-column>
        <el-table-column label="内容" align="center">
          <template slot-scope="scope">
            {{ scope.row.内容 }}
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center" width="170">
          <template slot-scope="scope">
            {{ scope.row.操作时间 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination v-if="!loading" :current-page="pageCurrent" :page-sizes="[50, 100, 200]" :page-size="pageSize"
          :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { getBeforeOrAfterTime, getNowShotTime } from '../../../utils/tool'

export default {
  data() {
    return {
      loading: false,
      tableData: [],
      stationNumber: [],
      stationNumberValue: '',
      msgSourceNotLike: '', // 消息来源
      msgTypeValue: '', // 消息类型
      dateTime: '', // 时间
      contentSearchValue: '', // 内容模糊查询
      total: 0, // 总条数
      pageList: 50, // 每页显示条数
      pageSize: 50, // 每页显示条数
      pageCurrent: 1, // 后台获取页
      exportLoading: false // Excel导出中
    }
  },
  created() {
    this.dateTime = [getBeforeOrAfterTime(-2), getNowShotTime()]
    this.getStationNumber()
  },
  methods: {
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationNumber.push({
            label: `【${response.data[i].工位号}】${response.data[i].工位名称}`,
            value: response.data[i].工位号
          })
        }
        if (this.stationNumber.length > 0 && this.stationNumberValue === '') {
          this.stationNumberValue = this.stationNumber[0].value
          this.searchTable()
        }
      })
    },
    getParam(pageCurrent, pageSize) {
      var param = []
      param[0] = ['查询来源', 2]
      param[1] = ['工位号', this.stationNumberValue]
      param[2] = ['PageCurrent', pageCurrent]
      param[3] = ['PageSize', pageSize]
      param[4] = ['PageCount', '1111', 'int', '1']
      param[5] = ['ItemCount', '1111', 'int', '1']
      param[6] = ['开始日期', this.dateTime[0] + ' ' + '00:00:00']
      param[7] = ['结束日期', this.dateTime[1] + ' ' + '00:00:00']
      param[8] = ['内容', this.contentSearchValue]
      param[9] = ['消息来源', this.msgSourceNotLike]
      param[10] = ['消息类型', this.msgTypeValue]
      return param
    },
    searchTable() {
      this.loading = true
      this.tableData = []
      var Data = this.CreateData('11', '日志_工位操作_查询', this.getParam(this.pageCurrent, this.pageSize))
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data && response.data.result ? response.data.result : []
        this.total = response.data && response.data.output && response.data.output[0] ? parseInt(response.data.output[0].ItemCount) || 0 : 0
        this.loading = false
      }).catch(error => {
        console.error('查询工位日志失败:', error)
        this.$message.error('查询工位日志失败')
        this.loading = false
      })
    },
    exportExcel() {
      if (this.tableData.length === 0) {
        this.$message.warning('暂无数据')
        return
      }
      var exportData = JSON.parse(this.CreateData('2005', '日志_工位操作_查询', this.getParam(1, 99999999)))
      exportData.exportFileName = '工位报警日志'
      exportData.exportColumns = '工位号,操作类型,消息类型,操作人,内容,操作时间'
      var Data = JSON.stringify(exportData)
      this.runExcelExport(Data, 'exportLoading')
    },
    rowStyle({ row, rowIndex }) {
      console.log(row.消息类型)
      if (row.消息类型 === 'ERROR') {
        return { 'background': '#ff0600', 'color': '#fff' }
      }
      if (row.消息类型 === 'WARNING') {
        return { 'background': '#ff9900', 'color': '#fff' }
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

<style scoped>
.topDiv {
  margin-bottom: 10px;
}

.el-table .warning-row {
  background: #a94442;
}
</style>
