<!-- 物料选择 -->
<template>
    <view class="content">
        <view class="topSearch">
            <uni-easyinput type="text" v-model="queryParams.keyword" prefixIcon="search" :inputBorder="false"
                @iconClick="getMaterialList" placeholder="请输入搜索内容" />
        </view>

        <!-- 物料列表  -->
        <z-paging ref="pagingRef" class="containerBox" v-model="materialList" @query="getMaterialList">
            <uni-list>
                <uni-list-item v-for="item in materialList" :key="item.id" clickable class="material-card"
                    @click="onMaterial(item)">
                    <template v-slot:body>
                        <p style="display: flex; flex-direction: column; width: 100%;">
                        <p class="title">{{ item.materialName }} ({{ item.materialCode }})</p>
                        <p class="subTitle">
                            <!-- 简称/型号/规格/类型 -->
                            <span v-if="item.materialShortName">{{ item.materialShortName }} / </span>
                            <span v-if="item.model">{{ item.model }} / </span>
                            <span v-if="item.specification">{{ item.specification }} / </span>
                            <span v-if="item.typeName">{{ item.typeName }} </span>
                        </p>
                        <p class="tag">
                            <uni-tag :text="getTypeParentNames(item.typeParentNames)" type="error" />
                        <p>单位：{{ item.unitName }}</p>
                        </p>
                        </p>

                    </template>
                </uni-list-item>
            </uni-list>
        </z-paging>
    </view>
</template>
<script setup>
import { ref } from 'vue';
import { getMaterial } from '@/api/uniqueCode'
import { onShow } from "@dcloudio/uni-app";
import { getTypeParentNames } from '../until';

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

const pagingRef = ref(null)
const materialList = ref([])

// 获取列表
const getMaterialList = () => {
    getMaterial(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 handleSearch = () => {

}

// 选择物料
const onMaterial = (val) => {
    let materialChecked = uni.getStorageSync('app_material');
    if (!Array.isArray(materialChecked)) {
        materialChecked = [];
    }
    const idx = materialChecked?.findIndex((i) => i.id === val.id)
    if (idx != -1) {
        //! 现在仅允许添加一条物料打印一个唯一码  但保留可添加多个
        // uni.showToast({
        //     title: '该物料已添加，请勿重复添加！',
        //     mask: true,
        //     icon: 'none',
        // })
    } else {
        if (val) {
            // materialChecked = [...materialChecked, { ...val, quantity: 1 }];
            materialChecked = [{ ...val, quantity: 1 }]
            uni.setStorageSync('app_material', materialChecked);
        }
    }
    uni.navigateTo({
        url: '/pages/uniqueCode/issueUniqueCode/index'
    });

}
</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>