<template> 
    <view class="page-container">
	<!-- 表单信息区域 -->
    <scroll-view scroll-y style="height: 100vh;">
		<view class="table-list-item">
		    <uni-row :gutter="24" style="display: flex; align-items: center">
		        <uni-col :span="6">
		            <view> 设备编码 </view>
		        </uni-col>
		        <uni-col :span="12">
		            <view>
		                <uni-easyinput v-model="queryCodeParams.maCode" placeholder="请输入内容" />
		            </view>
		        </uni-col>
		        <uni-col :span="6">
		            <view
		                class="coding-btn search-btn"
		                @tap="onCodeSearch"
		            >编码检索</view>
		        </uni-col>
		    </uni-row>
            <div v-if="optionList.length > 1" >
                <uni-data-select
                    v-model="maId"
                    :localdata="optionList"
                    @change="changeTag"
                    placeholder="请选择相关联编号"
                    :searchable="false"
                    filterable
                ></uni-data-select>
            </div>
		</view>
		
        <view class="form-section">
            <view class="section-header">
                <text class="title">设备信息</text>
            </view>
            <view class="form-content">
                <uni-forms :model="formData" label-width="100" :border="true">
                    <uni-forms-item label="设备类型：" name="maName">
                        <span class="form-view">{{formData?.maName ?? ''}}</span>
                    </uni-forms-item>
                    <uni-forms-item label="规格型号：" name="maModel">
                        <span class="form-view">{{formData?.maModel ?? ''}}</span>
                    </uni-forms-item>
                    <uni-forms-item label="二维码编码：" name="qrCode">
                        <span class="form-view">{{formData?.qrCode ?? ''}}</span>
                    </uni-forms-item>
                    <uni-forms-item label="设备编码：" name="maCode">
                        <span class="form-view">{{formData?.maCode ?? ''}}</span>
                    </uni-forms-item>
                    <uni-forms-item label="设备状态：" name="maStatus">
                        <span class="form-view">{{formData?.maStatus ?? ''}}</span>
                    </uni-forms-item>
                    <uni-forms-item label="本次检修时间：" name="checkTimeSynch">
                        <text class="form-view">{{formData?.thisCheckTime ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="下次检修时间：" name="nextCheckTimeSynch">
                        <text class="form-view">{{formData?.nextCheckTime ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="出入库次数：" name="inOutNum">
                        <text class="form-view">{{formData?.inOutNum ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="初次入库：" name="inTime">
                        <text class="form-view">{{formData?.inTime ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="服务工程次数：" name="serviceNum">
                        <text class="form-view">{{formData?.serviceNum ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="检验次数：" name="checkNum">
                        <text class="form-view">{{formData?.checkNum ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="更换配件次数：" name="checkNum">
                        <text class="form-view">{{formData?.checkNum ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="报废：" name="scrapTime">
                        <text class="form-view">{{formData?.scrapTime ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="生产厂家：" name="statusName">
                        <text class="form-view">{{}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="领料单位：" name="leaseUnit">
                        <text class="form-view">{{formData?.leaseUnit ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="领料工程：" name="leaseProject">
                        <text class="form-view">{{formData?.leaseProject ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="领料时间：" name="leaseTime">
                        <text class="form-view">{{formData?.leaseTime ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="退料单位：" name="backUnit">
                        <text class="form-view">{{formData?.backUnit ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="退料工程：" name="backProject">
                        <text class="form-view">{{formData?.backProject ?? ''}}</text>
                    </uni-forms-item>
                    <uni-forms-item label="退料时间：" name="backTime">
                        <text class="form-view">{{formData?.backTime ?? ''}}</text>
                    </uni-forms-item>
                </uni-forms>
            </view>
        </view>

         

       
    </scroll-view>
    </view>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { onLoad, onShow, } from '@dcloudio/uni-app'
import { debounce } from 'lodash-es' 
import { getDeviceListAPI } from '@/services/picking/outbound.js' 
const queryParams = ref({})
const formData = ref({
  maName: '',
  maModel: '',
  qrCode: '',
  maCode: '',
  maStatus: '',
  thisCheckTime: '',
  nextCheckTime: '',
  inOutNum: '',
  inTime: '',
  serviceNum: '',
  checkNum: '',
  scrapTime: '',
  statusName: '',
  leaseUnit: '',
  leaseProject: '',
  leaseTime: '',
  backUnit: '',
  backProject: '',
  backTime: ''
})   
// 编码设备列表查询参数
const queryCodeParams = ref({
    maCode: '',
    maId:'',
})  
const maId = ref('')
const optionList = ref([])
// 页面加载完毕
onLoad((options) => {})

onShow(() => {})

// 编码搜索按钮
const onCodeSearch = () => {  
    getCodeDeviceInfoData()
}
// 获取信息
const getCodeDeviceInfoData = async () => {
	console.log(queryCodeParams.value)
    // const res = await getCodeDeviceListAPI(queryCodeParams.value)   
    getDeviceListAPI({'maCode': queryCodeParams.value.maCode}).then(response => {
        console.log("xxxxxxxxxxx",response)
        if (response.data && response.data.length !== 0) {
                optionList.value = response.data.map(option => ({
                value: option.maId,
                text: option.maCode
            }))
            if(response.data.length === 1){
                formData.value = response.data[0]
            }
        }else{
            uni.showToast({
                title: '未查询到该编号信息',
                icon: 'none',
                duration: 2000
            })
        }
    })
    console.log(res)
}

// 标签变更处理
const changeTag = async () => {
    if (!maId.value) return
    
    try {
        const response = await getDeviceListAPI({'maId': maId.value})
        if (response.data && response.data.length !== 0) {
            formData.value = response.data[0]
        }
    } catch (error) {
        console.error("获取编号信息失败", error)
        uni.showToast({
            title: '获取信息失败',
            icon: 'none',
            duration: 2000
        })
    }
}


</script>

<style lang="scss" scoped>
.uni-forms-item--border[data-v-4c3fe719] {
    margin-bottom: 0;
    padding: 0 0;
    border-top: 1px #eee solid;
}

.select-container :deep(.uni-select__input-text) {
  white-space: nowrap;
  text-overflow: clip;
  overflow: visible;
}

.select-container :deep(.uni-select) {
  width: auto;
  min-width: 200px;
}

.page-container {
    display: flex;
    height: 100%;
    flex-direction: column;
    background-color: #f7f8fa;
    padding: 24rpx;

    .table-list-item {
        background: #fff;
        padding: 32rpx;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        margin-bottom: 24rpx;

        // 表单样式
        :deep(.uni-forms) {
            .uni-forms-item {
                margin-bottom: 24rpx;
                padding: 0;

                &:last-child {
                    margin-bottom: 0;
                }

                .uni-forms-item__label {
                    color: #8c8c8c;
                    font-size: 28rpx;
                    font-weight: 500;
                    padding: 0;
                    line-height: 1.8;
                }

                .uni-forms-item__content {
                    display: flex;
                    align-items: center;
                    min-height: unset;
                }
            }
        }

        // 编码按钮组
        .coding-btn {
            padding: 16rpx 0;
            background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
            border-radius: 12rpx;
            text-align: center;
            color: #fff;
            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;
            }

            // 编码检索按钮特殊样式
            &.search-btn {
                padding: 12rpx 0;
                background: #fff;
                color: #ff9800;
                border: 2rpx solid rgba(255, 152, 0, 0.5);
                background: linear-gradient(to bottom, rgba(255, 152, 0, 0.05), rgba(255, 152, 0, 0.1));
                box-shadow: none;
                font-weight: 600;
                letter-spacing: 1rpx;

                &:active {
                    background: rgba(255, 152, 0, 0.15);
                    border-color: rgba(255, 152, 0, 0.6);
                    transform: translateY(1rpx);
                }
            }
        }

        // 编码列表样式
        :deep(.uni-row) {
            /* margin-bottom: 20rpx; */
            
            &:last-child {
                margin-bottom: 0;
            }

            .uni-col-6 {
                color: #8c8c8c;
                font-size: 28rpx;
                font-weight: 500;
            }

            .cont {
                color: #262626;
                font-size: 28rpx;
                font-weight: 500;
                line-height: 1.8;
            }
        }

        // 输入框样式
        :deep(.uni-easyinput__content) {
            background-color: #f7f8fa;
            border: 2rpx solid #e8e8e8;
            border-radius: 12rpx;
            height: 75rpx;
            transition: all 0.3s ease;

            &:focus-within {
                border-color: #3784fb;
                box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
            }

            .uni-easyinput__content-input {
                font-size: 28rpx;
                color: #262626;
            }
        }
 
    }
 
}
 
.form-section {
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 24rpx; 
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

    // 头部样式
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 32rpx;
        background: #fff;
        cursor: pointer;
        transition: all 0.3s ease;

        &:active {
            background: #f7f8fa;
        }

        .title {
            font-size: 32rpx;
            font-weight: 600;
            color: #262626;
        } 
    }

    // 表单内容区域
    .form-content {
        :deep(.uni-forms-item) {
            margin-bottom: 10rpx; 
            &:last-child {
                margin-bottom: 0;
            } 
            .uni-forms-item__label {
                color: #8c8c8c;
            } 
            .form-view {
				height: 100%;
				display: flex;
				align-items: center;
                color: #262626;
                font-size: 28rpx;
            }
        }
    }
}
</style>
