<template>
	<!-- 商城分类 -->
	<!-- 商品分类列表 -->
	<view class="shopCategory">
		<view class="toptabbar flex">
			<view class="toptabbaritem flex1" :class="{active:navactive==0}" @tap="tagglenav(0)">
				<view class="navnames">添加{{keyname}}</view>
			</view>
			<view class="toptabbaritem flex1" :class="{active:navactive==1}" @tap="tagglenav(1)">
				<view class="navnames">{{keyname}}管理</view>
			</view>
		</view>
		
		<!-- 添加分类的盒子 -->
		<view class="addcategory" v-if="navactive==0">
			<view class="cell_input flex ali-c">
				<view class="lablename">{{keyname}}名称:</view>
				<view class="inputboxs flex1">
					<input type="text" class="input" value="" maxlength="5" v-model="cate_name" placeholder="请输入分类名称" />
				</view>
			</view>
			
			<view class="cell_input flex ali-c " style="margin-top: 30upx;">
				<view class="lablename">分类排序:</view>
				<view class="inputboxs flex1">
					<input type="number" maxlength="3" class="input" value="" v-model="orderby" placeholder="请输入排序" />
				</view>
			</view>
			
			<view class="submitbtns" v-if="cate_id==''" @tap="addEditType(1)" >添加{{keyname}}</view>
			<view class="submitbtns" v-else @tap="addEditType(2)" >修改{{keyname}}</view>
			
			<view class="submitbtns" v-if="cate_id!=''" @tap="Closechange" >取消修改</view>
			
		</view>
		
		<!-- 分类列表 -->
		<view class="categorylist" v-if="navactive==1">
			<view class="listnames">{{keyname}}列表</view>
			<view class="categorylist_body">
				<view class="categorylist_item flex ali-c jus-b" v-for="(item,index) in catefiryList" :key="index">
					<view class="tagname">{{item.cate_name}}</view>
					<view class="sysbtns flex ali-c">
						<view class="btns" @tap="delcate(item)">删除</view>
						<view class="changetag" @tap="editcate(item)">编辑</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {shopCate,addEditCate,deleteCate} from "@/utils/api/api.js";
	
	// import {getGoodsCate} from "@/utils/api/api.js";
	export default {
		data() {
			return {
				navactive:1,//tab的选中  0是添加  1是分类管理
				keyname:"分类",//分类
				pagetype:1,//1分类 2属性
				catefiryList:[],
				cate_name:"",//分类名称
				orderby:"",//排序
				cate_id:"",
				
			};
		},
		onLoad(opdata) {
			// this.pagetype =opdata.type;
			// let keyname = opdata.type==1?"分类":"属性";
			// this.keyname = keyname;//关键名称
			// uni.setNavigationBarTitle({
			// 	title:keyname+"管理",
			// })
			
			
			
			this.typeManagerfun();
			
		},
		methods:{
			//获取商家分类列表
			async typeManagerfun(){
				let res = await shopCate({
					 
				});
				if(res.code==0){
					this.catefiryList =  res.data;
				}else{
					this.$api.msg(res.msg);
				}
			},
			//取消修改
			Closechange(){
				this.cate_id = "";
				this.cate_name = "";//重置输入框
				this.orderby = 100;
			},
			//tab切换
			tagglenav(numbers){
				this.navactive = numbers;
			},
			
			//添加 修改 分类 商城的
			async addEditType(types){
				let can = {
					cate_name:this.cate_name,//分类名称
					orderby:this.orderby,
				}
				if(!this.orderby){
					can.orderby = 100;
				}
				//修改的时候
				if(types==2){
					can.cate_id = this.cate_id;
				}
				let res = await addEditCate(can);
				if(res.code==0){
					this.$api.msg(res.msg);
					//添加修改成功后重新获取列表
					this.navactive =1;
					this.cate_name = "";
					this.orderby = 100;
					this.typeManagerfun();
				}else{
					this.$api.msg(res.msg);
				}
			},
			//删除分类方法
			delcate(data){
				uni.showModal({
				    title: '提示',
					cancelColor:"#ff6900",
					confirmColor:"#ff6900",
				    content: `你是否要删除(${data.cate_name})?`,
				    success:  (res1)=> {
				        if (res1.confirm) {
				          deleteCate({
				           	cate_id:data.cate_id,
				          }).then((res)=>{
							if(res.code==0){
								this.$api.msg(res.msg);
								this.typeManagerfun();
							}else{
								this.$api.msg(res.msg);
							}
						  })
				        } else if (res1.cancel) {
				        }
				    }
				});
				
			},
			//编辑分类方法
			editcate(data){
				this.cate_id = data.cate_id;
				this.cate_name = data.cate_name;
				this.orderby = data.orderby;
				this.navactive = 0;
			}
		},
		watch:{
			navactive(){
				if(this.navactive==0){
					//添加分类
				}else{
					//分类管理
				}
			}
		}
	}
</script>

<style lang="scss">
	@import  "./storeCategory.scss";
</style>
