<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <div class="handle-box" style="margin-bottom:10px">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          class="handle-refresh"
          @click="OnPullNodes"
        >刷新</el-button>
        <span>
          共[
          <span class="handle-waring" style="margin:0 10px">{{pagination.total}}</span> ]条数据
        </span>
      </div>
      <div style="display:flex;flex-direction:row;margin-bottom:10px;">
        <el-input placeholder="描述" v-model="pagination.name" class="wdiv searchParamsstyle" clearable></el-input>
        <div>
          <el-select
            class="wdiv searchParamsstyle"
            v-model="pagination.pointtype"
            placeholder="I/O类型"
            clearable
          >
            <el-option
              v-for="item in $store.state.bindingsetting.IO"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>

        <div>
          <el-select
            class="wdiv searchParamsstyle"
            v-model="pagination.part"
            placeholder="工艺环节"
            clearable
          >
            <el-option
              v-for="(v,k) in $store.state.bindingsetting.TechnologicalProcess"
              :key="v"
              :label="v"
              :value="k"
            ></el-option>
          </el-select>
        </div>
        <!-- <el-input placeholder="工艺环节" v-model="pagination.part" class="wdiv searchParamsstyle" clearable></el-input> -->
        <el-button
          icon="el-icon-search"
          type="primary"
          size="mini"
          width="100"
          @click="OnSerch"
          class="searchParamsstyle"
        >查询</el-button>
      </div>
    </el-row>

    <el-table
      :data="nodetable"
      border
      class="table"
      :highlight-current-row="true"
      :default-sort="{prop: 'name', order: 'descending'}"
    >
      <el-table-column type="index" prop="date" width="50"></el-table-column>
      <el-table-column prop="point" label="标签名称" sortable width="180"></el-table-column>
      <el-table-column prop="name" label="描述" sortable width="400"></el-table-column>
      <el-table-column prop="pointType" label="I/O类型" sortable width="180"></el-table-column>
      <el-table-column prop="electricalCharacteristics" label="节点名" sortable width="180"></el-table-column>
      <el-table-column prop="part" label="工艺环节" sortable width="180"></el-table-column>
      <el-table-column prop="powerProvide" label="供电类型" sortable width="180"></el-table-column>
      <el-table-column prop="system" label="系统" sortable width="180"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="pagination.pagenum"
        :page-size="pagination.pagesize"
        :total="pagination.total"
        @current-change="OnPageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<!--
  
   -->
<style lang="less" scoped>
.wdiv {
  width: 200px;
}
.searchParamsstyle {
  width: 150px;
  margin-left: 10px;
}
</style>


<script>
import { nodes } from "@/network/network"

export default {
  data()
  {
    return {
      nodetable: [],
      pagination: {
        pagenum: 1,
        pagesize: 30,
        name: "",
        pointtype: "",
        part: "",
        total: 0,
      }
    }
  },
  mounted()
  {
    this.OnPullNodes();
  },
  methods: {
    
    OnPageChange(nextPagenum)
    {
      this.pagination.pagenum=nextPagenum;
      this.OnPullNodes();
    },
    OnSerch()
    {
      this.pagination.pagenum = 1;
      this.OnPullNodes();
    },
    OnPullNodes()
    {
      nodes.pull(this.pagination, res =>
      {
        this.nodetable = res.data.data.dataList;
        this.pagination.total = res.data.data.total;
        this.pagination.pagenum=res.data.data.pageIndex;
        this.pagination.pagesize=res.data.data.pageSize;
      });
    },
    formatter(row, column) 
    {
      return row.address;
    }
  },


}
</script>

