<template>
	<view>
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback">
			<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<view class="sticky-tabs">
				<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
			</view>
			
			<view class="flex-around mat15 pick-border">
				<view>
					<picker @change="searchDaysChange" :value="createFixedTimeVal" :range="searchDays" :range-key="'name'">
						<view class="">
							<text>{{createFixedTimeVal ? searchDays[createFixedTimeVal].name : '请选择时间'}}</text>
						</view>
					</picker>
				</view>
				<view>
					<!-- <picker mode="date" :value="flowDatesSelect" @change="relatedtimeChange">
						<view class="">
							<text>{{flowDatesSelect ? flowDatesSelect : '请选择时间范围'}}</text>

						</view>
					</picker> -->
					<text v-if="startTime == ''" type="primary" @click="onShowDatePicker('range')">选择日期范围</text>
					<text v-else @click="onShowDatePicker('range')">{{startTime}} — {{endTime}}</text>
				</view>
				<view>
					<picker @change="departmentChange" :value="departmentIdVal" :range="departmentList" :range-key="'name'">
						<view class="">
							<text>{{departmentIdVal ? departmentList[departmentIdVal].name : '请选择部门'}}</text>
						</view>
					</picker>
				</view>
			</view>					
			
			<view>
				<view v-for="(item,index) in list" :key="index">
					<view class="good-list">
						<view class="charge" :id="'index-' + item.name" :data-index="item.name">
							<view class="charge-title flex-between">
								<text>{{item.name}}</text>
							</view>
							<view class="charge-text" v-for="(item,index) in item.nodeList" :key="index">
								<view>
									<text class="label-text">节点：</text>
									<text class="mgl30">{{item.depName}}</text>
								</view>
								<view>
									<text class="label-text">累计耗时/天：</text>
									<text class="mgl30">{{item.name}}</text>
								</view>
								<view>
									<text class="label-text">审批次数：</text>
									<text class="mgl30">{{item.number}}次</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<mx-date-picker :show="showPicker" :type="type"
		:value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" 
		:show-seconds="true" @confirm="onSelected" @cancel="onSelected" @reset="onReset"/>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MxDatePicker
		},
		data() {
			return {
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: [],
				type: 'rangetime',
				value: '',
								
				tabs:[
					{name:'全部', value: ''},
					{name:'已撤销', value: 0},
					{name:'进行中', value: 1},
					{name:'已完成', value: 2},
					{name:'已否决', value: 3}
					],
				tabIndex: 0, // 当前菜单下标
				totals: 0,
				page: {
					num: 1,
					size: 10,
				},
				
				searchDays:[
					{ value: '', name: '不限' },
					{ value: 0, name: '今天' },
					{ value: 1, name: '昨天' },
					{ value: 2, name: '本周' },
					{ value: 3, name: '本月' },
					{ value: 4, name: '本年' },
				],
				list: [],
				departmentList: [],
				depMatching: [],
				chartsData: [],
				chartsName: [],
				
				createFixedTimeVal: '',
				createFixedTime:'',
				departmentIdVal: '',
				departmentId:'',
				startTime:'',
				endTime:'',
				flowStatus:''
			};
		},
		mounted() {
			this.listDepartment()
			this.businessCount()
		},
		methods: {
			onShowDatePicker(type){//显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			onSelected(e) {//选择
				this.showPicker = false;
				if(e) {
					this[this.type] = e.value; 
					//选择的值
					this.startTime = this.range[0].replace(/\//g, "-")
					this.endTime = this.range[1].replace(/\//g, "-")
					this.getData()
				}
			},
			onReset(){
				this.showPicker = false;
				this.range = []
				this.startTime = ''
				this.endTime = ''
				this.getData()
			},
			searchDaysChange(e){
				this.createFixedTimeVal = e.detail.value
				this.createFixedTime = this.searchDays[e.detail.value].value
				this.getData()
			},
			
			relatedtimeChange(e) {
				this.startTime = e.detail.value
				this.getData()
			},
			
			departmentChange(e){
				this.departmentIdVal = e.detail.value
				this.departmentId = this.departmentList[+e.detail.value].id
				this.getData()
			},
			
			// 部门数据
			async listDepartment(){
				let res= await this.$http.get('/api-hrms/hrms/dept/listDepartment')
				this.departmentList = res.data
				this.getData()
			},
			// 状态数量
			async businessCount(){
				let res= await this.$http.get('/api-guarantee/guarantee/efficiency/businessCount')
				this.teamStatus = []
				if(res.data && res.data.length !== 0){
					this.teamStatus = res.data
				}
			},
			getData(){
				this.$http.post('/api-guarantee/guarantee/efficiency/team',{
					createFixedTime: this.createFixedTime,
					departmentId: this.departmentId,
					startTime: this.startTime,
					endTime: this.endTime,
					flowStatus: this.flowStatus
				}).then(res => {
					let obj = Object.keys(res.data);
					if(obj.length != 0){
						let valArr = []
						for(let i in res.data){ 
							if(res.data.length===0) return
							let arr = [{
							depName: '业务申请',	
							number: 0,
							name: '0'
						},
						{
							depName: '担保部调查',
							number: 0,
							name: '0'
						},
						{
							depName: '资产部调查',
							number: 0,
							name: '0'
						},
						{
							depName: '信息部调查',
							number: 0,
							name: '0'
						},
						{
							depName: '合规调查',	
							number: 0,
							name: '0'
						},
						{
							depName: '工作会',
							number: 0,
							name: '0'
						},
						{
							depName: '贷审会',
							number: 0,
							name: '0'
						},
						{
							depName: '担保函',
							number: 0,
							name: '0'
						},
						{
							depName: '回款确认',	
							number: 0,
							name: '0'
						},
						{
							depName: '放款通知',	
							number: 0,
							name: '0'
						}]
						
							// 分离出来第几个数组有数据
							// 循环子级，分离数据
							for(let e in res.data[i]){
								// 时间的处理
								arr[e-1].name = this.getDuration(res.data[i][e].slice(0,res.data[i][e].indexOf(',')))
								arr[e-1].number = res.data[i][e].slice(res.data[i][e].indexOf(',')+1,res.data[i][e].length)
								arr[e-1].depName = this.core.processNode(e)
							}
							valArr.push(arr)
						}
						let keyArr = []
						keyArr = Object.keys(res.data)
						let newArr = keyArr.map(item => ({id:item}))
						for(let i=0;i<newArr.length;i++){
							newArr[i].nodeList = valArr[i]
						}
						this.departmentList.map(e =>{
							newArr.map(r =>{
								if(e.id == r.id){
									r.name = e.name
								}
							})
						})
						this.list = newArr
						this.mescroll.endErr();
					}else{
						this.mescroll.endErr();
					}
				}).catch(()=>{
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				// this.mescroll.resetUpScroll()
				this.getData()
			},
			// 切换菜单
			tabChange (index) {
				this.flowStatus = this.tabs[index].value;//当前下标的值
				this.list = []; // 置空列表,显示加载进度条
				this.getData()
			},
			getDuration(my_time) {  
				let days = my_time / 1000 / 60 / 60 / 24;
				let daysRound = Math.floor(days);
				let hours = my_time / 1000 / 60 / 60 - (24 * daysRound);
				let hoursRound = Math.floor(hours);
				let minutes = my_time / 1000 / 60 - (24 * 60 * daysRound) - (60 * hoursRound);
				let minutesRound = Math.floor(minutes);
				let seconds = my_time / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
				let timeStr = daysRound + '天'+ hoursRound + '时'+ minutesRound + '分'
				// let time = hoursRound + ':' + minutesRound + ':' + seconds // 生成 标准时间格式
				return timeStr;
			},
			getTimeNum(my_time){
				let days    = my_time / 1000 / 60 / 60 / 24;
				let daysRound = Math.floor(days);
				let hours = my_time / 1000 / 60 / 60 - (24 * daysRound);
				let hoursRound = Math.floor(hours);
				let minutes = my_time / 1000 / 60 - (24 * 60 * daysRound) - (60 * hoursRound);
				let minutesRound = Math.floor(minutes);
				let time = daysRound+(hoursRound / 24)+(minutesRound/60/24)
				time.toFixed(2)
				// if(time === 0) time = 0.1
				return time
			},
		}
	}
</script>

<style lang="scss" scoped>
.cu-bar .search-form{
	border: 2rpx solid #00B9FF;
	border-radius: 20rpx;
	background-color: #fff;
	margin: 0 50rpx;
	height: 72rpx;
	line-height: 72rpx;
	margin-top: 20rpx;
	input{
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 40rpx;
	}
	.cuIcon-search{
		margin: 0 20rpx;
	}
}
.add-customer{
	padding: 0 50rpx;
	button{
		background-color: #00B9FF;
		border-radius: 30rpx;
		.mar-icon{
			margin-right: 10rpx;
		}
	}
}
.pick-border{
	border-bottom: 8rpx solid #00B9FF;
	padding-bottom: 30rpx;
}
</style>
