<!--油机详情页面-->
<template>
  <div class="layout-pd oilInfo">
    <el-row>
      <!--基本信息-->
      <el-col :xs="24">
        <el-card class="mt8" header="基本信息" shadow="hover">
          <div class="basicInformation" v-loading="basicInfo.loading">
            <div class="basicInformation-left">
              <div class="item ">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="油机号"
                  trigger="hover"
                  :content="basicInfo.info.name"
                >
                  <template #reference>
                    <span class="m-2"> 油机号: {{basicInfo.info.name}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="序列号"
                  trigger="hover"
                  :content="basicInfo.info.serialNumber"
                >
                  <template #reference>
                    <span class="m-2"> 序列号: {{basicInfo.info.serialNumber}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="石油公司"
                  trigger="hover"
                  :content="basicInfo.info.oilCompany"
                >
                  <template #reference>
                    <span class="m-2"> 石油公司: {{basicInfo.info.oilCompany}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="加油机厂商"
                  trigger="hover"
                  :content="basicInfo.info.manufacturer"
                >
                  <template #reference>
                    <span class="m-2"> 加油机厂商: {{basicInfo.info.manufacturer}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="加油站"
                  trigger="hover"
                  :content="basicInfo.info.gasStation"
                >
                  <template #reference>
                    <span class="m-2 ">
                      加油站:
                        {{basicInfo.info.gasStation}}
                    </span>
                  </template>
                </el-popover>
              </div>
              <div class="item">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="加油机机型"
                  trigger="hover"
                  :content="basicInfo.info.model"
                >
                  <template #reference>
                    <span class="m-2">
                      加油机机型:
                        {{ basicInfo.info.model }}
                    </span>
                  </template>
                </el-popover>
              </div>
              <div class="item">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="加油机枪数量"
                  trigger="hover"
                  :content="basicInfo.info.gunCount"
                >
                  <template #reference>
                    <span class="m-2"> 加油机枪数量: {{basicInfo.info.gunCount}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item">
                <el-popover
                  placement="top-start"
                  :width="200"
                  trigger="hover"
                  title="设备状态"
                  :content="basicInfo.info.deviceStatus"
                >
                  <template #reference>
                    <span class="m-2"> 设备状态: {{basicInfo.info.deviceStatus}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="在线状态"
                  trigger="hover"
                  :content="basicInfo.info.onlineStatus"
                >
                  <template #reference>
                    <span class="m-2"> 在线状态: {{basicInfo.info.onlineStatus}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="出厂时间"
                  trigger="hover"
                  :content="basicInfo.info.manufactureDate"
                >
                  <template #reference>
                    <span class="m-2"> 出厂时间: {{basicInfo.info.manufactureDate}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item ">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="启动时间"
                  trigger="hover"
                  :content="basicInfo.info.startupDate"
                >
                  <template #reference>
                    <span class="m-2"> 启动时间: {{basicInfo.info.startupDate}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item ">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="安装时间"
                  trigger="hover"
                  :content="basicInfo.info.installationDate"
                >
                  <template #reference>
                    <span class="m-2"> 安装时间: {{basicInfo.info.installationDate}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item ">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="创建者"
                  trigger="hover"
                  :content="basicInfo.info.createdUserName"
                >
                  <template #reference>
                    <span class="m-2"> 创建者: {{basicInfo.info.createdUserName}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item ">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="创建时间"
                  trigger="hover"
                  :content="basicInfo.info.createdTime"
                >
                  <template #reference>
                    <span class="m-2"> 创建时间: {{basicInfo.info.createdTime}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item ">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="修改者"
                  trigger="hover"
                  :content="basicInfo.info.modifiedUserName"
                >
                  <template #reference>
                    <span class="m-2"> 修改者: {{basicInfo.info.modifiedUserName}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item ">
                <el-popover
                  placement="top-start"
                  :width="200"
                  title="修改时间"
                  trigger="hover"
                  :content="basicInfo.info.modifiedTime"
                >
                  <template #reference>
                    <span class="m-2"> 修改时间: {{basicInfo.info.modifiedTime}}</span>
                  </template>
                </el-popover>
              </div>
              <div class="item">
                <el-link
                  class="my-el-link mr12 ml12"
                  @click="toPage()"
                  type="primary"
                  size="small"
                  :underline="false"
                  target="_blank"
                >查看更多>></el-link>
              </div>
            </div>
            <div class="basicInformation-right" >
              <div @click="showBigPic(basicInfo.imgUrl)">
                <el-image loading="lazy"
                          alt="fgg"
                          class="img"
                          fit="contain"
                          :src="basicInfo.imgUrl" >
                  <template #error>
                    <div class="image-slot">
                      <el-icon><icon-picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!--报警历史-->
      <el-col :xs="24">
        <el-card style="height: 40vh" class="mt8 my-fill" shadow="hover" header="报警历史">
          <el-table v-loading="alarmHistory.loading"  stripe :data="alarmHistory.list" row-key="id" style="width: 100%">
            <el-table-column prop="createdDate" label="时间"  />
            <el-table-column prop="gasStation" label="加油站"  />
            <el-table-column prop="name" label="加油机"  >
              <template #default="{ row }">
                {{row.name}}
              </template>
            </el-table-column>
            <el-table-column prop="serialNumber" label="加油机序号"  >
              <template #default="{ row }">
                {{row.serialNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="alarmSource" label="报警来源"  >
              <template #default="{ row }">
                {{row.alarmSource}}
              </template>
            </el-table-column>
            <el-table-column prop="alarmType" label="报警类型"  />
            <el-table-column prop="alarmDescription" label="报警描述"  />
          </el-table>
          <div class="my-flex my-flex-end"  style="margin-top: 20px">
            <el-pagination
              v-model:currentPage="alarmHistory.pageInput.currentPage"
              v-model:page-size="alarmHistory.pageInput.pageSize"
              :default-page-size="5"
              :total="alarmHistory.total"
              :page-sizes="[5, 10, 20, 50, 100]"
              small
              background
              @size-change="onAlarmHistorySizeChange"
              @current-change="onAlarmHistoryCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </el-card>
      </el-col>

      <!--生产日志-->
      <el-col :xs="24">
        <el-card style="height: 40vh" class="mt8 my-fill" shadow="hover" header="生命周期">
          <el-table v-loading="lifeCycle.loading"  stripe :data="lifeCycle.list" row-key="id" style="width: 100%">
            <el-table-column prop="createdDate" label="时间"  />
            <el-table-column prop="operator" label="操作人"  />
            <el-table-column prop="operatorID" label="操作人ID"  />
            <el-table-column prop="operation" label="操作"  />
          </el-table>
          <div class="my-flex my-flex-end"  style="margin-top: 20px">
            <el-pagination
              v-model:currentPage="lifeCycle.pageInput.currentPage"
              v-model:page-size="lifeCycle.pageInput.pageSize"
              :default-page-size="5"
              :total="lifeCycle.total"
              :page-sizes="[5, 10, 20, 50, 100]"
              small
              background
              @size-change="onLifeCycleSizeChange"
              @current-change="onLifeCycleCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      v-model="bigImgDto.isShow"
      :close-on-click-modal="true"
      :show-close="false"
      width="80%"
    >
      <img
        :src="bigImgDto.imgUrl"
        class="fullscreen-image"
        alt="放大的图片"/>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Picture as IconPicture } from '@element-plus/icons-vue'
import {onMounted, reactive} from "vue";
import {OilEngineDetailsApi} from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
import router from "/@/router";
import { FuelDispenserEntity,PageInputAlarmHistoryDto,AlarmHistoryDto,PageInputLifeCycleDto,LifeCycleDto } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsDto"

/******************************数据对象***************************************/

/**
 * 获取当前环境请求的URL前缀
 */
const baseUrl = import.meta.env.VITE_API_URL

/**
 * 显示大图数据对象
 */
const bigImgDto = reactive({
  isShow:false,
  imgUrl:''
})

/**
 * 油机详情 - 基本信息 - 数据对象
 */
const basicInfo = reactive({
  loading:false,
  info:{} as FuelDispenserEntity,
  imgUrl:'upload/2023/09/15/65048ee6-9b3f-2234-0097-734b351ca09d.png'
})

/**
 * 油机详情 - 报警历史 - 数据对象
 */
const alarmHistory = reactive({
  loading:false,
  list:[] as Array<AlarmHistoryDto>,
  pageInput:{
    currentPage: 1,
    pageSize: 5
  } as PageInputAlarmHistoryDto,
  total:0,
  Filter: {
    /**油机id */
    fuelId: 0
  }
})

/**
 * 油机详情 - 生命周期 - 数据对象
 */
const lifeCycle = reactive({
  loading:false,
  list:[] as Array<LifeCycleDto>,
  pageInput:{
    currentPage: 1,
    pageSize: 5
  } as PageInputLifeCycleDto,
  total:0,
  Filter: {
    /**油机id */
    fuelId: 0
  }
})

/***************************数据对象***************************************/


/*******************************方法**************************************/

/**
 * 展示大图
 * @param val
 */
const showBigPic = (val) => {
  if(val){
    bigImgDto.imgUrl = val
  }else {
    bigImgDto.imgUrl = ''
  }
  bigImgDto.isShow = true
}

/**
 * 查看更多
 */
const toPage = () => {
  const id = router.currentRoute.value.params.id
  router.push({path:`/statement/${id}/more`})
}
/**
 * 格式化日期
 */
 const formatDate=(val)=>{
  const date=new Date(val)
  const year: number = date.getFullYear();
  const month: string = (date.getMonth() + 1).toString().padStart(2, '0');
  const day: string = date.getDate().toString().padStart(2, '0');
  const hours: string = date.getHours().toString().padStart(2, '0');
  const minutes: string = date.getMinutes().toString().padStart(2, '0');
  const seconds: string = date.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
/**
 * 油机详情 - 报警历史 - 页条变化
 * @param val
 */
const onAlarmHistorySizeChange = (val) => {
  alarmHistory.pageInput.pageSize = val
  getAlarmHistory()
}

/**
 * 油机详情 - 报警历史 - 页码变化
 * @param val
 */
const onAlarmHistoryCurrentChange = (val) => {
  alarmHistory.pageInput.currentPage = val
  getAlarmHistory()
}

/**
 * 油机详情 - 生命周期 - 页条变化
 * @param val
 */
const onLifeCycleSizeChange = (val) =>{
  lifeCycle.pageInput.pageSize = val
  getLifeCycle()
}

/**
 * 油机详情 - 生命周期 - 页码变化
 * @param val
 */
const onLifeCycleCurrentChange = (val) => {
  lifeCycle.pageInput.currentPage = val
  getLifeCycle()
}

/*********************************方法************************************/


/**********************************初始化***********************************/

/**
 * 获取 油机详情 - 基本信息 - 数据对对象
 */
const getBasicInfo = async () => {
  basicInfo.loading = true
  basicInfo.imgUrl=baseUrl + '/'+basicInfo.imgUrl
  const fuelId=router.currentRoute.value.params.id
  const { data } = await new OilEngineDetailsApi().getBasicInfoDto({Fuelid:fuelId})
  basicInfo.info = data
  if(basicInfo.info.createdTime!==null){
    basicInfo.info.createdTime=formatDate(basicInfo.info.createdTime)
  }
  if(basicInfo.info.installationDate!==null){
    basicInfo.info.installationDate=formatDate(basicInfo.info.installationDate)
  }
  if(basicInfo.info.startupDate!==null){
    basicInfo.info.startupDate=formatDate(basicInfo.info.startupDate)
  }
  if(basicInfo.info.modifiedTime!==null){
    basicInfo.info.modifiedTime=formatDate(basicInfo.info.modifiedTime)
  }
  if(basicInfo.info.onlineStatus!==null){
    if(basicInfo.info.onlineStatus==='offline'){
      basicInfo.info.onlineStatus='离线'
    }else{
      basicInfo.info.onlineStatus='在线'
    }
  }
  if(basicInfo.info.deviceStatus!==null){
    if(basicInfo.info.deviceStatus==='enable'){
      basicInfo.info.deviceStatus='启用'
    }else if(basicInfo.info.deviceStatus==='factory'){
      basicInfo.info.deviceStatus='出厂注册'
    }else{
      basicInfo.info.deviceStatus='备案'
    }
  }
  basicInfo.loading = false
}

/**
 * 获取 油机详情 - 报警历史 - 数据对对象
 */
const getAlarmHistory = async () => {
  alarmHistory.loading = true
  alarmHistory.Filter.fuelId=router.currentRoute.value.params.id
  const {data} = await new OilEngineDetailsApi().getAlarmHistoryDto({...alarmHistory.pageInput,filter:alarmHistory.Filter})
  alarmHistory.total = data.total
  alarmHistory.list = data.list
  alarmHistory.loading = false
}

/**
 * 获取 油机详情 - 生命周期 - 数据对对象
 */
const getLifeCycle = async () => {
  lifeCycle.loading = true
  lifeCycle.Filter.fuelId=router.currentRoute.value.params.id
  const {data} = await new OilEngineDetailsApi().getLifeCycleDto({...lifeCycle.pageInput,filter:lifeCycle.Filter})
  lifeCycle.total = data.total
  lifeCycle.list = data.list
  lifeCycle.loading = false
}

/**
 * 初始化
 */
onMounted(() => {
  getBasicInfo()
  getAlarmHistory()
  getLifeCycle()
})

/*********************************初始化************************************/

</script>

<style scoped lang="scss">
.oilInfo{
  font-weight: 500;

  .basicInformation{
    display: flex;
    display: -webkit-flex; /* Safari */
    justify-content: space-around;
    align-items:center;
    align-content:space-around;
    flex-wrap: wrap-reverse;
    .basicInformation-left{
      display: flex;
      display: -webkit-flex; /* Safari */
      justify-content: space-around;
      flex-wrap: wrap;
      height: 100%;
      max-width: 65%;
      min-width: 300px;
      .item{
        display: inline-block;
        cursor: pointer;
        width: 240px;/*设置显示的最大宽度*/
        height:40px;
        overflow:hidden;/*超出部分隐藏*/
        white-space:nowrap;/*强制单行显示*/
        text-overflow: ellipsis;
      }

    }
    .basicInformation-right{
      width: 50%;
      height: 100%;
      max-width: 300px;
      min-width: 200px;
      padding: 0 10px;
      .img {
        width: 220px;
        height: 140px;
        cursor: pointer;
      }
      .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: var(--el-fill-color-light);
        color: var(--el-text-color-secondary);
        font-size: 30px;
      }
      .image-slot .el-icon {
        font-size: 30px;
      }
    }
  }

  .fullscreen-image {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
  }
}
</style>
