<template>
    <div class="screen-container-new">
        <div class="screen-title">机械化施工装备管理（共享）平台</div>
        <div class="header">
            <img class="header-img" src="@/assets/img/screen/返回.png" alt="" @click="back" />
        </div>

        <div class="content">
            <div class="title">{{ title }}</div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column
                    label="序号"
                    type="index"
                    width="90"
                    align="center"
                    :index="indexContinuation"
                />
                <el-table-column
                    v-for="(item, index) in columnList"
                    :key="index"
                    :label="item.label"
                    :prop="item.prop"
                    align="center"
                    show-overflow-tooltip
                >
                    <template v-if="!item.prop == 'maStatus'" #default="{ row }">
                        {{ row[item.prop] }}
                    </template>
                    <template v-else #default="{ row }">
                        <el-tag v-if="row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
                        <el-tag v-if="row.maStatus == 1" size="small" type="warning">待上架</el-tag>
                        <el-tag v-if="row.maStatus == 2" size="small" type="success">上架</el-tag>
                        <el-tag v-if="row.maStatus == 3" size="small" type="danger">在租</el-tag>
                    </template>
                </el-table-column>
            </el-table>

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

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

import {
    getDevNumApi,
    getDevUpNumApi,
    getDevTypeNumApi,
    getDevQcWarningNumApi,
    getMaTypeLeasingNumApi,
    getDevLeasingNumApi,
} from '@/http/api/screen-f/index.ts'

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 SEND_API = ref(null)
const columnList = ref([])
// const columns1 = ref([
//     { label: '机具类型', prop: 'typeName' },
//     { label: '机具名称', prop: 'deviceName' },
//     { label: '规格型号', prop: 'modelName' },
//     { label: '唯一标识符', prop: 'identifyCode' },
//     { label: '装备状态', prop: 'maStatus', slot_c: true },
//     { label: '上架时间', prop: 'createTime' },
//     { label: '所属公司', prop: 'comName' },
// ])
// const columns2 = ref([
//     { label: '机具类型', prop: 'typeName' },
//     { label: '机具名称', prop: 'deviceName' },
//     { label: '规格型号', prop: 'modelName' },
//     { label: '数量', prop: 'deviceCount' },
// ])
// const columns3 = ref([
//     { label: '机具类型', prop: 'typeName' },
//     { label: '机具名称', prop: 'deviceName' },
//     { label: '规格型号', prop: 'modelName' },
//     { label: '唯一标识符', prop: 'identifyCode' },
//     // { label: '报警类型', prop: 'identifyCode' },
//     { label: '告警时间', prop: 'createTime' },
// ])
// const columns4 = ref([
//     { label: '机具名称', prop: 'deviceName' },
//     { label: '规格型号', prop: 'modelName' },
//     { label: '租赁单价', prop: 'dayLeasePrice' },
//     { label: '租赁次数', prop: 'rentNum' },
// ])
// const columns5 = ref([
//     { label: '机具名称', prop: 'deviceName' },
//     { label: '规格型号', prop: 'modelName' },
//     { label: '唯一标识符', prop: 'identifyCode' },
//     { label: '订单号', prop: 'orderId' },
//     { label: '出租方', prop: 'comName' },
//     { label: '出租方联系人', prop: 'person' },
//     { label: '承租方', prop: 'lessee' },
//     { label: '承租方联系人', prop: 'lesseePerson' },
//     { label: '订单开始时间', prop: 'startTime' },
//     { label: '订单结束时间', prop: 'endTime' },
//     { label: '租赁金额', prop: 'cost' },
// ])

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

const tableData = ref([])

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

