<template>
	<view class="maincontent contentBg">
		<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:down="downOption" :fixed="false" :style="{ height: mescrollHeight + 'px' }">
			<uni-swipe-action ref="swipeAction">
				<view v-for="(item, index) in dataList" class="li" :key="index" :ref="'swipeItem_' + index">
					<view class="itemIcon center" :class="{'displayNone':!Status.isEdit,'check':isCheck(item,index)}"
						v-on:click.stop="checkToggle(item,index)">
						<image class="img" :class="{'displayNone':!isCheck(item,index)}"
							src="/static/images/common/gou.png" mode="aspectFit"></image>
					</view>
					<view class="itemMain " :class="{'Edit':Status.isEdit}">
						<uni-swipe-action-item :right-options="Options" @click="handleSwipeClick($event, item, index)"
							class="device-card ">
							<view @click.stop="handleFile(item,index)">
								<view  class="item">
									<view class="itemLeft ">
										<view class="title">{{index+1}}:{{ item.name }}</view>
										<view class="smallTitle">
											<text>{{item.createTime}}</text>
											<text v-show="item.time">{{item.time}}秒</text>
												<image :class="{'displayNone':!item.localPath}"
											 class="img" src="/static/images/100/volume.png" mode="aspectFit"
												@click.stop="play(item,index)"></image>
										</view>
									</view>
									<view class="itemRight ">
										<view class="btn" @click.stop="Apply(item,index)"
											:class="{'active':item.isApply,'btn-default':!item.isApply}">
											{{item.isApply ?'使用中':'使用'}}
										</view>
									</view>
									<view class="clear"></view>
								</view>

							</view>
						</uni-swipe-action-item>
					</view>


				</view>
			</uni-swipe-action>


		</mescroll-uni>


		<view class="footer">
			<view class="addContent" :class="{'displayNone':Status.isEdit}">
				<view class="addItem" @click="gotoRecord('Record')">
					<view class="imgContent center">
						<image class="img" src="/static/images/100/record.png" mode="aspectFit"></image>
					</view>

					<view class="txt">录制语音</view>
				</view>
				<view class="addItem" @click="gotoRecord('File')">
					<view class="imgContent center">
						<image class="img" src="/static/images/100/upload.png" mode="aspectFit"></image>
					</view>
					<view class="txt">上传语音</view>
				</view>
				<view class="addItem" @click="gotoRecord('Txt')">
					<view class="imgContent center">
						<image class="img" src="/static/images/100/txtToAudio.png" mode="aspectFit"></image>
					</view>
					<view class="txt">文字转语音</view>
				</view>
			</view>
			<view class="editContent" :class="{'displayNone':!Status.isEdit}">
				<view class="btn-del" @click.stop="delCheckList()">删除</view>
			</view>
		</view>

		<MessagePopup :visible="Status.Pop.showPop" :type="Status.Pop.popType" :bgColor="Status.Pop.bgColor"
			:borderColor="Status.Pop.borderColor" :textColor="Status.Pop.textColor"
			:buttonBgColor="Status.Pop.buttonBgColor" :buttonTextColor="Status.Pop.buttonTextColor"
			:iconUrl="Status.Pop.iconUrl" :message="Status.Pop.message" :buttonText="Status.Pop.buttonText"
			@buttonClick="HidePop" :visiblePrompt="Status.Pop.visiblePrompt" :promptTitle="Status.Pop.promptTitle"
			v-model="Status.Pop.modelValue" @closePop="closePop" :buttonCancelText="Status.Pop.buttonCancelText"
			:showCancel="Status.Pop.showCancel" @cancelPop="closePop" :showSlot="Status.Pop.showSlot">


			<view class="popup-prompt">

				<input type="text" class="popup-prompt-input" placeholder="请输入名称" v-model="cEdit.name" />
			</view>



		</MessagePopup>


		<view class="displayNone">
			<audio :src="cPlay.src" :id="cPlay.Id" :name="cPlay.name" author=""></audio>
		</view>
		<global-loading ref="loading" />
	</view>
	</view>
