<template>
  <div class="app-container vocHis">
    <!-- 搜索工作栏 -->
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <!-- 列表 -->
    <base-table
      :page="queryParams.pageNo"
      :limit="queryParams.pageSize"
      :table-props="tableProps"
      :table-data="list"
      :max-height="tableH"
      :row-class-name="tableRowClassName"
    />
    <pagination
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { publicFormatter } from '@/utils/dict'
import { parseTime } from '@/utils/ruoyi'
import { environmentalCheckRecordPage, environmentalCheckRecordExport, environmentalCheckPage } from '@/api/safetyEnvironmental/environmental'
import moment from 'moment'
const tableProps = [
  {
    prop: 'checkName',
    label: '指标名称'
  },
  {
    prop: 'checkValue',
    label: '检测数值'
  },
  {
    prop: 'unit',
    label: '单位',
    filter: publicFormatter('environment_check_unit')
  },
  {
    prop: 'checkTime',
    label: '检测时间',
    filter: parseTime,
    minWidth: 160
  },
  {
    prop: 'origin',
    label: '来源',
    filter: (val) => ['手动', '自动'][val]
  },
  {
    prop: 'recordPerson',
    label: '录入人'
  },
  {
    prop: 'recordTime',
    label: '录入时间',
    filter: parseTime,
    minWidth: 160
  }
]
export default {
  name: 'VocDetectionHistory',
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '指标名称',
          selectOptions: [],
          param: 'checkId',
          filterable: true
        },
        {
          type: 'datePicker',
          label: '时间',
          dateType: 'datetimerange',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: "timestamp",
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          param: 'timeVal',
          defaultSelect: [],
          width: 350
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: this.$auth.hasPermi('base:voc:export') ? 'separate' : '',
        },
        {
          type: this.$auth.hasPermi('base:voc:export') ? 'button' : '',
          btnName: '导出',
          name: 'export',
          color: 'primary',
          plain: true
        }
      ],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 20,
        checkId: null,
        checkType: 3,
        startTime: null,
        endTime: null
      },
      tableProps,
      list: [],
      total: 0,
      tableH: this.tableHeight(260)
    }
  },
  created() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
    })
    let end = moment(moment().format('YYYY-MM-DD 23:59:59')).valueOf()
    let start = moment(moment().format('YYYY-MM-DD 00:00:00')).valueOf()
    this.formConfig[1].defaultSelect = [start, end]
    this.queryParams.startTime = start
    this.queryParams.endTime = end
    this.getSelectList()
    this.getList()
  },
  methods: {
    buttonClick(val) {
      this.queryParams.pageNo = 1;
      this.queryParams.checkId = val.checkId
      this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
      this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
      if (val.btnName === 'search') {
        this.getList()
      } else {
        this.$modal.confirm('是否确认导出').then(() => {
            return environmentalCheckRecordExport({...this.queryParams});
          }).then(response => {
            this.$download.excel(response, '废水检测历史记录.xls');
          }).catch(() => {})
      }
    },
    getList() {
      environmentalCheckRecordPage({...this.queryParams}).then(res => {
        this.list = res.data.list || []
        this.total = res.data.total || 0
      })
    },
    getSelectList() {
      environmentalCheckPage({
        pageNo: 1,
        pageSize: 100,
        checkType: 3
      }).then(res => {
        console.log(res)
        this.formConfig[0].selectOptions = res.data.list || []
      })
    },
    tableRowClassName({row, rowIndex}) {
      console.log(row)
      if (row.markRed) {
        return 'warning-row'
      }else {
        return ''
      }
    }
  }
}
</script>
<style lang='scss'>
.vocHis {
  .el-table .warning-row {
    background: #fee1e1;
  }
}
</style>