<template>
    <div style="height: 65vh;width: 95%;background-color: #404F57;border-radius: 10px;">
        <div
            style="box-shadow: 3px 3px 4px #D2D5D7;margin: 7px 0px 0px 7px;background-color: #1D2C3B;display: flex;align-items: center;justify-content: center;width: 100px;height: 50px;border-radius: 30px;">
            <span style="font-weight: 900;color: white;">我的磅单</span>
        </div>
        <div>
            <el-date-picker v-model="datea" type="datetimerange" align="right" unlink-panels range-separator="-"
                start-placeholder="开始时间" end-placeholder="结束时间"
                style="width: 350px;background-color: #11181F;border: 0;margin: 7px 0px 0px 1050px;"
                value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" @change="handleSearch">
            </el-date-picker>
        </div><br />
        <div style="display: flex; justify-content: center;">
            <el-table class="no-hover-highlight" :data="tableData" border
                row-style="background-color:#11181F;color:#D4D5D5;" :header-cell-style="tableStyle"
                style="background-color: #11181F;width: 970px;">
                <el-table-column type="index" label="序号" align="center" width="60" style="background-color: #11181F;">
                    <template #default="scope">
                        <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="true" prop="carno" label="车号" width="120" header-align="center" align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="wuzimc" label="物资" width="150" header-align="center" align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="false" prop="fhdwmc" label="发货单位" width="150" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="shdwmc" label="收货单位" width="150" header-align="center" align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="mzh" label="毛重(t)" width="100" header-align="center" align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="pzh" label="皮重(t)" width="100" header-align="center" align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="jzh" label="净重(t)" width="100" header-align="center" align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="suttleTime" label="过磅时间" width="190" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div><br />

        <el-pagination style="margin-left: 250px;" :current-page="currentPage" :page-size="pageSize"
            :page-sizes="pageSizes" :total="totalRows" background="background"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>


    </div>
</template>

<script setup>
import {
    ref,
    reactive,
    onMounted,
    getCurrentInstance,
    nextTick,
    onBeforeUnmount,
    defineProps
} from 'vue'

const {
    proxy
} = getCurrentInstance()

import tools from '@/tools'
const cardBodyStyle = ref(tools.style.card)
const inputStyle = ref(tools.style.input)

/**
 * 头信息
 */
import { ElMessage, ElMessageBox } from 'element-plus';
import { stringify } from 'qs';
import { RouterView } from 'vue-router';
const deptCode = ref('')
const deptName = ref('')
const deptId = ref('')
const driverInfo = ref('')
const props = defineProps({
    carno: {
        type: String,
        default: ''
    }
})

onMounted(() => {
    const temp = JSON.parse(localStorage.getItem('deptTree'))
    deptCode.value = temp[0].deptCode
    deptName.value = temp[0].deptName
    deptId.value = temp[0].id
    driverInfo.value = JSON.parse(localStorage.getItem('driverInfo'))
    handleSearch()
})
/**
 * 头信息
 */
//时间
const datea = ref('')
/**
 * 分页
 */
const currentPage = ref(1)
const totalRows = ref(0)
const pageSizes = ref([10, 20, 30, 40, 50])
const pageSize = ref(10)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableData()
}
/**
 * 分页
 */
const carnoa = ref(props.carno)
const query = ref({
    carnoa,
    datea,
})
const tableData = ref([])
const handleSearch = () => {
    currentPage.value = 1
    getTableData()
}

const getTableData = () => {
    var url = 'wgt/Qchjlxx/queryByCarno'
    var param = {
        page: currentPage.value,
        rows: pageSize.value,
        params: JSON.stringify(query.value)
    }
    proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
            tableData.value = response.data.data.list
            totalRows.value = response.data.data.total
        } else {
            ElMessage.error('操作失败！' + response.data.msg)
        }
    })
}


</script>
<style>
/* 取消鼠标悬停时的高亮显示 */
.no-hover-highlight .el-table__body tr:hover>td {
    background-color: transparent !important;
    /* 将背景颜色设置为透明 */
}

/* 如果您还想取消行选中时的高亮显示 */
.no-hover-highlight .el-table__body .el-table__row--striped td {
    background-color: transparent !important;
    /* 将背景颜色设置为透明 */
}

.no-hover-highlight .el-table__body .el-table__row--striped:hover td {
    background-color: transparent !important;
    /* 将背景颜色设置为透明 */
}
</style>