<template>
  <div class="main">
    <div class="power">
      <div class="DataList">
        <div v-for="(item) in powerOldData" class="items">
          <div class="title">{{ item.电表编号 }}</div>
          <div class="item">
            <div class="left">今日消耗：</div>
            <div class="right">{{ item.今日电能 }}</div>
          </div>
          <div class="item">
            <div class="left">电压A：</div>
            <div class="right">{{ item.电压A }}</div>
          </div>  
          <div class="item">
            <div class="left">电压B：</div>
            <div class="right">{{ item.电压B }}</div>
          </div>
          <div class="item">
            <div class="left">电压C：</div>
            <div class="right">{{ item.电压C }}</div>
          </div>
          <div class="item">
            <div class="left">电压AB：</div>
            <div class="right">{{ item.电压AB }}</div>
          </div>
          <div class="item">
            <div class="left">电压BC：</div>
            <div class="right">{{ item.电压BC }}</div>
          </div>
          <div class="item">
            <div class="left">电压CA：</div>
            <div class="right">{{ item.电压CA }}</div>
          </div>
          <div class="item">
            <div class="left">电流A：</div>
            <div class="right">{{ item.电流A }}</div>
          </div>
          <div class="item">
            <div class="left">电流B：</div>
            <div class="right">{{ item.电流B }}</div>
          </div>
          <div class="item">
            <div class="left">电流C：</div>
            <div class="right">{{ item.电流C }}</div>
          </div>
          <div class="item">
            <div class="left">有功功率：</div>
            <div class="right">{{ item.有功功率总 }}</div>
          </div>
          <div class="item">
            <div class="left">无功功率：</div>
            <div class="right">{{ item.无功功率总 }}</div>
          </div>
          <div class="item" style="width: 100%;">
            <div class="left" style="width: 60%;">有功电能累计：</div>
            <div class="right">{{ item.有功电能 }}</div>
          </div>
        </div>
      </div>
      <div class="powerTable">
        <span style="margin-left: 1vw">查询日期：</span>
        <el-date-picker v-model="dateTime" :clearable="false" end-placeholder="结束日期" format="YYYY-MM-DD"
          range-separator="~" start-placeholder="开始日期" style="width: 14vw;" type="daterange"
          value-format="YYYY-MM-DD" />
        <span style="margin-left: 1vw">电表编号：</span>
        <el-select v-model="clickPowerCode" placeholder="请选择" clearable style="width: 8vw;">
          <el-option v-for="item in powerCodeData" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
        <el-button :icon="Search" type="success" @click="getPowerDayData">查询</el-button>

        <el-table v-loading="page.loading" :data="powerDayData" height="300px" stripe style="width: 100%">
          <el-table-column align="center" label="序号" type="index" width="80" />
          <el-table-column align="center" label="日期" width="110">
            <template #default="scope">
              {{ scope.row.今日日期.slice(0, 10) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="电表编号">
            <template #default="scope">
              {{ scope.row.电表编号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="消耗" width="70">
            <template #default="scope">
              {{ scope.row.电能 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="开始电能" width="100">
            <template #default="scope">
              {{ scope.row.开始电能 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="结束电能" width="100">
            <template #default="scope">
              {{ scope.row.结束电能 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="开始时间" width="100">
            <template #default="scope">
              {{ scope.row.开始时间 ? scope.row.开始时间.split(' ')[1] : '' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="结束时间" width="100">
            <template #default="scope">
              {{ scope.row.结束时间 ? scope.row.结束时间.split(' ')[1] : '' }}
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 5px;">
          <el-pagination v-model:current-page="page.pageList" v-model:page-size="page.pageSize"
            :page-sizes="[30, 50, 100, 200]" :total="page.total" background
            layout="total, sizes, prev, pager, next, jumper" style="padding-left: 1vw" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
    <div class="gas">
      <div class="DataList">
        <div v-for="(item) in airOldData" class="items">
          <div class="title">{{ item.气表编号 }}</div>
          <div class="item">
            <div class="left">今日日期：</div>
            <div class="right">{{ item.今日日期 ? item.今日日期.split(' ')[0] : '' }}</div>
          </div>
          <div class="item">
            <div class="left">今日用量：</div>
            <div class="right">{{ item.今日用量.toFixed(1) }}</div>
          </div>
          <!-- <div class="item">
            <div class="left">前日日期：</div>
            <div class="right">{{ item.前一日的时间 ? item.前一日的时间.split(' ')[0] : '' }}</div>
          </div> -->
          <!-- <div class="item">
            <div class="left">前日用量：</div>
            <div class="right">{{ item.前一日的用量.toFixed(1) }}</div>
          </div> -->
          <div class="item">
            <div class="left">累计：</div>
            <div class="right">{{ item.累计.toFixed(1) }}</div>
          </div>
        </div>
      </div>
      <div class="powerTable">
        <span style="margin-left: 1vw">查询日期：</span>
        <el-date-picker v-model="dateTime2" :clearable="false" end-placeholder="结束日期" format="YYYY-MM-DD"
          range-separator="~" start-placeholder="开始日期" style="width: 14vw;" type="daterange"
          value-format="YYYY-MM-DD" />
        <span style="margin-left: 1vw">气表编号：</span>
        <el-select v-model="clickAirCode" placeholder="请选择" clearable style="width: 8vw;">
          <el-option v-for="item in airCodeData" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
        <el-button :icon="Search" type="success" @click="getAirDayData">查询</el-button>
        <el-table v-loading="page2.loading" :data="airDayData" height="300px" stripe style="width: 100%">
          <el-table-column align="center" label="序号" type="index" width="80" />
          <el-table-column align="center" label="日期" width="110">
            <template #default="scope">
              {{ scope.row.今日日期.slice(0, 10) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="气表编号">
            <template #default="scope">
              {{ scope.row.气表编号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="流量" width="70">
            <template #default="scope">
              {{ scope.row.流量 ? scope.row.流量.toFixed(1) : '' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="开始值" width="100">
            <template #default="scope">
              {{ scope.row.开始值 ? scope.row.开始值.toFixed(1) : '' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="结束值" width="100">
            <template #default="scope">
              {{ scope.row.结束值 ? scope.row.结束值.toFixed(1) : '' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="开始时间" width="100">
            <template #default="scope">
              {{ scope.row.开始时间 ? scope.row.开始时间.split(' ')[1] : '' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="结束时间" width="100">
            <template #default="scope">
              {{ scope.row.结束时间 ? scope.row.结束时间.split(' ')[1] : '' }}
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 5px;">
          <el-pagination v-model:current-page="page2.pageList" v-model:page-size="page2.pageSize"
            :page-sizes="[30, 50, 100, 200]" :total="page2.total" background
            layout="total, sizes, prev, pager, next, jumper" style="padding-left: 1vw" @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { inject, onMounted, onUnmounted, reactive, ref } from 'vue'
import { useAppStore } from '@/store/app.js'

const store = useAppStore()
const CreateData = inject('CreateData')
const ExecDatabase = inject('ExecDatabase')

const clickPowerCode = ref('') // 电能昨日数据
const clickAirCode = ref('') // 电能昨日数据
const powerOldData = reactive([]) // 电能昨日数据
const powerDayData = reactive([]) // 电能每日数据
const airOldData = reactive([]) // 电能昨日数据
const airDayData = reactive([]) // 电能每日数据
const dateTime = ref([new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], new Date().toISOString().split('T')[0]]) // 开始结束时间段
const dateTime2 = ref([new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], new Date().toISOString().split('T')[0]]) // 开始结束时间段
const powerCodeData = reactive(['EleMeter1', 'EleMeter2', 'EleMeter3', 'EleMeter4']) // 电能每日数据
const airCodeData = reactive(['AirMeter1', 'AirMeter2', 'AirMeter3', 'AirMeter4', 'AirMeter5', 'AirMeter6']) // 电能每日数据
const page = reactive({
  total: 0, // 总条数
  pageSize: 50, // 每页显示条数
  pageList: 1, // 后台获取页
  loading: false, // 是否显示加载
})
const page2 = reactive({
  total: 0, // 总条数
  pageSize: 50, // 每页显示条数
  pageList: 1, // 后台获取页
  loading: false, // 是否显示加载
})


var timer1 = null;
onMounted(() => {
  getPowerOldData()
  getPowerDayData()
  getAirOldData()
  getAirDayData()

  timer1 = setInterval(() => {
    getPowerOldData()
    getAirOldData()
  }, 1000 * 5)
})

// 离开网页 删除定时器
onUnmounted(() => {
  clearInterval(timer1)
})

const getPowerOldData = () => {
  // 获取权限列表
  var param = []
  var Data = CreateData('11', 'CRRC_能源管理_电表_今日昨日_查询', param)
  ExecDatabase(Data).then(response => {
    powerOldData.length = 0
    if (response.data.length > 0) {
      powerOldData.push(...response.data)
    }
  })
}
const getPowerDayData = () => {
  console.log(dateTime)
  page.loading = true
  powerDayData.length = 0
  // 获取权限列表
  var param = []
  param[0] = ['开始时间', dateTime.value[0]]
  param[1] = ['结束时间', dateTime.value[1]]
  param[2] = ['电表编号', clickPowerCode.value]
  param[3] = ['PageCurrent', page.pageList]
  param[4] = ['PageSize', page.pageSize]
  param[5] = ['PageCount', '1111', 'int', '1']
  param[6] = ['ItemCount', '1111', 'int', '1']
  console.log('param', param)
  var Data = CreateData('11', 'CRRC_能源管理_电表_日结算_查询', param)
  ExecDatabase(Data).then(response => {
    console.log(response)
    if (response.data.length !== 0) {
      powerDayData.push(...response.data.result)
    }
    page.total = parseInt(response.data.output[0].ItemCount)
    page.loading = false
  })
}


const getAirOldData = () => {
  // 获取权限列表
  var param = []
  var Data = CreateData('11', 'CRRC_能源管理_气表_今日昨日_查询', param)
  ExecDatabase(Data).then(response => {
    airOldData.length = 0
    if (response.data.length > 0) {
      airOldData.push(...response.data)
    }
  })
}
const getAirDayData = () => {
  console.log(dateTime)
  page2.loading = true
  airDayData.length = 0
  var param = []
  param[0] = ['开始时间', dateTime2.value[0]]
  param[1] = ['结束时间', dateTime2.value[1]]
  param[2] = ['气表编号', clickAirCode.value]
  param[3] = ['PageCurrent', page2.pageList]
  param[4] = ['PageSize', page2.pageSize]
  param[5] = ['PageCount', '1111', 'int', '1']
  param[6] = ['ItemCount', '1111', 'int', '1']
  console.log('param', param)
  var Data = CreateData('11', 'CRRC_能源管理_气表_日结算_查询', param)
  ExecDatabase(Data).then(response => {
    console.log(response)
    if (response.data.length !== 0) {
      airDayData.push(...response.data.result)
    }
    page2.total = parseInt(response.data.output[0].ItemCount)
    page2.loading = false
  })
}

// 分页
const handleSizeChange = (val) => {
  page.pageList = 1
  page.pageSize = val
  getPowerDayData()
}

const handleCurrentChange = (val) => {
  page.pageList = val
  getPowerDayData()
}

// 分页
const handleSizeChange2 = (val) => {
  page2.pageList = 1
  page2.pageSize = val
  getAirDayData()
}

const handleCurrentChange2 = (val) => {
  page2.pageList = val
  getAirDayData()
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  font-size: 1rem;

  //电表
  .power {
    width: 49.9%;
    height: 90vh;
    border: 1px solid #9f9f9f;
    position: relative;

    .DataList {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 60%;
      overflow: auto;

      .items {
        display: flex;
        flex-wrap: wrap;
        width: 49%;
        margin: 0 auto;
        border: 1px solid #9f9f9f;

        .title {
          width: 100%;
          text-align: center;
          font-size: 1.6vw;
        }

        .item {
          display: flex;
          flex-wrap: wrap;
          width: 50%;

          .left {
            width: 70%;
            text-align: right;
          }

          .right {
            color: #ff9a02;
          }
        }
      }
    }

    .powerTable {
      height: 40%;
    }
  }

  // 气表
  .gas {

    width: 50%;
    height: 90vh;
    border: 1px solid #9f9f9f;
    position: relative;

    .DataList {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 60%;
      overflow: auto;

      .items {
        display: flex;
        flex-wrap: wrap;
        width: 49%;
        margin: 0 auto;
        border: 1px solid #9f9f9f;

        .title {
          width: 100%;
          text-align: center;
          font-size: 1.6vw;
        }

        .item {
          display: flex;
          flex-wrap: wrap;
          width: 100%;

          .left {
            width: 45%;
            text-align: right;
          }

          .right {
            color: #ff9a02;
          }
        }
      }
    }

    .powerTable {
      height: 40%;
    }
  }

  .el-button {
    margin-left: 20px;
  }
}
</style>
