<template>
    <view class="accept page-common">
        <view class="complete-btn">
            <view class="btn" @click="changeTab(1)">
                <span>已完成</span>
                <div v-if="active == 1" class="bt-line"></div>
            </view>
            <view class="btn" style="margin-left: 120rpx" @click="changeTab(2)">
                <span>未完成</span>
                <div v-if="active == 2" class="bt-line"></div>
            </view>
        </view>
        <uni-row :gutter="24" class="search-form">
            <uni-col :span="18">
                <view>
                    <uni-datetime-picker
                        v-model="dateArray"
                        type="daterange"
                        @maskClick="maskClick"
                        @change="onChangeDate"
                        placeholder="选择日期范围"
                    />
                </view>
            </uni-col> 
        </uni-row>
        <uni-row :gutter="24" class="search-form"> 
            <uni-col :span="16">
                <view>
                    <uni-easyinput placeholder="请输入内容" v-model="queryParams.keyWord"/>
                </view>
            </uni-col>
            <uni-col :span="4">
                <view class="search" @click="getTableList(true)">搜索</view>
            </uni-col>
            <uni-col :span="4">
                <view class="addBtn" @click="goAdd()">新增</view>
            </uni-col>
        </uni-row>
        <scroll-view scroll-y @scrolltolower="onScrollTolower" class="scroll-container">
            <div class="table-list-item" v-for="(item, index) in tableList" :key="index" @click="handleItem(item)">
                <!-- <uni-swipe-action-item :right-options="item.taskStatus==0 ? options:options2" @click="onClick($event,item)"  @change="onSwipeChange"> -->
                    <div class="title">
                        <span style="font-size: 15px; font-weight: 800">标准箱</span>
                        <span :style="{ color: active == 1 ? '#3784fb' : '#ff4d4f' }">{{active == 1 ? '已完成' : '未完成'}}</span>
                    </div>
                    <div class="line"></div>
                    <uni-row :gutter="24">
                        <uni-col :span="8">标准箱名称：</uni-col>
                        <uni-col :span="16"
                            ><div class="cont">{{ item.createTime }}</div></uni-col
                        >
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">标准箱编号：</uni-col>
                        <uni-col :span="16"
                            ><div class="cont">{{ item.code }}</div></uni-col
                        >
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">机具数量：</uni-col>
                        <uni-col :span="16"
                            ><div class="cont">{{ item.typeName }}</div></uni-col
                        >
                    </uni-row> 
                    <uni-row :gutter="24">
                        <uni-col :span="8">创建人：</uni-col>
                        <uni-col :span="16"
                            ><div class="cont">{{ item.backPerson }}</div></uni-col
                        >
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">创建时间：</uni-col>
                        <uni-col :span="16"
                            ><div class="cont">{{ item.phone }}</div></uni-col
                        >
                    </uni-row> 
                    <uni-row :gutter="24">
                        <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                        <uni-col :span="6">状态：</uni-col>
                        <uni-col :span="16">
                            <uni-tag
                                text="已录入"
                                type="warning" 
                                size="small"
                            />
                            <uni-tag
                                text="未录入"
                                type="success" 
                                size="small"
                            />
                        </uni-col>
                    </uni-row>
                <!-- </uni-swipe-action-item> -->
            </div>
            <view class="loading-text">
                {{ finish ? '没有更多数据了~' : '正在加载...' }}
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { getBackList,submitBackApply,backApplyRemove } from '../../services/back.js'
import { onLoad,onShow} from '@dcloudio/uni-app'
import { debounce } from 'lodash-es'
const total = ref(0) //                 数据总量
const active = ref(1) //                tap索引
const tableList = ref([]) //            列表数据源
const dateArray = ref([]) //            日期范围 
// 查询参数
const queryParams = ref({
    startTime: '', //                   开始时间
    endTime: '', //                     结束时间
    keyWord: '', //                     关键字 
    status: 2,
    pageNum: 1,
    pageSize: 5,
})

