{extend name="public:base" /}
{block name="css"}
<style>
.switchStyle .el-switch__label {
  position: absolute!important;
  display: none!important;
  color: #fff!important;
}
.switchStyle .el-switch__label--left {
  z-index: 9!important;
  left: 6px!important;
}
.switchStyle .el-switch__label--right {
  z-index: 9!important;
  left: -14px!important;
}
.switchStyle .el-switch__label.is-active {
  display: block!important;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 60px !important;
}
@media screen and (max-width: 768px) {
  .el-dialog {
    width: 90%; /* 调整为适合手机端的宽度 */
  }
}
</style>
{/block}
{block name="content"}
<div class="page-content" id="shop" style="position:relative;">
	<div class="panel">
		<div class="panel-heading">
			<h3 class="panel-title panel-title-blue"><i class="iconfont">&#xe667;</i>商城物品列表</h3>
		</div>
		<div class="panel-body">
		    <el-alert
        		 type="info" effect="dark" show-icon style="margin:10px 0px;">
        		<template slot='title'>
        			提示：如果<font color="yellow">点击购买</font>游戏内置商城里的物品（例如泰拉币），支付页面显示的物品和商城里的 <el-tag type="danger" size="mini" effect="dark">不一致</el-tag>，请添加相应的<font color="yellow">物品</font>，然后把商品ID修改为商品URL链接参数<font color="yellow">productId</font>的值。
        		 </template>
        	</el-alert>
			<div class="omgui-flex-box">
				<el-button v-on:click="handleAdd()" type="primary" icon="el-icon-plus">添加商品</el-button>
				<el-tooltip class="item hidden-xs" effect="dark" content="导入商品数据" placement="top">
					<el-button @click="dialogFormVisible = true"  type="danger" plain icon="el-icon-upload2"><span class="hidden-xs">导入商品数据</span></el-button>
				</el-tooltip>
			</div>
			<template>
				<el-table
				fix
				id="tableId"
				:header-cell-style="{ textAlign: 'center' }" 
				:data="tableData"
				border fit highlight-current-row style="width: 100%" @cell-dblclick="editCell">
				<template slot="empty">
					<div class='nonedata'><img src='__STATIC__/images/none.png'/><p>暂无数据</p></div>
				</template>	
					<el-table-column prop="product_id" label="商品ID" align="center">
						<template slot-scope="scope">
						  <div v-if="row===scope.row.id && col===scope.column.id">
							<el-input placeholder="请输入商品ID" v-model="scope.row.product_id" @change="updateData"></el-input>
						  </div>
						  <div v-else>
							{{ scope.row.product_id }}
						  </div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="商品名称" align="center">
						<template slot-scope="scope">
						  <div v-if="row===scope.row.id && col===scope.column.id">
							<el-input placeholder="请输入名称" v-model="scope.row.name" @change="updateData"></el-input>
						  </div>
						  <div v-else>
							{{ scope.row.name }}
						  </div>
						</template>
					</el-table-column>
					<el-table-column prop="desc" label="商品描述" align="center">
						<template slot-scope="scope">
						  <div v-if="row===scope.row.id && col===scope.column.id">
							<el-input placeholder="请输入描述" v-model="scope.row.desc" @change="updateData"></el-input>
						  </div>
						  <div v-else>
							{{ scope.row.desc }}
						  </div>
						</template>
					</el-table-column>
					<el-table-column prop="money" label="平台币价格" align="center">
						<template slot-scope="scope">
						  <div v-if="row===scope.row.id && col===scope.column.id">
							<el-input placeholder="请输入数量" v-model="scope.row.money" @change="updateData"></el-input>
						  </div>
						  <div v-else>
							{{ scope.row.money }}
						  </div>
						</template>
					</el-table-column>
					<el-table-column prop="price" label="人民币价格(元)" align="center">
						<template slot-scope="scope">
						  <div v-if="row===scope.row.id && col===scope.column.id">
							<el-input placeholder="请输入金额" v-model="scope.row.price" @change="updateData"></el-input>
						  </div>
						  <div v-else>
							{{ scope.row.price }}
						  </div>
						</template>
					</el-table-column>
					
					<el-table-column prop="limit_type_text" label="限购类型" align="center">
						<template slot-scope="scope">
							<span v-html='scope.row.limit_type_text'></span>
							<el-tooltip class="item" effect="dark" content="修改限购类型" placement="bottom">
								<i class="el-icon-edit" @click="updateType(scope.row.id,scope.row.limit_type)" style="cursor:pointer;"></i>
							</el-tooltip>	
						</template>
					</el-table-column>
					<el-table-column prop="limit_number" label="限购次数" align="center">
						<template slot-scope="scope">
						  <div v-if="row===scope.row.id && col===scope.column.id">
							<el-input placeholder="请输入次数" v-model="scope.row.limit_number" @change="updateData"></el-input>
						  </div>
						  <div v-else>
							{{ scope.row.limit_number }}
						  </div>
						</template>
					</el-table-column>	
					<el-table-column prop="items_text" label="包含物品" align="left"></el-table-column>
					<el-table-column prop="first_give_text" label="首次购买赠送" align="left"></el-table-column>
					<el-table-column prop="in_game" label="内置商品" align="center">
						<template slot-scope="scope">
						 <el-switch
							 class="switchStyle"
							 :active-value="1"
							 :inactive-value="0"
							 v-model="scope.row.in_game" 
							 active-text="是" 
							 inactive-text="否"
							 active-color="#1DD76D"
							 inactive-color="#DCDFE6"
							 @change="switchChange(scope.row.id,'in_game',scope.row.in_game)">
						 </el-switch>
						</template>
					</el-table-column>
					<el-table-column prop="sort" label="排序" align="center">
						<template slot-scope="scope">
						  <div v-if="row===scope.row.id && col===scope.column.id">
							<el-input placeholder="请输入数值" v-model="scope.row.sort" @change="updateData"></el-input>
						  </div>
						  <div v-else>
							{{ scope.row.sort }}
						  </div>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="状态" align="center">
						<template slot-scope="scope">
						 <el-switch
							 class="switchStyle"
							 :active-value="1"
							 :inactive-value="0"
							 v-model="scope.row.status" 
							 active-text="出售" 
							 inactive-text="禁售"
							 active-color="#1DD76D"
							 inactive-color="#DCDFE6"
							 @change="switchChange(scope.row.id,'status',scope.row.status)">
						 </el-switch>
						</template>
					</el-table-column>
					<el-table-column  label="操作" align="center" width="100">
					    <template slot-scope="scope" >
						<el-button-group>
							<el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row.id)"></el-button>
							<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
						</el-button-group>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="el-page">
					<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
					:current-page="currentPage" 
					:page-sizes="[10,20,30,40,50,100]" 
					:page-size="pageSize" 
					layout="total, sizes, prev, pager, next, jumper" 
					:total="total">
					</el-pagination>
				</div>
			</template>
		</div>
	</div>
	<el-dialog title="导入商品数据" :visible.sync="dialogFormVisible">
        <el-form ref="form" label-width="80px">
            <el-form-item label="数据脚本">
                <el-input type="textarea" :rows="20" placeholder="请输入脚本内容" v-model="content" clearable></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="importData">立即导入</el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
        </div>
   </el-dialog>
