<template>
  <div v-loading="loading">
    <el-container>
      <el-header style="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>
        </div>
      </el-header>
      <el-main>
        <el-row style="margin-bottom:2%">
          <el-col :span="8">
            <div class="grid-content2">
              选择日期：
              <el-date-picker
                size="mini"
                v-model="value1"
                type="daterange"
                unlink-panels
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content2">
              巡检频率：
              <el-select
                size="mini"
                v-model="value2"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in frequencys"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content2">
              巡检员：
              <el-select
                size="mini"
                v-model="value3"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in persons"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content2">
              <el-button type="primary" class="bu" size="mini">搜索</el-button>
              <el-button size="mini">重置</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <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="140">
              <template slot-scope="scope">{{ scope.row.number }}</template>
            </el-table-column>
            <el-table-column align="center" label="设备型号" width="140">
              <template slot-scope="scope">{{ scope.row.model }}</template>
            </el-table-column>
            <el-table-column align="center" label="开始时间" width="140">
              <template slot-scope="scope">{{ scope.row.start }}</template>
            </el-table-column>
            <el-table-column align="center" label="结束时间" width="140">
              <template slot-scope="scope">{{ scope.row.end }}</template>
            </el-table-column>
            <el-table-column align="center" label="巡检频率" width="140">
              <template slot-scope="scope">{{ scope.row.frequency }}</template>
            </el-table-column>
            <el-table-column align="center" label="下次巡检时间" width="140">
              <template slot-scope="scope">{{ scope.row.next }}</template>
            </el-table-column>
            <el-table-column align="center" label="巡检员" width="140">
              <template slot-scope="scope">{{ scope.row.person }}</template>
            </el-table-column>
            <el-table-column align="center" label="状态" width="140">
              <template slot-scope="scope">
                <div v-if="scope.row.state === '正常'">
                  <el-tag :type="'success'">{{ scope.row.state }}</el-tag>
                </div>
                <div v-else>
                  <el-tag :type="'danger'">{{ scope.row.state }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="110">
              <template slot-scope="scope">
                <el-button @click="sure(scope.row)" type="success" size="small"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </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 value1 = ref<any>([]);
    const value2 = ref<any>([]);
    const value3 = ref<any>([]);
    const multipleSelection = ref<any>([]);
    const frequencys = [
      {
        value: "选项1",
        label: "天"
      },
      {
        value: "选项2",
        label: "周"
      },
      {
        value: "选项3",
        label: "月"
      },
      {
        value: "选项4",
        label: "年"
      }
    ];
    const persons = [
      {
        value: "选项1",
        label: "张三"
      },
      {
        value: "选项2",
        label: "李四"
      },
      {
        value: "选项3",
        label: "教授"
      },
      {
        value: "选项4",
        label: "万正"
      }
    ];
    const tableData = [
      {
        number: "LKT15456",
        model: "DL01",
        start: "2017-10-10",
        end: "2018-07-12",
        frequency: "天",
        next: "2019-10-09",
        person: "王邹",
        state: "正常"
      },
      {
        number: "LKT15456",
        model: "DL01",
        start: "2017-10-10",
        end: "2018-07-12",
        frequency: "天",
        next: "2019-10-09",
        person: "王邹",
        state: "已延误12天"
      },
      {
        number: "LKT15456",
        model: "DL01",
        start: "2017-10-10",
        end: "2018-07-12",
        frequency: "年",
        next: "2019-10-09",
        person: "王邹",
        state: "已延误10天"
      },
      {
        number: "LKT15456",
        model: "DL01",
        start: "2017-10-10",
        end: "2018-07-12",
        frequency: "天",
        next: "2019-10-09",
        person: "王邹",
        state: "已延误2天"
      },
      {
        number: "LKT15456",
        model: "DL01",
        start: "2017-10-10",
        end: "2018-07-12",
        frequency: "月",
        next: "2019-10-09",
        person: "王邹",
        state: "正常"
      },
      {
        number: "LKT15456",
        model: "DL01",
        start: "2017-10-10",
        end: "2018-07-12",
        frequency: "年",
        next: "2019-10-09",
        person: "王邹",
        state: "正常"
      },
      {
        number: "LKT15456",
        model: "DL01",
        start: "2017-10-10",
        end: "2018-07-12",
        frequency: "月",
        next: "2019-10-09",
        person: "王邹",
        state: "正常"
      }
    ];

    const loading = ref<boolean>(false);
    const pickerOptions = {
      shortcuts: [
        {
          text: "最近一周",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "最近一个月",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "最近三个月",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit("pick", [start, end]);
          }
        }
      ]
    };
    return {
      loading,
      search: "",
      tableData,
      currentPage1: 1,
      handleCurrentChange,
      num: 1,
      frequencys,
      persons,
      pickerOptions,
      value2,
      value1,
      value3
    };
  }
};
</script>
<style lang="scss">
.bu {
  margin-right: 10px;
  margin-left: 50px;
}
</style>
