@extends('layouts.base')
@section('title', trans('供应商模块'))
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/pc-terminal-two/views/css/index.css')}}">
    <div class="all">
        <div id="app" v-cloak>
            <el-form ref="form" :model="form" label-width="15%">
                <div class="vue-main">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">供应商模块</div>
                        <el-button type="primary" class="createModuleSet" @click="createModuleSet">+新增供应商模块</el-button>
                    </div>
                </div>

                <div class="vue-main">
                    <div class="vue-main-content" style="margin-bottom: 20px">
                        <el-table :data="records.data" align="center" style="width: 100%">
                            <el-table-column prop="id" label="ID" align="center"></el-table-column>
                            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                            <el-table-column prop="title" label="标题" align="center"></el-table-column>
                            <el-table-column label="状态" align="center">
                                <template slot-scope="scope">
                                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                                               @change="updateStatus(scope.row.status, scope.row.id)"></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="operation" label="操作" align="center">
                                <template scope="scope">
                                    <el-button type="text" size="medium" title="修改" icon="el-icon-edit-outline"
                                               @click="moduleEdit(scope.row.id)"></el-button>
                                    <el-button type="text" size="medium" title="删除" icon="el-icon-delete"
                                               @click="moduleDel(scope.row.id)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <el-pagination style="margin-right: 50px"
                                   background align="right"
                                   layout="prev, pager, next"
                                   :total="records.total"
                                   :page-size="records.per_page"
                                   :page-count="records.last_page"
                                   :current-page="records.current_page"
                                   @prev-click="handlePrevPage"
                                   @next-click="handleNextPage"
                                   @current-change="handleCurrentPage">
                    </el-pagination>
                </div>
            </el-form>
        </div>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data() {
                return {
                    records: [],
                }
            },
            mounted() {
                this.getData()
            },
            methods: {
                getData() {
                    this.$http.post(`{!! yzWebFullUrl('plugin.pc-terminal-two.backend.supplier-module.records') !!}`).then(function (response) {
                        if (response.data.result) {
                            this.records = response.data.data
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }

                    }, function (response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    });
                },
                createModuleSet() {
                    window.location.href = `{!! yzWebFullUrl('plugin.pc-terminal-two.backend.supplier-module.generate-view') !!}`
                },
                handleCurrentPage(page) {
                    this.form.page = page
                    this.getData()
                },
                handlePrevPage(page) {
                    // 必要方法,无需执行任何代码
                },
                handleNextPage(page) {
                    // 必要方法,无需执行任何代码
                },
                moduleEdit(id) {
                    window.location.href = `{!! yzWebFullUrl('plugin.pc-terminal-two.backend.supplier-module.update-view') !!}&id=` + id
                },
                moduleDel(id) {
                    this.$confirm('确认删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.post(`{!! yzWebFullUrl('plugin.pc-terminal-two.backend.supplier-module.destroy') !!}`, {id: id}).then(function (response) {
                            if (response.data.result) {
                                this.$message({
                                    message: response.data.msg,
                                    type: 'success'
                                });
                                this.getData()
                            } else {
                                this.$message({
                                    message: response.data.msg,
                                    type: 'error'
                                });
                            }
                        }, function (response) {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                updateStatus(status, id) {
                    this.$http.post(`{!! yzWebFullUrl('plugin.pc-terminal-two.backend.supplier-module.updateStatus') !!}`, {
                        status: status,
                        id: id
                    }).then(function (response) {
                        if (response.data.result) {
                            this.$message({
                                message: response.data.msg,
                                type: 'success'
                            });
                            this.getData()
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                    }, function (response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    });
                }
            }
        })
    </script>
    <style>
        .createModuleSet {
            background-color: #e5f6f1;
            color: #48c1a7;
            margin-right: 20px;
        }
    </style>
@endsection