<template>
  <div class="equipment-management">
    <div class="search-box">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="工序：">
          <el-select
            v-model="formInline.region"
            placeholder="请选择工序"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="除尘器名称：">
          <el-input
            v-model="formInline.user"
            placeholder="请选择除尘器名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="设备名称：">
          <el-input
            v-model="formInline.user"
            placeholder="请输入设备名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="设备类型：">
          <el-select
            v-model="formInline.region"
            placeholder="请选择设备类型"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button type="primary" @click="onSubmit">重置</el-button>
          <el-button type="primary" @click="onSubmit">导出</el-button>
          <el-button type="primary" @click="onSubmit">导入</el-button>
          <el-button type="primary" @click="onSubmit">模板下载</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" border >
        <el-table-column prop="date" label="Date" width="180" align="center"/>
        <el-table-column prop="name" label="Name" width="180" align="center"/>
        <el-table-column prop="address" label="Address" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default>
            <el-button link type="primary" size="small" @click="setParams">参数设置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box"></div>
    <setParamsDialog v-model:dialogVisible="dialogVisible" @close="closeDialog"></setParamsDialog>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import setParamsDialog from "./components/paramsSetings.vue";
import '@/css/elementUiSelf.css'

const formInline = reactive({
  user: "",
  region: "",
  date: "",
});

const onSubmit = () => {
  console.log("submit!");
};
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const dialogVisible = ref(false);
const setParams = () => {
  dialogVisible.value = true;
}
const closeDialog = (val) => {
  dialogVisible.value = val;
}
</script>

<style lang="scss" scoped>
.equipment-management {
  background: #fff;
  height: 100vh;
  overflow: hidden;
    padding: 20px;

  .search-box {
  }
}
</style>
<style scoped>
/* @import "./elementUiSelf.css"; */
</style>