</template>

<script>
	var eventChannel = null;
	var these = null;
	var ble = null;

	var innerAudioContext = null;

	import MescrollUni from 'mescroll-uni/mescroll-uni.vue'
	import BleTool from '@/utils/BleHelper.js'
	import request from '@/utils/request';
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from '@/utils/loading.js'
	import Common from '@/utils/Common.js'


	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				mescroll: null,
				Status: {
					isEdit: false,
					playState: '',
					playPath: '',
					Pop: {
						showPop: false, //是否显示弹窗
						popType: 'custom',
						bgColor: '#383934bd',
						borderColor: '#BBE600',
						textColor: '#ffffffde',
						buttonBgColor: '#BBE600',
						buttonTextColor: '#232323DE',
						iconUrl: '',
						message: '您确定要这样做吗？',
						buttonText: '确定',
						clickEvt: '',
						visiblePrompt: false,
						promptTitle: '设备名称',
						modelValue: '',
						visibleClose: false,
						okCallback: null,
						buttonCancelText: '',
						showCancel: false,
						showSlot: false,
					},
				},
				Options: [{
						text: '重命名',
						style: {
							backgroundColor: '#E09319',
							borderRadius: '16px',
							width: '240rpx', // 初始宽度
						},
					},
					{
						text: '删除',
						style: {
							backgroundColor: 'rgb(240, 60, 60)',
							borderRadius: '16px',
							width: '240rpx', // 初始宽度
						},
					},
				],

				blue: { //从上级页面传来的参数，蓝牙信息

				},
				device: { //从上级页面传来的参数，设备信息

				},
				dataList: [
					// {
					//  Id:"",//编号 
					//  name:"",//名称
					//  createTime:"",//创建时间
					//  localPath:"",//本地地址
					//  webPath:"",//网络地址
					//  statu:"",//状态,是否公开
					//  isApply:""//是否使用中
					// }					
				],
				checkList: [],
				downOption: {
					auto: true
				},
				upOption: {
					auto: false,
					noMoreSize: 0,
					offset: 50,
					isLock: false,
					empty: {
						tip: '暂无数据',
						hideScroll: false
					}
				},
				page: 1, // 当前页码
				size: 10, // 每页条数
				total: 0, // 总数据量
				loadedCount: 0,
				loading: false,
				finished: false,
				mescrollHeight: 0,
				cEdit: {

					Id: "", //编号 
					name: "", //名称
					createTime: "", //创建时间
					localPath: "", //本地地址
					webPath: "", //网络地址
					statu: "", //状态,是否公开
					isApply: "" //是否使用中

				},
				cPlay: {
					Id: "", //编号
					name: "", //名称
					createTime: "", //创建时间
					localPath: "", //本地地址
					webPath: "", //网络地址
					statu: "", //状态,是否公开
					isApply: "" //是否使用中
				}
			}
		},
		onLoad() {
			debugger;


			these = this;
			this.getSystemInfoSyncH();
			ble = BleTool.getBleTool();
			eventChannel = this.getOpenerEventChannel();
			eventChannel.on('deviceData', (rec) => {
				console.log("rec=", rec);
				this.blue = rec.ble;
				this.device = rec.device;
			});

			// #ifdef H5



			let btns = document.querySelectorAll('.uni-page-head-ft .uni-page-head-btn');
			for (var i = 0; i < btns.length; i++) {
				if (i === 2) {
					btns[i].style.display = 'none';
				}

			}






			// #endif  

			// #ifdef APP  

			const webView = this.$mp.page.$getAppWebview();

			webView.setTitleNViewButtonStyle(1, {

				width: '28'

			});

			webView.setTitleNViewButtonStyle(2, {

				width: '0'

			});

			// #endif
		},
		onBackPress() {
			console.log("页面返回")
		},
		onUnload() {
			console.log("页面卸载了");
		},
		onNavigationBarButtonTap(ev) {
			this.Status.isEdit = !this.Status.isEdit;
			if (this.$refs.swipeAction) {
				this.$refs.swipeAction.closeAll();
			}
			if (ev.index === 1) {
				// #ifdef H5  
				let btns = document.querySelectorAll('.uni-page-head-ft .uni-page-head-btn');
				for (var i = 0; i < btns.length; i++) {
					if (i === 1) {
						btns[i].style.display = 'none';
						continue;
					}
					if (i === 2) {
						btns[i].style.display = 'block';
						continue;
					}
				}


				// #endif  

				// #ifdef APP  

				const webView = this.$mp.page.$getAppWebview();

				webView.setTitleNViewButtonStyle(1, {

					width: '0'

				});

				webView.setTitleNViewButtonStyle(2, {

					width: '28'

				});

				// #endif


			}

			if (ev.index == 2) {
				this.checkList = [];
				// #ifdef H5
				let btns = document.querySelectorAll('.uni-page-head-ft .uni-page-head-btn');
				for (var i = 0; i < btns.length; i++) {
					if (i === 1) {
						btns[i].style.display = 'block';
						continue;
					}
					if (i === 2) {
						btns[i].style.display = 'none';
						continue;
					}


				}


				// #endif  

				// #ifdef APP  

				const webView = this.$mp.page.$getAppWebview();

				webView.setTitleNViewButtonStyle(1, {

					width: '28'

				});

				webView.setTitleNViewButtonStyle(2, {

					width: '0'

				});

				// #endif
			}


		},
		methods: {
			createAudioPlayer(localPath) {
				if (innerAudioContext) {
					innerAudioContext.close();
					console.log("1111111")
				}

				innerAudioContext = plus.audio.createPlayer({
					src: localPath,
					autoplay: false,
					backgroundControl: false,

				});



				innerAudioContext.addEventListener('canplay', () => {
					console.log("准备就绪,可以播放了");
					this.Status.playState = 'ready';

					this.cEdit.time = innerAudioContext.getDuration();
					console.log("音频长度:", this.cEdit.time);
				});

				//开始播放
				innerAudioContext.addEventListener("play", (res) => {
					this.Status.playState = 'play';
					console.log("播放中", res);
				});

				//暂停播放
				innerAudioContext.addEventListener("pause", (res) => {

					this.Status.playState = 'pause';
					console.log("暂停了", res);
				});

				//播放结束 
				innerAudioContext.addEventListener("ended", (res) => {

					this.Status.playState = 'ready';
					console.log("播放结束", res);
				});



				innerAudioContext.addEventListener("seeked", (res) => {
					console.log("seek完成了", res);
				})

				innerAudioContext.addEventListener("error", (ex) => {

					console.log("播放错误", ex);
				});



			},
			gotoRecord(type) {

				uni.navigateTo({
					url: '/pages/common/audioManager/Recording?pageType=' + type,
					events: {
						RecordOver: function(res) {
							these.downCallback();
						}
					},
					fail(ex) {
						this.showMsg("资源不存在");
					}
				});
			},
			play(item, index) {
				if (item.type === 'Txt') {
					this.showMsg("文字转语音暂不支持播放")
					return;
				}
				if (!item.localPath) {
					this.showMsg("音频加载错误无法播放");
					return;
				}

				if (this.Status.playPath === item.localPath) {
					console.log("当前正在播放");
					if (this.Status.playState === 'play') {
						console.log("暂停播放:", item)
						innerAudioContext.pause();
						this.Status.playState = 'pause'
						return;
					} else if (this.Status.playState === 'pause') {
						console.log("恢复播放:", item)
						innerAudioContext.play();
						this.Status.playState = 'play'
						return;
					}
				} else {
					console.log("准备播放:", item)
					this.Status.playPath = item.localPath;
					this.createAudioPlayer(item.localPath);
					innerAudioContext.play();

				}


				// if (!innerAudioContext) {
				// 	console.log("准备初始化音乐播放器");
				// 	innerAudioContext = uni.createInnerAudioContext();
				// 	innerAudioContext.autoplay = true;
				// 	innerAudioContext.onError(ex => {
				// 		 console.log("ex=",ex)
				// 		// if (ex && ex.errMsg) {
				// 		// 	these.showMsg(ex.errMsg);
				// 		// } else {
				// 		// 	these.showMsg("无法加载音频数据");
				// 		// }

				// 	});

				// 	innerAudioContext.onEnded(res=>{
				// 	innerAudioContext.destroy();
				// 	innerAudioContext=null;
				// 	})
				// }

				// if (!innerAudioContext) {
				// 	these.showMsg("设备音频异常,无法播放");
				// 	return;
				// }
				// if (item.localPath) {
				// 	innerAudioContext.src = item.localPath;
				// 	this.Status.playStatu='play'
				// 	innerAudioContext.play();
				// 	return;
				// }
				//先下载后播放
				// if (item.webPath) {
				// 	showLoading(these);
				// 	let downLoad = () => {
				// 		let promise = new Promise((resolve, reject) => {
				// 			uni.downloadFile({
				// 				url: item.webPath,
				// 				header: {

				// 				},
				// 				timeout: 60000,
				// 				success(res) {
				// 					item.localPath = res.tempFilePath;
				// 					resolve(res);
				// 				},
				// 				fail(ex) {
				// 					console.error("下载文件失败", ex);
				// 					reject(ex);
				// 				}
				// 			});

				// 		});
				// 		return promise;
				// 	}

				// 	let pro = downLoad();
				// 	pro.then(res => {
				// 		innerAudioContext.src = res.tempFilePath;
				// 		innerAudioContext.play();
				// 	}).catch(ex => {
				// 		these.showMsg("出现错误,无法加载音频数据");
				// 	}).finnaly(() => {
				// 		hideLoading(these);
				// 	});
				// 	return;
				// }
			},
			handleSwipeClick(e, item, index) {
				console.log(e.content.text, item)
				switch (e.index) {
					case 0:
						this.ReName(item, index);
						break
					case 1:
						this.delCheckList(item, index);
						break
				};
				if (this.$refs.swipeAction) {
					this.$refs.swipeAction.closeAll();
				}
			},
			ReName(item, index) {
				this.cEdit = Object.assign(this.cEdit, item);

				let task = () => {
					this.$set(this.dataList[index], 'name', this.cEdit.name);
					this.closePop();
					let array = uni.getStorageSync(Common.audioStorageKey);
					for (var i = 0; i < array.length; i++) {
						if (array[i].Id === item.Id) {
							array[i].name = this.dataList[index].name;
							break;
						}
					}

					uni.setStorage({
						key: Common.audioStorageKey,
						data: array
					});
				}

				this.showPop({
					showPop: true, //是否显示弹窗
					popType: 'custom',
					bgColor: '#383934bd',
					borderColor: '#BBE60096',
					textColor: '#ffffffde',
					buttonBgColor: '#BBE600',
					buttonTextColor: '#232323DE',
					iconUrl: '',
					message: '',
					buttonText: '确定',
					clickEvt: '',
					visiblePrompt: false,
					promptTitle: '',
					modelValue: '',
					visibleClose: true,
					okCallback: task,
					showSlot: true,
					buttonCancelText: '取消',
					showCancel: true
				});
			},
			delCheckList(item, index) {
				if (!this.checkList.length && !item) {
					console.log("无文件删除");
					return;
				}
				
				
				console.log("item=", item);
				let delFile = (tempFilePath) => {
					let promise = new Promise((resolve, reject) => {
						uni.removeSavedFile({
							filePath: tempFilePath,
							success() {
								console.log("临时文件已删除", tempFilePath);
							},
							fail(ex) {
								console.error("无法删除临时文件", ex);
							},
							complete() {
								console.log("文件删除完成")
								resolve();
							}
						});
					});

					return promise;

				}
				let task = () => {
					let checkList = [];
					if (item) {
						checkList = [item.Id]
					} else {
						checkList = this.checkList;
					}
					this.closePop();
					setTimeout(() => {
						debugger;
						//删除缓存、文件、pcm数据缓存
						console.log("checkList=", checkList)
						for (let i = 0; i < checkList.length; i++) {
							let id = checkList[i];
							this.dataList.find((v, index) => {
								if (v.Id === id) {
									this.dataList.splice(index, 1);

									console.log("pcm=", uni.getStorageSync(Common.pcmStorageKey + "_" +
										id));
									uni.removeStorage({
										key: Common.pcmStorageKey + "_" + id,
										fail(err) {
											console.log("err=", err)
										},
										success() {
											console.log("pcm=", uni.getStorageSync(Common
												.pcmStorageKey + "_" + id));
										}
									});
									delFile(v.localPath).then(res => {}).catch(ex => {});
									return true;
								}
								return false;
							});

						}

						let array = uni.getStorageSync(Common.audioStorageKey);
						console.log("array=", array);

						let arr = [];
						for (let j = 0; j < array.length; j++) {
							let element = array[j];
							let f = checkList.find(v => {
								return v === element.Id;
							});

							if (!f) {
								console.log("该选项还有效");
								arr.push(element)
							} else {
								console.log("该选项被删除");
							}
						}

						uni.setStorage({
							key: Common.audioStorageKey,
							data: arr
						});

						this.checkList = [];
						this.Status.isEdit = false;

						this.showMsg("操作成功", true);
					}, 0)


				}

				this.showPop({

					showPop: true, //是否显示弹窗
					popType: 'custom',
					bgColor: '#383934bd',
					borderColor: '#e034344d',
					textColor: '#ffffffde',
					buttonBgColor: '#E03434',
					buttonTextColor: '#232323DE',
					iconUrl: '',
					message: '删除后无法恢复,你确定要删除吗?',
					buttonText: '确定',
					clickEvt: '',
					visiblePrompt: false,
					promptTitle: '',
					modelValue: '',
					visibleClose: true,
					okCallback: task,
					showSlot: false,
					buttonCancelText: '取消',
					showCancel: true

				})
			},
			isCheck(item, index) {
				let f = this.checkList.find((v, vi) => {
					return v === item.Id;
				});
				if (f) {
					return true;
				}
				return false;
			},
			checkToggle(item, index) {
				debugger;
				let f = null;
				let i = null;
				this.checkList.find((v, vi) => {
					if (v === item.Id) {
						f = v;
						i = vi;
						return true;
					}
					return false;
				});

				if (i !== null) {
					this.checkList.splice(i, 1);
				} else {
					this.checkList.push(item.Id);
				}
			},
			Apply(item, index) {

				if (item.isApply) {
					return;
				}

				let task = () => {
					debugger;
					// let pcmData = uni.getStorageSync(Common.pcmStorageKey + "_" + item.Id);
					let fileList = uni.getStorageSync(Common.audioStorageKey);
					// if (pcmData && pcmData.length) {
					// 	pcmData=null;
					for (let i = 0; i < these.dataList.length; i++) {
						let ele = these.dataList[i];
						if (i === index) {
							these.$set(these.dataList[index], "isApply", true);
							fileList.find(v => {
								if (!v.devices) {
									v.devices = [];
								}
								if (v.Id == ele.Id) {
									v.devices.push(these.device.id);
									return true;
								} else {
									for (let j = 0; j < v.devices.length; j++) {
										if (v.devices[j] === these.device.id) {
											v.devices.splice(j, 1);
											break
										};
									}
								}
								return false;
							});
						} else {
							these.$set(these.dataList[index], "isApply", false);
						}

					}
					console.log("状态修改完成");


					eventChannel.emit('audioApply', item.Id);
					console.log("返回上一页");

					uni.navigateBack();

					// } else {
					// 	this.showMsg("读取音频数据失败");
					// 	return;
					// }
				}

				ble.LinkBlue(this.blue.deviceId, this.blue.writeServiceId, this.blue.wirteCharactId, this.blue
					.notifyCharactId, 1).then(res => {
					task();
				}).catch(ex => {
					this.showMsg(ex.msg);
				});


			},
			closePop: function() {
				this.Status.Pop.showPop = false;

				if (this.Status.Pop.cancelCallback) {
					this.Status.Pop.cancelCallback();
				}
			},
			HidePop: function() {



				this.Status.Pop.showPop = false;
				if (this.Status.Pop.okCallback) {
					this.Status.Pop.okCallback();
				}
			},
			showPop: function(option) {
				hideLoading(this);
				let def = {
					showPop: true, //是否显示弹窗
					popType: 'custom',
					bgColor: '#383934bd',
					borderColor: '#BBE600',
					textColor: '#ffffffde',
					buttonBgColor: '#BBE600',
					buttonTextColor: '#232323DE',
					iconUrl: '',
					message: '',
					buttonText: '确定',
					clickEvt: '',
					visiblePrompt: false,
					promptTitle: '',
					modelValue: '',
					visibleClose: false,
					okCallback: null,
					showSlot: false,
					buttonCancelText: '',
					showCancel: false,
				}

				let keys = Object.keys(def);

				for (let i = 0; i < keys.length; i++) {
					let key = keys[i];
					if (key in option) {
						continue;
					}
					this.Status.Pop[key] = def[key];
				}
				if (option) {
					keys = Object.keys(option);
					for (let i = 0; i < keys.length; i++) {
						let key = keys[i];

						this.Status.Pop[key] = option[key];
					}
				}

				if (!option.borderColor) {
					option.borderColor = '#BBE600';
					option.buttonBgColor = '#BBE600';
				}
				these.Status.Pop.showPop = true;
			},
			showMsg(msg, isSucc) {
				let icoUrl = '/static/images/6155/DeviceDetail/uploadErr.png';
				let borderColor = "#e034344d";
				let buttonBgColor = "#E03434";
				if (isSucc) {
					icoUrl = '/static/images/common/success.png';
					borderColor = "#BBE600";
					buttonBgColor = "#BBE600";
				}
				this.showPop({
					message: msg,
					iconUrl: icoUrl,
					borderColor: borderColor,
					buttonBgColor: buttonBgColor,
					buttonText: '确定',
					okCallback: null
				});
			},

			getData() {
				let generateRandomData = (count) => {
					debugger;
					let array = uni.getStorageSync(Common.audioStorageKey);

					console.log("array=", array);
					if (array && array.length) {
						let start = (these.page - 1) * these.size;
						let end = these.page * these.size;
						let packet = array.slice(start, end);
						packet.filter(v => {
							let devs = v.devices;
							if (!devs) {
								v.isApply = false;
								return false;
							}
							let f = devs.find(d => {
								return d === this.device.id;
							});
							if (f) {
								v.isApply = true;
								return true;
							}
							v.isApply = false;
							return true;
						});
						console.log("packet=", packet);
						return packet;
					}


				}
				let task = () => {

					let start = (this.page - 1) * this.size;
					let end = this.page * this.size;
					// let arr = [];
					// for (var index = start; index < end; index++) {
					// 	arr.push(index);

					// }
					let arr = generateRandomData(this.size);

					if (!arr) {
						arr = [];
					}
					if (this.page == 1) {
						this.dataList = arr;
					} else {
						this.dataList = this.dataList.concat(arr);
					}


					let hasNext = true;
					if (arr.length < this.size) {
						hasNext = false;
						console.log("已经是最后一页了。");
					}
					this.mescroll.endSuccess(arr.length, hasNext);
				}




				setTimeout(task, 200);

			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新
			downCallback() {


				// 重置分页参数
				this.page = 1;
				this.getData();
			},
			// 上拉加载 
			upCallback() {

				console.log("上拉加载")
				this.page += 1;
				this.getData();
			},
			getSystemInfoSyncH() {

				let sysInfo = uni.getSystemInfoSync();
				// 底部 footer 高度约 220rpx + 120rpx = 340rpx，转换为 px（1rpx = sysInfo.pixelRatio / 750 * 屏幕宽度？不，直接用 rpx 转 px 公式）
				const footerHeight = 620 * (sysInfo.screenWidth / 750); // rpx 转 px
				console.log("footerHeight=", footerHeight);
				this.mescrollHeight = sysInfo.screenHeight - footerHeight;
				console.log("mescrollHeight=", this.mescrollHeight);
			},
			handleFile(item, index) {

			}


		}
	}
