<template>
	<view class="agent-technician-list" v-if="isLoad">
		<fixed>
			<view class="search-info fill-base pt-lg pb-md">
				<view class="flex-center pl-lg pr-lg pb-md">
					<view @tap.stop="$util.goUrl({url:`/agent/pages/technician/apply`})"
						class="dynamic-btn flex-center f-caption mr-lg radius"
						:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}">
						<i class="iconfont icon-jia-bold"></i>
						添加
					</view>
					<view class="flex-1">
						<search @input="toSearch" type="input" :padding="0" :radius="30" backgroundColor="#F0F0F0"
							:placeholder="placeholder">
						</search>
					</view>
				</view>
				<view style="padding-right:30rpx">
					<tab @change="handerTabChange" :isLine="true" :list="tabList" :activeIndex="activeIndex*1"
						color="#9D9D9D" :activeColor="primaryColor" :width="100/tabList.length + '%'" height="100rpx"
						:numberType="2"></tab>
				</view>
			</view>

		</fixed>
		<view @tap.stop="goDetail(index)" class="list-item fill-base flex-warp mt-md ml-md mr-md pd-lg radius-16"
			v-for="(item,index) in list.data" :key="index">
			<view>
				<view class="avatar rel">
					<!-- #ifdef H5 -->
					<view class="avatar radius">
						<view class="h5-image avatar radius" :style="{ backgroundImage : `url('${item.work_img}')`}">
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image mode="aspectFill" class="avatar radius" :src="item.work_img">
					</image>
					<!-- #endif -->
				</view>
				<view class="flex-center">
					<view class="item-tag flex-center f-icontext c-base radius-20"
						:class="[{'have-user':item.auth_status}]">
						{{authStatusType[item.auth_status]}}
					</view>
				</view>
			</view>

			<view class="flex-1 ml-md">
				<view class="flex-between">
					<view class="f-icontext c-paragraph">ID：{{item.id}}</view>
					<view class="f-paragraph"
						:style="{color:item.is_update==1?primaryColor:item.status==4?subColor:item.status==3?'#E82F21':'#999999'}">
						{{statusType[item.status]}}
					</view>
				</view>
				<view class="flex-y-center pb-lg b-1px-b">
					<view class="f-paragraph c-black text-bold max-400 ellipsis">{{item.coach_name}}</view>
					<view class="status-btn flex-center f-icontext ml-md"
						:style="{color:item.admin_add==1?primaryColor:subColor,border:`1rpx solid ${item.admin_add==1?primaryColor:subColor}`}">
						{{item.admin_add==1?'平台':'用户'}}
					</view>
				</view>
				<view class="f-icontext c-paragraph mt-md">{{item.mobile}}</view>
				<view class="f-icontext c-paragraph mt-sm">
					所属代理商：{{item.admin_name || '-'}}{{item.admin_id?` (${cityType[item.city_type]})`:''}}</view>
				<view class="f-icontext c-paragraph mt-sm">申请时间：{{item.create_time}}</view>
				<view class="flex-between mt-md" v-if="!item.is_update">
					<view></view>
					<view class="edit-btn flex-center f-desc radius"
						:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}">编辑</view>
				</view>
			</view>
		</view>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				options: {},
				placeholder: '请输入' + this.$t('action.attendantName') + '姓名/手机号',
				tabList: [{
					id: 0,
					title: '全部',
					number: 0
				}, {
					id: 1,
					title: '申请中',
					number: 0
				}, {
					id: 2,
					title: '已授权',
					number: 0
				}, {
					id: 3,
					title: '已驳回',
					number: 0
				}, {
					id: 4,
					title: '重新审核',
					number: 0
				}],
				activeIndex: 0,
				authStatusType: {
					0: '未认证',
					1: '认证中',
					2: '已认证',
					3: '认证失败'
				},
				statusType: {
					1: '申请中',
					2: '已授权',
					3: '取消授权',
					4: '已驳回'
				},
				cityType: {
					1: '城市',
					2: '区县',
					3: '省'
				},
				loading: true,
				isLoad: false,
				param: {
					page: 1,
					limit: 10,
					status: 0
				},
				list: {
					data: []
				}

			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.options = options
			uni.setNavigationBarTitle({
				title: this.$t('action.attendantName') + '管理'
			})
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.getList();
			},
			handerTabChange(index) {
				this.activeIndex = index
				this.param.status = index
				this.getList();
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex(true)
			},
			toSearch(val) {
				this.param.page = 1
				this.param.name = val
				this.getList()
			},
			async getList() {
				this.$util.showLoading()
				let {
					list: oldList,
					param
				} = this
				let newList = await this.$api.agent.coachList(param)
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.tabList[1].number = newList.ing
				this.isLoad = true
				this.loading = false
				this.$util.hideAll()
			},
			goDetail(index) {
				let {
					id,
					is_update
				} = this.list.data[index]
				if (is_update) return
				this.$util.goUrl({
					url: `/agent/pages/technician/apply?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.agent-technician-list {
		.search-info {
			width: 100%;

			.dynamic-btn {
				width: 134rpx;
				height: 56rpx;
				transform: rotateZ(360deg);

				.iconfont {
					font-size: 24rpx;
					margin-right: 6rpx;
				}
			}
		}

		.list-item {
			.avatar {
				width: 124rpx;
				height: 124rpx;
			}

			.item-tag {
				width: 100rpx;
				height: 32rpx;
				color: #4A4A4A;
				background: #D8D8D8;
				margin-top: 19rpx;
				margin-bottom: 6rpx;
			}

			.have-user {
				color: #EBDDB1;
				background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
			}

			.status-btn {
				width: 60rpx;
				height: 32rpx;
				border-radius: 5rpx;
				transform: rotateZ(360deg);
			}

			.edit-btn {
				width: 120rpx;
				height: 50rpx;
				transform: rotateZ(360deg);
			}

		}
	}
</style>