<template>
  <div class="tableBox">
    <div class="tableTop">
      <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: 190px;"
          type="daterange"
          value-format="YYYY-MM-DD"
      />

      <span style="margin-left: 1vw">车辆编号：</span>
      <el-input
          v-model="searchObj.carCode"
          clearable
          placeholder="车辆编号"
          style="width: 240px"
      />
      <el-button :icon="Search" style="margin-left: 1vw" type="success" @click="searchTable">查询</el-button>
    </div>

    <el-table :data="tableData" border height="80vh" stripe style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="80"/>
      <el-table-column align="center" label="车辆编号" width="90">
        <template #default="scope">
          {{ scope.row.车辆编号 }}
        </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="电池电压">
        <template #default="scope">
          {{ scope.row.电池电压 }}
        </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="车辆前后倾角">
        <template #default="scope">
          {{ scope.row.车辆前后倾角 }}
        </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="车辆故障码">
        <template #default="scope">
          {{ scope.row.车辆故障码 }}
        </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="车辆模式">
        <template #default="scope">
          {{ scope.row.车辆模式 }}
        </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="170">
        <template #default="scope">
          {{ scope.row.接收时间 }}
        </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>
</template>

<script setup>
import {inject, onMounted, reactive, ref} from 'vue'
import {Search} from "@element-plus/icons-vue";

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

const dateTime = ref([new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], new Date().toISOString().split('T')[0]]) // 开始结束时间段

const tableData = reactive([])
const searchObj = reactive({
  carCode: ''
})
const page = reactive({
  total: 0, // 总条数
  pageSize: 50, // 每页显示条数
  pageList: 1, // 后台获取页
  loading: false, // 是否显示加载
})


onMounted(() => {
  searchTable()
});


const searchTable = () => {
  page.loading = true
  tableData.length = 0
  var param = []
  param.push(['开始时间', dateTime.value[0]])
  param.push(['结束时间', dateTime.value[1]])
  param.push(['车辆编号', searchObj.carCode])
  param.push(['PageCurrent', page.pageList])
  param.push(['PageSize', page.pageSize])
  param.push(['PageCount', '1111', 'int', '1'])
  param.push(['ItemCount', '1111', 'int', '1'])
  var Data = CreateData('11', 'CRRC_能源管理_遥控车_历史记录_查询', param)
  ExecDatabase(Data).then(response => {
    if (response.data.length !== 0) {
      tableData.push(...response.data.result)
    }
    page.total = parseInt(response.data.output[0].ItemCount)
    page.loading = false
  })
}

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

const handleCurrentChange = (val) => {
  page.pageList = val
  searchTable()
}
</script>

<style lang="scss" scoped>
.tableBox {
  width: 98vw;
  margin: 2vh auto 0 auto;
  border: 1px solid #9f9f9f;
  background-color: #ecf0f3;
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  border-radius: 12px;
  overflow: hidden;

  .tableTop {
    width: 100%;
    margin: 1vh auto;
  }

  .block {
    margin-bottom: 1vh;
  }
}
</style>
