<template>
	<view class="foodclassify" style="padding: 30upx;">
		<far-bottom></far-bottom>
		<view >
			 <button type="primary" plain="true" style="border-radius: 60upx;height: 80upx;line-height: 78upx;font-size: 30upx;" @click="onShows">添加分类</button>
		</view>
		<view  style="padding-top: 30upx;">
			<view class="dis-flex" style="background-color: #f8f8f8;padding: 30upx;margin-bottom: 30upx;" v-for="(item,index) in classList" :key="index">
				<view  style="flex: 0.6;">
					<view class="f-30" style="padding-bottom: 20upx;">
						<view class="dis-il-block" style="vertical-align: bottom;">
							{{item.name}} 
						</view>
						<view class="dis-il-block" style="padding-left: 20upx;vertical-align: bottom;padding-bottom: 3upx;">
						<image class="iconbox" :src="imgfixUrls + 'centerMerchant/clerksuccess.png'" v-if="item.status == 1" />
						<image class="iconbox" :src="imgfixUrls + 'centerMerchant/clerkjian.png'" v-if="item.status == 0" />	
						</view>
					</view>
					<view class="f-24" style="color: #999999;">
						排序:<text style="padding-left: 20upx;">{{item.sort}}</text>
					</view>
				</view>
				<view  style="flex: 0.5;padding-top: 15upx;">
					<view  style="float: right;">
						<button type="primary" plain="true" class="btn" style="margin-right: 20upx;" @click="compile(item)">编辑</button>
						<button type="warn" plain="true" class="btn" @click="exspot(item)">删除</button>
					</view>
				</view>
			</view>
		</view>
		<popup-view :show="show" type="center" @clickmask="onShows" :bottom="'0%'">
			<view class="b-f" style="padding: 30upx;width: 70vw;border-radius: 15upx;">
				<view class="tilte t-c f-32" style="padding-bottom: 20upx;">
					{{tilte}}分类
					<view style="float: right;" class="iconfont icon-guanbijiantou" @click="close"></view>
				</view>
				<view class="home dis-flex" style="padding: 30upx 0 ;border-bottom: 1px solid #f1f1f1;">
					<view class="t-r f-30" style="flex: 0.3;color: #999999;line-height: 60upx;">
						分类名称
					</view>
					<view  style="flex: 0.7;padding-left: 20upx;">
						<input v-if="show" class="uni-input" placeholder="请输入分类的名称" v-model="className" />
					</view>
					
				</view>
				<view class="home dis-flex"  style="padding: 30upx 0 ;border-bottom: 1px solid #f1f1f1;">
					<view class="t-r f-30" style="flex: 0.3;color: #999999;line-height: 60upx;">
						排序
					</view>
					<view  style="flex: 0.7;padding-left: 20upx;">
						<input v-if="show" class="uni-input" placeholder="请输入排序数字" v-model="sortNum" />
					</view>
					
				</view>
				<view class="home dis-flex"  style="padding: 30upx 0 ;border-bottom: 1px solid #f1f1f1;" v-if="tilte == '编辑'">
					<view class="t-r f-30" style="flex: 0.3;color: #999999;line-height: 60upx;">
						分类开关
					</view>
					<view  style="flex: 0.7;padding-left: 20upx;">
						 <switch :checked="status=='1'?true:false" @change="switch2Change" />
					</view>
					
				</view>
				<button type="primary" style="height: 70upx;line-height: 68upx;font-size: 30upx;margin-top: 100upx;" @click="addOrComlit">确认</button>
			</view>
		</popup-view>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	import PopupView from '@/components/template/PopManager.vue'
	export default{
		components:{
			PopupView
		},
		data(){
			return{
				show:false,
				className:'',
				sortNum:'',
				tilte:'添加',
				classList:[],
				storeId:'',
				id:'',
				status:0
			}
		},
		onLoad() {
			this.init();
		},
		methods:{
			switch2Change(e){
				console.log(e);
				this.status = e.detail.value?1:0
			},
			addOrComlit(){
				let data={
					id:this.id,
					storeid:this.storeId,
					name:this.className,
					sort:this.sortNum,
					status:this.status
				}
				App._post_form(`&p=citydelivery&do=addCate`,data,res=>{
					console.log(res);
					uni.showToast({
						title:'操作成功',
						icon:'none'
					});
					this.close();
					this.init();
				})
			},
			getClass(id){
				App._post_form(`&p=citydelivery&do=storeCateList&storeid=${id}`,{},res=>{
					console.log(res);
					this.classList = res.data.list;
				})
			},
			init(){
				let _this = this;
				uni.getStorage({
					key: 'checkStoreid',
					success: function(res) {
						_this.storeId = res.data;
						_this.getClass(res.data);
					}
				});
			},
			compile(item){
				this.tilte = '编辑';
				this.id = item.id;
				this.className = item.name;
				this.sortNum = item.sort;
				this.status = item.status;
				this.show = !this.show;
			},
			close(){
				this.className = '';
				this.sortNum = '';
				this.status = false;
				this.show = !this.show;
			},
			onShows(){
				this.show = !this.show;
				this.tilte = '添加';
				this.id = '';
			},
			withdraw(id){
				App._post_form(`&p=citydelivery&do=deleteCate&id=${id}`,{},res=>{
					console.log(res);
					uni.showToast({
						title:'删除成功',
						icon:'none'
					});
					this.init();
				})
			},
			exspot(item){
				App.showError(
					`确定删除该分类"${item.name}"?`, (data) => {
						if (data.confirm) {
							!!data && this.withdraw(item.id)
						}
					}, true)
			}
		}
	}
</script>
<style lang="scss">
	.uni-input{
		display: inline-block;
	}
	.btn{
		width: 120rpx;
		height: 55rpx;
		line-height: 53rpx;
		margin: 0;
		display: inline-block;
		font-size: 24rpx;
	}
	.home{
		// padding-top: 10upx;
		text-align: center;
	}
	.iconbox{
		vertical-align: middle;
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
	}
</style>
