<template>
	<div>
		<i-page-header :title="pageTitle"></i-page-header>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<div class="fx-r" style="padding: 20px 0;">
				<el-input placeholder="绑定的手机号" style="width:120px" class="mr10" v-model="detial.mobile" />
				<el-input placeholder="用户昵称" style="width:120px" class="mr10" v-model="detial.nickname" />
				<el-input placeholder="用户UID" style="width:120px" class="mr10" v-model="detial.uid" />
				<el-select v-model="detial.work_type_id" placeholder="选择职业">
					<el-option :label="item.title" :value="item.id" v-for="(item,index) in workeTypeList"
						:key="index"></el-option>
				</el-select>
				<!-- workeTypeList -->


				<el-button type="primary" style="margin-left: 6px;" @click="tapSeach">查询</el-button>
				<div class="fx-g1"></div>
			</div>
			<div class="muser-tab-continer">
				<a class="muser-tab-a" :class="detial.status==''   ? 'active':''" @click="statusChange('')">全部</a>
				<a class="muser-tab-a" :class="detial.status=='-1'  ? 'active':''" @click="statusChange('-1')">禁用</a>
				<a class="muser-tab-a" :class="detial.status=='1'  ? 'active':''" @click="statusChange('1')">使用</a>
			</div>
			<el-table :data="detial.data" v-loading="detial.loading" :stripe="true" :border="true">
				<el-table-column prop="uid" label="UID" width="80" align="center">
				</el-table-column>
				<el-table-column prop="avatar" label="头像" width="80" align="left">
					<template slot-scope="scope">
						<img v-lazy="scope.row.avatar" :src="scope.row.avatar" v-image-preview
							style="width: 60px;cursor: pointer;" />
					</template>
				</el-table-column>

				<el-table-column prop="mobile" width="100" label="绑定手机">
				</el-table-column>
				<el-table-column prop="show_temp_seq" width="100" label="名片排序">
				</el-table-column>
				<el-table-column prop="nickname" label="昵称">
				</el-table-column>
				<el-table-column prop="work_type_id" align="center" label="职业名称" width="100">
					<template slot-scope="scope">
						<div v-if="scope.row.work_type_id == 0" style="color: #9B9B9B">普通用户</div>
						<div v-if="scope.row.work_type_id>0" style="color: #00ac1c">{{scope.row.work_type_title}}</div>
					</template>
				</el-table-column>
				<!-- 				<el-table-column
				        prop="money"
				        label="余额">
				</el-table-column> -->
				<el-table-column prop="showTempCount" label="名片模板">
					<template slot-scope="scope">
						<i-link
							:to="'/system/user/showTemplateList?uid=' + scope.row.uid + '&title=' +scope.row.nickname+ '的模板' ">
							({{scope.row.showTempCount}}) 查看
						</i-link>
					</template>
				</el-table-column>
				<el-table-column prop="is_info_audit" label="资料审核" width="80" align="left">
					<template slot-scope="scope">
						<el-tag type="success" size="mini" v-if="scope.row.is_info_audit == 1">已审核</el-tag>
						<el-tag type="danger" size="mini" v-if="scope.row.is_info_audit == 0">未审核</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="is_type_audit" label="平台认证" width="80" align="left">
					<template slot-scope="scope">
						<el-tag type="success" size="mini" v-if="scope.row.is_type_audit == 1">已认证</el-tag>
						<el-tag type="danger" size="mini" v-if="scope.row.is_type_audit == 0">未认证</el-tag>
					</template>
				</el-table-column>

				<!-- <el-table-column
				          prop="ercode"
				          label="推广码"
				 		 width="80"
				          align="left">
				      <template slot-scope="scope">
				 		 <img  v-lazy="scope.row.ercode" :src="scope.row.ercode" v-image-preview style="width: 60px;cursor: pointer;"/>
				      </template>
				  </el-table-column> -->
				<!-- <el-table-column prop="is_show" label="是否展示" width="80" align="left">
					<template slot-scope="scope">
						<el-tag type="success" size="mini" v-if="scope.row.is_show == 1">展示</el-tag>
						<el-tag type="danger" size="mini" v-if="scope.row.is_show == 0">隐藏</el-tag>
					</template>
				</el-table-column> -->
				<el-table-column align="center" label="操作" prop="handle" width="150" fixed="right">
					<template slot-scope="scope">
						<div>
							<!-- <el-button type="primary" size="mini" v-if="scope.row.is_show == 0 && scope.row.is_info_audit == 1" @click="makeShow(scope.row)">显示</el-button>
							<el-button type="danger" size="mini" v-if="scope.row.is_show == 1 && scope.row.is_info_audit == 1" @click="makeShow(scope.row)">隐藏</el-button>
							 --><el-button plain size="mini" @click="tapEdit(scope.row)" >编辑</el-button>
							<!-- <Divider type="vertical"/>
							<i-link :to="'/system/order/index?uid=' + scope.row.uid + '&title=' +scope.row.nickname+ '的订单列表' ">
								<el-button plain size="mini" >订单</el-button>
							</i-link> -->
						</div>
						<div style="margin-top: 10px;">
							<!-- <i-link :to="'/system/circle/list?uid=' + scope.row.uid + '&title=' +scope.row.nickname+ '的动态列表' ">
								<el-button plain size="mini" >圈子</el-button>
							</i-link>
							<Divider type="vertical"/> -->
							<!-- <i-link :to="'/system/user/moneyDetail?uid=' + scope.row.uid + '&title=' +scope.row.nickname+ '的余额明细' ">
								<el-button plain size="mini" >余额</el-button>
							</i-link> -->
							<!-- 							<Divider type="vertical"/>
							<i-link :to="'/system/user/scoreDetail?uid=' + scope.row.uid + '&title=' +scope.row.nickname+ '的积分明细' ">
								<el-button plain size="mini" >积分</el-button>
							</i-link> -->
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="acea-row row-right page">
				<Page :total="detial.pageCount" show-elevator show-total @on-change="tapPage"
					:page-size="detial.pageSize" />
			</div>
		</Card>

		<Modal v-model="dialogVisible" :title="title" @on-cancel="editClose">
			<el-form ref="form" :model="form" label-width="120px">
				<el-divider content-position="left">设置</el-divider>
				<el-form-item label="名片排序">
					<el-input placeholder="请输入名片排序" v-model="form.show_temp_seq"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="subAdmin">确 定</el-button>
			</span>
		</Modal>

	</div>
