<script setup lang="ts">
    import { ref } from 'vue'
    const queryParams = ref({})
    import PagingComponent from 'components/PagingComponent/index.vue'
    import { getOrderListApi } from 'http/api/usercenter/seekorder'
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

    const router = useRouter()

    const pageSize = ref(20)
    const pageNumber = ref(1)
    const total: any = ref(0)

    // 获取数据列表
    const getList = async () => {
        const res: any = await getOrderListApi()
        console.log('获取数据列表***', res)
        tableData.value = res.rows
        total.value = res.total
    }

    getList()

    /* 结算按钮 */
    const settlementBtn = () => {
        router.push('/myuser/settlement')
    }

    /* 确认按钮 */
    const confirmBtn = (row:any) => {
        router.push({ name: 'orderConfirm',query:{
            orderId:row.orderId
        } })
        
    }

    /* 查看按钮 */
    const clickPreviewDetails = (row:any) => {
        console.log('查看')
        router.push({ name: 'orderDetails',query:{
            orderId:row.orderId
        } })
    }

    const tableData: any = ref([{ address: '客户单位' }])

    const time = ref([])
</script>

<template>
    <!-- 订单管理(承租方) -->

    <el-config-provider :locale="zhCn">
        <el-form :model="queryParams" :inline="true" size="small">
            <el-form-item label="订单编号：" prop="menuName">
                <el-input />
            </el-form-item>
            <el-form-item label="创建时间：" prop="menuName">
                <el-date-picker
                    v-model="time"
                    type="daterange"
                    unlink-panels
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="width: 180px" />
            </el-form-item>
            <el-form-item label="状态：" prop="menuName">
                <el-input />
            </el-form-item>
            <el-form-item label="装备类型：" prop="menuName">
                <el-input />
            </el-form-item>
            <el-form-item label="装备名称：" prop="menuName">
                <el-input />
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
                <el-button type="success">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table
            :data="tableData"
            :header-cell-style="{
                background: '#3E98FF',
                color: '#fff'
            }"
            fit>
            <el-table-column align="center" prop="code" label="订单编号" />
            <el-table-column align="center" prop="supplierCompany" label="客户单位" />
            <el-table-column align="center" prop="time" label="订单创建日期" />
            <el-table-column align="center" prop="orderPhone" label="联系方式" />
            <el-table-column align="center" prop="typeName" label="装备类型" />
            <el-table-column align="center" prop="deviceName" label="装备名称" />
            <el-table-column align="center" prop="orderStatus" label="订单状态" />
            <el-table-column align="center" prop="name" label="操作" width="260px">
                <template #default="{ row }">
                    <el-button size="small" type="primary" @click="confirmBtn(row)">确认</el-button>
                    <el-button size="small" type="warning" @click="clickPreviewDetails(row)">
                        查看
                    </el-button>
                    <el-button size="small" type="danger">删除</el-button>
                    <el-button size="small" type="success" @click="settlementBtn">结算</el-button>
                </template>
            </el-table-column>
        </el-table>

        <PagingComponent
            @getList="getList"
            :pageSize="pageSize"
            :pageNumber="pageNumber"
            :total="total" />
    </el-config-provider>
</template>

<style>
    .el-form {
        margin: 15px 0;
    }
</style>
