<template>
	<view class="addType">
		<view v-for="item in datas.list">
			<view class="">
				{{item.conTypeName}}<up-icon color="#64A7FE" name="edit-pen" @tap="showoneEvent(item)"></up-icon>
			</view>
			<view class="">
				是否启用 &nbsp;&nbsp;
				<up-switch checked="true" activeValue="1" size="20" inactiveValue="0"
					@change="switchChangeEvent($event,item)" :modelValue="item.status" style="transform:scale(0.7)" />
			</view>
		</view>
	</view>
	<view style="margin-top: 100rpx; padding: 0 28rpx;">
		<up-button type="primary" style="background-color:  #318AFE;color: #fff;" @tap="datas.showtwo=true"
			:plain="true" text="添加"></up-button>
	</view>
	<!-- 新增类别 -->
	<up-popup :show="datas.showtwo" :round="18" mode="center" @close="close">
		<view class="zhezhaopops">
			<view class="">
				<span></span>
				<span>新增类别</span>
				<up-icon @tap="datas.showtwo=false" name="close-circle-fill"></up-icon>
			</view>
			<view style="margin-bottom: 28rpx;">
				耗材类型名称<input type="text" v-model="datas.conTypeName" />
			</view>
			<view class="">
				是否禁用
				<up-switch checked="true" activeValue="1" inactiveValue="0" @change="switchChange"
					:modelValue="datas.status" style="transform:scale(0.7)" />
			</view>
			<up-button text="确认" @tap="confirmtow" type="primary" class="buttomStyle" shape="circle"></up-button>
		</view>
	</up-popup>
	<!-- 编辑 -->
	<up-popup :show="datas.showone" :round="18" mode="center" @close="close">
		<view class="zhezhaopops">
			<view class="">
				<span></span>
				<span>编辑类别</span>
				<up-icon @tap="datas.showone=false" name="close-circle-fill"></up-icon>
			</view>
			<view style="margin-bottom: 28rpx;">
				耗材类型名称<input type="text" v-model="datas.conTypeName" />
			</view>
			<up-button text="确认" @tap="confirmone" type="primary" class="buttomStyle" shape="circle"></up-button>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from 'vue';
	import {
		tbConsTypeList,
		tbConsType,
		edittbConsTypeput
	} from '@/http/yskApi/requestAll.js';

	let datas = reactive({
		list: [],
		showtwo: false,
		conTypeName: "",
		status: "0",
		showone: false,
		activeData: ""
	})
	onMounted(() => {
		gettbConsTypeList()
	})
	let showoneEvent = (d) => {
		datas.showone = true
		datas.conTypeName = d.conTypeName
		datas.activeData = d
	}
	let switchChange = (d) => {
		datas.status = d
	}
	let switchChangeEvent = (d, item) => {
		let obj = {
			...item
		}
		obj.status = d
		edittbConsTypeput(obj).then(res => {
			gettbConsTypeList()
		})
	}

	function confirmtow() {
		tbConsType({
			conTypeName: datas.conTypeName,
			shopId: uni.getStorageSync("shopId"),
			status: datas.status
		}).then(res => {
			datas.showtwo = false
			datas.conTypeName = ""
			datas.status = 0
			gettbConsTypeList()
		})
	}
	let confirmone = () => {
		edittbConsTypeput({
			...datas.activeData,
			conTypeName: datas.conTypeName
		}).then(res => {
			gettbConsTypeList()
			datas.showone = false
		})
	}
	let close = () => {
		datas.conName = ""
		datas.status = "0"
	}
	let gettbConsTypeList = () => {
		datas.typeLists = ['全部']
		tbConsTypeList({
			page: 0,
			size: 30,
			shopId: uni.getStorageSync("shopId"),
		}).then(res => {
			datas.list = res.content
		})
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style scoped lang="less">
	ul,
	li {
		list-style: none;
		padding: 0;
	}

	.addType {
		padding: 0 28rpx;

		>view {
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32rpx;
			padding: 0 24rpx;

			>view {
				display: flex;
				align-items: center;

			}
		}
	}

	.zhezhaopops {
		padding: 34rpx 32rpx;
		width: 594rpx;
		// height: 566rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;

		>view:first-child {
			.df;
			justify-content: space-between;

			>span:nth-child(2) {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}

		>view:nth-child(2) {

			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			font-size: 14px;
			color: #333333;
			margin-top: 64rpx;

			>input {
				margin-top: 24rpx;
				width: 492rpx;
				height: 84rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #E5E5E5;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
		}

		>view:nth-child(3) {
			margin-top: 48rpx;
			.df;
			justify-content: space-between;
		}



		.buttomStyle {
			margin-top: 48rpx;
			width: 506rpx;
			height: 80rpx;
		}
	}

	.df() {
		display: flex;
		align-items: center;
	}
</style>