@extends('layouts.base')

@section('content')
@section('title', trans('电子面单管理'))
<link rel="stylesheet" type="text/css"
      href="{{resource_get('plugins/electronics-bill/src/common/static/css/electronics-bill.css', 1)}}"/>
<div id="app">
    <div class="electronics-div">
        <span style="float: left">电子面单列表</span>
        <div class="vue-main-title-button" style="float: right;">
            <el-button type="primary" plain icon="el-icon-plus" size="small" @click="edit()">添加电子面单</el-button>
        </div>
        <div style="margin-top: 50px;padding: 0px 20px">
            <el-table :data="data_list" style="width: 100%">
                <el-table-column prop="id" label="ID" align="center" width="100px">
                </el-table-column>
                <el-table-column prop="panel_name" label="电子面单模板名称" align="center">
                </el-table-column>
                <el-table-column prop="exhelper_style" label="快递类型" align="center">
                </el-table-column>
                <el-table-column prop="is_default" label="是否默认(只能设置一个)" align="center">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.is_default"
                                active-color="#29ba9c"
                                inactive-color="#dcdfe6"
                                :active-value="1"
                                :inactive-value="0"
                                @change="setDefault(scope.row.id,scope.$index)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-link title="编辑" :underline="false" @click="edit(scope.row.id)" style="text-align: center;width:50px">
                                <i class="iconfont icon-ht_operation_edit"></i>
                            </el-link>
                            <el-link title="删除" :underline="false" @click="del(scope.row.id)" style="text-align: center;width:50px">
                                <i class="iconfont icon-ht_operation_delete"></i>
                            </el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</div>
<script>
    var bill_list_url = '{!! yzWebFullUrl('plugin.electronics-bill.admin.bill-manage.bill-list') !!}';
    var default_url = '{!! yzWebFullUrl('plugin.electronics-bill.admin.bill-manage.set-default') !!}';
    var del_url = '{!! yzWebFullUrl('plugin.electronics-bill.admin.bill-manage.del') !!}';
    var app = new Vue({
        el: '#app',
        data() {
            return {
                data_list: []
            }
        },
        created() {

        },
        mounted() {
            this.getList();
        },
        methods: {
            getList(){
                let that = this;
                let loading = this.$loading({
                    target: document.querySelector(".content"),
                    background: 'rgba(0, 0, 0, 0)'
                });
                that.$http.get(bill_list_url).then(function(res){
                    if(res.data.result == 1){
                        that.data_list = res.data.data;
                    }else{
                        this.$message({message: res.data.msg, type: 'error'});
                    }
                    loading.close();
                },function(err){
                    this.$message({message: err.data.msg, type: 'error'});
                    loading.close();
                })
            },
            setDefault(id,index){
                let that = this;
                let loading = this.$loading({
                    target: document.querySelector(".content"),
                    background: 'rgba(0, 0, 0, 0)'
                });
                that.$http.post(default_url,{
                    'id':id,
                    'type':that.data_list[index].is_default
                }).then(function(res){
                    if(res.data.result == 1){
                        this.$message({message: res.data.msg, type: 'success'});
                    }else{
                        this.$message({message: res.data.msg, type: 'error'});
                    }
                    loading.close();
                    location.reload();
                },function(err){
                    this.$message({message: err.data.msg, type: 'error'});
                    loading.close();
                });
            },
            edit(id = 0){
                let link = `{!! yzWebFullUrl('plugin.electronics-bill.admin.bill-manage.save-view') !!}`+`&id=`+id;
                window.location.href = link;
            },
            del(id = 0){
                let that = this;
                that.$confirm('确定删除吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                    let loading = that.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    that.$http.post(del_url,{
                        'id':id,
                    }).then(function(res){
                        if(res.data.result == 1){
                            this.$message({message: res.data.msg, type: 'success'});
                        }else{
                            this.$message({message: res.data.msg, type: 'error'});
                        }
                        loading.close();
                        location.reload();
                    },function(err){
                        this.$message({message: err.data.msg, type: 'error'});
                        loading.close();
                    });
                }).catch(() => {
                    this.$message({type: 'info',message: '已取消删除'});
                });
            }
        },
    });
</script>
@endsection