
<template>
  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
    <el-form :inline="true" class="select-container">
      <el-form-item label="站点名称">
        <el-input
          v-model="siteName"
          placeholder="请输入"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="运营时间">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          :default-value="defaultDateRange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
        <el-button @click="onReset" native-type="button">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      class="common-table"
      :data="tableData"
      stripe
      max-height="500px"
      style="width: 100%;margin-top: 25px">
      <el-table-column
        prop="siteName"
        label="站点名称">
      </el-table-column>
      <el-table-column
        prop="siteAddress"
        label="站点地址"
      >
      </el-table-column>
      <el-table-column
        prop="runningTime"
        label="运营时间">
      </el-table-column>
      <el-table-column
        prop="installPower"
        label="装机功率">
      </el-table-column>
      <el-table-column
        prop="installCapacity"
        label="装机容量">
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="tableData.length>0"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :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>
  </div>
</template>

<script>
import {getSiteInfoList} from'@/api/ems/site'
import { formatDate } from '@/filters/ems'
export default {
  name: "Site",
  data() {
    return {
      loading:false,
      siteName:"",
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      defaultDateRange:[],//默认展示的时间
      dateRange:[],//startTime,endTime
      tableData:[],
      pageSize:10,//分页栏当前每个数据总数
      pageNum:1,//分页栏当前页数
      totalSize:0,//table表格数据总数
    }
  },
  methods:{
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(()=>{
        this.getTableData()
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.$nextTick(()=>{
        this.getTableData()
      })
    },
    // 搜索
    onSearch(){
      this.pageNum =1//每次搜索从1开始搜索
      this.getData()
    },
    // 重置
    onReset(){
      this.siteName=''
      this.dateRange=[]
      this.pageNum =1//每次搜索从1开始搜索
      this.getData()
    },
    // 获取数据
    getData(){
      this.loading=true
      const {siteName,pageNum,pageSize} =this
      const [startTime='',endTime='']=(this.dateRange || [])
      getSiteInfoList({siteName,pageSize,pageNum,startTime:formatDate(startTime),endTime:formatDate(endTime)}).then(response => {
        this.tableData=response?.rows || [];
        this.totalSize = response?.total || 0
      }).finally(() => {this.loading=false})
    },
  },
  mounted() {
    this.onReset()
    const now = new Date();
    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
    this.defaultDateRange = [lastMonth, now];
  }
}
</script>

<style scoped lang="scss">

</style>
