@extends('layouts.base')

@section('content')
@section('title', '地址管理')
<div class="right-titpos">
    <ul class="add-snav">
        <li class="active"><a href="#">地址修改记录</a></li>
    </ul>
</div>
<div id="app" v-cloak v-loading="all_loading">
    <template>
        <div class="second-list">
            <div class="third-list">
                <div class="form-list">
                    <el-form :inline="true" :model="search_form" ref="search_form" style="margin-left:10px;">
                        <el-row>
                            <el-form-item label="" prop="">
                                <el-select v-model="search_form.operate_type" placeholder="修改类型" clearable>
                                    <el-option v-for="item in operate_type_list" :key="item.id" :label="item.name"
                                               :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="" prop="keyword">
                                <el-input v-model="search_form.keyword" placeholder="请输入地址名称"></el-input>
                            </el-form-item>


                            {{--<el-form-item>--}}
                            {{--<el-select v-model="search_form.id_v1" placeholder="请选择省" clearable--}}
                            {{--@change="changeV1()">--}}
                            {{--<el-option v-for="item in category_list" :key="item.id" :label="item.name"--}}
                            {{--:value="item.id"></el-option>--}}
                            {{--</el-select>--}}
                            {{--</el-form-item>--}}
                            {{--<el-form-item>--}}
                            {{--<el-select v-model="search_form.id_v2" placeholder="请选择市" clearable--}}
                            {{--@change="changeV2()">--}}
                            {{--<el-option v-for="item in category_list_v2" :key="item.id"--}}
                            {{--:label="item.name" :value="item.id"></el-option>--}}
                            {{--</el-select>--}}
                            {{--</el-form-item>--}}
                            {{--<el-form-item>--}}
                            {{--<el-select v-model="search_form.id_v3" placeholder="请选择区" clearable--}}
                            {{--v-if="catlevel==3">--}}
                            {{--<el-option v-for="item in category_list_v3" :key="item.id"--}}
                            {{--:label="item.name" :value="item.id"></el-option>--}}
                            {{--</el-select>--}}
                            {{--</el-form-item>--}}


                            <a href="#">
                                <el-button type="primary" icon="el-icon-search" @click="search(1)">搜索
                                </el-button>
                            </a>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="table-list">
                    <div style="margin-left:10px;">
                        <el-button type="primary" size="small" @click="createAddress()">添加地址</el-button>
                        <el-button type="success" size="small" @click="editAddress()">编辑地址</el-button>
                        <el-button type="info" size="small" :loading="generateLoading" @click="generateAddressFile()">同步地址</el-button>
                        <el-button type="danger" size="small" :loading="refreshLoading" @click="refreshAddress()">初始化地址</el-button>
                    </div>
                    <div>
                        <template>
                            <!-- 表格start -->
                            <el-table :data="list" style="width: 100%" :class="table_loading==true?'loading-height':''"
                                      v-loading="table_loading">
                                <el-table-column prop="id" label="ID" width="60" align="center"></el-table-column>
                                <el-table-column prop="area_name" label="地址名称" width="100"
                                                 align="center"></el-table-column>
                                <el-table-column prop="level_name" label="地址级别" max-width="50"
                                                 align="center"></el-table-column>
                                <el-table-column prop="operate_type_name" label="修改类型" max-width="50"
                                                 align="center"></el-table-column>
                                <el-table-column prop="after_address" label="之前地址" align="center"></el-table-column>

                                <el-table-column prop="before_address" label="之后地址" align="center"></el-table-column>
                                <el-table-column prop="created_at" label="操作时间" align="center"></el-table-column>
                            </el-table>
                            <!-- 表格end -->
                        </template>

                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="vue-page" v-show="total>1">
                <el-row>
                    <el-col align="right">
                        <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                                       :page-size="per_size" :current-page="current_page" background
                                       v-loading="loading"></el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>

    </template>

</div>

<script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        data() {
            return {
                refreshLoading: false,
                generateLoading: false,
                all_loading: false,
                operate_type_list: [
                    {id: '', name: '全部操作'},
                    {id: 'create', name: '添加'},
                    {id: 'edit', name: '修改'},
                    {id: 'del', name: '删除'},
                    {id: 'refresh', name: '更新'},
                ],
                search_form: {
                    keyword: '',
                    operate_type: '',
                },
                list: [],
                loading: false,
                table_loading: false,
                //分页
                total: 0,
                per_size: 0,
                current_page: 0,
                rules: {},
            }
        },
        created() {

        },
        mounted() {
            let data = {!! $data !!};
            this.setData(data);
        },
        methods: {
            createAddress() {
                window.location.href = '{!! yzWebFullUrl('plugin.address-mgmt.admin.manage.create-show') !!}';
            },
            editAddress() {
                window.location.href = '{!! yzWebFullUrl('plugin.address-mgmt.admin.manage.edit-show') !!}';
            },
            refreshAddress() {
                this.$confirm('将把地址库覆盖为最新地址,可能对收银台、区域分红、订单地址、供应商、自提点、商品配送模板、租赁等功能造成影响，确认刷新吗？', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    this.refreshLoading = true;
                    var that = this;
                    that.$http.post("{!! yzWebFullUrl('plugin.address-mgmt.admin.manage.refresh-address') !!}", {}).then(response => {
                        if (response.data.result == 1) {
                            that.$message.success(response.data.msg);
                            this.search();
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.refreshLoading = false;
                    }), function (res) {
                        console.log(res);
                        that.refreshLoading = false;
                    };
                }).catch(() => {
                    this.$message({type: 'info', message: '取消操作'});
                });
            },
            generateAddressFile() {
                this.$confirm('如前端地址与后端地址显示不一致，可重新生产前端的地址文件统一地址', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    this.generateLoading = true;
                    var that = this;
                    that.$http.post("{!! yzWebFullUrl('plugin.address-mgmt.admin.manage.generate-js') !!}", {}).then(response => {
                        if (response.data.result == 1) {
                            that.$message.success(response.data.msg);
                            this.search();
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.generateLoading = false;
                    }), function (res) {
                        console.log(res);
                        that.generateLoading = false;
                    };
                }).catch(() => {
                    this.$message({type: 'info', message: '取消操作'});
                });
            },
            search(page) {
                let that = this;
                let json = {
                    page: page,
                    search: {
                        keyword: that.search_form.keyword,
                        operate_type: that.search_form.operate_type,
                    },
                };
                that.table_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.address-mgmt.admin.manage.search') !!}", json).then(response => {

                    if (response.data.result == 1) {
                        that.list = response.data.data.data;
                        that.total = response.data.data.total;
                        that.current_page = response.data.data.current_page;
                        that.per_size = response.data.data.per_page;
                    } else {
                        that.$message.error(response.data.msg);
                    }
                    that.table_loading = false;
                }), function (res) {
                    console.log(res);
                    that.table_loading = false;
                };

            },
            setData(data) {
                this.list = data.list.data;
                this.total = data.list.total;
                this.current_page = data.list.current_page;
                this.per_size = data.list.per_page;
            },
        },
    })

</script>


@endsection