<template>
  <div class="equipment-management">
    <div class="content-box">
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="工序">
            <el-select
              v-model="formInline.region"
              placeholder="请选择工序"
              style="width: 120px"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="除尘器名称">
            <el-input
              v-model="formInline.deviceName"
              placeholder="请输入除尘器名称"
              style="width: 240px"
              clearable
            />
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input
              v-model="formInline.deviceName"
              placeholder="请输入除尘器名称"
              style="width: 240px"
              clearable
            />
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formInline.region"
              placeholder="请选择工序"
              style="width: 120px"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="default" class="default-btn" @click="onSubmit"
              >重置</el-button
            >
            <el-button type="primary" class="search-btn" @click="onSubmit"
              >查询</el-button
            >
            <el-button type="success" class="add-btn" @click="onSubmit"
              >导入</el-button
            >
            <el-button type="success" class="add-btn" @click="onSubmit"
              >导出</el-button
            >
            <el-button type="success" class="add-btn" @click="onSubmit"
              >模板下载</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="table-box">
        <common-table
          :data="tableData"
          :columns="tableColumns"
          :default-page-size="10"
          @pagination-change="handlePaginationChange"
          :pagination-texts="{
            total: '共',
            sizeChange: '条/页',
            prev: '前一页',
            next: '后一页',
            jumper: '跳至',
          }"
        >
          <template #index="{ $index }">
            {{ getIndex($index) }}
          </template>

          <template #operation="{ row }">
            <el-button type="primary" link @click="setParams(row)">
              参数设置
            </el-button>
          </template>
        </common-table>
      </div>
    </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 CommonTable from "@/components/commonTable/index.vue";
import "@/css/elementUiSelf.css";

const currentPage = ref(1);
const pageSize = ref(10);
const getIndex = (index) => {
  return (currentPage.value - 1) * pageSize.value + index + 1;
};

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 tableColumns = ref([
  {
    prop: "index",
    label: "序号",
    width: "5%",
  },
  {
    prop: "deviceName",
    label: "除尘器名称",
    width: "15%",
  },
  {
    prop: "deviceName",
    label: "除尘器编号",
    width: "15%",
  },
  {
    prop: "process",
    label: "所属工序",
    width: "5%",
  },
  {
    prop: "healthScore",
    label: "设备名称",
    width: "5%",
  },
  {
    prop: "health2Score",
    label: "设备类型",
    width: "5%",
  },
  {
    prop: "status",
    label: "信号名称",
    width: "25%",
  },
  {
    prop: "alarmCount",
    label: "信号编码",
    width: "5%",
  },
  {
    prop: "lastAlarmTime",
    label: "安装位置",
    width: "10%",
  },
  {
    prop: "operation",
    label: "操作",
    width: "10%",
  },
]);
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;
  .content-box {
    margin-top: 24px;
    .search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    .table-box {
      width: 100%;
      height: calc(100vh - 400px);
    }
  }
}
</style>
<style scoped>
/* @import "./elementUiSelf.css"; */
</style>