<template>
	<div>
		<i-page-header class="product_tabs" title="分组列表">
		</i-page-header>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<div style="height: 30px;"></div>


			<Form ref="formValidate" :model="formValidate" :label-width="50">
				<Row type="flex" :gutter="24">
					<Col v-bind="grid">
					<FormItem label="搜索：" label-for="status2">
						<Input search enter-button placeholder="请输入分组标题" v-model="formValidate.title"
							@on-search="userSearchs" />
					</FormItem>
					</Col>
				</Row>
				<Row type="flex">
					<Col v-bind="grid">
					<Button type="primary" @click="tapAdd" icon="md-add">添加新分组</Button>
					</Col>
				</Row>
			</Form>

			<Table :columns="columns1" :data="tableData" class="mt25" no-userFrom-text="暂无数据"
				no-filtered-userFrom-text="暂无筛选结果" :loading="loading" highlight-row>

				     <template slot-scope="{ row, index }" slot="indeximg">
						 <img  :src="row.indeximg.indexOf('http') == -1 ? ('http://myj.liuniu946.com'+ row.indeximg) :  row.indeximg" v-image-preview style="width: 60px;cursor: pointer;"/>
				     </template>
					 <template slot-scope="{ row, index }" slot="audit" :style="{color: row.audit == 1 :  'rgb(0, 172, 28)': ''};">
						 <div>{{row.audit == 1 ?'通过': '审核中'}}</div>
					 </template>
				<template slot-scope="{ row, index }" slot="data">
					<div v-for="(item,index) in row.jsonAr" :key="index">
						{{ item.name}}：{{ item[item.code] }}
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<a @click="tapEdit(row)">编辑</a>
					<template v-if="row.recommend==0">
						<Divider type="vertical" />
						<a @click="changeRecommend(row)">轮播</a>
					</template>
					<template v-if="row.recommend==1">
						<Divider type="vertical" />
						<a @click="changeRecommend(row)">取消轮播</a>
					</template>
					<template>
						
					</template>
					<template v-if="row.audit == 0">
						<Divider type="vertical" />
						<a @click="changeAudit(row)">审核</a>
					</template>
					<template v-if="row.audit == 1">
						<Divider type="vertical" />
						<a @click="changeAudit(row)">取消审核</a>
					</template>
					<Divider type="vertical" />
					<a @click="del(row)">删除</a>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="page.count" show-elevator show-total @on-change="tapPage" :page-size="page.pageSize" />
			</div>
		</Card>
	</div>
</template>

