<template>
	<div>
		<Menu mode="horizontal" theme="light" active-name="51" @on-select='changeSelect'>
			<MenuItem name="51">
			销售业绩
			</MenuItem>
			<MenuItem name="70">
			手工业绩
			</MenuItem>
		</Menu>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Card :bordered="false" dis-hover :padding="0">
				<Form ref="formValidate" :model="formValidate" :label-width="labelWidth" :label-position="labelPosition"
					@submit.native.prevent>
					<Button type="primary" @click="groupAdd(1)" class="mr20">添加数据</Button>
				</Form>
				<Table :columns="columns1" :data="tabList" ref="table" class="ivu-mt" :loading="loading" highlight-row
					no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
					<template slot-scope="{ row, index }" slot="action">
						<a @click="groupAdd(2,row)">编辑</a>
						<Divider type="vertical" />
						<a @click="del(row,'删除这条信息',index)">删除</a>
					</template>
				</Table>
				<div class="acea-row row-right page">
					<Page :total="total" :current="formValidate.page" show-elevator show-total @on-change="pageChange"
						:page-size="formValidate.limit" />
				</div>
			</Card>
		</Card>
		<Modal v-model="modals" scrollable :title="tit" class="order_box" :closable="false">
			<Form :label-width="80" @submit.native.prevent>
				<FormItem label="等级：" prop="level">
					<Input v-model="updata.level" type="text" style="width: 100%" />
				</FormItem>
				<FormItem label="业绩：" prop="step">
					<Input v-model="updata.step" type="text" style="width: 100%" />
				</FormItem>
				<FormItem label="排序：" prop="sort">
					<Input v-model="updata.sort" type="text" style="width: 100%" />
				</FormItem>
				<FormItem label="提成比例：" prop="ratio">
					<Input v-model="updata.ratio" type="text" style="width: 100%" />
				</FormItem>
				<FormItem label="股权：" prop="shareholding">
					<Input v-model="updata.shareholding" type="text" style="width: 100%" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="primary" @click="goCancal">提交</Button>
				<Button @click="modals = false">取消</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		groupDataListApi,
		groupDataHeaderApi,
	} from '@/api/system'
	import Setting from "@/setting";
	import {
		addJt,
		editJt
	} from '@/api/setting'
	export default {
		name: 'list',
		data() {
			return {
				chooseRow: {},
				editId: 0,
				type: 1,
				tit: '添加',
				modals: false,
				updata: {
					gid: 51,
					level: '',
					ratio: '',
					shareholding: '',
					sort: 1,
					status: 1,
					step: ''
				},
				id: 51,
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24
				},
				formValidate: {
					status: '',
					page: 1,
					limit: 20,
					gid: 51
				},
				total: 0,
				tabList: [],
				columns1: [],
				loading: false,
			}
		},
		computed: {
			...mapState('admin/layout', [
				'isMobile'
			]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'right';
			}
		},
		mounted() {
			this.getList();
			this.getListHeader()
		},
		methods: {
			// 选中对象
			changeSelect(res) {
				this.id = res;
				this.formValidate = {
					status: '',
					page: 1,
					limit: 20,
					gid: this.id
				};
				this.getList();
				console.log(res);
			},
			goCancal() {
				if (!this.updata.level) {
					return this.$Message.error('请输入等级')
				}
				if (!this.updata.ratio) {
					return this.$Message.error('请输入等级比例')
				}
				if (!this.updata.step) {
					return this.$Message.error('请输入业绩')
				}
				if (!this.updata.shareholding) {
					return this.$Message.error('请输入股权')
				}
				if (!this.updata.sort) {
					return this.$Message.error('请输入排序')
				}
				let index = this.tabList.find(item => {
					return item.level == this.updata.level
				})

				if (this.type == 1) {
					if (index) {
						return this.$Message.error('该等级已使用')
					}
					addJt(this.updata).then(res => {
						this.$Message.success(res.msg)
						this.getList()
						this.cancal()
					}).catch(err => {
						this.$Message.error(err.msg)
					})
				} else {
					if (index && index.level != this.chooseRow.level) {
						console.log(index, 'index')
						return this.$Message.error('该等级已使用')
					}
					editJt(this.editId, this.updata).then(res => {
						this.getList()
						this.cancal()
						this.$Message.success(res.msg)
					}).catch(err => {
						this.$Message.error(err.msg)
					})
				}
			},
			cancal() {
				this.updata = {
					gid: this.id,
					level: '',
					ratio: '',
					shareholding: '',
					sort: 1,
					status: 1,
					step: ''
				}
				this.modals = false
			},
			getUrl(type) {
				let url = 'setting/group_data' + type;
				if (this.id) {
					let arr = {
						'setting_groupDataSign': 'setting/sign_data' + type,
						'setting_groupDataOrder': 'setting/order_data' + type,
						'setting_groupDataUser': 'setting/usermenu_data' + type,
						'setting_groupDataPoster': 'setting/poster_data' + type,
						'marketing_storeSeckillData': 'setting/seckill_data' + type
					};
					if (arr[this.$route.name] === undefined) return url
					return arr[this.$route.name]
				} else {
					return url
				}
			},
			// 列表
			getList() {
				this.loading = true
				this.formValidate.gid = this.id ? this.id : this.formValidate.gid
				this.formValidate.status = this.formValidate.status || ''
				groupDataListApi(this.formValidate, this.getUrl('')).then(async res => {
					let data = res.data
					this.tabList = data.list
					this.total = data.count
					this.loading = false
				}).catch(res => {
					this.loading = false
					this.$Message.error(res.msg)
				})
			},
			// 表格头部
			getListHeader() {
				this.loading = true
				let data = {
					gid: this.id ? this.id : this.formValidate.gid
				}
				groupDataHeaderApi(data, this.getUrl('/header')).then(async res => {
					let data = res.data
					let header = data.header
					let index = []
					header.forEach(function(item, i) {
						if (item.type === 'img') {
							index.push(i)
						}
					})
					index.forEach(function(item) {
						header[item].render = (h, params) => {
							let arr = params.row[header[item].key]
							let newArr = []
							if (arr !== undefined && arr.length) {
								arr.forEach(function(e, i) {
									newArr.push(h('div', {
										style: {
											width: '36px',
											height: '36px',
											'border-radius': '4px',
											cursor: 'pointer',
											display: 'inline-block'
										}
									}, [
										h('img', {
											attrs: {
												src: params.row[header[
													item].key][i]
											},
											style: {
												width: '100%',
												height: '100%'
											}
										})
									]))
								})
							}
							return h('viewer', newArr)
						}
					})
					header.forEach((item, index) => {
						if (item.title == '是否可用') {
							header.splice(index, 1)
						}
					})
					this.columns1 = header
					console.log(header, '滴答滴答滴答滴答滴答滴答')
					this.loading = false
				}).catch(res => {
					this.loading = false
					this.$Message.error(res.msg)
				})
			},
			pageChange(index) {
				this.formValidate.page = index
				this.getList()
			},
			// 表格搜索
			userSearchs() {
				this.formValidate.page = 1
				this.getList()
			},
			// 添加表单
			groupAdd(index, item) {
				this.type = index
				if (index == 1) {
					this.tit = '添加业绩'
					this.updata.gid = this.id;
				} else {
					this.tit = '编辑业绩'
					this.chooseRow = item;
					this.editId = item.id;
					this.updata.level = item.level;
					this.updata.ratio = item.ratio;
					this.updata.shareholding = item.shareholding;
					this.updata.sort = item.sort;
					this.updata.step = item.step;
					this.updata.gid = this.id;
				}
				this.modals = true
			},
			del (row, tit, num) {
			    let delfromData = {
			        title: tit,
			        num: num,
			        url: this.getUrl(`/${row.id}`),
			        method: 'DELETE',
			        ids: ''
			    }
			    this.$modalSure(delfromData).then((res) => {
			        this.$Message.success(res.msg)
			        this.tabList.splice(num, 1)
			    }).catch(res => {
			        this.$Message.error(res.msg)
			    })
			}

		}
	}
</script>

<style scoped lang="stylus">
	/deep/ .ivu-menu-vertical .ivu-menu-item-group-title {
		display: none;
	}

	/deep/ .ivu-menu-vertical.ivu-menu-light:after {
		display: none;
	}

	.left-wrapper {
		height: 904px;
		background: #fff;
		border-right: 1px solid #dcdee2;
	}

	.menu-item {
		// z-index 50
		position: relative;
		display: flex;
		justify-content: space-between;
		word-break: break-all;

		.icon-box {
			z-index: 3;
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			display: none;
		}

		&:hover {
			.icon-box {
				display: block;
			}
		}

		.right-menu {
			z-index: 10;
			position: absolute;
			right: -106px;
			top: -11px;
			width: auto;
			min-width: 121px;
		}
	}

	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

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

	.ivu-menu {
		z-index auto;
	}
</style>