<template>
	<view class="content">
		<navseat :opacity='false' :title='"开票员列表"' :titleshow='true' :namecolor='"#fff"' iconcolor='#fff'></navseat>
		<view class="contentitem" v-for="(item,index) in list" :key="index">
			<view class="contentitemtop flex-start">
				<view>{{item.name}}</view>
				<text>开票员</text>
			</view>
			<view class="contentitembotton">
				{{item.dlzh}}
			</view>
			<view class="contentitemabsolute flex-start" @click="szzpydeltaxation(item)">
				<image src="https://czg-invoicing.oss-cn-beijing.aliyuncs.com/static/drawerlistdelete.png" mode="aspectFill"></image>
				<text>删除</text>
			</view>
		</view>
		<view class="contentitemadd flex-start" @click="clickadd">
			<u-icon name="plus-circle-fill" color="#2979ff" size="16"></u-icon>
			<view>添加开票员</view>
		</view>
	</view>
</template>
<script>
	import dayjs from 'dayjs'
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		data() {
			return {
				list: []
			};
		},
		onLoad(e) {},
		onShow() {
			this.szzpynewissuedbylist()
		},
		methods: {
			async szzpynewissuedbylist() {
				let res = await this.api.szzpynewissuedbylist({
					store_id: uni.cache.get('userId')
				})
				this.list = res.data
			},
			async szzpydeltaxation(item) {
				uni.showModal({
					title: '提示',
					content: '确认删除吗？',
					success: async (res) => {
						if (res.confirm) {
							let time = dayjs().unix()
							await this.api.szzpydeltaxation({
								id: item.id,
								del_sign: uni.utils.md5(time + '|||' +
									'cab37132-fae4-4031-8549-e49aa89f7631'),
								time_str: time,
								store_id: uni.cache.get('userId')
							})
							this.szzpynewissuedbylist()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			clickadd() {
				uni.pro.navigateTo('index/drawer');
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		padding: 32rpx 28rpx;

		.contentitem:nth-child(1) {
			margin-top: 0;
		}

		.contentitem {
			position: relative;
			margin-top: 32rpx;
			width: 100%;
			padding: 32rpx 24rpx;
			background: url(https://czg-invoicing.oss-cn-beijing.aliyuncs.com/static/drawerlist.png) no-repeat;
			background-size: 100% 100%;

			.contentitemabsolute {
				position: absolute;
				right: 24rpx;
				top: 32rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				text {
					margin-left: 8rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.contentitemtop {
				view {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
				}

				text {
					margin-left: 16rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.71);
				}
			}

			.contentitembotton {
				margin-top: 24rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.contentitemadd {
			margin-top: 32rpx;
			padding: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 18rpx;

			view {
				margin-left: 10rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
</style>