<template>
  <div id="AlarmConfiguration">
    <div id="ACTopSearchBox">
      <el-select v-model="ProjectNo" filterable placeholder="请选择" @change="selectV(SiteNo)">
        <el-option
          v-for="item in SiteOptions"
          :key="item.serial"
          :label="item.siteName"
          :value="item.serial"
        ></el-option>
      </el-select>
      <el-input placeholder="请输入内容" v-model="ACValue" clearable></el-input>
      <el-button type="primary" icon="el-icon-plus">新增配置</el-button>
    </div>
    <div id="ACContent">
      <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
        <el-table-column prop="siteNo" label="站点编号"></el-table-column>
        <el-table-column prop="siteName" label="名称"></el-table-column>
        <el-table-column prop="siteUser" label="关联人员"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small">查看详情</el-button>
            <el-button type="text" size="small">编辑配置</el-button>
            <el-button type="text" size="small">删除配置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="ACSizeChange"
        @current-change="ACCurrentChange"
        :current-page="ACPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="ACSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ACDatagridDataLength"
        :hide-on-single-page="ACPageHide"
        style="margin-top:10px;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "AlarmConfiguration",
  data: function() {
    return {
      SiteOptions: [
        {
          siteName: "测试项目1",
          serial: "01"
        },
        {
          siteName: "测试项目2",
          serial: "02"
        }
      ], //渲染项目下拉框的数据
      ProjectNo: "", //所选择的项目的项目编号
      ACValue: "", //顶部模糊搜索
      TableData: [], //表格数据
      ACPage: 1, //分页默认显示页
      ACDatagridDataLength: 0, //分页上显示的数据总条数
      ACSize: 10, //分页上显示的每页的条数
      ACPageHide: this.ACDatagridDataLength > 10 ? false : true //分页默认不显示 当页数大于1 的时候在显示
    };
  },
  methods: {
    selectV(No) {},
    //分页
    ACSizeChange(val) {
      // 改变每页的条数
      this.ACSize = val;
      //   this.loadDataGridData();
    },
    ACCurrentChange(val) {
      //改变页数
      this.ACPage = val;
      //   this.loadDataGridData();
    }
  },
  mounted: function() {
    this.ProjectNo = this.SiteOptions[0].serial;
    this.TableData = [
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      },
      {
        siteName: "测试项目1",
        siteNo: "01",
        siteUser: "01"
      }
    ];
    this.ACDatagridDataLength = 13;
  }
};
</script>

<style scoped>
#AlarmConfiguration {
  width: 100%;
  height: 100%;
}
/* 顶部搜索 */
#ACTopSearchBox {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: left;
}
#ACTopSearchBox .el-input {
  width: 250px;
  margin: 0 10px;
}
/* 表格 */
#ACContent {
  width: 100%;
  height: calc(100% - 70px);
  margin-top: 10px;
  background: rgba(53, 53, 53, 0.5);
}
</style>