<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="uploadData('')"> 新增油品 </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 class="table-content" stripe row-key="id" :data="tableData" v-loading="loading">
                        <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-Edit" @click.stop="uploadData(scope.row)">编辑</el-link>
                                <el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
                                    icon="ele-Delete" @click.stop="deliteOil(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" />
        <AuditDialog ref="auditDialogRef" />
    </div>

</template>

<script setup lang="ts">
import { tr } from 'element-plus/es/locale';
import { defineAsyncComponent, onBeforeMount, onMounted, reactive, ref } from 'vue';
import { getOilInfo, deleteOilInfo } from '/@/api/api';
import eventBus from "/@/utils/mitt";

/**引入组件*/
const EditDialog = defineAsyncComponent(() => import('/@/views/admin/components/editOil.vue'))
const editDialogRef = ref()

const data = reactive([
    { prop: 'name', label: '油品名' },
    { prop: 'code', label: '油品码' },
    { prop: 'price', label: '单价' }])

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

// 分页参数
const pageData = reactive({
    page: 1,
    size: 10
})

const getData = async () => {
    loading.value = true
    // 获取数据
    const res: any = await getOilInfo(pageData)
    tableData = res.oilInfoList
    loading.value = false

}

onMounted(() => {
    getData()
    eventBus.off('refreshView')
    eventBus.on('refreshView', async () => {
        await getData()
    })
})

onBeforeMount(() => {
    eventBus.off('refreshView')
})

// 修改油品
const uploadData = (row: any) => {
    // *** 修改需要呈现出原来的数值
    editDialogRef.value.openDialog(row)
}

// 删除油品
const deliteOil = async (id: number) => {
    loading.value = true;
    deleteOilInfo({ 'id': id }).then((res) => {
        console.log(res)
        removeKey.value = Math.random()
        return getData();
    }).then((res) => {
        loading.value = false;
    })
    
}

/**
 * 页条变化
 * @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"></style>