<!-- 
** 详细信息列表 -- 油罐、油枪
-->
<template>
    <el-dialog v-model="displayData.isShowDialog" class="main-content" :key="removeKey" :width="1200" :height="600" :close-on-click-modal="displayData.loading">
        <!-- 自定义加载效果 -->
        <div v-show="displayData.loading" class="loading-wrapper">
            <el-icon class="is-loading">
            <Loading />
            </el-icon>
        </div>

        <div class="switch" @click.stop="switchDisplay()">
            <el-icon size="30"><Switch /></el-icon>
            <el-text>切换显示设备</el-text>
        </div>

        <el-row v-if="displayData.isShowTank" v-for="(item, index) in TableDataTank" :key="index" style="margin-bottom: 10px;height: 100%;">
            <el-col :span="6">
                <el-card style="height: 100%;display: flex;align-items: center;">
                    <el-row>
                        <el-col :span="8">
                            <img :src="tankImgUrl" style="width: 70px;height:70px;">
                        </el-col>
                        <el-col :span="8">
                            <div style="margin-left: 1em;">
                                <div>油罐号</div>
                                <div>{{ item.number }}</div>
                                <div>关联油品</div>
                                <div>{{ item.oilName }}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div style="margin-left: 1em;">
                                <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                    icon="ele-Edit" @click.stop="editTank(item.id)"> 编辑 </el-link>
                                <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                    icon="ele-Delete" @click.stop="deleteDevice(item.id)">删除</el-link>
                                <!-- <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                    icon="ele-Plus"
                                    @click.stop="editOilGun({ 'flag': 0, 'id': item.id, 'number': item.number })">油枪</el-link> -->
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="18" style="width: 100%;height: 100%;background-color: #ebebeb;">
                <el-row style="display: flex;flex-wrap: wrap;">
                    <el-col :span="7" v-for="itemm in item.associatedNozzles" :key="itemm"
                        style="text-align: center;padding: 10px;background-color: #fff; margin: 10px; border-radius: 5px; display: flex;align-items: center;">
                        <img :src="nozzleImgUrl" style="width: 30px;height:30px;">
                        <div style="margin-left: 1em;">
                            <div>油枪号</div>
                            <div>{{ itemm.nozzleNum }}</div>
                        </div>
                        <div style="margin-left: 1em;">
                            <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                icon="ele-Search"
                                @click.stop="editOilGun({ 'flag': 1, 'number': item.number, 'nozzleId': itemm.nozzleId })">
                                查看
                            </el-link>
                            <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                icon="ele-Delete" @click.stop="deleteOilGun(itemm.nozzleId)">删除</el-link>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>

        <el-row v-if="!displayData.isShowTank" v-for="(item, index) in TableDataMachine" :key="index" style="margin-bottom: 10px;height: 100%;">
            <el-col :span="6">
                <el-card style="height: 100%;display: flex;align-items: center;">
                    <el-row>
                        <el-col :span="8">
                            <img :src="machineImgUrl" style="width: 70px;height:70px;">
                        </el-col>
                        <el-col :span="8">
                            <div style="margin-left: 1em;">
                                <div>油机号</div>
                                <div>{{ item.name }}</div>
                                <div>连接端口</div>
                                <div>{{ item.port }}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div style="margin-left: 1em;">
                                <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                    icon="ele-Edit" @click.stop="editMachine(item)"> 编辑 </el-link>
                                <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                    icon="ele-Delete" @click.stop="deleteMachineInfo(item.id)">删除</el-link>
                                <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                    icon="ele-Plus"
                                    @click.stop="editOilGunFromMachine({ 
                                        'flag': 0, 
                                        'stationId':displayData.inputId,
                                        'machineId': item.id })">油枪</el-link>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            
            <el-col :span="18" style="width: 100%;height: 100%;background-color: #ebebeb;">
                <el-row>
                    <el-col :span="7" v-for="itemm in item.nozzles" :key="itemm"
                        style="text-align: center;padding: 10px;background-color: #fff; margin: 10px; border-radius: 5px; display: flex;align-items: center;">
                        <img :src="nozzleImgUrl" style="width: 30px;height:30px;">
                        <div style="margin-left: 1em;">
                            <div>油枪号</div>
                            <div>{{ itemm.nozzleNumer }}</div>
                        </div>
                        <div style="margin-left: 1em;">
                            <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                icon="ele-Edit"
                                @click.stop="editOilGunFromMachine({ 'flag': 1,'stationId':displayData.inputId, 'nozzleId': itemm.id })">
                                编辑
                            </el-link>
                            <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                icon="ele-Delete" @click.stop="deleteOilGun(itemm.id)">删除</el-link>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            
        </el-row>
        <EditDialog ref="editDialogRef" />
        <EditNozzleFromMachineDialog ref="editNozzleFromMachineDialogRef" />
        <DeviceDialog ref="DeviceDialogRef" />
        <MachineDialog ref="MachineDialogRef" />

    </el-dialog>
