{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;
}
</style>
{/block}
{block name="content"}
<div class="page-content" id="way">
	<div class="panel">
		<div class="panel-heading">
			<h3 class="panel-title panel-title-blue"><i class="iconfont">&#xe723;</i>支付通道列表</h3>
		</div>
		<div class="panel-body">
			<div class="omgui-flex-box">
				{if condition="Config('is_devel') == true"}<el-button v-on:click="handleAdd()" type="primary" icon="el-icon-plus"><span class="hidden-xs">添加通道</span></el-button>{/if}
				&nbsp;&nbsp;<el-button v-on:click="handleSet()" type="success" icon="el-icon-setting">支付设置</el-button>
				&nbsp;&nbsp;<el-button v-on:click="handleGM()" type="info" icon="el-icon-setting">GM特权<span class="hidden-xs">设置</span></el-button>
			</div>
			<template>
				<el-table
				:header-cell-style="{ textAlign: 'center' }" 
				:data="tableData"
				border fit highlight-current-row style="width: 100%">
				<template slot="empty">
					<div class='nonedata'><img src='__STATIC__/images/none.png'/><p>暂无数据</p></div>
				</template>	
				    <el-table-column prop="icon" label="图标" align="center" width="60">
						<template slot-scope="scope">
						    <img v-if="scope.row.icon" :src="scope.row.icon" width="30px" height="30px"/>
						</template>
					</el-table-column>
				    <el-table-column prop="name" label="名称" align="center"></el-table-column>
				    <el-table-column prop="showname" label="显示名称" align="center">
						<template slot-scope="scope">
						    <span v-html='scope.row.showname'></span>
						    <el-tooltip class="item" effect="dark" content="修改" placement="bottom">
								<i class="el-icon-edit" @click="updateName(scope.row)" style="cursor:pointer;"></i>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column prop="typeText" label="支付类型" align="center" width="100">
						<template slot-scope="scope">
						    <span v-html='scope.row.typeText'></span>
						</template>
					</el-table-column>
					<el-table-column prop="alias" label="英文别名" align="center"></el-table-column>
					<el-table-column prop="api_url" label="接口地址" align="left"></el-table-column>
					<el-table-column prop="api_id" label="商户编号" align="center"></el-table-column>
					<el-table-column prop="api_key" label="商户密钥" align="left"></el-table-column>
					<el-table-column prop="sort" label="排序" align="center" width="50"></el-table-column>
					<el-table-column prop="status" label="是否启用" align="center" width="100">
						<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,scope.row.status)">
						 </el-switch>
						</template>
					</el-table-column>
					<el-table-column  label="操作" align="center" width="120">
					    <template slot-scope="scope" >
						<el-button-group>
						    {if condition="Config('is_devel') == true"}<el-button size="mini" type="info" icon="el-icon-thumb" @click="handleClone(scope.row)">克隆</el-button>{/if}
							<el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row.id)"></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>
</div>
{/block} 
{block name="javascript"}
<script type="text/javascript">
//切换右侧导航选中项
switchTab(40);
var way = new Vue({
	el: '#way',
	data: function() {
		return {
			tableData:[],
			currentPage: 1,
            total: 0,
            pageSize: Number({$config['page_num']}),
			jsonData:{},
		}
	},
	/*初始化*/
	created: function() {
		this.getData();
	},
	methods: {
		handleAdd(){
			var width = ismobile() ? "90%" : "50%";
			layer.open({
                type: 2
                ,title: '添加支付通道'
                ,content: 'add'
                ,shadeClose:true
            	,moveOut:true
            	,maxmin:true
            	,fixed:false
                ,area: [width, '80%']
				,offset: 'auto'
            });
		},
		handleClone(row){
		    var width = ismobile() ? "90%" : "50%";
			layer.open({
                type: 2
                ,title: '克隆支付通道'
                ,content:  "add?id="+ row.id
                ,shadeClose:true
            	,moveOut:true
            	,maxmin:true
            	,fixed:false
                ,area: [width, '80%']
				,offset: 'auto'
            });
		},
		handleEdit(id){
			var width = ismobile() ? "90%" : "50%";
			layer.open({
                type: 2
                ,title: '编辑支付通道'
                ,content: "modify?id="+ id
                ,shadeClose:true
            	,moveOut:true
            	,maxmin:true
            	,fixed:false
                ,area: [width, '80%']
				,offset: 'auto'
            });
		},
		handleSizeChange(val) {
            /*改变每页显示的条数*/
            this.pageSize=val
			/*在改变每页显示的条数时，要将页码显示到第一页*/
            this.currentPage=1
            this.getData()
        },
        handleCurrentChange(val) {
            /*改变默认的页数*/
            this.currentPage=val
            this.getData()
        },
		switchChange(id,status) {
			//status只有两个结果：0 或 1
			var json = {"id":id,"field": "status","value": status,'token':'{$token}'};
			$.post('{:url("@Admin/Way/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/Way/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{
						that.tableData =[];
						that.total = 0;
					}
				},
				error: function(error) {
					console.log("请求数据异常，Error："+error);
				}
			});
		},
		handleSet(){
		    var width = ismobile() ? "90%" : "500px";
			layer.open({
                type: 2
                ,title: '支付设置'
                ,content: 'set?type=pay'
                ,shadeClose:true
            	,moveOut:true
            	,maxmin:true
            	,fixed:false
                ,area: [width, '500px']
				,offset: 'auto'
            });
		},
		handleGM(){
		    var width = ismobile() ? "90%" : "800px";
			layer.open({
                type: 2
                ,title: 'GM特权设置'
                ,content: 'set?type=gm'
                ,shadeClose:true
            	,moveOut:true
            	,maxmin:true
            	,fixed:false
                ,area: [width, '550px']
				,offset: 'auto'
            });
		},
		updateName(row){
			var that=this;
			swal({
				title: "修改显示名称",
				text: '<style>.sweet-alert input{margin-top:0px!important;}</style>' +
					'<div class="omgui-form-item">' +
					'<input type="text" name="showname" type="text" value="' + row.showname + '" />' +
					'</div>',
				html: true,
				cancelButtonText: "取消",
				confirmButtonText: "保存",
				showCancelButton: true,
				showConfirmButton: true,
				closeOnConfirm: false
			}, function() {
				var value = $("input[name='showname']").val();
				if(value == null || value == "") {
					toastr.warning("请输入显示名称");
				} else {
					$.post("{:url('@Admin/Way/modify_field')}", {
						'id': row.id,
						'field': 'showname',
						'value': value,
						'token':'{$token}'
					}, function(res) {
						if(res.code == 1) {
							that.getData();
						}
						swal({
							title: "提示",
							text: res.msg,
							type: res.code == 1 ? 'success' : 'error', //success,warning,error,info
							showCancelButton: true,
							showConfirmButton: false,
							cancelButtonText: 'ok',
							closeOnConfirm: false
						});
					});
				}
			});	
		},
	}
});
</script>
{/block}