// 右滑按钮组-未完成
const options = ref([
    {
        text: '查看',
        style: {
            backgroundColor: '#409EFF',
            color: '#fff',
            fontSize: '30rpx',
        },
    },
    {
        text: '接收',
        style: {
            backgroundColor: '#19BE6B',
            color: '#fff',
            fontSize: '30rpx',
        },
    },
]) 
// 右滑按钮组-已完成
const options2 = ref([
{
        text: '查看',
        style: {
            backgroundColor: '#65a1ff',
            color: '#fff',
            fontSize: '30rpx',
        },
    }
])  
//点击事件
const onClick=(e,item)=> {
    const { index } = e
    console.log(index)
    if (index === 0) {
        handleItem(item)
    }
    // 2. 接收
    if (index === 1) {
        console.log(item)
        uni.showModal({
        title: '提示',
        content: '是否确认接收？',
        confirmText: '确定',
        cancelText: '取消',
        success: async (res) => {
            if (res.confirm) {
                // 用户点击了确定
                let param = {
                    id:item.id
                }
                console.log(param)
                const res = await backApplyRemove(param)
                if (res.code === 200) {
                    uni.showToast({
                        title: '接收成功',
                        icon: 'none',
                    })
                    setTimeout(() => {
                        getTableList(true)
                    }, 500)  
                }else{
                    uni.showToast({ title: '接收失败', icon: 'none' })
                }
            } 
        }
        })
    }
}

//获取列表
const getTableList = async (isTap = false) => {
    // console.log('queryParams.value查询参数', queryParams.value)
    const res  = await getBackList(queryParams.value)
    console.log('res列表数据', res)
    total.value = res.total
    if (isTap) {
        tableList.value = res.rows
    } else {
        if (res.rows.length == 0) {
            tableList.value = []
        } else {
            tableList.value.push(...res.rows)
        }
    }
}
 
// 滚动触底事件
const onScrollTolower = debounce(() => {
    if (total.value > tableList.value.length) {
        queryParams.value.pageNum++
        getTableList()
    }
})
//切换tab
const changeTab = (index) => {  
    active.value = index
    if (index == 1) {
        queryParams.value.status = 2 
    } else if (index == 2) {
        queryParams.value.status = 0 
    }
    queryParams.value.pageNum = 1
    getTableList(true)
}
// 日期 change 事件
const onChangeDate = (val) => {
    const [val_1, val_2] = val
    queryParams.value.startTime = val_1
    queryParams.value.endTime = val_2
}
//日期选择
const maskClick = () => {}

//点击新增
const goAdd = () => { 
    uni.navigateTo({ url: `/pages/back/addBack` })
}
//点击详情
const handleItem = (item) => {
    console.log('🚀 ~ handleItem ~ item:', item)
    uni.navigateTo({ url: `/pages/back/detail?id=${item.id}&taskId=${item.taskId}` })
}
// 判断数据是否加载完毕
const finish = computed(() => {
    if (total.value === tableList.value.length) return true
})
onShow(() => {
    tableList.value = []
    total.value = 0
    getTableList(true)
})
</script>

<style lang="scss" scoped>
.accept {
    height: 95vh;
    word-break: break-all;
    .complete-btn {
        display: flex;
        padding: 20rpx;
        .btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 30rpx;
            font-weight: 800;
        }
        .bt-line {
            width: 80rpx;
            height: 4rpx;
            background-color: #3784fb;
        }
    }

    .search-form {
        display: flex;
        align-items: center;
        box-sizing: content-box;
        margin-bottom: 10rpx;
    }

    .search {
        height: 65rpx;
        background-color: #3784fb;
        text-align: center;
        line-height: 65rpx;
        color: #fff;
        border-radius: 10rpx;
    }
    .addBtn {
        height: 65rpx;
        background-color: #3784fb;
        text-align: center;
        line-height: 65rpx;
        color: #fff;
        border-radius: 10rpx;
    }
}
.scroll-container {
    .table-list-item {
        margin: 20rpx 0;
        padding: 20rpx;
        background-color: #fff;
        min-height: 300rpx;
        border-radius: 10rpx;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cont {
            display: flex;
            justify-content: flex-end;
            line-height: 1.9;
        }
        .line {
            margin: 20rpx 0;
            height: 1px;
            background-color: #e8e8e8;
        }
    }
}
// 加载提示文字
.loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
}
</style>
