<template>
    <!-- 基础页面 -->
    <div class="app-container">
        <el-form
            v-show="showSearch"
            :model="queryParams"
            ref="queryForm"
            size="small"
            inline
            @submit.native.prevent="handleQuery"
        >
            <el-form-item label="关键字" prop="keyWord">
                <el-input
                    v-model="queryParams.keyWord"
                    placeholder="请输入工程名称"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <!-- <el-form-item style="display: flex; justify-content: flex-end"> -->
            <!-- 表单按钮 -->
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button icon="el-icon-refresh" @click="handleReset"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
      </el-col> -->
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table
            :data="tableList"
            fit
            highlight-current-row
            style="width: 100%"
        >
            <el-table-column
                type="index"
                width="55"
                label="序号"
                align="center"
                :index="
                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
                "
            />
            <el-table-column
                v-for="(column, index) in tableColumns"
                show-overflow-tooltip
                :key="column.prop"
                :label="column.label"
                :prop="column.prop"
                align="center"
            >
                <template v-slot="scope" v-if="column.prop === 'typeCategory'">
                    <span
                        >{{ scope.row.firstName }}
                        <span v-show="scope.row.firstName">></span>
                        {{ scope.row.secondName
                        }}<span v-show="scope.row.secondName">></span
                        >{{ scope.row.thirdName }}</span
                    >
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { getLeaseDevListApi } from '@/api/search/equipment'

export default {
    data() {
        return {
            showSearch: true,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWord: '',
            },
            total: 0, // 总条数
            // 表头
            tableColumns: [
                { label: '装备类目', prop: 'typeCategory' },
                { label: '装备名称', prop: 'deviceName' },
                { label: '装备型号', prop: 'typeName' },
                { label: '在租数量', prop: 'deviceCount' },
                { label: '出租方联系人', prop: 'person' },
                { label: '出租方联系方式', prop: 'personPhone' },
            ],
            // 表格数据
            tableList: [],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 查询
        handleQuery() {
            this.getList()
        },
        // 重置
        handleReset() {
            this.queryParams.pageNum = 1
            this.queryParams.pageSize = 10
            this.queryParams.keyWord = ''
            this.getList()
        },
        // 获取列表
        async getList() {
            console.log('列表-查询', this.queryParams)
            try {
                const params = { ...this.queryParams }
                const res = await getLeaseDevListApi(params)
                console.log('🚀 ~ 获取列表 ~ res:', res)
                this.tableList = res.data.rows
                this.total = res.data.total || 0
            } catch (error) {
                console.log('🚀 ~ 获取列表 ~ error:', error)
                this.tableList = []
                this.total = 0
            }
        },
        // 多选
        selectionChange(val) {
            console.log('selectionChange', val)
        },
        // 导出数据
        handleExport() {
            try {
                let fileName = `数据_${new Date().getTime()}.xLsx`
                let url = ''
                const params = { ...this.queryParams }
                console.log('🚀 ~ 导出 ~ params:', params)
                // this.derive(url, params, fileName)
            } catch (error) {
                console.log('导出数据失败', error)
            }
        },
    },
}
</script>

<style lang="scss" scoped></style>