</script>

<style>
	.popup-prompt {
		width: 100%;
		margin-top: 40rpx;
	}



	.popup-prompt-input {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #BBE60096;
		border-radius: 10rpx;
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		text-align: left;

	}

	.li {
		border-radius: 16rpx;
		background: #1a1a1a;
		margin-top: 24rpx;
		width: 100%;
		box-sizing: border-box;
		padding-left: 15rpx;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;

	}

	.li .itemMain {}

	.li .item {
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}

	.li .itemMain {
		width: 100%;
	}

	.li .itemMain.Edit {
		width: calc(100% - 35rpx);
		margin-left: 15rpx;
	}

	.item .itemLeft {
		width: calc(100% - 120rpx);
	}

	.item .itemRight {
		width: 120rpx;

	}

	.li .btn {
		width: 100rpx;
		height: 50rpx;
		border-radius: 30rpx;
		text-align: center;
		line-height: 50rpx;
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;

	}

	.li .btn.btn-default {
		background-color: #AED600;
		color: #000000;

	}

	.li .btn.active {

		background: #3a3a3a;

		color: #ffffff99;


	}

	.item .itemLeft .title {
		color: rgba(255, 255, 255, 0.87);

		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 400;

		letter-spacing: 0.14rpx;
		text-align: left;
	}

	.item .itemLeft .smallTitle {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;

		width: calc(100% - 50rpx);
		margin-top: 5rpx;
		color: rgba(255, 255, 255, 0.6);

		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;

		letter-spacing: 0.14px;

	}

	.item .itemLeft .img {
		width: 30rpx;
		height: 30rpx;
	}

	.itemIcon {
		width: 40rpx;
		height: 40rpx;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 0.4);
		border-radius: 8rpx;
		color: #00000000;
	}

	.itemIcon .img {
		width: 28rpx;
		height: 20rpx;
	}

	.itemIcon.check {
		background-color: #BBE600;
		color: #000000;
	}

	.footer {
		width: 100%;
		min-height: 220rpx;
		height: auto;
		position: fixed;
		z-index: 99;
		bottom: 0rpx;
		left: 0rpx;
		box-sizing: border-box;
		border-radius: 16rpx 16rpx 0px 0px;
		/* background: #000000; */
		padding-bottom: 120rpx;
	}

	.footer .addContent {
		height: 100%;
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-evenly;
		align-items: center;

	}

	.footer .addContent .addItem {
		width: 140rpx;
		height: 180rpx;

		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		justify-content: center;
		align-items: center;

		box-sizing: border-box;
	}

	.addItem .imgContent {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8px;
		background: rgba(26, 26, 26, 1);
	}

	.addItem .imgContent .img {
		width: 60rpx;
		height: 52rpx;
	}

	.addItem .txt {
		color: rgba(255, 255, 255, 0.87);

		font-family: PingFang SC;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0.14px;
		text-align: center;
	}

	.footer .btn-del {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 180rpx;
		background: rgba(224, 52, 52, 1);

		color: rgba(255, 255, 255, 0.87);

		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 400;

		letter-spacing: 12rpx;
		text-align: center;

	}

	.editContent {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		align-items: flex-start;
		width: 100%;
		height: 100%;
		justify-content: flex-end;
	}
</style>