</div>
{/block} 
{block name="javascript"}
<script type="text/javascript">
//切换右侧导航选中项
switchTab(27);
var shop = new Vue({
	el: '#shop',
	data: function() {
		return {
			row: "",/*编辑单元格：行*/
			col: "",/*编辑单元格：列*/
			tmpRow: "",/*编辑单元格：临时行数据*/
			tableData:[],
			currentPage: 1,
            total: 0,
            pageSize: Number({$config['page_num']}),
			jsonData:{},
			content:"",
			dialogFormVisible:false,
		}
	},
	/*初始化*/
	created: function() {
		
		this.getData();
	},
	methods: {
		handleAdd(){
			var width = ismobile() ? "90%" : "50%";
			var that = this;
			layer.open({
                type: 2
                ,title: '添加商品'
                ,content: 'add'
                ,shadeClose:true
            	,moveOut:true
            	,maxmin:true
            	,fixed:false
                ,area: [width, '80%']
				,offset: 'auto'
            });
		},
		handleEdit(id){
			var width = ismobile() ? "90%" : "50%";
			var that = this;
			layer.open({
                type: 2
                ,title: '编辑商品'
                ,content: "modify?id="+ id
                ,shadeClose:true
            	,moveOut:true
            	,maxmin:true
            	,fixed:false
                ,area: [width, '80%']
				,offset: 'auto'
            });
		},
		handleDelete(row){
			var that = this;
			mui.confirm('确定要删除['+row.name+']这个商品吗？', '提示', ['否', '是'], function(e) {
                if (e.index == 1) {
                    $.post("{:url('@Admin/Shop/del')}",{'id':row.id,'token':'{$token}'}, function (data) {
						if(data.code==1){
							toastr.success(data.msg);
						    that.getData();
						}else{
							toastr.error(data.msg);
						}
					});
                }
            }) 
		},
		handleSizeChange(val) {
            /*改变每页显示的条数*/
            this.pageSize=val
			/*在改变每页显示的条数时，要将页码显示到第一页*/
            this.currentPage=1
            this.getData()
        },
        handleCurrentChange(val) {
            /*改变默认的页数*/
            this.currentPage=val
            this.getData()
        },
		switchChange(id,field,status) {
			//status只有两个结果：0 或 1
			var json = {"id":id,"field": field,"value": status,'token':'{$token}'};
			$.post('{:url("@Admin/Shop/modify_field")}', json, function (data) {
				if(data.code==1){
					toastr.success(data.msg);
				}else{
					toastr.error(data.msg);
					that.getData();
				}
			});
		},
		getData(){
			var that = this;
			that.jsonData["page"] = that.currentPage;
			that.jsonData["limit"] = that.pageSize;
			$.ajax({
				type: "GET",
				url: '{:url("@Admin/Shop/data")}',
				dataType: "json",
				data: that.jsonData,
				contentType: "application/json;charset=UTF-8",
				success: function(res) {
					if(res.code == 1) {
						that.tableData = res.data;
						that.total = res.count;
					}else{
					    //显示授权窗口
					    ShowAuth(res.msg);
						that.tableData =[];
						that.total = 0;
					}
				},
				error: function(error) {
					console.log("请求数据异常，Error："+error);
				}
			});
		},
		/*编辑单元格*/
		editCell: function (row, column) {
		  this.row = row.id;
		  this.col = column.id;
		  this.tmpRow = row;
		},
		/*更新单元格数据*/
		updateData() {
			this.tmpRow.token = '{$token}';
			$.post('{:url("@Admin/Shop/update")}', this.tmpRow, function (data) {
				if(data.code==1){
					toastr.success(data.msg);
				}else{
					toastr.error(data.msg);
				}
			});
		},
		updateType(id,type){
			var that=this;
			let option='<option value="0" ';
			if(type==0){option+='selected="selected"';}
			option+='>不限购</option><option value="1" ';
			if(type==1){option+='selected="selected"';}
			option+='>每日限购</option><option value="2" ';
			if(type==2){option+='selected="selected"';}
			option+='>永久限购</option>';
			swal({
				title: "修改限购类型",
				text:'<style>.sweet-alert h2{margin:0px!important;font-size:2rem;}.sweet-alert input{margin-top:0px!important;}</style>'
				+'<div class="tipbox"></div>'
				+'<div class="omgui-form-item">'
				+'选择类型：<select name="typeid" lay-filter="typeid" style="flex:1;padding:10px;height:42px;line-height: 42px;">'
				+ option
				+'</select>'
				+'</div>'
				+'</div>'
				+'</div>',
				html: true,
				cancelButtonText: "取消",
				confirmButtonText: "保存",
				showCancelButton:true,
				showConfirmButton:true,
				closeOnConfirm:false
				}, function () {
					// 通过元素标签名获取下拉框对象
					let selectObj = $("select[name='typeid']");
					var typeid = selectObj.val();
    				if(typeid==""||typeid==null||typeid== "undefined"){
    					$(".tipbox").html('请选择类型').css("color","red");
    					return;
    				}
			var json = {"id":id,"field": "limit_type","value": typeid,'token':'{$token}'};
					$.post('{:url("@Admin/Shop/modify_field")}', json, function (data) {
						if(data.code==1){
							toastr.success(data.msg);
							that.getData();
						}else{
							toastr.error(data.msg);
						}
					});
				    swal.close();
			});
		},
		importData(){
		    var that=this;
		    if (that.content == "" ) {
		        toastr.error('脚本内容不能为空');
                return;
            }
		    that.$confirm('本操作将会覆盖旧的数据，确定要导入新的商品数据吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                //des加密处理（防止Nginx防火墙拦截）
		        var des_content = encryptByDES(that.content);
		        $.post('{:url("@Admin/Shop/import_data")}', {'content':des_content,'token':'{$token}'}, function (data) {
					if(data.code==1){
						toastr.success(data.msg);
						that.getData();
					}else{
						toastr.error(data.msg);
					}
				});
            }).catch(() => {});
		},
	}
});
</script>
{/block}