if (currentType.value == 1) {
    SEND_API.value = getDevNumApi
    columnList.value = [
        { label: '机具类型', prop: 'typeName' },
        { label: '机具名称', prop: 'deviceName' },
        { label: '规格型号', prop: 'modelName' },
        { label: '唯一标识符', prop: 'identifyCode' },
        { label: '装备状态', prop: 'maStatus' },
        { label: '上架时间', prop: 'createTime' },
        { label: '所属公司', prop: 'comName' },
    ]
} else if (currentType.value == 2) {
    SEND_API.value = getDevUpNumApi
    columnList.value = [
        { label: '机具类型', prop: 'typeName' },
        { label: '机具名称', prop: 'deviceName' },
        { label: '规格型号', prop: 'modelName' },
        { label: '唯一标识符', prop: 'identifyCode' },
        { label: '装备状态', prop: 'maStatus' },
        { label: '上架时间', prop: 'createTime' },
        { label: '所属公司', prop: 'comName' },
    ]
} else if (currentType.value == 3) {
    SEND_API.value = getDevTypeNumApi
    columnList.value = [
        { label: '机具类型', prop: 'typeName' },
        { label: '机具名称', prop: 'deviceName' },
        { label: '规格型号', prop: 'modelName' },
        { label: '数量', prop: 'deviceCount' },
    ]
} else if (currentType.value == 4) {
    SEND_API.value = getDevQcWarningNumApi
    columnList.value = [
        { label: '机具类型', prop: 'typeName' },
        { label: '机具名称', prop: 'deviceName' },
        { label: '规格型号', prop: 'modelName' },
        { label: '唯一标识符', prop: 'identifyCode' },
        // { label: '报警类型', prop: 'identifyCode' },
        { label: '告警时间', prop: 'createTime' },
    ]
} else if (currentType.value == 5) {
    SEND_API.value = getMaTypeLeasingNumApi
    columnList.value = [
        { label: '机具名称', prop: 'deviceName' },
        { label: '规格型号', prop: 'modelName' },
        { label: '租赁单价', prop: 'dayLeasePrice' },
        { label: '租赁次数', prop: 'rentNum' },
    ]
} else {
    SEND_API.value = getDevLeasingNumApi
    columnList.value = [
        { label: '机具名称', prop: 'deviceName' },
        { label: '规格型号', prop: 'modelName' },
        { label: '唯一标识符', prop: 'identifyCode' },
        { label: '订单号', prop: 'orderId' },
        { label: '出租方', prop: 'comName' },
        { label: '出租方联系人', prop: 'person' },
        { label: '承租方', prop: 'lessee' },
        { label: '承租方联系人', prop: 'lesseePerson' },
        { label: '订单开始时间', prop: 'startTime' },
        { label: '订单结束时间', prop: 'endTime' },
        { label: '租赁金额', prop: 'cost' },
    ]
}

// switch (currentType.value) {
//     case '1':
//         SEND_API.value = getDevNumApi
//         column.value = [...columns1.value]
//         break
//     case '2':
//         SEND_API.value = getDevUpNumApi
//         column.value = [...columns1.value]
//         break
//     case '3':
//         SEND_API.value = getDevTypeNumApi
//         column.value = [...columns2.value]
//         break
//     case '4':
//         SEND_API.value = getDevQcWarningNumApi
//         column.value = [...columns3.value]
//         break
//     case '5':
//         SEND_API.value = getMaTypeLeasingNumApi
//         column.value = [...columns4.value]
//         break
//     case '6':
//         SEND_API.value = getDevLeasingNumApi
//         column.value = [...columns5.value]
//         break
// }

const getList = async () => {
    const res = await SEND_API.value(queryParams.value)
    if (res.code === 200) {
        tableData.value = res.data.rows
        total.value = res.data.total
    }
    console.log(res, '9996')
}

const back = () => {
    console.log('back')
    router.push({
        path: '/big-screen',
    })
}

// console.log(column.value, '  column.value')

onMounted(() => {
    console.log(currentType.value, 'currentType.value')
    getList()
})
</script>

<style lang="scss" scoped>
.screen-container-new {
    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;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .header-img {
            margin-top: 15px;
            margin-right: 30px;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }
    }

    .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;
        }
    }
}

:deep .el-table {
    background-color: transparent;
}
:deep .el-table__header-wrapper {
    background: url('@/assets/img/screen/table-1.png') no-repeat !important;
    background-size: cover;
    background-position: center;
}
: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: #39816b;
    color: #333;
}
::v-deep .el-input__wrapper {
    background-color: #61b2a6;
}
</style>
