<template>
	<!-- 用户-客服管理-客服列表 -->
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- 添加客服 -->
			<Row type="flex" class="mb20">
				<Col span="24">
				<Button v-auth="['admin-agent-global-add']" type="primary" @click="add" class="mr10">添加</Button>
				</Col>
			</Row>
			<!-- 客服列表表格 -->
			<Table :columns="columns1" :data="tableList" :loading="loading" highlight-row no-userFrom-text="暂无数据"
				no-filtered-userFrom-text="暂无筛选结果">
				<template slot-scope="{ row }" slot="avatar">
					<viewer>
						<div class="tabBox_img">
							<img v-lazy="row.user[0].avatar" />
						</div>
					</viewer>
				</template>
				<template slot-scope="{ row }" slot="nickname">
					<viewer>
						<div>{{row.user[0].nickname}}</div>
					</viewer>
				</template>
				<template slot-scope="{ row }" slot="phone">
					<viewer>
						<div>{{row.user[0].phone}}</div>
					</viewer>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<a @click="edit(row)">编辑</a>
					<Divider type="vertical" />
					<a @click="del(row, '删除', index)">删除</a>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" show-elevator show-total @on-change="pageChange" :page-size="tableFrom.limit" />
			</div>
		</Card>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import util from "@/libs/util";
	import Setting from "@/setting";
	import {
		kefuListApi,
		kefucreateApi,
		kefuaddApi,
		kefuAddApi,
		kefusetStatusApi,
		kefuEditApi,
		kefuRecordApi,
		kefuChatlistApi,
		kefuLogin,
	} from "@/api/setting";
	import { globalList } from '@/api/agent'
	export default {
		name: "index",
		filters: {
			typeFilter(status) {
				const statusMap = {
					wechat: "微信用户",
					routine: "小程序用户",
				};
				return statusMap[status];
			},
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			...mapState("admin/userLevel", ["categoryId"]),
			labelWidth() {
				return this.isMobile ? undefined : 80;
			},
			labelPosition() {
				return this.isMobile ? "top" : "left";
			},
		},
		data() {
			return {
				isChat: true,
				formValidate3: {
					page: 1,
					limit: 15,
				},
				total3: 0,
				loading3: false,
				modals3: false,
				tableList3: [],
				columns3: [{
						title: "用户名称",
						key: "nickname",
						width: 200,
					},
					{
						title: "客服头像",
						slot: "headimgurl",
					},
					{
						title: "操作",
						slot: "action",
					},
				],
				formValidate5: {
					page: 1,
					limit: 15,
					uid: 0,
					to_uid: 0,
					id: 0,
				},
				total5: 0,
				loading5: false,
				tableList5: [],
				columns5: [{
						title: "用户名称",
						key: "nickname",
						width: 200,
					},
					{
						title: "用户头像",
						slot: "avatar",
					},
					{
						title: "发送消息",
						key: "msn",
						width: 250,
					},
					{
						title: "发送时间",
						key: "add_time",
					},
				],
				FromData: null,
				formValidate: {
					page: 1,
					limit: 15,
					data: "",
					type: "",
					nickname: "",
				},
				tableList2: [],
				modals: false,
				total: 0,
				tableFrom: {
					page: 1,
					limit: 15,
				},
				timeVal: [],
				fromList: {
					title: "选择时间",
					custom: true,
					fromTxt: [{
							text: "全部",
							val: ""
						},
						{
							text: "今天",
							val: "today"
						},
						{
							text: "昨天",
							val: "yesterday"
						},
						{
							text: "最近7天",
							val: "lately7"
						},
						{
							text: "最近30天",
							val: "lately30"
						},
						{
							text: "本月",
							val: "month"
						},
						{
							text: "本年",
							val: "year"
						},
					],
				},
				loading: false,
				tableList: [],
				columns1: [{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: "头像",
						slot: "avatar",
						minWidth: 60,
					},
					{
						title: "昵称",
						slot: "nickname",
						minWidth: 120,
					},
					{
						title: "联系方式",
						slot: "phone",
						minWidth: 120,
					},
					{
						title: "全局奖励",
						key: "global_commission",
						minWidth: 120,
					},
					{
						title: "添加时间",
						key: "add_time",
						minWidth: 130,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						width: 200,
					},
				],
				columns4: [{
						type: "selection",
						width: 60,
						align: "center",
					},
					{
						title: "ID",
						key: "uid",
						width: 80,
					},
					{
						title: "微信用户名称",
						key: "nickname",
						minWidth: 160,
					},
					{
						title: "客服头像",
						slot: "headimgurl",
						minWidth: 60,
					},
					{
						title: "用户类型",
						slot: "user_type",
						width: 100,
					},
					{
						title: "性别",
						slot: "sex",
						minWidth: 60,
					},
					{
						title: "地区",
						slot: "country",
						minWidth: 120,
					},
					{
						title: "是否关注公众号",
						slot: "subscribe",
						minWidth: 120,
					},
				],
				loading2: false,
				total2: 0,
				addFrom: {
					uids: [],
				},
				selections: [],
				rows: {},
				rowRecord: {},
			};
		},
		created() {
			this.getList();
		},
		methods: {
			// 修改成功
			submitFail() {
				this.getList();
			},
			// 编辑
			edit(row) {
				// this.$modalForm(kefuEditApi(row.id)).then(() => this.getList());
				this.$router.push({
					path: "/admin/agent/global/add?id=" + row.id + '&uid=' + row.uid + '&name=' + row.user[0].nickname + '&global_commission=' + row.global_commission
				});
			},
			// 添加
			add() {
				this.$router.push({
					path: "/admin/agent/global/add"
				});
			},
			// 删除
			del(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `user/global/delete`,
					method: "post",
					ids: {
						id: row.id
					},
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.tableList.splice(num, 1);
						if (!this.tableList.length) {
							this.tableFrom.page =
								this.tableFrom.page == 1 ? 1 : this.tableFrom.page - 1;
						}
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 列表
			getList() {
				this.loading = true;
				globalList(this.tableFrom)
					.then(async (res) => {
						let data = res.data;
						this.tableList = data.list;
						this.total = res.data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			pageChange(index) {
				this.tableFrom.page = index;
				this.getList();
			},
		},
	};
</script>

<style scoped lang="stylus">
	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.modelBox {

		>>>,
		.ivu-table-header {
			width: 100% !important;
		}
	}

	.trees-coadd {
		width: 100%;
		height: 385px;

		.scollhide {
			width: 100%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: scroll;
		}
	}

	// margin-left: 18px;
	.scollhide::-webkit-scrollbar {
		display: none;
	}
</style>