<script setup lang="ts">
    import TableComponent from '@/compontents/TableComponent/index.vue'
    import FormComponent from '@/compontents/FormComponent/index.vue'
    import PagingComponent from '../../../compontents/PagingComponent/index.vue'
    import { ref } from 'vue'

    const pageSize = 20
    const pageNumber = 1
    const total: any = 20
    // 获取数据列表
    const getList = () => {
        console.log('获取数据列表***')
    }

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

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

    // 装备入驻按钮
    const equipmentDeployment = () => {
        // 打开入驻弹框
        dialogFormVisibleSettlein.value = true
    }

    const ruleFormRef = ref(null)

    // 入驻框保存提交
    const submitBtn = () => {
        ruleFormRef.value.validate((valid: any) => {
            console.log(valid)
        })
    }

    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' }
    ])

    // 装备入驻弹框显示隐藏
    const dialogFormVisibleSettlein = ref(false)

    // 装备入驻框表单数据源
    const ruleForm = ref({
        v_name: 'Hello',
        v_region: ''
    })

    const rules = ref({
        v_name: [
            {
                required: true,
                message: '必填项',
                trigger: 'blur'
            },
            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
        ],
        v_region: [
            {
                required: true,
                message: '必填项',
                trigger: 'blur'
            }
        ]
    })
</script>

<template>
    <!-- 商品管理 -->

    <FormComponent :formItemList="formItemList">
        <el-form-item>
            <el-button type="primary" @click="equipmentDeployment">装备入驻</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
        @getList="getList"
        :pageSize="pageSize"
        :pageNumber="pageNumber"
        :total="total" />

    <!-- 装备入驻弹框 -->
    <el-dialog v-model="dialogFormVisibleSettlein" title="装备入驻" width="60%" align-center>
        <el-form label-width="160" ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item label="租赁范围" prop="v_name">
                <el-input
                    autocomplete="off"
                    style="width: 360px"
                    v-model="ruleForm.v_name"
                    clearable />
            </el-form-item>
            <el-form-item label="设备所在地">
                <el-select placeholder="选择省" style="width: 220px; margin: 0 5px" clearable>
                    <el-option label="Zone No.1" value="shanghai" />
                </el-select>
                <el-select placeholder="选择市" style="width: 220px; margin: 0 5px" clearable>
                    <el-option label="Zone No.1" value="shanghai" />
                </el-select>
                <el-select placeholder="选择区" style="width: 220px; margin: 0 5px" clearable>
                    <el-option label="Zone No.1" value="shanghai" />
                </el-select>
            </el-form-item>
            <el-form-item label="设备类型">
                <el-select placeholder="选择类别" style="width: 220px; margin: 0 5px" clearable>
                    <el-option label="Zone No.1" value="shanghai" />
                </el-select>
                <el-select placeholder="选择组别" style="width: 220px; margin: 0 5px" clearable>
                    <el-option label="Zone No.1" value="shanghai" />
                </el-select>
                <el-select placeholder="选择产品名称" style="width: 220px; margin: 0 5px" clearable>
                    <el-option label="Zone No.1" value="shanghai" />
                </el-select>
            </el-form-item>
            <el-form-item label="设备品牌" prop="v_region">
                <el-input
                    autocomplete="off"
                    style="width: 360px"
                    v-model="ruleForm.v_region"
                    clearable />
            </el-form-item>
            <el-form-item label="设备型号">
                <el-input autocomplete="off" style="width: 360px" clearable />
            </el-form-item>
            <el-form-item label="出厂日期">
                <el-input autocomplete="off" style="width: 360px" clearable />
            </el-form-item>
            <el-form-item label="工作小时数">
                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
                小时
            </el-form-item>
            <el-form-item label="整机序列号">
                <el-input autocomplete="off" style="width: 360px" clearable />
            </el-form-item>
            <el-form-item label="月租金">
                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
                元/月
            </el-form-item>
            <el-form-item label="日租金">
                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
                元/天
            </el-form-item>
            <el-form-item label="检测信息">
                <!-- <el-input autocomplete="off" /> -->
                上传
            </el-form-item>
            <el-form-item label="保险信息">
                <!-- <el-input autocomplete="off" /> -->
                上传
            </el-form-item>
            <el-form-item label="是否提供机手">
                <el-radio>是</el-radio>
                <el-radio>否</el-radio>
            </el-form-item>

            <el-form-item label="机手月费用">
                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
                元/月
            </el-form-item>

            <el-form-item label="机手日费用">
                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
                元/天
            </el-form-item>
            <el-form-item label="详细说明">
                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
                元/天
            </el-form-item>
            <el-form-item label="设备图片">
                <el-input autocomplete="off" clearable />
                至少一张，最多八张
                设备图片格式为jpg、png、和gif，文件不得超过5M，否则将无法上传。请从前后左右四个方向以及从主要工作部件，内部结构等方面展示设备
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisibleSettlein = false">
                    关 闭
                </el-button>
                <el-button @click="submitBtn">保 存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

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