<template>
  <div class="AuHiViewBody">

    <div class="AuHiTop">
      <div style="font-size:20px;font-weight:600;">查询搜索</div>
      <div style="margin-top:10px;display:flex;">
        <div>
          <template>
            <el-select v-model="feijishebei.value" placeholder="请选择风机设备" @input="daochu()">
              <el-option
                v-for="item in feijishebei.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </div>
        <div style="margin-left:20px;">
          <template>
            <el-select v-model="jiancexiang.value" placeholder="请选择监测项">
              <el-option
                v-for="item in jiancexiang.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </div>
        <div style="margin-left:20px;">
          <template>
              <el-date-picker
                v-model="selectDate1.value"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
          </template>
        </div>
        <div style="margin:0px 20px;">
          <template>
              <el-date-picker
                v-model="selectDate2.value"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
          </template>
        </div>
        <el-button type="primary" icon="el-icon-upload2" @click="daochu()">导出</el-button>
        <el-button icon="el-icon-printer" @click="dayin()">打印</el-button>
      </div>
    </div>

    <div class="AuHiBottom">
      <template>
        <el-table :data="historyData" height="700" border style="width: 100%" :row-style="tableRowStyle">
          <el-table-column prop="date" label="产品设备" align="center"></el-table-column>
          <el-table-column prop="name" label="指标名称" align="center"></el-table-column>
          <el-table-column prop="address" label="数值" align="center"></el-table-column>
          <el-table-column prop="address" label="报警级别" align="center"></el-table-column>
          <el-table-column prop="address" label="时间" align="center"></el-table-column>
          <el-table-column prop="address" label="处理状态" align="center"></el-table-column>
        </el-table>
      </template>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      feijishebei:{
        options: [{
          value: '1号风机设备',
          label: '1号风机设备'
        }, {
          value: '2号风机设备',
          label: '2号风机设备'
        }, {
          value: '3号风机设备',
          label: '3号风机设备'
        }, {
          value: '4号风机设备',
          label: '4号风机设备'
        }, {
          value: '5号风机设备',
          label: '5号风机设备'
        }],
        value: ''
      },
      jiancexiang:{
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      },
      selectDate1:{
        value:""
      },
      selectDate2:{
        value:""
      },
      historyData:this.$store.state.b.history.tableData,
    }
  },
  methods:{
    tableRowStyle({row, rowIndex}) {
      if (row.name == "王小虎") {
        console.log(rowIndex)
        return 'background: rgb(255,232,232);';
      }
    },
    daochu(){
      console.log(this.feijishebei.value + "|||" + this.jiancexiang.value)
    },
    dayin(){
      console.log(this.selectDate1.value + "|||" + this.selectDate2.value)
    },
    
  }
}
</script>

<style scoped>
.AuHiViewBody{
  width: 100%;
  height: 100vh;
  background-color: rgb(245,246,251);
  padding: 30px;
  box-sizing: border-box;
}
.AuHiTop{
  height: 110px;
  background-color: white;
  border-radius: 10px;
  padding: 18px 20px 0px ;
  box-sizing: border-box;
}
.AuHiBottom{
  width: 100%;
  background-color: white;
  padding: 30px;
  box-sizing: border-box;
  height: 750px;
  margin-top: 20px;
}
.el-table .warning{
  background: red !important;
}
.el-table .success-row {
  background: blue;
}
</style>