<template>
	<view class="survey-index-container">
		<uni-popup ref="popup" type="top" v-show="showPopMenu"><button @click="submitSurvey">提交</button><button>退回</button></uni-popup>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content"  style="height: 80vh; overflow: auto;">			
		<uni-card>
			<view v-if="current === 0">
				<appoint-survey-list></appoint-survey-list>
			</view>	
			<view v-if="current === 1">
				<wait-survey-list></wait-survey-list>
			</view>
			<view v-if="current === 2">
				<finish-survey-list></finish-survey-list>
			</view>
			<view v-if="current === 3">
				<back-survey-list></back-survey-list>
			</view>
		</uni-card>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import { waitSurvey } from '../../api/survey/survey'
	
	export default {
		components: {},
		data() {
			return {
				showPopMenu:false,
				items: ['待派单', '跟进中','已完成','已退单'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 1,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button',
				
				currentItem:{},
				list: []
            }
                
		},
		mounted() {
		    
		},
		created() {
			this.route = this.$route.query
			
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			styleChange(e) {
				if (this.styleType !== e.detail.value) {
					this.styleType = e.detail.value
				}
			},
			colorChange(e) {
				if (this.styleType !== e.detail.value) {
					
					this.activeColor = e.detail.value
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}
    .eva-label {
		margin-right: 20px;
		width: 170rpx;
	}
	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.survey-detail-container {
		margin-bottom: 100rpx;
		padding: 20rpx;
	}

	.btnSurvey {
		color: #ff6a00;
	}

	.line {
		width: 100%;
		height: 5rpx;
		background-color: #E6E6E6;
	}

	.line2 {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.desc {
		width: 70%;
		//background-color: #bb11ff;
	}

	.slot-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items:center;
		flex-wrap: wrap;
		//width: 80%;
	}

	.tag-view {
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14px;
	}

	.uni-input {
		height: 28px;
		line-height: 28px;
		font-size: 15px;
		padding: 0px;
		flex: 1;
		width: 280rpx;		
		background-color: #FFFFFF;
		text-align: center;
	}

	// .flex-item {
	// 	width: 33.3%;
	// 	height: 30rpx;
	// 	text-align: center;
	// 	line-height: 200rpx;
	// }
</style>
