<template>
  <div class="layout-pd">
    <el-row>
      <el-col :xs="24">
        <el-card style="height: 86vh"   class="mt8 my-fill all-con" shadow="hover">
          <div class="tip-con">
            <el-alert
              v-if="detailsData.list.onlineStatus==='离线'"
              title="加油机长时间离线"
              type="error"
              class="mb15"
            ></el-alert>
            <el-alert
              v-if="detailsData.list.onlineStatus==='在线'"
              title="加油机长时间在线"
              type="success"
              class="mb15"
            ></el-alert>
          </div>
          <div class="ma-con">
            <!-- <div class="top-con" id="top-conId" v-loading="oilListData.loading">
              <el-scrollbar>
                <div class="scrollbar-flex-content" >
                  <div class="card"  :style="{backgroundColor: item.oilEngineStatus === '在线' ? '#67C23A': '#F56C6C'}" name="card"   v-for="(item,index) in oilListData.list" v-bind:key="index"  >
                    <div class="info-con">
                      <span>{{item.oilEngineName}}&nbsp;&nbsp;
                        <span >
                          {{item.oilEngineStatus}}
                        </span>
                      </span>
                      <span >{{item.oilSpecifications}}</span>
                    </div>
                    <div class="info-con">
                      <span>油品:&nbsp;{{item.oils}}</span>
                      <span>自锁状态:&nbsp;
                        <span >{{item.selfLockingState}}</span>
                      </span>
                    </div>
                    <div class="info-con">
                      <span>ESQS编码:&nbsp;{{item.ECQSCode}}</span>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
            </div> -->
            <div class="bom-con">
              <div class="bomCon-lef">
                <el-image style="top: 25%;translate: (-50%,-50%);" src="https://cma-fds.org.cn/static/img/dispenser.6960513.png"></el-image>
              </div>
              <div class="bomCon-rig">
                <div class="bomConR-lef">
                  <el-card v-loading="detailsData.loading"  style="margin-bottom: 10px;" :header="detailsData.list.name+'号机油机'">
                      <div class="oilInfo-con" >
                        <div class="oilInfo-item">出厂编号:&nbsp;{{detailsData.list.serialNumber}}</div>
                        <div class="oilInfo-item">机型:&nbsp;{{detailsData.list.model}}</div>
                        <div class="oilInfo-item">制造商:&nbsp;{{detailsData.list.manufacturer}}</div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>规格参数:&nbsp;{{detailsData.list.modelSpec}}</span>
                          <span>生产日期:&nbsp;{{detailsData.list.createdTime}}</span>
                        </div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>测量范围:&nbsp;{{detailsData.list.measureRang}}</span>
                          <span>安装日期:&nbsp;{{detailsData.list.installationDate}}</span>
                        </div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>准确度等级:&nbsp;{{detailsData.list.accuracyLevel}}</span>
                          <span>启用日期:&nbsp;{{detailsData.list.startupDate}}</span>
                        </div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>设备状态:&nbsp;{{detailsData.list.deviceStatus}}</span>
                          <span>在线状态:&nbsp;{{detailsData.list.onlineStatus}}</span>
                        </div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>报警状态:&nbsp;{{detailsData.list.alarmLevel}}</span>
                          <span>累计在线时间:&nbsp;{{detailsData.list.onlineDesc}}</span>
                        </div>
                      </div>
                  </el-card>
                  <el-card v-loading="tableData.loading" >
                    <div style="margin-bottom: 10px;color: #505050;">
                      <span>最新5条报警</span>
                      <span style="float: right;"><el-link type="primary" @click="toPage()">更多报警>></el-link></span>
                    </div>
                    <el-table :data="tableData.list" stripe  row-key="id" style="width: 100%">
                      <el-table-column prop="createdDate" label="时间"  />
                      <el-table-column prop="name" label="加油枪" />
                      <el-table-column prop="alarmSource" label="报警来源" />
                      <el-table-column prop="alarmDescription" label="报警描述" />
                      <el-table-column prop="alarmType" label="报警类型" />
                    </el-table>
                  </el-card>
                </div>
                <div class="bomConR-rig" style="padding-right: 0;">
                  <el-row :gutter="12">
                    <el-col :span="12" v-for="(item,index) in oilListData.list" v-bind:key="index" >
                      <el-card v-loading="oilListData.loading" style="margin-bottom: 10px;width: 100%;">
                        <div class="oilInfo-con" style="padding: 0;">
                          <div class="oilInfo-item oilInfo-item-two">
                          <span>{{item.name}}</span>
                          <span style="float: right;">{{item.mainBoard_NozzleNo}}</span>
                        </div>
                          <div class="oilInfo-item oilInfo-item-two">
                            <span>在线状态:&nbsp;{{item.onlineStatus}}</span>
                          </div>
                          <div class="oilInfo-item oilInfo-item-two">
                            <span>油品:&nbsp;{{ item.fuelName }}</span>
                          </div>
                          <div class="oilInfo-item oilInfo-item-two">
                            <span>自锁功能:&nbsp;{{ item.alarming }}</span>
                          </div>
                          <div class="oilInfo-item oilInfo-item-two">
                            <span>ECQS编码:&nbsp;{{item.code}}</span>
                          </div>
                          <!-- <div class="oilInfo-item oilInfo-item-two" style="float: right;">
                            <el-icon :size="20"><circle-plus-filled /></el-icon>
                          </div> -->
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
//import { CirclePlusFilled } from '@element-plus/icons-vue'
import { NozzlecontrolDtl } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsDto";
import {OilEngineDetailsApi} from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
import { FuelDispenserEntity,AlarmHistoryDto } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsDto"
import router from "/@/router";
import {MoreOilEngineDetailsApi} from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";

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

