@extends('layouts.base')

@section('content')
@section('title', trans('支付类型'))

<style>

    .el-icon-edit{font-size:16px;padding:0 15px;color:#409EFF;cursor: pointer;}
    .edit-i{display:none;}
    .el-table_1_column_4:hover .edit-i{font-weight:900;padding:0;margin:0;display:inline-block;}

    .con{
        padding-bottom:40px;
        border-radius: 8px;
    }

    .con .block{
        padding:10px;
        background-color:#fff;
        border-radius: 8px;
        height:30vh;
    }
</style>

<div id="app"  class="w1200 ">
    <div class=" rightlist ">
        <div class="right-titpos">
            <ul class="add-snav">
                <li class="active"><a href="#">支付方式列表</a></li>
            </ul>
        </div>
        <div class="right-addbox">
            <div>
                <div class="panel panel-info">
                    <div class="panel-body">
                        <span style="color: red">提示：</span><span>只有前端页面显示支付别名，余额充值不会根据设置的支付别名显示</span>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body table-responsive">
                        <div v-loading="loading">
                            <el-table :data="list" style="width: 100%" max-height="600" v-loading="table_loading">
                                <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
                                <el-table-column prop="code" label="支付标识" max-width="100" align="center"></el-table-column>
                                <el-table-column prop="name" label="支付名称" max-width="100" align="center"></el-table-column>
                                <el-table-column prop="" label="支付别名" max-width="80" align="center">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.id != 3">
                                            <el-popover  class="item" placement="top" effect="light">
                                                <div style="text-align:center;">
                                                    <el-input v-model="change_input" size="small"
                                                              style="width:100px;"></el-input>
                                                    <el-button size="small"
                                                               @click="confirmChange(scope.row.id)">确定
                                                    </el-button>
                                                </div>
                                                <span slot="reference">
                                                <a><i class="el-icon-edit edit-i" title="点击编辑别名" @click="inputEdit(scope.row.alias)"></i></a>
                                                [[scope.row.alias]]</span>
                                            </el-popover>
                                        </div>
                                        <div v-else>
                                            <span style="color: red">不支持</span>
                                        </div>

                                    </template>
                                </el-table-column>
                            </el-table>

                            <!-- 表格end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    var app = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
        data() {

            return{
                loading:false,
                table_loading:false,

                list: [],
                change_input: "",//修改排序弹框赋值
                dispatch_type_ids: [],
            }

        },
        created() {
            this.getList();
        },
        methods: {
            setData(data) {
                this.list = data;
                console.log(this.list);
            },
            getList() {
                var that = this;
                that.table_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.pay-manage.admin.manage.get-data') !!}").then(response => {
                    console.log(response);
                    if (response.data.result == 1) {
                        this.setData(response.data.data);
                    } else {
                        that.$message.error(response.data.msg);
                    }
                    that.table_loading = false;
                }), function (res) {
                    console.log(res);
                    that.table_loading = false;
                };
            },
            //编辑排序
            inputEdit(val) {
                this.change_input = val;
            },
            // 确认修改排序
            confirmChange(id) {
                let that = this;
                if (that.change_input == "") {
                    that.$message.error('请输入修改别名');
                    return false;
                }
                that.table_loading = true;
                let json = {id: id, value: that.change_input};
                that.$http.post("{!! yzWebFullUrl('plugin.pay-manage.admin.manage.edit-name') !!}", json).then(response => {
                    console.log(response);
                    if (response.data.result == 1) {
                        that.$message.success('操作成功！');
                        that.getList();
                    } else {
                        that.$message.error(response.data.msg);
                    }
                    that.table_loading = false;
                }), function (res) {
                    console.log(res);
                    that.table_loading = false;
                };
            },
        },
    })

</script>
@endsection('content')