<!-- 
* 站点页面 的 基础页
-->
<template>
    <div class="layout-pd">
        <el-row>
            <!--操作-->
            <el-col :xs="24">
                <el-card class="mt8" shadow="hover">
                    <!-- 按钮  -->
                    <el-row justify="space-between" class="submit-button">
                        <el-row>
                        </el-row>
                        <el-row>
                            <el-button type="primary" @click="uploadStation('')"> 新增站点 </el-button>
                        </el-row>
                    </el-row>
                </el-card>
            </el-col>
            <!--表格-->
            <el-col :xs="24">
                <el-card style="height: 77vh" class="my-fill mt8" shadow="hover">
                    <el-table :data="tableData" v-loading="loading" stripe :key="tableData" @row-click="rowClick"
                        row-key="id">
                        <el-table-column v-for="column in data" :key="column.prop" :prop="column.prop"
                            :label="column.label" />
                        <!-- 操作 -->
                        <el-table-column label="操作" fixed="right" align="center" header-align="center"
                            class="right-operation" width="140">
                            <template #default="scope">
                                <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                    icon="ele-Plus" @click.stop="addDetails(scope.row.id)">设备</el-link>
                                <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                    icon="ele-Edit" @click.stop="uploadStation(scope.row)">编辑</el-link>
                                <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                    icon="ele-Delete" @click.stop="deleteData(scope.row.id)">删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 页码 -->
                    <div class="my-flex my-flex-end" style="margin-top: 20px">
                        <el-pagination v-model:currentPage="pageData.page" v-model:page-size="pageData.size" :total="50"
                            :default-page-size="10" :page-sizes="[10, 20, 50, 100]" small background
                            @size-change="onSizeChange" @current-change="onCurrentChange"
                            layout="total, sizes, prev, pager, next, jumper" />
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <EditDialog ref="editDialogRef" />
        <DeviceDialog ref="deviceDialogRef" />
        <oilcanDialog ref="oilcanDialogRef"></oilcanDialog>
    </div>

</template>

<script setup lang="ts">

import { defineAsyncComponent, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
import { getDataList, deleteStation } from '/@/api/api'
import eventBus from "/@/utils/mitt";


/**引入组件*/
const EditDialog = defineAsyncComponent(() => import('/@/views/admin/components/addStation.vue'))
const DeviceDialog = defineAsyncComponent(() => import('/@/views/admin/components/addDevice.vue'))
const oilcanDialog = defineAsyncComponent(() => import('/@/views/admin/components/oilcanDetail.vue'))
const oilcanDialogRef = ref()
const editDialogRef = ref()
const deviceDialogRef = ref()

const data = reactive([
    { prop: 'name', label: '油站名称' },
    { prop: 'longitude', label: '经度' },
    { prop: 'latitude', label: '纬度' },
    { prop: 'smallProgram', label: '小程序链接' },
    { prop: 'cloudService', label: '云端地址' },
    { prop: 'secretId', label: '客户端id' },
    { prop: 'acessKey', label: '云端通讯密钥' },
    { prop: 'webSocketPort', label: 'WebSokcet端口' },
    { prop: 'buildId', label: '站点id' }])

let display = reactive({
    isShow: { 1: false, 2: false } as any,
    isHide: false,
    showId: 0,
    removeKey: 0
})
// 分页参数
const pageData = reactive({
    page: 1,
    size: 10
})

let tableData = reactive<any>([])
let loading = ref(false)


// 展开油罐、油枪信息弹框页面
const rowClick = (row: any) => {
    // console.log(row.id)
    oilcanDialogRef.value.openDialog(row.id)
}

const getData = async () => {
    loading.value = true
    const res: any = await getDataList(pageData).catch(() => {
        loading.value = false
    })
    tableData = res.stationList
    loading.value = false
}

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

// 挂载时
onMounted(() => {
    getData()
    eventBus.off('refreshViewStation')
    eventBus.off('refreshViewDevice')
    eventBus.on('refreshViewStation', async () => {
        await getData()
    })
})


// 添加站点
const uploadStation = (row: any) => {
    editDialogRef.value.openDialog(row)
}

// 删除站点
const deleteData = async (id: number) => {
    await deleteStation({ "id": id }).then((res) => {
        console.log(res)
    })
    await getData()
}

// 新增油罐
const addDetails = (id: number) => {
    deviceDialogRef.value.openDialog(id)
}

/**
 * 页条变化
 * @param val
 */
const onSizeChange = (val: number) => {
    pageData.size = val
    getData()
}

/**
 * 页数 变化
 * @param val
 */
const onCurrentChange = (val: number) => {
    pageData.page = val
    getData()
}


</script>

<style scoped lang="scss">
@import '/@/theme/tableStyle.scss';
</style>