<template>
    <div class="layout-pd">
        <el-row>
            <!--操作-->
            <el-col :xs="24">
                <el-card class="mt8" shadow="hover">
                    <el-form :model="Data.Filter" @submit.stop.prevent>
                        <el-form-item prop="name" style="width: 100%">
                            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                                <el-form-item label="油枪">
                                    <el-input v-model="Data.Filter.CompanyName" placeholder="请输入油枪"
                                        clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                                <el-form-item label="油品">
                                    <el-input v-model="Data.Filter.name" placeholder="请输入油品" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                                <el-form-item label="状态">
                                    <el-select v-model="Data.Filter.StationName" placeholder="请选择状态">
                                        <el-option v-for="(value, key) in selectList.Online" :key="key" :label="value"
                                            :value="value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                                <el-form-item label="支付方式">
                                    <el-select v-model="Data.Filter.onlineStatus" placeholder="请选择支付方式">
                                        <el-option v-for="(value, key) in selectList.Online" :key="key" :label="value"
                                            :value="value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                                <el-form-item label="加油时间">
                                    <el-date-picker v-model="Data.time1" type="datetimerange"
                                        value-format="YYYY-MM-DD HH:mm:ss" range-separator="To"
                                        start-placeholder="Start date" end-placeholder="End date" />
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-form>

                    <hr>

                    <!-- 按钮 -->
                    <el-row justify="space-between" class="submit-button">
                        <el-row>
                            <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
                            <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
                        </el-row>
                    </el-row>
                </el-card>
            </el-col>
            <!--表格-->
            <el-col :xs="24">
                <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
                    <el-table ref="multipleTableRef" v-loading="Data.loading" stripe :data="Data.tableModel"
                        row-key="id" style="width: 100%">
                        <el-table-column v-for="column in Data.dynamicColumns" :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-Tickets" @click.stop="toView(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="Data.pageInput.currentPage"
                            v-model:page-size="Data.pageInput.pageSize" :total="Data.total"
                            :page-sizes="[5, 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>
    </div>

</template>

<script setup lang="ts" name="partsManagement/oilGun">
import { reactive } from "vue";


/**页面对象 */
const Data = reactive({
    time1: '',
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
    Filter: {
        /**油枪 */
        name: "",
        /**油品 */
        StationName: "",
        /**支付方式 */
        CompanyName: "",
        /**状态 */
        onlineStatus: "",
        /**加油开始的时间 */
        OutBeginTime: "",
        /**加油结束的时间 */
        OutEndTime: "",
    },
    /**表格信息 */
    tableModel: [
        {
            'name': 1,
            'companyName': 1,
            'stationName': 1,
            'fuelName': 1,
            'code': 1,
            'alarming': 1,
            'fuelId': 1,
        }
    ],
    /**动态表头 */
    dynamicColumns: [
        { prop: 'name', label: '流水号' },
        { prop: 'companyName', label: '油机号' },
        { prop: 'stationName', label: '油枪|油品' },
        { prop: 'fuelName', label: '单价|升数' },
        { prop: 'code', label: '金额' },
        { prop: 'alarming', label: '加油时间' },
        { prop: 'fuelId', label: '支付状态' },
    ],
    /**分页总数 */
    total: 0,
    /**分页标识 */
    pageInput: {
        currentPage: 1,
        pageSize: 10,
    },
})

/** 选择框列表 */
const selectList = reactive({
    Online: ["在线", "离线"],
    Device: [
        "启用",
        "备案",
        "维修",
        "出厂注册"],
    Level: [1, 2, 3, 4, 5]
})

/** 操作 */
const toView = ((data: any) => {
    console.log('查看')
})

</script>

<style scoped lang="scss">
.el-input,
.el-select {
    width: 240px;
}

/* 输入框标签固定四个字符宽度 */
::v-deep .el-form-item__label {
    // 字体大小14，4个字符，12px右间距
    width: 14*4px+12px;
    justify-content: start;
}

/* 数据表头 设置灰色样式 */
::v-deep .el-table th.el-table__cell {
    background-color: #F6F6F6;
}
</style>