<template>
	<div class="form">
        <van-nav-bar
            title="仓库维护"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"

        >
        </van-nav-bar>
		<van-form @submit="onSubmit" label-align="top" style="margin-top:20px">
			<van-cell-group inset>
				<van-field
                    v-model="formData.typeName"
                    is-link
                    readonly
                    label="仓库类型"
                    placeholder="选择仓库类型"
                    @click="typeModal = true"
                    :rules="[{ required: true, message: '仓库类型不能为空' }]"
                    required
                />
                <van-popup v-model:show="typeModal" round position="bottom">
                    <van-picker
                        :columns="columns"
                        @cancel="typeModal = false"
                        @confirm="onConfirm"
                    />
                </van-popup>
				<van-field
					v-model="formData.name"
					name="仓库名称"
					label="仓库名称"
					placeholder="请填写仓库名称"
					:rules="[{ required: true, message: '仓库名称不能为空' }]"
                    required
				/>
                <van-field
					v-model="formData.remark"
					rows="3"
                    type="textarea"
					name="备注"
					label="备注"
					placeholder="请填写备注"
				/>
            </van-cell-group>
			<div style="margin: 16px">
				<van-button round block type="primary" native-type="submit">
					提交
				</van-button>
			</div>
		</van-form>
	</div>
</template>

<script setup>
import { ref,getCurrentInstance,onMounted } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';
import { useRoute } from 'vue-router'

const proxy = getCurrentInstance().proxy
const route = useRoute()
const showPicker = ref(false)
const typeModal = ref(false)
const formData = ref({
    name:null,
    type:null,
    typeName:null,
    remark:null,

})

const getDict = () => {
    proxy.get('/system/dict/data/list?pageNum=1&pageSize=10&dictType=warehouse_type').then(res => {
        columns.value = res.rows.map(item => {
            return {
                text: item.dictLabel,
                value: item.dictValue
            }
        })
        formData.value.typeName = formData.value.type ?  columns.value.find(item => item.value == formData.value.type).text : null
    })
}

const columns = ref([])

const onConfirm = ({ selectedOptions }) => {
    formData.value.type = selectedOptions[0].value
    formData.value.typeName = selectedOptions[0].text
    typeModal.value = false
}

const onClickLeft = () => history.back();


const onSubmit = () => {
    proxy.post('/warehouse/' + (!route.query.id ? 'add' : 'edit'), formData.value).then(res => {
        setTimeout(() => {
            showSuccessToast(!route.query.id ? '添加成功' : '编辑成功')
            proxy.$router.push('/main/warehouseConfig')
        }, 500);
    })
}
onMounted(() => {
    formData.value = route.query
    
    getDict()
})

</script>