<script setup lang="ts">
    import { ref } from 'vue'
    const queryParams = ref({})

    import TableComponent from '@/compontents/TableComponent/index.vue'
    import FormComponent from '@/compontents/FormComponent/index.vue'
    import PagingComponent from '../../../compontents/PagingComponent/index.vue'

    // 选择复选框时获取需要删除的数据源
    const getRowId = (val: any) => {
        console.log(val, '需要删除的数据源**')
    }

    // 上架按钮
    const handleGrounding = () => {
        console.log('上架设备')
    }

    // 下架按钮
    const handleOffshelf = () => {
        console.log('下架设备')
    }
    // 编辑按钮
    const editRowInfo = (row: any) => {
        console.log(row, '编辑当前数据')
    }
    // 删除按钮
    const deleteRowInfo = (row: any) => {
        console.log(row, '删除当前数据')
    }

    const tableProps = ref([
        { v_label: '编码', v_props: 'v_code', v_slot: '', width: '' },
        { v_label: '租赁范围', v_props: 'v_lease_scope', v_slot: '', width: '' },
        { v_label: '装备类型', v_props: 'v_equipment_type', v_slot: '', width: '' },
        { v_label: '装备名称', v_props: 'v_equipment_name', v_slot: '', width: '' },
        { v_label: '租金', v_props: 'v_rent', v_slot: '', width: '' },
        { v_label: '状态', v_props: 'v_type', v_slot: 'v_type', width: '' },
        { v_label: '操作', v_props: 'v_operate', v_slot: 'operate', width: '140px' }
    ])

    const tableData = [
        {
            v_code: '123456',
            v_lease_scope: '2023/12/12',
            v_equipment_type: '挖掘机',
            v_equipment_name: '2023新版挖掘机',
            v_rent: '123/月',
            v_type: 1,
            v_operate: ''
        },
        {
            v_code: '123456',
            v_lease_scope: '2023/12/12',
            v_equipment_type: '挖掘机',
            v_equipment_name: '2023新版挖掘机',
            v_rent: '123/月',
            v_type: 2,
            v_operate: ''
        },
        {
            v_code: '123456',
            v_lease_scope: '2023/12/12',
            v_equipment_type: '挖掘机',
            v_equipment_name: '2023新版挖掘机',
            v_rent: '123/月',
            v_type: 3,
            v_operate: ''
        },
        {
            v_code: '123456',
            v_lease_scope: '2023/12/12',
            v_equipment_type: '挖掘机',
            v_equipment_name: '2023新版挖掘机',
            v_rent: '123/月',
            v_type: 3,
            v_operate: ''
        },
        {
            v_code: '123456',
            v_lease_scope: '2023/12/12',
            v_equipment_type: '挖掘机',
            v_equipment_name: '2023新版挖掘机',
            v_rent: '123/月',
            v_type: 3,
            v_operate: ''
        }
    ]

    // 表单 lable 数据
    const formItemList = ref([
        { v_label: '编码', v_typ: 'ipt' },
        { v_label: '状态', v_typ: 'ipt' },
        { v_label: '租赁范围', v_typ: 'sel' },
        { v_label: '装备类型', v_typ: 'sel' },
        { v_label: '装备名称', v_typ: 'ipt' }
    ])
</script>

<template>
    <!-- 订单管理 -->

    <FormComponent :formItemList="formItemList">
        <el-form-item>
            <el-button type="primary" @click="handleGrounding">批量上架</el-button>
            <el-button type="wanring" @click="handleOffshelf">批量下架</el-button>
        </el-form-item>
    </FormComponent>

    <!-- 表格 -->

    <TableComponent :tableProps="tableProps" :tableData="tableData" @getRowId="getRowId">
        <template v-slot:v_type="{ row }">
            <el-tag v-if="row.v_type === 1" size="small" type="success">租赁中</el-tag>
            <el-tag v-if="row.v_type === 2" size="small" type="warning">已上架</el-tag>
            <el-tag v-if="row.v_type === 3" size="small" type="info">待上架</el-tag>
        </template>
        <template v-slot:operate="{ row }">
            <el-button size="small" type="primary" @click="editRowInfo(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteRowInfo(row)">删除</el-button>
        </template>
    </TableComponent>

    <PagingComponent />
</template>

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