<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">服务上架</block>
		</cu-custom>
		<!-- 表单内容 -->
		<form @submit="submit">
			<view class="cu-form-group">
				<view class="title">服务名称</view>
				<input name="name" placeholder="请编辑上架标题(供客户搜索)"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">服务描述</view>
				<input name="name" placeholder="让客户更清晰的上架内容描述"></input>
			</view>
			<view class="solid-top">
				<view class="cu-form-group">
					<view class="title">选择类目</view>
					<picker :mode="'multiSelector'" @change="categoryChange" :value="categoryMultiIndex" :range-key="'name'" :range="categoryList">
						<input class="line-input radius-input" :value="formData.category ? formData.category[0].name + '-' + formData.category[1].name + '-' + formData.category[2].name : ''"
							placeholder="请选择类目"></input>
					</picker>
				</view>
				<view class="padding-lr">
					
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {},
				categoryList: [],
				categoryMultiIndex: [0, 0, 0],
				specsList: []
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.categoryList = await this.$api.data('categoryList');
			},
			async categoryChange(e) {
				this.categoryMultiIndex = e.detail.value;
				let chosenCategory = [];
				for(let i = 0; i < this.categoryList.length; i++) {
					chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
				}
				this.formData.category = chosenCategory;
				
				this.specsList = await this.$api.data('specsList');
			},
		},
	}
</script>

<style scoped>
	.cu-form-group picker::after {
		display: none;
	}
</style>
