<!-- 唯一码 -->
<template>
    <view class="content">
        <view class="topSearch">
            <uni-easyinput type="text" v-model="queryParams.code" prefixIcon="search" :inputBorder="false"
                @iconClick="getMaterialList" placeholder="请输入关键词搜索" />
        </view>

        <!-- 唯一码列表  -->
        <z-paging ref="pagingRef" class="containerBox" v-model="uniqueCodeList" @query="getMaterialList">
            <uni-list>
                <uni-list-item v-for="item in uniqueCodeList" :key="item.id" clickable class="material-card"
                    @longpress="() => handleItemLongPress(item, index)" @click="toDetail(item)">
                    <template v-slot:body>
                        <p style="display: flex; flex-direction: column; width: 100%;">
                            <!-- 编码、状态行 -->
                            <view class="flex-center">
                                <p class="title">编号：{{ item.code }}</p>
                                <p class="status">{{ getStatusName(item.status) }}</p>
                            </view>
                            <!-- 内容行 -->
                            <view class="text ">
                                <p>RFID：
                                    <span v-if="item.rfidCode">{{ item.remark }}</span>
                                    <span v-else style="color: #999;">未绑定RFID</span>
                                </p>
                                <p>生成时间：
                                    <span>{{ item?.createTime }}</span>
                                </p>
                                <!-- 备注行-->
                                <view class="flex-center qrCode">
                                    <p>备注：
                                        <span v-if="item.remark">{{ item.remark }}</span>
                                        <span v-else style="color: #999;">未填写</span>
                                    </p>
                                    <uv-image src="../../../static/qrcode.png" width="40rpx" height="40rpx"
                                        style="margin-top:10rpx" />
                                </view>
                            </view>
                        </p>
                    </template>
                </uni-list-item>
            </uni-list>
        </z-paging>
        <view>

            <!-- 提示窗示例 -->
            <uni-popup ref="alertDialog" type="center">
                <uni-popup-dialog type="error" v-if="isDialog" cancelText="取消" confirmText="确认" title="是否需要删除该唯一码？"
                    @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
            </uni-popup>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue';
import { getStatusName } from '../until';
import { onShow } from "@dcloudio/uni-app";
import { getUniqueCodeList, delUniqueCode } from '@/api/uniqueCode'

const queryParams = ref({
    code:''
})

const pagingRef = ref(null)

// 删除的数据
const delItem = ref(null)
// 删除弹框相关
const alertDialog = ref(null)
const isDialog = ref(false)
// 唯一码列表
const uniqueCodeList = ref([])

// 列表：唯一码
const getMaterialList = () => {
    getUniqueCodeList(queryParams.value).then(res => {
        res.rows.forEach(e => {
            e.showMore = false;
        });
        pagingRef.value.complete(res.rows)
    }).catch(res => {
        pagingRef.value.complete(false)
    })
}

onShow(() => {
    pagingRef.value?.reload?.()
})

// 详情：唯一码
const toDetail = (val) => {
    uni.navigateTo({
        url: `/pages/uniqueCode/myUniqueCode/detail?id=${val.id}&code=${val.code}`,
    });
}

// 删除弹窗：显示 长按事件
const handleItemLongPress = (val) => {
    alertDialog.value.open()
    isDialog.value = true
    delItem.value = val
}
//删除弹窗：关闭
const dialogClose = () => {
    alertDialog.value.close()
    isDialog.value = false
}
//删除弹窗：确认
const dialogConfirm = () => {
    console.log(delItem.value.id, 'delItem.value.id');
    delUniqueCode({ ids: [delItem.value.id] }).then(res => {
        console.log(res, '11');
        dialogClose()
    })
}

</script>
<style scoped lang="scss">
.topSearch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.containerBox {
    // padding: 0 12rpx;
    padding-top: 60px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .zp-l-text-rpx {
        font-size: 12px;
    }
}
</style>