<template>

	<view class="content">
		<view class="box-pack-between item border-b">
			<text>名称</text>
			<input @input="bindName" maxlength="8" type="text" :value="name" placeholder="请输入名称" />
		</view>

		<view class="">
			<view class="box-pack-between ft32 item">
				<text>{{$test.$test}}场景 </text>
				<view class="add-home flex-center ft24">
					<picker @change="bindPickerChange" :range-key="'name'" :range="allwayList">
						添加
					</picker>
				</view>
			</view>
			<view class="item-bg" v-if="arr.length>0">
				<view class="box-pack-between mar64 flex-y-center" v-for="(item,index) of arr" :key='item.id'>
					<view class="flex-y-center flex-grow-1 pdr-20">
						<text style="margin-right: 10rpx;">{{item.name}}</text>
						<input class="flex-grow-1" type="text" @input="getScene" :data-index="index"
							placeholder="请填写链接或内容" :value="item.way_power" />
					</view>
					<image class="item-del" @click="delScene" :data-index='index' src="../../static/images/del.png"
						mode=""></image>
				</view>
			</view>
		</view>
		<view class="bottom-bars flex-center">
			<button @click="save" class="flex-center ft28">{{id?'编辑':'添加'}}{{$test.$test}}池</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				$test: this.$test.$test,
				allwayList: [],
				arr: [],
				name: "",
				id: ''
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: `添加${this.$test.$test}池`
			})
			this.allways();
			if (e.id) {
				this.id = e.id;
				this.poolDetail(e.id);
			}
		},

		methods: {
			poolDetail(id) {
				this.request({
					url: "powerpool/pool_detail",
					data: {
						id: id,
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.name = res.data.name;
						this.arr = res.data.funeng;
					}
				}).catch((res) => {});
			},

			bindName(e) {
				this.name = e.detail.value;
			},

			getScene(e) {
				var index = e.currentTarget.dataset.index;
				this.arr[index].way_power = e.detail.value;
			},

			delScene(e) {
				var index = Number(e.currentTarget.dataset.index);
				this.arr.splice(index, 1);
			},

			bindPickerChange: function(e) {
				console.log(e, this.allwayList, "bindPickerChange", )
				if (this.arr.length > 0) {
					for (let i of this.arr) {
						if (i.id == this.allwayList[e.target.value].id) {
							uni.showToast({
								title: "场景重复",
								icon: 'none'
							})
							return
						}
					}
				}
				this.arr.push({
					id: this.allwayList[e.target.value].id,
					name: this.allwayList[e.target.value].name,
					super_id: this.allwayList[e.target.value].super_id,
				});
			},

			allways() {
				this.request({
					url: "funeng/allways",
					data: {},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.allwayList = res.data;
						this.arr.push({
							id: res.data[0].id,
							name: res.data[0].name,
							super_id: res.data[0].super_id,
						});
					}
				}).catch((res) => {});
			},

			save(e) {

				let arr = this.arr,
					way_id = [],
					way_power = [];

				for (let i of arr) {
					way_id.push(i.id);
					way_power.push(i.way_power)
				}

				if (way_power.length <= 0) {
					uni.showToast({
						title: "场景为空",
						icon: 'none'
					})
					return
				}

				if (!this.name) {
					uni.showToast({
						title: "名称不能为空",
						icon: 'none'
					})
					return
				}
				let data = {
					way_id: way_id.join(","),
					way_power: way_power.join(","),
					token: uni.getStorageSync("token"),
					name: this.name,
				}
				if (this.id) {
					data.id = this.id;
				}
				this.request({
					url: "powerpool/savepool",
					data,
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						uni.showToast({
								title: this.id?"编辑成功":"添加成功",
								icon: 'none'
							}),
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 2e3)
					}
				}).catch((res) => {});



			},

		},
	}
</script>

<style>
	.item {
		padding: 32rpx 40rpx;
	}

	.item input {
		text-align: right;
	}

	.upimg {
		width: 126rpx;
		height: 126rpx;
	}

	.add-home {
		color: #FFFFFF;
		width: 126rpx;
		height: 54rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
	}

	.item-bg {
		width: 670rpx;
		/* height: 298rpx; */
		background: #f6f8fe;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		padding: 36rpx 32rpx;
	}

	.item-del {
		width: 40rpx;
		height: 40rpx;
	}

	.mar64 {
		margin-bottom: 64rpx;
	}

	.item-bg .mar64:last-child {
		margin-bottom: 0rpx;
	}

	.hg200rpx {
		height: 100rpx;
	}

	.mgr57 {
		margin-bottom: 57rpx;
	}

	.item-bg-32 {
		margin-right: 32rpx;
	}
</style>
