<template>
	<view class="page1">
		<view style="width: 100%;position: fixed;top: 0;z-index: 99;">
			<view style="background: #fff;padding-top: 20rpx;display: flex;">
				<view @tap="$refs.getaPopup.open()" style="width: 100%;text-align: center;height: 80rpx;margin: 20rpx;background: #60F3FF;line-height: 80rpx;border-radius: 10px;color: #fff;">
					新增分类
				</view>
			</view>
		</view>
		<view style="margin-top:160rpx;">
			<view>
				<view class="list-1" v-for="item in categoryList" :key="item" @tap="clickList(item)"
					style="height: 100rpx;line-height: 100rpx;display: flex;">
					<view class="name-tel" style="width: 63%;">
						<text style="line-height: 75rpx;">{{item.categoryName}}</text>
					</view>
					<view style="display: flex;width: 37%;">
						<view class="name-edit" style="margin-right: 20rpx;" @tap.stop="delCateName(item)">
							删除
						</view>
						<view class="name-edit" @tap.stop="editCateName(item)">
							编辑
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!-- 弹出规格选择 -->
		<uni-popup ref="getaPopup" background-color="#fff" :is-mask-click="true">
			<view class="type-popup" style="margin-bottom: 0;border-radius: 0;">
				<view style="height: 80rpx;font-size: 36rpx;font-weight: bold;line-height: 80rpx;text-align: center;">
					{{categoryId != ''?'编辑分类':'新增分类'}}
				</view>
				<view style="color: #333;width: 90%;margin: 0 auto 20rpx;">
					<uni-easyinput v-model="categoryName" placeholder="请输入分类名"></uni-easyinput>
				</view>
				<view @tap="goAddClass"
					style="width: 100%;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 0;background: linear-gradient(90deg, #60F3FF, #088FEB);color: #fff;">
					<view>确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryList: [],
				categoryName:'',
				categoryId:''
			}
		},
		onShow(){
			
		},
		onLoad() {
			this.getCategoryList()
		},
		methods: {
			getCategoryList(){
				this.tui.request("/app/customerCategory/getCustomerCategoryListByShopId", "POST", {
					shopId:uni.getStorageSync('shopId')
				}, false, true).then((res) => {
					if (res.code == 200) {
						this.categoryList = res.result
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			goAddClass(){
				if(this.categoryName === ''){
					this.tui.toast('请输入客户分类名称')
					return
				}
				if(this.categoryId != ''){
					this.tui.request("/app/customerCategory/updateCustomerCategory", "POST", {
						shopId:uni.getStorageSync('shopId'),
						categoryName:this.categoryName,
						id:this.categoryId
					}, false, false).then((res) => {
						if (res.code == 200) {
							this.tui.toast('修改成功')
							this.categoryId = ''
							this.categoryName = ''
							this.$refs.getaPopup.close()
							this.getCategoryList()
						} else {
							this.tui.toast(res.message)
						}
					}).catch((res) => {})
				}else{
					this.tui.request("/app/customerCategory/addCustomerCategory", "POST", {
						shopId:uni.getStorageSync('shopId'),
						categoryName:this.categoryName
					}, false, false).then((res) => {
						if (res.code == 200) {
							this.tui.toast('新增成功')
							this.$refs.getaPopup.close()
							this.getCategoryList()
						} else {
							this.tui.toast(res.message)
						}
					}).catch((res) => {})
				}
				setTimeout(res=>{
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 1];
					prevPage.$vm.getCustomerCategoryList()
				},300)
			},
			delCateName(item){
				var that = this;
				uni.showModal({
					title: "提示",
					content: "确定删除此条分类吗？",
					success: function(res) {
						uni.showLoading({
							title: '加载中...'
						})
						if (res.confirm) {
							that.tui.request("/app/customerCategory/deleteCustomerCategory", "POST", {
								id:item.id
							}, false, true).then((res) => {
								if (res.code == 200) {
									that.tui.toast('删除成功')
									that.getCategoryList()
								} else {
									that.tui.toast(res.message)
								}
							}).catch((res) => {})
						}
						setTimeout(res => {
							uni.hideLoading();
						}, 500)
					}
				})
			},
			editCateName(item){
				this.categoryName = item.categoryName
				this.categoryId = item.id
				this.$refs.getaPopup.open()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,.page1{
		font-size: 28rpx;
	}
	.list-1 {
		border-bottom: 1px solid #eee;
		background: #fff;
		font-size: 32rpx;
		margin: 20rpx auto 0;
		width: 95%;
		padding-left: 30rpx;
		position: relative;
	}

	.name-tel {
		width: 75%;
		flex-direction: column;
		height: 100rpx;
		font-size: 30rpx;
		line-height: 100rpx;
	}
	.name-edit{
		width: 110rpx;
		height: 55rpx;
		background: #088FEB;
		color: #fff;
		font-size: 22rpx;
		line-height: 55rpx;
		text-align: center;
		border-radius: 5px;
		margin-top: 22.5rpx;
	}
	
	.type-popup {
		width: 500rpx;
		height: auto;
		max-height: 900rpx;
		overflow: scroll;
		background: #fff;
		border-radius: 10px;
		position: relative;
		margin-bottom: 40rpx;
	}

</style>
