<template>
    <!-- 退料任务 -->
    <view class="accept page-common"> 
        <uni-row :gutter="24" class="search-form"> 
            <uni-col :span="10">
                <view>
                    <uni-easyinput placeholder="请输入内容" v-model="queryParams.keyWord"/>
                </view>
            </uni-col>
            <uni-col :span="4">
                <view class="search" @click="">查询</view>
            </uni-col>
            <uni-col :span="4">
                <view class="addBtn" @click="">申请</view>
            </uni-col>
			<uni-col :span="6">
			    <view class="addBtn" @click="goApply()">申请记录</view>
			</uni-col>
        </uni-row>
		<uni-row :gutter="24" class="search-form">
			<uni-col :span="6">
			    <view>物资类型：</view> 
			</uni-col>
			<uni-col :span="18">
				<scroll-view scroll-x class="select-box">
                    <view class="select-box-content">
                        <view class="select-box-item" v-for="(item,index) in maList" :key="index">
                            {{item.typeName}}
                        </view> 
                    </view> 
				</scroll-view> 
			</uni-col>
		</uni-row>
        <uni-row :gutter="24" class="search-form">
			<uni-col :span="6">
			    <view>物资名称：</view> 
			</uni-col>
			<uni-col :span="18">
				<scroll-view scroll-x class="select-box">
                    <view class="select-box-content">
                        <view class="select-box-item" v-for="(item,index) in modelList" :key="index">
                            {{item.typeName}}
                        </view> 
                    </view> 
				</scroll-view> 
			</uni-col>
		</uni-row>
        <uni-row :gutter="24" class="search-form">
			<uni-col :span="6">
			    <view>规格型号：</view> 
			</uni-col>
			<uni-col :span="18">
				<scroll-view scroll-x class="select-box">
                    <view class="select-box-content">
                        <view class="select-box-item" v-for="(item,index) in typeList" :key="index">
                            {{item.typeName}}
                        </view> 
                    </view> 
				</scroll-view> 
			</uni-col>
		</uni-row>
        <scroll-view scroll-y   class="scroll-container">
            <uni-table border stripe emptyText="暂无更多数据" >
                <!-- 表头行 -->
                <uni-tr>
                    <uni-th style="font-size: 24rpx;" width="50px" align="center" >序号</uni-th>
                    <uni-th style="font-size: 24rpx;" width="80px" align="center">机具类型</uni-th> 
                    <uni-th style="font-size: 24rpx;" width="80px" align="center">配件名称</uni-th>
                    <uni-th style="font-size: 24rpx;" width="80px" align="center">规格型号</uni-th>
                    <uni-th style="font-size: 24rpx;" width="50px" align="center">库存</uni-th>
                    <uni-th style="font-size: 24rpx;" width="80px" align="center">预领数量</uni-th>
                    <uni-th style="font-size: 24rpx;" width="50px" align="center">操作</uni-th>
                </uni-tr>
                <!-- 表格数据行 -->
                <uni-tr v-for="(item,index) in partList" :key="index">
                    <uni-td style="font-size: 20rpx;">{{(index+1)}}</uni-td>
                    <uni-td style="font-size: 20rpx;">{{item.modelType}}</uni-td>
                    <uni-td style="font-size: 20rpx;">{{item.partName}}</uni-td>
                    <uni-td style="font-size: 20rpx;">{{item.typeName}}</uni-td>
                    <uni-td style="font-size: 20rpx;">{{item.storeNum}}</uni-td>
                    <uni-td style="font-size: 20rpx;">
                        <uni-easyinput placeholder="预领数量" v-model="item.leaseNum"/>
                    </uni-td>
                    <uni-td>
                        <view> 
                            <uni-icons type="trash-filled" size="20" style="color: red;margin-left:10px;"  @click="delRow(item)"></uni-icons>
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue' 
import { onLoad,onShow} from '@dcloudio/uni-app'
import { debounce } from 'lodash-es'
const total = ref(0) //                 数据总量 
const partList = ref([
    {modelType:"手扶绞磨机", partName:"离合器轴", typeName:"XJSF-JM-1", storeNum:"20", leaseNum:"0"},{modelType:"手扶绞磨机", partName:"离合器轴", typeName:"XJSF-JM-2", storeNum:"20", leaseNum:"0"},{modelType:"手扶绞磨机", partName:"离合器轴", typeName:"XJSF-JM-3", storeNum:"20", leaseNum:"0"}
]) //            列表数据源 
// 查询参数
const queryParams = ref({ 
    keyWord: '', //                     关键字 
    status: 2,
    pageNum: 1,
    pageSize: 5,
})
const maList = ref([
    {typeId:0,typeName:'全部'},{typeId:1,typeName:'手扶绞磨机'},{typeId:2,typeName:' 机动绞磨液压机'},{typeId:3,typeName:'超高压液压泵'},{typeId:4,typeName:'机动绞磨'}
]) 
const modelList = ref([
    {typeId:0,typeName:'全部'},{typeId:1,typeName:'离合器轴'},{typeId:2,typeName:' 油底壳'},{typeId:3,typeName:'消声器支管'},{typeId:4,typeName:'柴油机体纸垫'},{typeId:5,typeName:'机油机滤总成'}
]) 
const typeList = ref([
    {typeId:0,typeName:'全部'},{typeId:1,typeName:'XJSF-JM-1'},{typeId:2,typeName:' XJSF-JM-2'},{typeId:3,typeName:'XJSF-JM-3'},{typeId:4,typeName:'XJSF-JM-4'},{typeId:5,typeName:'XJSF-JM-5'}
]) 

  
//点击记录
const goApply = () => { 
    uni.navigateTo({ url: `/pages/part/part-lease/applyList` })
}
//点击详情
// const handleItem = (item) => {
//     console.log('🚀 ~ handleItem ~ item:', item)
//     uni.navigateTo({ url: `/pages/back/detail?id=${item.id}&taskId=${item.taskId}` })
// } 
onShow(() => {
    // partList.value = []
    total.value = 0
    // getTableList(true)
}) 
</script>

