<template>
	<view class="container">
		<cu-custom  :isBack="true">
			<block slot="backText"></block>
			<block slot="content">空工装返回</block>
		</cu-custom>
		<view class="example">
			<uni-section title="工位列表" type="line">
				<view class="station-container">
					<view v-for="(station, index) in stations" :key="index" 
                        class="station-item" @click="callStation(station)">
						<text class="station-text">{{ station }}</text>
						<text class="delete-icon" @click.stop="deleteStation(index)">×</text>
					</view>
				</view>
			</uni-section>
		<!-- 	
			<view class="button-container">
				<button class="action-button" type="primary" @click="showEditDialog">
					<text>修改工位</text>
				</button>
			</view> -->
		</view>
		<bottomBtn  :isSubmit="true" :isWhite="false" position="fixed" :disable="isButtonDisabled"
		                :texts="['修改工位']"  @onSubmit="showEditDialog"></bottomBtn>
		<!-- 工位编辑弹窗 -->
		<uni-popup ref="editDialog" type="dialog">
			<uni-popup-dialog mode="input" title="工位管理" 
                :value="stationInput" 
                placeholder="请输入工位号，多个用逗号分隔"
                @confirm="updateStations">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import { getStation, setStation } from '@/utils/station'
import { returnEmptyRack } from "@/api/wms/bill.js"
	import {bottomBtn} from '@/components/bottomBtn/bottomBtn.vue'
export default {
    data() {
        return {
            whCode: this.$store.state.user.warehouse[0]?.warehouseCode,
            userCode: this.$store.state.user.name,
            stations: [],
            stationInput: ""
        };
    },
    mounted() {
        this.loadStations();
    },
	component:{
		bottomBtn
	},
    methods: {
        // 加载工位
        loadStations() {
            const saved = getStation();
            this.stations = saved ? JSON.parse(saved) : [];
            if(this.stations.length === 0) {
                this.showEditDialog();
            }
        },

        // 显示编辑弹窗
        showEditDialog() {
            this.stationInput = this.stations.join(",");
            this.$refs.editDialog.open();
        },

        // 更新工位列表
        updateStations(val) {
            const newStations = val.split(",")
                .map(s => s.trim())
                .filter(s => s !== "");
            
            // 去重处理
            const uniqueStations = [...new Set(newStations)];
            
            this.stations = uniqueStations;
            setStation(JSON.stringify(this.stations));
        },

        // 删除工位
        deleteStation(index) {
            uni.showModal({
                title: '确认删除',
                content: '确定要删除该工位吗？',
                success: res => {
                    if(res.confirm) {
                        this.stations.splice(index, 1);
                        setStation(JSON.stringify(this.stations));
                    }
                }
            });
        },

        // 呼叫工位
        callStation(station) {
            uni.showModal({
                title: '确认呼叫',
                content: `确定要呼叫 ${station} 工位吗？`,
                success: res => {
                    if(res.confirm) {
                        this.$modal.loading("呼叫中...");
                        const data = {
                            locCode: station,
                            userCode: this.userCode,
                            warehouseCode: this.whCode
                        };
                        
                        returnEmptyRack(data)
                            .then(response => {
                                this.$modal.msgSuccess(`${station} 呼叫成功`);
                            })
                            .finally(() => {
                                this.$modal.closeLoading();
                            });
                    }
                }
            });
        }
    }
}
</script>

<style lang="scss">
	.container {
		background: rgb(242, 243, 245);
		height: 100vh;
	}

.station-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    padding: 20rpx;
}
.example {
		padding: 0 24rpx;
		background-color: #fff;
		width: 702rpx;
		border-radius: 24rpx;
		margin: 24rpx auto;
	
	}
.station-item {
    position: relative;
    background-color: #f0f0f0;
    border-radius: 10rpx;
    padding: 30rpx 50rpx;
    min-width: 200rpx;
    text-align: center;
    transition: all 0.3s;
    
    &:active {
        background-color: #e0e0e0;
        transform: scale(0.95);
    }
}

.station-text {
    font-size: 34rpx;
    color: #333;
}

.delete-icon {
    position: absolute;
    right: 10rpx;
    top: 0;
    font-size: 40rpx;
    color: #ff4444;
    padding: 10rpx;
}

.button-container {
    margin-top: 40rpx;
    padding: 0 30rpx;
}

.action-button {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 34rpx;
    background-color: #007AFF;
    border-radius: 10rpx;
}

/* 原有样式保留 */
.page {
    background-color: #ffffff;
}

.text {
    background-color: #ebebeb;
    color: #777;
    font-size: 26rpx;
}
</style>