<template>
    <div class="box">
        <el-form ref="formRef" label-width="84px">
            <el-col>
                <el-row>
                    <el-col :span="4"><span>车牌号:</span>{{ basic?.basic?.license }}
                    </el-col>
                    <el-col :span="4"><span>使用人:</span> {{ basic?.basic?.use_user_name }}</el-col>
                    <el-col :span="4"><span>联系方式:</span> {{ basic?.basic?.use_user_phone }}</el-col>

                    <el-col :span="4">当前车上共计{{ basic?.basic?.total_package }}个包裹,{{
                        basic?.basic?.total_goods
                    }}件商品</el-col>
                </el-row>
            </el-col>
        </el-form>
        <el-table :data="basic.lists" :default-sort="{ prop: 'create_time', order: 'descending' }">
            <!-- <el-table-column label="编号" prop="order_sn" show-overflow-tooltip /> -->
            <el-table-column type="index" width="50" />
            <!-- <el-table-column label="商品" prop="shop_name" show-overflow-tooltip /> -->
            <el-table-column label="商品" align="center" width="auto">
                <template #default="{ row }">
                    <div v-for="(item, index) in BrieflyGoods(row.products)">
                        {{ item.goods_name }}X {{ item.product_num }} {{ item.goods_unit }}
                    </div>
                    <div>共{{ row.product_count }}件商品</div>
                </template>
            </el-table-column>
            <el-table-column label="订单编号" prop="order_sn" show-overflow-tooltip />
            <el-table-column label="提供商家" prop="shop_name" show-overflow-tooltip />
            <el-table-column label="下单用户" prop="user_name" show-overflow-tooltip />

            <el-table-column label="收货地址" prop="receiver_address" show-overflow-tooltip />

            <el-table-column label="上车时间" prop="qh_time" show-overflow-tooltip />

            <el-table-column label="运输时间" prop="diff_time" show-overflow-tooltip />
            <el-table-column label="操作" align="center" width="auto" fixed="right">
                <template #default="{ row }">
                    <el-button type="primary" link>
                        <router-link :to="{
                            path: '/vehicle/goodsDetail',
                            query: {
                                car_id: route.query.id,
                                // order_id: row.order_id,
                                order_id: 28,

                            },
                            // order_id
                        }">详情</router-link>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { usePaging } from "@/hooks/usePaging";
import { goodsListApi } from "@/api/vehicle";
const list = reactive([
    { name: "1" },
    { name: "2" },
    { name: "3" },
    { name: "4" },
]);

const basic = ref({
    id: 2,
    license: "",
    status: 2,
    type: 0,
    use_user_id: 313,
    use_user_name: "",
    use_user_phone: "",
    total_package: 4,
    total_goods: 4,
});
//
const BrieflyGoods = (list) => {
    if (list.length > 2) {
        let arr = list.slice(0, 2);
        arr.push({ name: "..." });
        return arr;
    } else {
        return list;
    }
};
const route = useRoute();
goodsListApi({ id: route.query.id }).then((res) => {
    //   console.log(res);
    //   for (let key in basic) {
    //     basic[key] = res.basic[key];
    //   }
    basic.value = res;
    console.log(basic);
});
// const { pager, getLists, resetParams, resetPage } = usePaging({
//   fetchFun: goodsListApi,
//   params: { id: route.query.id },
// });
// getLists();
// console.log(pager);
</script>

<style lang="scss" scoped>
.box {
    background-color: #fff;
    padding: 1vh 1vw;

    .el-row {
        margin: 5vh;
    }
}
</style>
