<template>
    <div>
        <el-card :body-style="cardBodyStyle">
            <el-form status-icon inline v-model="query">
                <el-row :span="24">
                    <el-col :span="5">
                        <el-form-item label="运单号">
                            <el-input placeholder="请输入运单号" v-model="query.fbillno" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="车号">
                            <el-input placeholder="请输入运单号" v-model="query.fcarno" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="司机">
                            <el-input placeholder="请输入运单号" v-model="query.fdrivername" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <ButtonBar area="top" @search="handleSearch"></ButtonBar>
        <el-card :body-style="cardBodyStyle">
            <el-table @row-click="handleClick" :data="tableData" border highlight-current-row height="200"
                @selection-change="handleSelectionChange" ref="tableRef1">
                <el-table-column type="selection" fixed></el-table-column>
                <el-table-column type="index" label="序号" align="center" width="60">
                    <template #default="scope">
                        <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="true" prop="fitemname" label="物料名称" width="200" header-align="center"
                    align="center" show-overflow-tooltip></el-table-column>
                <el-table-column v-if="true" prop="fbillno" label="运单号" width="200" header-align="center" align="center"
                    show-overflow-tooltip></el-table-column>
                <el-table-column v-if="true" prop="fcarno" label="车号" width="200" header-align="center" align="center"
                    show-overflow-tooltip></el-table-column>
                <el-table-column v-if="true" prop="fsubbillno" label="计划号" width="200" header-align="center"
                    align="center" show-overflow-tooltip></el-table-column>
                <el-table-column v-if="true" prop="fcontractno" label="合同号" width="200" header-align="center"
                    align="center" show-overflow-tooltip></el-table-column>
                <el-table-column v-if="true" prop="fdrivername" label="司机" width="200" header-align="center"
                    align="center" show-overflow-tooltip></el-table-column>
                <el-table-column v-if="true" prop="fdrivertel" label="司机联系方式" width="200" header-align="center"
                    align="center" show-overflow-tooltip></el-table-column>
                <el-table-column v-if="true" prop="fdriveridcard" label="司机身份证号" width="200" header-align="center"
                    align="center" show-overflow-tooltip></el-table-column>

                <el-table-column v-if="true" prop="faccept" label="状态" width="200" header-align="center" align="center"
                    show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ row.faccept === 0 ? '开始' : '完成' }}
                    </template>
                </el-table-column>
                <el-table-column v-if="true" prop="fstatus" label="运单状态" width="200" header-align="center"
                    align="center" show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ getFstatus(row.fstatus) }}
                    </template>
                </el-table-column>

            </el-table>
        </el-card>
        <el-card :body-style="cardBodyStyle">
            <el-pagination :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>
        </el-card>
    </div>
</template>

<script setup>
import ButtonBar from '@/components/ButtonBar.vue'

import {
    ref,
    reactive,
    onMounted,
    getCurrentInstance
} from 'vue'

const {
    proxy
} = getCurrentInstance()

import tools from '@/tools'
import Selector from "@/components/Selector.vue";
const cardBodyStyle = ref(tools.style.card)
const inputStyle = ref(tools.style.input)

onMounted(() => {
    handleSearch()
})

const tableData = ref([])
const query = ref({
    fbillno: '',
    fcarno: '',
    fdrivername: ''
})
const currentPage = ref(1)
const pageSizes = ref([5, 10, 20, 30, 40])
const pageSize = ref(5)
const totalRows = ref(0)


const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableData()
}


// 查询
const handleSearch = () => {
    currentPage.value = 1
    getTableData()
}

// 获取行内运单状态
const getFstatus = (status) => {
    if (status == 0) return '未审核'
    if (status == 1) return '已审核'
    if (status == 2) return '已进厂'
    if (status == 3) return '一次计量'
    if (status == 4) return '装车确认'
    if (status == 5) return '二次计量'
    if (status == 6) return '三次计量'
    if (status == 7) return '四次计量'
    if (status == 8) return '卸货确认'
    if (status == 8) return '作废'
    if (status == 'F') return '已完成'
}

// 获取数据
const getTableData = () => {
    var url = 'tms/waybillManagement/query'
    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.records
            console.log(tableData.value)
            totalRows.value = response.data.data.total
        } else {
            ElMessage.error('操作失败！' + response.data.msg)
        }
    })
}
// 点击上方表格
const handleClick = (row, column, event) => {
    console.log(row, 'row')
    console.log(column, 'column')
    console.log(event, 'event')
    var url = 'tms/waybillManagement/queryLocation'
    var param = {
        fcarno: row.fcarno,
    }
    proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
            console.log(response.data.data)
        } else {
            ElMessage.error('操作失败！' + response.data.msg)
        }
    })
}
</script>

<style scoped></style>