</template>
<script>
	import {
		SystemWorkerList,
		SystemWorkerSave,
		SystemUserWorkTypeList,
		setAuthShow
	} from "../../../api/system/user";

	import IPageHeader from "../../../layouts/system/page-header/index";
	import UiUpload from "@/ui/upload/index";
	import Setting from '@/setting';
	export default {
		name: "SystemWorkerList",
		components: {
			UiUpload,
			IPageHeader
		},
		computed: {},
		data() {
			return {
				pageTitle: '从业人员',
				upHeaders: {},
				upUrl: "",
				labelsData: [],
				detial: {
					data: [],
					time: "",
					nickname: "",
					mobile: "",
					status: "",
					uid: "",
					work_type_id: "",
					is_show: 1,
					page: 1,
					loading: true,
					pageSize: 0,
					pageCount: 0,
				},

				options: {
					shortcuts: [{
							text: '今天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date()
									.getDate()));
								return [start, end];
							}
						},
						{
							text: '昨天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate() - 1)));
								end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate())));
								return [start, end];
							}
						},
						{
							text: '最近7天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate() - 6)));
								return [start, end];
							}
						},
						{
							text: '最近30天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate() - 29)));
								return [start, end];
							}
						},
						{
							text: '本月',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									1)));
								return [start, end];
							}
						},
						{
							text: '本年',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
								return [start, end];
							}
						}
					]
				},

				dialogVisible: false,
				title: "",
				form: {
					show_temp_seq: 0,
				},
				workeTypeList: [],
			}
		},

		created() {
			if (this.$route.query.title) {
				this.pageTitle = this.$route.query.title;
			}
			if (this.$route.query.uid) {
				this.detial.uid = parseInt(this.$route.query.uid);
			}
			if (this.$route.query.parent_uid) {
				this.detial.parent_uid = parseInt(this.$route.query.parent_uid);
			}
			this.initView();
		},
		methods: {
			/**
			 * 添加
			 */
			tapAdd: function(sassid) {
				this.dialogVisible = true;
				this.$refs['form'].resetFields();
				this.form = this.$utils.resetFields(this.form, {
					show_temp_seq: 0
				});
			},
			initView: function() {
				var upHeaders = {};
				this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
				const token = this.$utils.util.cookies.get('system_token');
				if (token) {
					upHeaders['SYSTEM-ACC-TOKEN'] = token;
				}
				this.upHeaders = upHeaders;
				this.getData();
				this.getTypeData();
			},
			getTypeData: function() {
				SystemUserWorkTypeList({
					page: 1,
				}).then(res => {
					this.workeTypeList = [{
						id: "",
						title: "全部职业"
					}].concat(res.data.list);
				}).catch(err => {});

			},
			statusChange: function(status) {
				this.detial.status = status;
				this.detial.page = 1
				this.getData()
			},
			/**
			 * 上传文件
			 * @param res
			 */
			onUpload: function(res) {
				if (res.code == -1) {
					Notice.error({
						title: "系统提示",
						content: res.msg
					});
				} else {
					this.form.imgs.push(res.data.img);
				}
			},
			tapEdit: function(row) {
				this.form = JSON.parse(JSON.stringify(row));
				this.dialogVisible = true;
				this.title = "编辑";
			},
			//关闭
			editClose: function() {
				this.dialogVisible = false;
			},
			/**
			 * 修改数据
			 */
			subAdmin: function(e) {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						let loading = this.$loading("提交数据中...");
						var data = {};
						for (var i in this.form) {
							data[i] = this.form[i];
						}
						SystemWorkerSave(data)
							.then(res => {
								loading.close();
								if (res.code == 200) {
									this.dialogVisible = false;
									this.$Message.success("操作成功");
									this.getData();
								} else {
									this.$alert(res.msg, '系统提示');
								}
							})
							.catch(err => {
								loading.close();
								this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
							});
					}
				});
			},


			//搜索栏目
			tapSeach: function() {
				this.detial.page = 1;
				this.getData();
			},
			tapUserSeach: function(uid) {
				this.detial.page = 1;
				this.detial.uid = uid;
				this.getData();
			},
			//分页
			tapPage: function(page) {
				this.detial.page = page;
				this.getData();
			},
			getData: function() {
				var data = {};
				this.detial.loading = true;
				data.page = this.detial.page;
				data.status = this.detial.status;
				data.uid = this.detial.uid;
				data.nickname = this.detial.nickname;
				data.mobile = this.detial.mobile;
				data.work_type_id = this.detial.work_type_id;
				SystemWorkerList(data)
					.then(res => {
						this.detial.loading = false;
						this.detial.data = res.data.list;
						console.log(this.detial.data[0].is_show,'ddddddddddddd');
						this.detial.pageSize = res.data.pageSize;
						this.detial.pageCount = res.data.pageCount;
						this.detial.waitCount = res.data.waitCount;
					})
					.catch(err => {
						this.detial.loading = false;
						this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示');
					});
			},
			//
			makeShow(item) {
				console.log(item);
				setAuthShow({
					uid: item.uid,
					is_show: item.is_show
				}).then(res => {
					this.$Message.success("操作成功");
					this.tapSeach()
				})
			}

		}
	}
</script>
<style scoped>
	iframe.videoIframe {
		border: 0px;
		padding: 0px;
	}

	.el-dialog__body {
		padding: 0px;
	}

	.el-dialog__body iframe body {
		padding: 0px;
	}

	.muser-tab-continer {
		border: 1px solid #EEEEEE
	}

	a.muser-tab-a {
		display: inline-block;
		padding: 0px 28px;
		height: 42px;
		line-height: 42px;
		border-bottom: 3px solid transparent;
		font-size: 17px;
		color: #595959;
	}

	a.muser-tab-a.active {
		border-bottom: 3px solid #EA312B;
		color: #EA312B
	}

	.upimg-item {
		width: 82px;
		height: 82px;
		margin-right: 5px;
		overflow: hidden;
		float: left;
		margin-bottom: 5px;
		position: relative;
	}

	.upimg-item img {
		width: 82px;
		cursor: pointer;
	}

	.img-remove-btn {
		position: absolute;
		top: 0px;
		right: 0px;
		font-size: 24px;
	}
</style>