<style lang="scss" scoped>
.accept {
    height: 95vh;
    word-break: break-all;
    background-color: #f7f8fa;
    padding: 24rpx; 
    // 搜索表单
    .search-form {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 10rpx;
        border-radius: 20rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); 
		
		.select-box{
			width: 98%;
			height: 80rpx; 
		}
        .select-box-content{
            height: 80rpx; 
            width: auto;
            display: flex; align-items: center;
            flex-wrap: nowrap;
        }
        .select-box-item{
            width: auto;
            padding: 5rpx;
            margin-right: 10rpx;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 24rpx;
            word-break: keep-all;
            white-space: nowrap;
        }
		
        // 搜索按钮
        .search {
            height: 80rpx;
            background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
            text-align: center;
            line-height: 80rpx;
            color: #fff;
            border-radius: 12rpx;
            font-size: 28rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
            }
        }

        // 新增按钮
        .addBtn {
            height: 80rpx;
            background: linear-gradient(135deg, #19be6b 0%, #16a75c 100%);
            text-align: center;
            line-height: 80rpx;
            color: #fff;
            border-radius: 12rpx;
            font-size: 28rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(25, 190, 107, 0.2);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
            }
        }
    }
}

// 列表容器
.scroll-container {
	width: 98%;
    padding: 5rpx;
    height: 50vh;
    margin: 20rpx auto;
}

/* 针对Web平台 */
.scroll-view {
  overflow: auto; /* 允许滚动 */
  -ms-overflow-style: none; /* IE和Edge */
  scrollbar-width: none; /* Firefox */
}
 
/* 针对其他非Web平台，比如小程序，可以通过条件编译来设置 */
/* #ifdef MP-WEIXIN */
.scroll-view {
  scroll-view {
    scroll-x: true;
    scroll-y: auto;
    ::-webkit-scrollbar {
      display: none; /* 针对Webkit浏览器，隐藏滚动条 */
      width: 0;
      height: 0;
      color: transparent;
    }
  }
}
/* #endif */
</style>
