@extends('layouts.base')
@section('title', '中台支付顺序设置')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
    <link rel="stylesheet" href="{{resource_get('plugins/yz-supply/assent/css/album1.css?time='.time())}}">

    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-head">
                <div class="top-title">
                    <span :class="item.class" v-for="(item,index) in albumTopTitle"  @click="skipUrl(item)" :key="index">[[item.name]]</span>
                </div>
            </div>
            <div class="vue-main">
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">中台支付顺序设置</div>
                </div>
                <div class="vue-main-form">
                    <el-row style="margin-left: 15%;margin-bottom:15px; ">

                        <el-select v-model="middleground_configuration_index" placeholder="请选择供应链" clearable >
                            <el-option v-for="item,index in middleground_configuration"  :key="index" :label="item.title" :value="index"></el-option>
                        </el-select>

                        <el-button type="primary" icon="el-icon-search" @click="inquire()">查询</el-button>
                    </el-row>
                    <el-form ref="form" label-width="15%" v-for="(item,index) in payData">
                        <el-form-item :label="item.name">
                            <el-input v-model="item.sort" placeholder="顺序">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 分页 -->
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="saveSet">保存设置</el-button>
                </div>
            </div>
        </div>
    </div>
    <script>
        const GetAccountSetUrl = "{!! yzWebFullUrl('plugin.kart.Backend.Account.Controllers.set.index') !!}";
        const SaveAccountSetUrl = "{!! yzWebFullUrl('plugin.kart.Backend.Account.Controllers.set.update') !!}";
    </script>
<script>
    const mixin = {
        data() {

            return {
                albumTopTitle: [
                    {
                        id: 1,
                        name: "基础设置",
                        class:"album-name-against",
                        url:"{!! yzWebFullUrl('plugin.yz-supply.admin.set.index') !!}"
                    },
                    {
                        id: 2,
                        name: "中台配置列表",
                        class:"album-name-against",
                        url:"{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.index') !!}"
                    },
                    {
                        id: 3,
                        name: "支付设置",
                        class:"album-name",
                        url:"{!! yzWebFullUrl('plugin.yz-supply.admin.set.pay') !!}"
                    },
                    {
                        id: 4,
                        name: "快递匹配",
                        class:"album-name-against",
                        url:"{!! yzWebFullUrl('plugin.yz-supply.admin.express-matching.index') !!}"
                    },
                    {
                        id: 5,
                        name: "导入分类",
                        class:"album-name-against",
                        url:"{!! yzWebFullUrl('plugin.yz-supply.admin.import-categorys.index') !!}"
                    },
                ],
               middleground_configuration_index:0,
               middleground_configuration_id:0,
               middleground_configuration:{},
               payData:[],
               speechSynthesisAppId:11
            };
        },
        mounted() {
            this.getMiddlegroundConfiguration();
        },
        methods: {
            skipUrl(item){
                window.location.href = item.url
            },
            inquire(){
              this.middleground_configuration_id = this.middleground_configuration[this.middleground_configuration_index].id;
              this.getSetData();
            },
            getMiddlegroundConfiguration(){
                this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.get-middleground-configurations') !!}').then(function (response) {
                    if (response.data.result) {
                        this.middleground_configuration = response.data.data;
                        this.middleground_configuration_id = this.middleground_configuration[this.middleground_configuration_index].id;
                        this.getSetData(0);
                    } else {
                        this.$message({message: response.data.msg, type: 'error'});
                    }
                }, function (response) {
                    this.$message({message: response.data.msg, type: 'error'});
                })
            },
            getSetData() {

                let loading = this.$loading({
                    target: document.querySelector(".content"),
                    background: 'rgba(0, 0, 0, 0)'
                });
                this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.set.pay-list') !!}', {middleground_configuration_id:this.middleground_configuration_id}).then(function (response) {
                    if (response.data.result) {
                        this.payData =  response.data.data;
                        // this.$message({message: response.data.msg, type: 'success'});
                    } else {
                        this.payData = [];
                        this.$message({message: response.data.msg, type: 'error'});
                    }
                    loading.close();
                }, function (response) {
                    this.$message({message: response.data.msg, type: 'error'});
                })
            },
            saveSet(){

                let loading = this.$loading({
                    target: document.querySelector(".content"),
                    background: 'rgba(0, 0, 0, 0)'
                });
                this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.set.set-pay') !!}', {data:this.payData,middleground_configuration_id:this.middleground_configuration_id}).then(function (response) {
                    if (response.data.result) {
                        this.$message({message: response.data.msg, type: 'success'});
                        this.getSetData()
                    } else {
                        this.$message({message: response.data.msg, type: 'error'});
                    }
                    loading.close();
                    // location.reload();
                }, function (response) {
                    this.$message({message: response.data.msg, type: 'error'});
                })
            }
        },
    };
    //* 实例化，提供基础服务
    new Vue({
        el: "#app",
        delimiters: ["[[", "]]"],
        mixins: [mixin],
        data() {
            return {
            };
        },
        methods: {

        },
    });

</script>
@endsection