</template>
<script setup lang="ts">
import { defineAsyncComponent, onBeforeMount, onMounted, reactive, ref } from 'vue';
import { getTankInfo, deleteTank, getDetailsTankInfo, deleteNozzle, getMachine,deleteMachine } from "/@/api/api"
import eventBus from "/@/utils/mitt";
import { tr } from 'element-plus/es/locale';
import { ElLoading, ElSwitch } from 'element-plus';

// 引入组件
const EditDialog = defineAsyncComponent(() => import('/@/views/admin/components/editOilGun.vue'))
const EditNozzleFromMachineDialog = defineAsyncComponent(() => import('/@/views/admin/components/editOilGunFromMachine.vue'))
const DeviceDialog = defineAsyncComponent(() => import('/@/views/admin/components/editDevice.vue'))
const MachineDialog = defineAsyncComponent(() => import('/@/views/admin/components/editMachine.vue'))
import { Loading, Switch } from '@element-plus/icons-vue'; // 引入加载图标
import { watch } from 'fs';
const editDialogRef = ref()
const editNozzleFromMachineDialogRef = ref()
const DeviceDialogRef = ref()
const MachineDialogRef = ref()

const machineImgUrl = ref('/src/assets/machine.png')
const tankImgUrl = ref('/src/assets/tank.png')
const nozzleImgUrl = ref('/src/assets/nozzle.png')
const displayData = reactive({
    isShowDialog: false,
    isShowTank:true,
    inputId: 0,
    loading:false
})
let TableDataTank = ref([]) as any
let TableDataMachine = ref([]) as any
const removeKey = ref(0)

let loadingInstance: any = null; // 保存 Loading 实例
const dialogRef = ref(); // 用于获取对话框的 DOM 元素

// 挂载前
onBeforeMount(() => {
    eventBus.off('refreshViewNozzle')
    eventBus.off('refreshViewDevice')
    eventBus.off('refreshViewMachine')
})

// 挂载时
onMounted(async () => {
    await getInfo()
    await getMachineInfo()
    eventBus.off('refreshViewNozzle')
    eventBus.off('refreshViewDevice')
    eventBus.off('refreshViewMachine')
    eventBus.on('refreshViewNozzle', async () => {
        await getInfo()
        await getMachineInfo()
    })
    eventBus.on('refreshViewDevice', async () => {
        await getInfo()
    })
    eventBus.on('refreshViewMachine', async () => {
        await getMachineInfo()
    })
})

// 切换显示内容
const switchDisplay = () =>{
    displayData.isShowTank = !displayData.isShowTank
}

//-- 获取油机信息。通过station中传过来的 油站id，将油机信息获取出来。
const getMachineInfo = async () => {
    await getMachine({'stationId':displayData.inputId}).then((res) => {
        TableDataMachine.value = res
        console.log("获取到的油枪信息",res,TableDataMachine.value)
    })
}

// -- 获取油罐信息。通过station中传过来的 油站id，将油罐信息获取出来。
// 获取油罐信息
const getInfo = async () => {
    await getTankInfo({ 'id': displayData.inputId }).then((res) => {
        TableDataTank.value = res
        console.log(res)
    })
}

// 删除油罐
const deleteDevice = async (id: number) => {
    displayData.loading = true
    // // 显示 Loading
    // loadingInstance = ElLoading.service({
    //     target: dialogRef.value.$el, // 将 Loading 绑定到对话框的根元素
    //     text: '拼命加载中...',
    //     background: 'rgba(0, 0, 0, 0.5)',
    //   });


    console.log(id)
    await deleteTank({ 'id': id }).then((res) => {
        console.log(res)
    })
    await getInfo()
    displayData.loading = false
}

// 编辑油罐
const editTank = async (id: number) => {
    // 调用查询接口获取 数据
    await getDetailsTankInfo({ 'id': id }).then((res: any) => {
        DeviceDialogRef.value.openDialog(res)
    })
}

// 添加油枪
const editOilGun = (row: any) => {
    editDialogRef.value.openDialog(row)
}

// 删除油枪
const deleteOilGun = async (id: number) => {
    displayData.loading = true
    await deleteNozzle({ 'id': id }).then((res) => {
        console.log(res)
    })
    await getInfo()
    await getMachineInfo()
    displayData.loading = false
}

// 编辑油机
const editMachine = async (row: any) => {
    // 调用查询接口获取 数据
    MachineDialogRef.value.openDialog(row)
}

const deleteMachineInfo = async (id:number) => {
    displayData.loading = true
    await deleteMachine({ 'machineId': id }).then((res) => {
        console.log(res)
    })
    await getInfo()
    await getMachineInfo()
    displayData.loading = false
}
// 添加油枪(油机页)
const editOilGunFromMachine = (row: any) => {
    editNozzleFromMachineDialogRef.value.openDialog(row)
}

const openDialog = async (id: number) => {
    displayData.inputId = id
    displayData.isShowDialog = true
    await getInfo()
    await getMachineInfo()
}

defineExpose({
    openDialog,
})


</script>

<style lang="scss">
.loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 设置高度 */
}
.el-icon.is-loading {
  font-size: 24px; /* 设置加载图标大小 */
  color: #409eff; /* 设置加载图标颜色 */
}

.switch{
    display: flex;
    justify-content: start;
    align-content: center;
    margin-bottom: 2%;
}
</style>