<script>
	import {
		SystemGetArtList,
		SystemDelArt
	} from "../../../api/system/adver";
	import IPageHeader from "@/layouts/system/page-header/index";
	import {
		mapState,
		mapActions
	} from 'vuex';
	import UiUpload from "@/ui/upload/index";
	import Setting from "@/setting";
	import util from "@/libs/util";
	import {
		SystemAdverPage,
		SystemAdverPageTree,
		SystemAdverUpdate,
		SystemAdver,
		SystemAdverInfo,
		SystemAdverDel,
		getGrlist,
		changeAudit,
		changeRecommend,
		delGr 
	} from "../../../api/system/adver";
	export default {
		name: "adver_index",
		components: {
			UiUpload,
			IPageHeader
		},
		computed: {},
		data() {
			return {
				title: "账号管理",
				dialogVisible: false,
				upHeaders: [],
				upUrl: "",
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24
				},
				artType: "all",
				headeAr: [],
				headrIndex: 0,
				headrIndex2: 0,
				adverPage: [],
				adverPageOne: {},
				columns1: [{
						title: 'id',
						key: 'gr_id',
						minWidth: 50
					},
					{
							title: '排序',
							key: 'od',
							minWidth: 50
						},
					{
						title: '标题',
						key: 'title',
						minWidth: 150
					},
					// {
					// 	title: '讲师',
					// 	key: 'uname',
					// 	minWidth: 150
					// },
					{
						title: '封面图片',
						key: 'indeximg',
						slot: 'indeximg',
						minWidth: 150
					},
					{
						title: '点击次数',
						key: 'times',
						minWidth: 150
					},
					{
						title: '创建时间',
						key: 'create_time',
						minWidth: 150
					},
					{
						title: '状态',
						key: 'audit',
						slot: 'audit',
						minWidth: 150
					},
					{
						title: '操作',
						key: 'action',
						slot: 'action',
						fixed: 'right',
						minWidth: 250
					}
				],
				loading: true,
				tableData: [],
				page: {
					count: 0, //一共多少数量
					pageSize: 10, //每一页码数量
					page: 1, //当前页码
				},
				formValidate: {
					title: ""
				},
				form: {
					title: "",
					text: "",
					url: "",
					img: "",
					sort: 0,
					is_show: 1,
					page_id: 0
				},
				dataAr: []
			}
		},
		mounted() {
			this.initView();
		},
		methods: {
			//是否轮播
			changeRecommend(item) {
				changeRecommend({
					gr_id: item.gr_id,
					recommend: item.recommend == 1? 0: 1
				}).then(res => {
					console.log(res);
					this.getData()
				})
			},
			//审核
			changeAudit(item) {
				changeAudit({
					gr_id: item.gr_id,
					audit: item.audit == 1? 0: 1
				}).then(res => {
					console.log(res);
					this.getData()
				})
			},
			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.getAdverPage();
			},


			getAdverPage: function() {
				this.$utils.loading(this, "删除数据中...");
				var PromiseAll = [SystemAdverPageTree(), SystemAdverPage()];
				Promise.all(PromiseAll)
					.then(res => {
						this.$utils.loadingClose();
						this.adverPage = res[0].data;
						this.headeAr = res[1].data;
						this.getData();
					})
					.catch(err => {
						console.log(err);
						this.$utils.loadingClose();
						this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
					});
			},

			/**
			 * 获取数据
			 */
			getData: function() {
				// if (this.headeAr[this.headrIndex] == null ||
				//     this.headeAr[this.headrIndex].children[this.headrIndex2] == null) {
				//     return ;
				// }
				// var data = {
				//     title : this.formValidate.title,
				//     page : this.page.page,
				//     pageSize : this.headeAr[this.headrIndex].children[this.headrIndex2].id
				// };
				let data = {
					page: this.page.page,
					pageSize: this.page.pageSize,
					title: this.formValidate.title
				}
				getGrlist(data)
					.then(res => {
						this.loading = false;
						if (res.code == 200) {
							this.tableData = res.data.list;
							// this.page.pageSize = res.data.pageSize;
							this.page.count = res.data.total;
						} else {
							this.$alert(res.msg);
						}
					})
					.catch(err => {
						console.log(err);
						this.loading = false;
						this.$utils.loadingClose();
						this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
					});
			},
			userSearchs() {
				this.page.page = 1;
				this.loading = true;
				this.getData();
			},

			tapEl1: function(index) {
				this.headrIndex = index;
			},
			tapEl2: function(index) {
				this.headrIndex2 = index;
				this.page.page = 1;
				this.loading = true;
				this.getData();
			},

			tapInput: function(ethis, index, code) {
				console.log(ethis);
			},
			//关闭
			editClose: function() {
				this.dialogVisible = false;
			},
			/**
			 * 添加广告栏目
			 */
			tapAdd: function(sassid) {
				// this.dialogVisible = true;
				// if(this.headeAr.length <= 0) {
				//     this.$alert('无广告栏目，无法添加');
				// }
				// var data = this.headeAr[this.headrIndex].children[this.headrIndex2];
				// this.dataAr = data.json == '' ? [] : JSON.parse(data.json);
				// this.adverPageOne = data;
				// this.$refs['form'].resetFields();
				// this.form = this.$utils.resetFields(this.form, {page_id:data.id});
				this.$router.push('/system/eduction/addGrlists')
			},
			// 编辑分组
			tapEdit: function(item) {
				this.$router.push('/system/eduction/addGrlists?item=' + JSON.stringify(item))
			},
			/**
			 * 分页
			 */
			tapPage: function(index) {
				this.page.page = index;
				this.getData();
			},
			/**
			 * 上传文件
			 * @param res
			 */
			onUpload: function(res) {
				if (res.code == -1) {
					Notice.error({
						title: "系统提示",
						content: res.msg
					});
				} else {
					this.form.img = res.data.img;
				}
			},
			del (row, tit, num) {
			    this.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        type: 'warning'
			    }).then(() => {
			        delGr({gr_id: row.gr_id})
			            .then(res => {
			                this.loading = true;
			                this.getData();
			                // this.goodsCategory();
			                this.$Message.success("删除成功");
			            })
			            .catch(err => {
			                this.$utils.loadingClose();
			                this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
			            });
			    });
			},
		}
	}
</script>
<style scoped>
	.platform-img {
		width: 20px;
		height: 20px;
		background: #f2f2f2;
		margin-right: 4px;
	}

	.platform-img img {
		width: 100%;
	}
</style>