<!-- 
** 详细信息列表 -- 油罐、油枪
-->
<template>
    <el-dialog v-model="displayData.isShowDialog" class="main-content" :key="removeKey" :width="1200" :height="600">
        <el-row v-for="(item, index) in TableData" :key="index" style="margin-bottom: 10px;height: 150px;">
            <el-col :span="6">
                <el-card style="height: 100%;display: flex;align-items: center;">
                    <el-row>
                        <el-col :span="8">
                            <img :src="url" 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="editStation(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>
                    <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="url" 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-Edit"
                                @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>
        <EditDialog ref="editDialogRef" />
        <DeviceDialog ref="DeviceDialogRef" />

    </el-dialog>
</template>
<script setup lang="ts">
import { defineAsyncComponent, onBeforeMount, onMounted, reactive, ref } from 'vue';
import { getTankInfo, deleteTank, getDetailsTankInfo, deleteNozzle } from "/@/api/api"
import eventBus from "/@/utils/mitt";

// 引入组件
const EditDialog = defineAsyncComponent(() => import('/@/views/admin/components/editOilGun.vue'))
const DeviceDialog = defineAsyncComponent(() => import('/@/views/admin/components/editDevice.vue'))
const editDialogRef = ref()
const DeviceDialogRef = ref()

const url = ref('/src/assets/logo-com.png')
const displayData = reactive({
    isShowDialog: false,
    inputId: 0
})
let TableData = ref([]) as any
const removeKey = ref(0)

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

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


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

// 删除油罐
const deleteDevice = async (id: number) => {
    console.log(id)
    await deleteTank({ 'id': id }).then((res) => {
        console.log(res)
    })
    await getInfo()
}

// 编辑油罐
const editStation = 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) => {
    console.log('id')
    console.log(id)
    await deleteNozzle({ 'id': id }).then((res) => {
        console.log(res)
    })
    await getInfo()
}

const openDialog = (id: number) => {
    displayData.inputId = id
    displayData.isShowDialog = true
}
defineExpose({
    openDialog,
})


</script>

<style lang="scss"></style>