<template>
  <div class="page-box">
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :table-props="tableProps"
      :table-data="tableData"
      :max-height="tableH"
      :row-class-name="tableRowClassName"
    />
    <!-- 设置预警值 -->
    <base-dialog
      title="设置预警值"
      :dialogVisible="centervisible"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      :before-close="handleCancel"
    >
      <alarm-add ref="alarmAdd" @successSubmit="successSubmit" />
    </base-dialog>
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import { onlineMaterialTrackSelect } from '@/api/consumablesManagement'
import alarmAdd from './components/alarmAdd.vue'
import { publicFormatter, timeFormatter } from '@/utils'
const tableProps = [
  {
    prop: 'proLineId',
    label: '产线',
    minWidth: 100,
    filter: publicFormatter('proLineVoList')
  },
  {
    prop: 'id',
    label: '托盘ID',
    minWidth: 120
  },
  {
    prop: 'onlineTime',
    label: '上线时间',
    filter: timeFormatter,
    minWidth: 150
  },
  {
    prop: 'adsorptionPadNum',
    label: '吸附垫研磨片数',
    minWidth: 120
  },
  {
    prop: 'auxiliaryFrameNum',
    label: '辅助边框研磨片数',
    minWidth: 120
  },
  {
    prop: 'alarmContent',
    label: '报警内容',
    minWidth: 180
  }
]
export default {
  name: 'MaterialTracking',
  components: { alarmAdd },
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '产线',
          selectOptions: JSON.parse(localStorage.getItem('publicList'))
            .proLineVoList,
          labelField: 'dataName',
          valueField: 'dataCode',
          onchange: true,
          param: 'proLineId',
          defaultSelect: '',

          width: 100
        },
        {
          type: 'input',
          label: '托盘id',
          param: 'stockId',
          width: 180
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'button',
          btnName: '设置预警值',
          name: 'warning'
        }
      ],
      tableProps,
      tableData: [],
      tableH: tableHeight(230),
      total: 0,
      listQuery: {
        current: 1,
        size: 1000,
        proLineId: '',
        stockId: ''
      },
      centervisible: false
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(230)
    })
    this.getList()
  },
  methods: {
    getList() {
      onlineMaterialTrackSelect({ ...this.listQuery }).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    },
    buttonClick(val) {
      if (val.btnName === 'search') {
        this.listQuery.proLineId = val.proLineId
        this.listQuery.stockId = val.stockId
        this.listQuery.current = 1
        this.getList()
      } else {
        this.centervisible = true
        this.$nextTick(() => {
          this.$refs.alarmAdd.init()
        })
      }
    },
    tableRowClassName({ row }) {
      if (row.alarm) {
        return 'danger-row'
      }
      return ''
    },
    handleCancel() {
      this.$refs.alarmAdd.formClear()
      this.centervisible = false
    },
    handleConfirm() {
      this.$refs.alarmAdd.submitForm()
    },
    successSubmit() {
      this.handleCancel()
      this.getList()
    }
  }
}
</script>
