<template>
	<view class="container">
		<Navbar title="气瓶回收列表" :canBack="true"></Navbar>
		<view class="" v-show="!isScan">
			<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':'#fff6e6'"
								:color="item.fZt=='使用中'?'#00AEAA':'#ffa500'"
								:borderColor="item.fZt=='使用中'?'#E6F7F7':'#fff6e6'"></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 class="flex" v-if="current === 0">
              <u-button plain shape="circle" style="height: 30px;" color="#EA5504">退瓶</u-button>
            </view> -->
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="!gasBottleList.length"></u-empty>
		<u-loadmore :status="status" marginTop="20" height="10" marginBottom="10" v-else />
		<ScanCode ref="scanCode" @scanCode="getCode" @close="closeScanWindow"></ScanCode>
	</view>
</template>

<script>
	export default {
		name: 'deaerationList',
		components: {},
		props: {

		},
		data() {
			return {
				// 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: {

		},
		onShow() {},
		async onLoad(options) {
			this.pageParams.current = 1;
			await this.getGasBottleData();
			uni.$on('scanCode', (code) => {
				console.log("获取code", code);
				this.keyword = code;
				this.getCode(code);
			});
		},
		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 getGasBottleData() {
				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'
					}
				}
			},
			onSearch(e) {
				this.getGasBottleData();
			},
			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();
			},
			//初始化搜索
			async initQuery() {
				this.pageParams.current = 1;
				await this.getGasBottleData();
			},
			openScan() {
				//组件模式
				// this.isScan = true;
				// this.$refs.scanCode.open();
				uni.navigateTo({
					url: "/pages/scan/scanCode?mode=2"
				})
			},
			closeScanWindow() {
				this.isScan = false;
			}
		}
	}
</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>