<template>
    <div class="screen-container">
        <div class="screen-title">安徽机械化装备共享平台</div>
        <div class="header"></div>

        <div class="content">
            <div class="title">{{ title }}</div>
            <el-table :data="tableData" style="width: 100%" :row-class-name="setRowClass">
                <el-table-column
                    label="序号"
                    type="index"
                    width="90"
                    align="center"
                    :index="indexContinuation"
                />
                <el-table-column
                    v-for="(item, index) in columns"
                    :key="index"
                    :label="item.label"
                    :prop="item.prop"
                    align="center"
                    show-overflow-tooltip
                />
            </el-table>

            <PagingComponent
                @getListChange="getList"
                v-model:pageSize="queryParams.pageSize"
                v-model:currentPage="queryParams.pageNum"
                :total="total"
            />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import PagingComponent from 'components/PagingComponent/index.vue'

const router = useRouter()
console.log('🚀 ~ router:', router.currentRoute.value.query)

const currentType = ref(router.currentRoute.value.query.type)
const title = ref(router.currentRoute.value.query.title)
const columns = ref([
    { label: '序号', prop: 'index' },
    { label: '装备名称', prop: 'name' },
    { label: '装备型号', prop: 'typeName' },
    { label: '发布单位', prop: 'publishCompany' },
    { label: '发布人', prop: 'publishUser' },
    { label: '租赁价格', prop: 'price' },
    { label: '租赁单位', prop: 'timeUnit' },
])

const total = ref(0)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
})

const tableData = ref([
    {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
    },
    {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
    },
    {
        date: '2016-05-01',
    },
])

const indexContinuation = (index) => {
    return index + (queryParams.value.pageNum - 1) * queryParams.value.pageSize + 1
}

const getList = () => {
    console.log('getList')
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.screen-container {
    width: 100vw;
    height: 100vh;
    background: url('@/assets/img/screen/bg-2.png') no-repeat;
    background-size: 100% 100%;
    font-size: 16px;
    position: relative;
    color: #eee;

    .screen-title {
        position: absolute;
        top: 2%;
        left: 50%;
        color: #fff;
        font-size: 30px;
        // font-weight: bold;
        transform: translateX(-50%);
        letter-spacing: 3px;
        // font-style: italic;
        font-family: DS-TITle;
    }

    .header {
        height: 80px;
    }

    .content {
        margin: 4% 10% 0;

        .title {
            width: 405px;
            height: 36px;
            background: url('@/assets/img/screen/title_bg.png') no-repeat;
            background-size: 100% 100%;
            line-height: 30px;
            padding-left: 35px;
            margin-bottom: 30px;
        }
    }
}

::v-deep(.el-table) {
    background-color: transparent;
}
::v-deep(.el-table__header-wrapper) {
    background: url('@/assets/img/screen/table-1.png') no-repeat !important;
    background-size: cover;
    background-position: center;
}
::v-deep(.el-table__header th) {
    color: white;
    background-color: transparent; /* 避免被其他背景色覆盖 */
}

::v-deep .el-table tr {
    color: #eee;
    background-color: transparent;
    background: url('@/assets/img/screen/table-2.png') no-repeat;
}

:deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: #f4eedc;
    color: #333;
}
/* ::v-deep .el-table--enable-row-hover .el-table__body tr.hover-row:hover {
    background: url('@/assets/img/screen/table-3.png') no-repeat;
    background-size: cover;
} */
</style>
