<template>
  <div v-loading="loading">
    <el-container>
     <el-header style="margin-bottom:3%;background:white">
        <div class="list-first" style="background:white">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="content">巡检提醒列表</div>
            </el-col>
           
            <el-col :span="6" :offset="12">
              <div class="content">
                
                <el-input placeholder="请输入内容/编号" suffix-icon="el-icon-search" v-model="search" ></el-input>
                
              </div>
            </el-col>
           
          </el-row>
          <el-row  >
            <el-col :span="3"><div class="content1">提前提醒时间：</div></el-col>
            <el-col :span="5" ><div >
              <el-input-number v-model="num" @change="handleChange" :min="1"  label="天">
                </el-input-number><span class="content2">天</span></div></el-col>
                <el-col :span="2"><div class="content3"><el-button @click="see(scope.row)" type="primary" size="small">查询</el-button></div></el-col>
          </el-row>
        </div>
          </el-header>
          <el-main>
            <el-table
              ref="multipleTable"
              :data="tableData.filter(data => !search || data.frequency.toLowerCase().includes(search.toLowerCase())||data.number.toLowerCase().includes(search.toLowerCase()))"
              tooltip-effect="dark"
              style="width: 100% "
            
            >
      
              <el-table-column align="center" label="设备编号" width="160">
                <template slot-scope="scope">{{ scope.row.number }}</template>
              </el-table-column>
              <el-table-column align="center" label="设备型号" width="160">
                <template slot-scope="scope">{{ scope.row.model }}</template>
              </el-table-column>
              <el-table-column align="center" label="开始时间" width="160">
                <template slot-scope="scope">{{ scope.row.start }}</template>
              </el-table-column>
              <el-table-column align="center" label="结束时间" width="160">
                <template slot-scope="scope">{{ scope.row.end }}</template>
              </el-table-column>
              <el-table-column align="center" label="巡检频率" width="160">
                <template slot-scope="scope">{{ scope.row.frequency }}</template>
              </el-table-column>
              <el-table-column align="center" label="下次巡检时间" width="160">
                <template slot-scope="scope">{{ scope.row.next }}</template>
              </el-table-column>
              <el-table-column align="center" label="巡检员" width="160">
                <template slot-scope="scope">{{ scope.row.person }}</template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="140">
                <template slot-scope="scope">
                  <el-button @click="sure(scope.row)" type="success" size="small">确认/不再提醒</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer style="margin:0 auto">
            <el-row >
             <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      :total="100"
      layout="prev, pager, next,sizes,jumper"
      >
    </el-pagination>
            </el-row>
          </el-footer>
    </el-container>
  </div>
</template>
<script lang="ts">
import { ref, onMounted } from '@vue/composition-api';

export default {
  setup() {
    function handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    const tableData=[
        {
          number: "LKT15456",
          model: "DL01",
          start: "2017-10-10",
          end: "2018-07-12",
          frequency: "天",
          next:"2019-10-09",
          person:"王邹"

        },
        {
          number: "LKT15456",
          model: "DL01",
          start: "2017-10-10",
          end: "2018-07-12",
          frequency: "天",
          next:"2019-10-09",
          person:"王邹"

        },
        {
          number: "LKT15456",
          model: "DL01",
          start: "2017-10-10",
          end: "2018-07-12",
          frequency: "年",
          next:"2019-10-09",
          person:"王邹"

        },
        {
          number: "LKT15456",
          model: "DL01",
          start: "2017-10-10",
          end: "2018-07-12",
          frequency: "天",
          next:"2019-10-09",
          person:"王邹"

        },
        {
          number: "LKT15456",
          model: "DL01",
          start: "2017-10-10",
          end: "2018-07-12",
          frequency: "月",
          next:"2019-10-09",
          person:"王邹"

        },
        {
          number: "LKT15456",
          model: "DL01",
          start: "2017-10-10",
          end: "2018-07-12",
          frequency: "年",
          next:"2019-10-09",
          person:"王邹"

        },
        {
          number: "LKT15456",
          model: "DL01",
          start: "2017-10-10",
          end: "2018-07-12",
          frequency: "月",
          next:"2019-10-09",
          person:"王邹"

        },
      ]
    const loading = ref<boolean>(false);
    return{
      loading,
           search: '',
           tableData,
           currentPage1:1,
           handleCurrentChange,
           num:1
    };
  },
};
</script>
<style lang="scss">
  .content{font-weight: bold;
  font-size: medium;
  line-height: center;
  padding: 10px}
  .content1{ padding: 10px}
   .content2{
  padding: 20px}
  
</style>
</style>