<template>
	<view>
		<view class="uni-flex ai-center jc-around menu-list">
			<MenuItem
				v-for="(item,index) in menuList"
				:key="index"
				:item="item"
				round="true"
				size="28"
				:src="activeType==item.id? item.active: item.src"
				:nameStyle="activeType==item.id ? 'color:#5B96E9' :'color:#808D97'"
				:imageBoxStyle="(activeType==item.id ? 'background:#f0f7fe;' : 'background:#f6f7f8;')+'height:75rpx;width:75rpx;padding: 18rpx;'"
				@handleClick="handleClick"
				>
			</MenuItem>
		</view>
		<view v-if="pageData.list.length>0">
			<list-unit v-for="(item,index) in pageData.list" :key="index" :item="item" :i="index" @goDetail="goDetail"></list-unit>
		</view>
		<view v-else-if="!pageData.loading" style="height: 100%;">
			<noFound :nodata="pageData.list.length>0 ? false : true"/>
		</view>
		<view class="load-more" v-if="pageData.list.length>0">
			<text>{{!pageData.isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
		</view>
		<UniPop :show="showPop" @hidePopup="closePop" type="bottom" @touchmove.prevent round="true">
			<view class="pb24" style="min-height: 550rpx;">
				<!-- <view class="moduleTitle">日期</view>
				<view class="uni-flex align-center">
					<view v-for="(d,index) in dateList" :key="index" @click="selectDate(index)" class="tag-item" :class="{'actived':dateIndex==index}">{{d.name}}</view>
				</view> -->
				<view class="moduleTitle">业务类型</view>
				<view class="uni-flex ai-center menu-list">
					<MenuItem
						v-for="(item,index) in selectList"
						:key="index"
						:item="item"
						size="60"
						:nameStyle="selectTypeIndex==item.typeId ? 'color:'+(colors[index]? colors[index]: colors[index-colors.length]) : 'color:#120E2B'"
						:imageBoxStyle="'background:'+(colors[index]? colors[index]: colors[index-colors.length])+';height:74rpx;width:74rpx;border-radius:20rpx;line-height:74rpx;'"
						@handleClick="bindPartChange"
						>
					</MenuItem>
				</view>
				<view class="popbtn" @click="reloadList">确定</view>
			</view>
		</UniPop>
	</view>
</template>

<script>
	import ListUnit from './components/businessUnit.vue'
	import MenuItem from '@/components/menu/menuItem.vue'
	import UniPop from '@/components/uni-popup.vue'
	export default {
		data() {
			return {
				activeType: 2000, // 数据审批状态 2000 待审批，3000 未通过， 9000 已通过
				selectTypeIndex: '4,7,8',
				showPop: false,
				pageData: {
					pageIndex: 1,
					pageSize: 20,
					isEnd: false,
					loading: true,
					list: []
				},
				menuList: [
					{
						name: '待审批',
						src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenp.png',
						active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenpz.png',
						id: 2000
					},{
						name: '已处理',
						src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichl.png',
						active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichlz.png',
						id: '3000,9000'
					},
					// {
					// 	name: '已发起',
					// 	src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifq.png',
					// 	active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifqz.png',
					// 	id: 2
					// },
					{
						name: '更多筛选',
						src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shaix.png',
						active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shaixz.png',
						id: 4
					},
				],
				colors: ['#5B96E9','#F0A038','#5B96E9','#57BAAE','#D9675C','#5B96E9','#57BAAE'],
				selectList: [
					{
						name: '全部',
						src: '../../../../../static/images/expense/type/qb.png',
						typeId: '4,7,8'
					},
					{
						name: '新增门店',
						src: '../../../../../static/images/expense/type/add-shop.png',
						typeId: 4
					},{
						name:'门店状态',
						src: '../../../../../static/images/expense/type/shop-state.png',
						typeId: 7
					}
					,{
						name:'资料完善',
						src: '../../../../../static/images/expense/type/fksp.png',
						typeId: 8
					}

				],
			}
		},
		components:{
			ListUnit,
			MenuItem,
			UniPop
		},
		methods: {
			closePop(){
				this.showPop= false
			},
			handleClick(item){
				if(item.id==4){
					this.showPop = true
				}else{
					this.activeType = item.id
					this.reloadList()
				}
			},
			bindPartChange(item){
				// this.popOldValue[1] = this.selectTypeIndex
				this.selectTypeIndex =  item.typeId
			},
			goDetail(item){
				this.$util.toNextRoute('navigateTo', "/pages/authorityApproval/detail?id=" + item.id +'&type='+item.type)
			},
			reloadList() {
				this.showPop = false
				this.pageData.pageIndex = 1
				uni.showLoading({
					title: '正在加载'
				})
				this.pageData.isEnd = false
				this.getData()
				this.$forceUpdate()
			},
			getData() {
				let _this = this
				this.$request.$webGet('/CommercialApi/BusinessProcess/GetBusinessProcessList', {
						OperationType: _this.selectTypeIndex, // 只查询门店审批
						pageIndex: _this.pageData.pageIndex,
						pageSize: _this.pageData.pageSize,
						BusinessProcessState: _this.activeType,
						// SortStr: 'BusinessProcess_State,BusinessProcess_StartDate desc'
				}).then(res => {

					uni.hideLoading()
					if (res.Result_Code !== 100) {
						_this.pageData.loading=false
						return
					}
					const list = res.Result_Data.List.map(n => {
						return {
							id: n.BusinessProcess_ID,
							name: n.BusinessProcess_Name,
							serverpart: n.Serverpart_Name,
							username: n.Staff_Name,
							date: n.BusinessProcess_StartDate,
							state: n.BusinessProcess_State,
							title: n.BusinessProcess_Desc,
							type: n.Operation_Type

						}
					})
					this.pageData.list = _this.pageData.pageIndex===1 ? list : this.pageData.list.concat(list)

					if(list.length<_this.pageData.pageSize){
						_this.pageData.isEnd = true
					}
					_this.pageData.loading = false
				})
			},
			loadMore() {
				if (!this.pageData.isEnd) {
					this.pageData.pageIndex += 1
					this.getData()
				}
			},
		},
		onPullDownRefresh() {
			this.pageData.pageIndex = 1
			this.pageData.isEnd = false
			uni.showLoading({
				title: '正在加载'
			})
			this.pageData.list=[]
			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			this.loadMore()
		},
		onLoad() {
			uni.showLoading()
			this.pageData.isLoading = true

		},
		onShow() {
			this.getData()
		}
	}
</script>

<style>
.menu-list {
	width: 100%;
	background-color: #fff;
	flex-wrap: wrap;
}
.moduleTitle {
	text-align: left;
	margin: 16rpx 0 0 24rpx;
	font-weight: 700;
	font-size: 30rpx;
	padding: 24rpx 0 12rpx 0;
}
.popbtn {
	width: 639rpx;
	height: 80rpx;
	line-height: 80rpx;
	color: #fff;
	font-size: 28rpx;
	background: #5b96e9;
	border-radius: 40rpx;
	/* margin-top: 48rpx; */
	margin: 48rpx auto 0 auto;
	transform: translateY(88%);
}
</style>