/**
 * 表格数据对象
 */
const tableData = reactive({
  loading: false,
  list: [] as Array<AlarmHistoryDto>
})

/**
 * 油机详情数据对象
 */
const detailsData = reactive({
  loading: false,
  list: {} as FuelDispenserEntity
})

/**
 * 油机列表详情数据对象
 */
const oilListData = reactive({
  loading: false,
  list: [] as Array<NozzlecontrolDtl>
})
/**
 * 油机列表初始ID
 */
const initID = ref()
const toPage = () => {
  const id = router.currentRoute.value.params.id
  router.push({path:`/statement/${id}/more/moreAlert`})
}
/******************************数据对象***************************************/

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

// /**
//  * 变换时改样式
//  * @param event
//  * @param item
//  */
// const onCardChange = (event, item) => {
//   // console.log(event)
//   // console.log(item);
//   let ele = event.target
//
//   if( ele.getAttribute('name') !== 'card') {
//     ele = ele.closest('.card')
//   }
//
//   if(ele.classList.contains("active-card")) return
//
//   initID.value = item.oilEngineName
//
//   const parentElement = document.getElementById('top-conId')
//   const myElement = parentElement.querySelector('.active-card')
//
//   if(myElement){
//     myElement.classList.remove('active-card')
//   }
//
//   ele.classList.add("active-card")
// }

watch(() => initID.value, ()=>{
  initTableData()
  initDetailsData()
})

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

/**********************************初始化***********************************/
/**
 * 格式化日期
 */
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}`;
}
/**
 * 初始化油机列表详情数据对象
 */
const initOilListData = async () => {
  oilListData.loading = true
  const fuelId=router.currentRoute.value.params.id
  const { data } = await new MoreOilEngineDetailsApi().getOilListData({Fuelid:fuelId})
  oilListData.list = data
  oilListData.loading = false
}

/**
 * 初始化表格数据对象
 */
const initTableData = async () => {
  tableData.loading = true
  const fuelId=router.currentRoute.value.params.id
  const filter={fuelId:fuelId}
  const pageInput={currentPage: 1,pageSize: 5}
  const { data } = await new OilEngineDetailsApi().getAlarmHistoryDto({...pageInput,filter:filter})
  tableData.list = data.list
  tableData.list=tableData.list?.map((item)=>{
    if(item.createdDate!==null){
      item.createdDate=formatDate(item.createdDate)
    }
    return item
  })
  tableData.loading = false
}

/**
 * 初始化油机详情数据对象
 */
const initDetailsData = async () => {
  detailsData.loading = true
  const fuelId=router.currentRoute.value.params.id
  const { data } = await new OilEngineDetailsApi().getBasicInfoDto({Fuelid:fuelId})
  detailsData.list = data
  if(detailsData.list.createdTime!==null){
    detailsData.list.createdTime=formatDate(detailsData.list.createdTime)
  }
  if(detailsData.list.installationDate!==null){
    detailsData.list.installationDate=formatDate(detailsData.list.installationDate)
  }
  if(detailsData.list.startupDate!==null){
    detailsData.list.startupDate=formatDate(detailsData.list.startupDate)
  }
  if(detailsData.list.onlineStatus!==null){
    if(detailsData.list.onlineStatus==='offline'){
      detailsData.list.onlineStatus='离线'
    }else{
      detailsData.list.onlineStatus='在线'
    }
  }
  if(detailsData.list.deviceStatus!==null){
    if(detailsData.list.deviceStatus==='enable'){
      detailsData.list.deviceStatus='启用'
    }else if(detailsData.list.deviceStatus==='factory'){
      detailsData.list.deviceStatus='出厂注册'
    }else{
      detailsData.list.deviceStatus='备案'
    }
  }
  detailsData.loading = false
}

const init = () => {
  initDetailsData()
  initTableData()
  initOilListData()
}

onMounted(() => {
  init()
})

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



</script>

<style scoped lang="scss">
  .all-con {

    .ma-con {
      height: 100%;
      .top-con {
        height: 18%;
        .scrollbar-flex-content {
          display: flex;
          height: 100%;
        }

        .card {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 10px;
          width: 240px;
          margin: 14px;
          border-radius: 4px;
          box-shadow: var(--el-box-shadow-light);
          cursor: pointer;
          font-size: 12px;
          font-weight: 600;

          .info-con {
            display: flex;
            justify-content: space-between;
          }
        }

        //.active-card {
        //  background-color: #9fcaf3;
        //}
      }
      .bom-con {
        display: flex;
        //height: 82%;

        .bomCon-lef {
          width: 24%;
        }

        .bomCon-rig {
          display: flex;
          width: 100%;

          .bomConR-lef {
            width: 50%;

            .oilInfo-con {

              .oilInfo-item {
                margin-bottom: 25px;
              }
              .oilInfo-item-two > span {
                display: inline-block;
                width: 50%;
              }
            }
          }

          .bomConR-rig {
            width: 50%;
          }

          .bomConR-lef, .bomConR-rig {
            padding: 20px;
          }
        }
      }
    }
  }
</style>
