<template>
	<view class="container">
		<Navbar title="我的气瓶" :canBack="true"></Navbar>
		<view class="" v-show="!isScan">
			<u-sticky bgColor="#fff">
				<u-tabs :list="statusList" lineColor="#EA5707" :current="current" :activeStyle="activeStyle"
					:itemStyle="itemStyle" @change="tabChange"></u-tabs>
			</u-sticky>
			<view class="lineCss">
				<u-line></u-line>
			</view>
			<view class="searchCss flex justify-between">
				<view class="flex">
					<u-search v-model="keyword" bgColor="#fff" borderColor="#EC1E19" :clearabled="true"
						placeholder="请输入气瓶条码搜索" :actionStyle="actionStyle" @custom="onSearch"></u-search>
				</view>
				<view class="flex" @click="openScan">
					<u-icon name="scan" size="25"></u-icon>
				</view>
			</view>
			<view class="gasCardCss usuallyCard" v-for="(item,index) in gasBottleList" :key="`${$assignKeys(item.id)}`">
				<view class="flex flex-direction">
					<view class="flex justify-between align-center">
						<view class="text-lg">
							气瓶条码：{{item.fQptm}}
						</view>
						<view class="">
							<u-tag :text="item.fZt" :bgColor="item.fZt=='使用中'?'#E6F7F7':(item.fZt=='退气中'?'#FFF6E6':'#EA5707')"
								:color="item.fZt=='使用中'?'#00AEAA':(item.fZt=='退气中'?'#FFAE77':'#fff')"
								borderColor="#fff"></u-tag>
						</view>
					</view>
					<view class="flex justify-between align-center margin-top">
						<view class="text-gray">
							气瓶规格：<text class="text-black">{{item.fQpgg}} {{item.fCzjz}} </text>
						</view>
						<view class="text-gray">
							气瓶重量：<text class="text-black">{{item.fQpgg}}</text>
						</view>
					</view>
					<view class="flex justify-between align-center margin-top-sm">
						<view class="text-gray">
							安装时间：{{item.fCjsj}}
						</view>
					</view>
					<u-divider></u-divider>
					<view class="flex justify-between align-center">
						<view class="flex flex-direction">
							<view class="text-gray">
								供应商家:<text class="text-black">{{item.fAzczmc}}</text>
							</view>
							<view class="text-gray margin-top-xs">
								对应单号：{{item.fDddh}}
							</view>
						</view>
					</view>
					<view class="flex justify-end margin-top" v-if="current === 0">
						<view class="w30" @click="handleTp(item)">
							<u-button plain shape="circle" style="height: 30px;">{{item.fZt === '使用中'?'申请退瓶':'退气中'}}</u-button>
						</view>
						<view class="w30 margin-left-sm" @click="handleViewDetail(item)">
							<u-button plain shape="circle" style="height: 30px;">查看详情</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
			v-if="!gasBottleList.length && !loading"></u-empty>
		<u-loadmore :status="status" marginTop="20" height="10" marginBottom="10"
			v-if="gasBottleList.length>0 && !loading" />
		<u-loading-icon text="加载中" style="display: flex;align-items: center; margin-top: 100px;"
			:show="loading"></u-loading-icon>
		<ScanCode ref="scanCode" @scanCode="getCode" @close="closeScanWindow"></ScanCode>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				loading: false,
				statusList: [{
					name: `在用气瓶(0)`,
					id: 1
				}, {
					name: '历史用气(0)',
					id: 2
				}],
				total: null,
				gasBottleList: [],
				status: "loadmore",
				activeStyle: {
					'color': '#EA5707',
					'fontSize': '16px',
					'fontWeight': 'bold'
				},
				itemStyle: {
					'width': '50%',
					'height': '50px',
				},
				actionStyle: {
					'color': '#fff',
					'background': '#EC1E19',
					'borderRadius': "15px",
					'width': '60px',
					'height': '25px',
					'line-height': '25px',
				},
				keyword: "",
				current: 0,
				stats: {
					zyqp: 0,
					ydqp: 0,
				},
				pageParams: {
					current: 1,
					size: 10,
					tabCurrent: '使用中'
				},
				isScan: false
			}
		},
		computed: {

		},
		async onShow() {
			await this.getQpNum();
		},
		async onLoad(options) {
			if (options.type) {
				console.log('打印options', options);
				switch (options.type) {
					case 'ydqp':
						this.current = 1;
						this.pageParams.tabCurrent = '';
						break;
					case 'zyqp':
						this.current = 0;
						this.pageParams.tabCurrent = '使用中';
						break;
				}
			}
			uni.$on('scanCode', (code) => {
				console.log("获取code", code);
				this.keyword = code;
				this.getCode(code);
			});
			console.log('打印11')
			this.pageParams.current = 1;
		},
		onPullDownRefresh() {
			this.gasBottleList = []
			//调用获取数据方法
			this.getGasBottleData()
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			let allTotal = this.pageParams.current * this.pageParams.size
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.pageParams.current++;
				this.status = 'loading';
				setTimeout(() => {
					this.getGasBottleData()
				}, 500)
			} else {
				this.status = 'nomore'
				// console.log('已加载全部数据')
			}
		},
		methods: {
			//查找历史用气，再用气瓶的数量
			async getQpNum() {
				const result = await this.$api.loginApi.getUserInfo({yhlx:'hy'});
				let {
					code,
					value
				} = result
				if (code == 200) {
					let {
						stats
					} = value;
					this.stats = {
						...stats
					};
					this.statusList[0].name = `在用气瓶(${this.stats.zyqp})`;
					this.statusList[1].name = `历史用气(${this.stats.ydqp})`;
					console.log('打印this.stats', this.stats)
				}
				await this.getGasBottleData();
			},
			tabChange(e) {
				console.log(e);
				this.current = e.index;
				this.pageParams.tabCurrent = e.index == 0 ? "使用中" : null;
				this.gasBottleList = [];
				this.initQuery();
			},
			async initQuery() {
				this.pageParams.current = 1;
				await this.getGasBottleData();
			},
			async getGasBottleData() {
				this.loading = true;
				console.log('打印this.pageParams.tabCurrent', this.pageParams.tabCurrent);
				let params = {
					size: 10,
					current: this.pageParams.current,
					zt: this.pageParams.tabCurrent
				}
				if (this.keyword) {
					params.qptm = this.keyword;
				}
				let result = await this.$api.gasBottleApi.getGasBottleList(params);
				let {
					code,
					value
				} = result;
				if (code == 200) {
					let {
						current,
						records,
						size,
						total
					} = value;
					let allTotal = this.pageParams.current * this.pageParams.size
					this.total = total
					const newlist = records;
					if (this.pageParams.current === 1) {
						this.gasBottleList = newlist;
					} else {
						this.gasBottleList.push(...newlist)
					}
					if (this.gasBottleList.length < allTotal) {
						this.status = 'nomore'
					}
					this.loading = false;
				}
			},
			onSearch(e) {
				this.getGasBottleData();
				console.log("搜索", e);
			},
			async getCode(code) {
				let query = {
					qptm: code
				}
				const result = await this.$api.gasApi.getDetailByQuery(query);
				let {
					state,
					message
				} = result;
				this.$modal.closeLoading();
				if (!state) {
					uni.$u.toast(message)
					return;
				}
				this.keyword = code;
				this.$refs.scanCode.close();
				this.initQuery();
			},
			openScan() {
				//组件模式
				// this.isScan = true;
				// this.$refs.scanCode.open();
				uni.navigateTo({
					url: "/pages/scan/scanCode?mode=2"
				})
			},
			closeScanWindow() {
				this.isScan = false;
			},
			// 退瓶
			async handleTp(item) {
				if(item.fZt === '退气中'){
					uni.$u.toast('已申请退气');
					return;
				}
				console.log('item',JSON.parse(JSON.stringify(item)));
				this.$modal.confirm('确认将当前气瓶申请退瓶？', '温馨提示').then(async () => {
					const result = await this.$api.memberApi.savewTqgl(item.id);
					console.log(result);
					let {code,state,message} = result;
					if(code === 200 && state){
						uni.$u.toast('申请退瓶成功');
						this.getQpNum();
					}else{
						uni.$u.toast(message)
					}
				}).catch(() => {

				});
			},
			handleViewDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/home/gasBottle?qpid=" + item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 10px;
		// background-color: #f1f1f1 !important;
	}

	.searchCss {
		// margin: 10px;
		padding: 10px;
		background: #fff;
	}

	.gasCardCss {
		margin: 10px;
		padding: 20px 10px;
	}

	/deep/.u-search__content {
		width: 85vw;
		padding-right: 70px;
	}

	/deep/.u-search__action {
		position: absolute;
		right: 15%;
	}
</style>