<template>
  <div class="layout-pd" style="height: 100%;width: 100%;">
    <el-row style="height: 100%;width: 100%; display: flex;">

      <!-- 菜单栏 -->
      <el-menu default-active="-1" class="el-menu-vertical-demo" text-color="black" @open="handleOpen"
        @close="handleClose" v-if="showicon" unique-opened>
        <el-menu-item index="-1">
          <span>整站</span>
        </el-menu-item>
        <el-sub-menu :index="oilItem.id" v-for="oilItem in fuelList" :key="oilItem.id">
          <template #title>
            <div>
              <div class="status-point menu-point-second"
                :style="oilItem.onlineStatus == 'online' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'" />
              <span>{{ oilItem.name }}号机</span>
            </div>

          </template>
          <el-menu-item-group>
            <el-menu-item :index="oilItem.id - item.name" v-for="(item, index) in oilItem.oilList" v-bind:key="index">
              <div class="status-point menu-point-first"
                :style="item.onlineStatus == '在线' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'" />
              {{
                item.mainBoard_NozzleNo
              }}{{ item.name }}号枪
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>

      <mainView :id="getId" @getIcon="getValue"></mainView>

    </el-row>
  </div>
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent, onMounted, onUpdated, reactive, ref, watch } from "vue";
//import { CirclePlusFilled } from '@element-plus/icons-vue'
import { OilEngineDetailsApi } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
import router from "/@/router";
import { MoreOilEngineDetailsApi } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";
import { FuelDispenserDto_SearchFilter, PageInputFuelDispenserDto } from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesDto";
import { ListOfOilEnginesApi } from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesApi";
import { nextTick } from "process";


// 引入组件
const mainView = defineAsyncComponent(() => import('./component/main.vue'))
const getId = ref('') as any
getId.value = router.currentRoute.value.params.id

let showicon = ref(true)
const getValue = (data: boolean) => {
  showicon.value = data
}


const handleOpen = (key: string, keyPath: string[]) => {
  if (key == '-1') {
    getId.value = router.currentRoute.value.params.id
  } else {
    getId.value = key
  }
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}


/**
 * -------------- 获取左边菜单栏相关数据 --------------
 *  */

const oilEngineData = reactive({
  filterModel: {
    /**油机号*/
    name: "",
    /**加油站*/
    gasStation: "",
    /**加油机机型*/
    model: "",
    /**设备状态*/
    deviceStatus: "",
    /**在线状态*/
    onlineStatus: "",
  } as FuelDispenserDto_SearchFilter,
  total: 0,
  pageInput: {
    currentPage: 1,
    pageSize: 100,
  } as PageInputFuelDispenserDto,
})

let fuelList = ref([]) as any
let data = ref('') as any
data.value = localStorage.getItem("name")

const getMenuData = async () => {
  if (data.value == null) return
  oilEngineData.filterModel.gasStation = data.value
  const res: any =
    await new ListOfOilEnginesApi().getPage({ ...oilEngineData.pageInput, filter: oilEngineData.filterModel })

  res.data.list.forEach(async (item: any) => {
    await new OilEngineDetailsApi().getBasicInfoDto({ Fuelid: item.fuelId }).then(async (res) => {
      let list = [] as any
      await new MoreOilEngineDetailsApi().getOilListData({ Fuelid: item.fuelId }).then((r) => {
        list = r.data
      })
      fuelList.value.push({ 'id': item.fuelId, 'name': res.data.name, 'onlineStatus': res.data.onlineStatus, 'oilList': list })
    })
  })

}

onMounted(() => {
  getMenuData()

})


</script>

<style scoped lang="scss">
// -------- 菜单栏
.el-menu,
.el-menu-item-group {
  background-color: #fff;
  color: #606266
}

::v-deep.el-submenu .el-menu-item {
  width: auto !important;
}

.el-menu span,
.el-menu-item {
  color: #606266
}

// 小圆点
.status-point {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  right: 10%;
  top: 30%;
  margin-right: 30px;
}

.menu-point-first {
  left: 2em;
  top: 1.8em;
}

.menu-point-second {
  left: 0.7em;
  top: 1.8em;
}

.one {
  --el-card-padding: 10px
}
</style>
