<!--电位展示图表-->
<template>
  <el-dialog
      v-loading="loading"
      :visible.sync="show"
      title="点位列表"
      :close-on-click-modal="false"
      show-close
      destroy-on-close
      lock-scroll
      append-to-body
      width="800px"
      class="ems-dialog"
  >
    <el-table
        class="common-table"
        :data="tableData"
        stripe
        max-height="400px"
        style="width: 100%;">
      <el-table-column
          prop="dataPoint"
          label="数据点位">
      </el-table-column>
      <el-table-column
          prop="dataPointName"
          label="数据点位名称">
      </el-table-column>
      <el-table-column
          prop="pointValue"
          label="最新值">
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间">
      </el-table-column>
    </el-table>
    <el-pagination
        v-show="tableData.length>0"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :pager-count="5"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        style="margin-top:15px;text-align: center"
    >
    </el-pagination>
  </el-dialog>
</template>
<script>
import {getDevicePointList} from "@/api/ems/site";

export default {
  watch:{
    show(val) {
      if(!val){
        this.tableData=[]
        this.deviceId=''
        this.siteId=''
        this.pageSize=10
        this.pageNum=1
        this.totalSize=0
        this.loading =false
      }
    },
  },
  data(){
    return{
      show:false,
      loading:false,
      deviceCategory:'',
      siteId:'',
      tableData:[],
      pageSize:10,//分页栏当前每个数据总数
      pageNum:1,//分页栏当前页数
      totalSize:0,//table表格数据总数
    }
  },
  methods:{
    showTable({deviceCategory,siteId}){
      this.deviceCategory =deviceCategory
      this.siteId=siteId
      this.show=true
      this.getData()
    },
    getData(){
      this.loading=true
      const {siteId,deviceCategory,pageNum,pageSize} =this
      getDevicePointList({siteId,deviceCategory,pageNum,pageSize}).then(response => {
        this.tableData=response?.rows || [];
        this.totalSize = response?.total || 0
      }).finally(() => {this.loading=false})
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(()=>{
        this.getData()
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.$nextTick(()=>{
        this.getData()
      })
    },
  }
}
</script>
<style scoped lang="scss">
::v-deep {
  .card-title .el-radio{
    line-height: 40px;
  }
}

</style>