@extends('layouts.base')
@section('title', "商品管理")
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/point-mall/views/admin/index.css')}}">
<style>
    .edit-i{display:none;}
    .el-table_1_column_2:hover .edit-i{font-weight:900;padding:0;margin:0;display:inline-block;}
    .el-tabs__item,.is-top{font-size:16px}
    .el-tabs__active-bar { height: 3px;}
</style>
<div class="all">
    <div id="app" v-cloak>
        <div class="vue-crumbs">
            积分商城 > 商品管理
        </div>
        <div class="vue-head">
            <div class="vue-main-title" style="margin-bottom:20px">
                <div class="vue-main-title-left"></div>
                <div class="vue-main-title-content">商品管理</div>
                <div class="vue-main-title-button">
                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="addModal">添加商品</el-button>
                </div>
            </div>
            <div class="vue-search">
                <el-form :inline="true" :model="search_form" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="search_form.goods_id" placeholder="商品ID"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="search_form.goods_name" placeholder="商品关键字"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="search(1)">搜索</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>
        <div class="vue-main">
            <div class="vue-main-form">
                <div class="vue-main-title" style="margin-bottom:20px">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content" style="flex:0 0 120px">商品列表</div>
                    <div class="vue-main-title-button">
                        {{--<el-button type="primary" plain icon="el-icon-plus" size="small" @click="addModal">添加商品</el-button>--}}
                    </div>
                </div>
                <div style="margin-left:10px;">
                    <el-checkbox v-model.number="is_all_choose" :true-label="1" :false-label="0" @change="allChoose">[[is_all_choose==1?'全不选':'全选']]</el-checkbox>
                    <el-button size="small" @click="batchDel(1)">批量删除</el-button>
                </div>
                <el-table :data="list" style="width: 100%">
                    <el-table-column prop="id" label="选择" width="60" align="center">
                        <template slot-scope="scope">
                            <el-checkbox v-model.number="scope.row.is_choose" :true-label="1" :false-label="0" @change="oneChange(scope.row)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品ID" align="center" prop="id"></el-table-column>
                    <el-table-column label="商品" align="center" prop="category">
                        <template slot-scope="scope">
                            <div style="display:flex;align-items:center;justify-content:center;">
                                <img :src="scope.row.thumb_src" alt="" style="width:80px;height: 50px;">
                                <div style="margin-left:10px">[[scope.row.title]]</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="积分值" align="center" prop="point">
                        <template slot-scope="scope">
                            [[scope.row.point]]
                            <el-link title="编辑" :underline="false" @click="editPoint(scope.row.id,scope.$index)" style="width:50px;">
                                <i class="iconfont icon-ht_operation_edit"></i>
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="库存" align="center" prop="stock"></el-table-column>
                    <el-table-column label="状态" align="center" prop="status_name" width="110"></el-table-column>
                    
                    <el-table-column prop="refund_time" label="操作" align="center" width="250">
                        <template slot-scope="scope">
                            <el-link title="删除" :underline="false" @click="del(scope.row.id,scope.$index)" style="width:50px;">
                                <i class="iconfont icon-ht_operation_delete"></i>
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="vue-page" >
            <el-row>
                <el-col align="right">
                    <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                        :page-size="per_page" :current-page="current_page" background
                        ></el-pagination>
                </el-col>
            </el-row>
        </div>

        <!-- 编辑积分 -->
        <el-dialog :visible.sync="edit_show" width="40%" center title="积分设置">
            <div>
                <el-table :data="point_list" style="width: 100%;height:500px;overflow-y:auto"  >
                    <el-table-column prop="goods_option_title" label="规格" align="center"></el-table-column>
                    <el-table-column prop="" label="积分" align="center">
                        <template slot-scope="scope">
                            <el-input placeholder="请输入积分" v-model="scope.row.point">
                                <template slot="append">积分</template>
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="vue-center" style="margin-top: 30px;">
                <el-button type="primary" @click="submitPoint">提交</el-button>
                <el-button @click="cancel1">返回</el-button>
            </div>
        </el-dialog>


        <!-- 选择商品 -->
        <el-dialog :visible.sync="goods_show" width="50%" center title="选择商品">
            <div>
                <div style="text-align: center">
                    <el-input  v-model="keyword_type" style="width:80%"></el-input>
                    <el-button type="primary" @click="getGoods(1)" style="margin-left:20px;">搜索</el-button>
                </div>

                <el-table :data="goods_list" style="width: 100%;height:500px;overflow-y:auto" @selection-change="selectionChange" >
                    <el-table-column type="selection" align="center">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" align="center"></el-table-column>
                    <el-table-column prop="" label="商品" align="center">
                        <template slot-scope="scope">
                            <div style="display:flex;align-items:center;justify-content:center;">
                                <img :src="scope.row.thumb_src" alt="" style="width:80px;height: 50px;">
                                <div style="margin-left:10px">[[scope.row.title]]</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="现价" align="center"></el-table-column>
                    <el-table-column prop="stock" label="库存" align="center"></el-table-column>
                    <el-table-column prop="status_name" label="状态" align="center"></el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="vue-center" style="margin-top: 30px;">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="searchGoods"
                            :total="goods_total"  :page-size="goods_per_page" :current-page="goods_current_page" >
                    </el-pagination>
                </div>
            </div>
            <div class="vue-center" style="margin-top: 30px;">
                <el-button type="primary" @click="submitGoods">提交</el-button>
                <el-button @click="cancel">返回</el-button>
            </div>
        </el-dialog>
    </div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        name: 'test',
        data() {
            return {
                goods_show:false,
                activeName:'2',
                street:0,
                list:[],
                goods_list:[],
                point_list:[],
                edit_goods_id:0,
                change_sort:'',
                times:[],
                search_form:{
                    goods_id:"",
                    goods_name:"",
                },
                keyword_type:'',
                is_all_choose:0,//是否全选
                rules: {},
                current_page:1,
                total:1,
                per_page:1,

                goods_current_page:1,
                goods_total:1,
                goods_per_page:1,
                edit_show:false,
            }
        },
        created() {

        },
        mounted() {
            this.getData(1);
        },
        methods: {
            getData(page) {
                // console.log(this.times)
                let json = {
                    page: page,
                    goods_id:this.search_form.goods_id,
                    goods_name:this.search_form.goods_name,
                };
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.point-mall.admin.goods.goods-list') !!}',json).then(function(response) {
                    if (response.data.result) {
                         // console.log(response.data.data.list.total)
                        arr = [];
                        this.list         = response.data.data.list.data;
                        this.current_page = response.data.data.list.current_page;
                        this.total        = response.data.data.list.total;
                        this.per_page     = response.data.data.list.per_page;
                        this.list.forEach((item,index) => {
                            arr.push(Object.assign({},item,{is_choose:0}))//是否选中
                        });
                        this.list = arr;
                        loading.close();
                    } else {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                    loading.close();

                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                    loading.close();
                });
            },
            getGoods(page){
                let json = {
                    page: page,
                    kwd:this.keyword_type,
                };
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.point-mall.admin.goods.search-goods') !!}',json).then(function(response) {
                    if (response.data.result) {
                        // console.log(response.data.data.list.total)
                        arr = [];
                        this.goods_list         = response.data.data.list.data;
                        this.goods_current_page = response.data.data.list.current_page;
                        this.goods_total        = response.data.data.list.total;
                        this.goods_per_page     = response.data.data.list.per_page;
                        this.goods_list.forEach((item,index) => {
                            arr.push(Object.assign({},item,{is_choose:0}))//是否选中
                        });
                        this.goods_list = arr;
                        loading.close();
                    } else {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                    loading.close();

                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                    loading.close();
                });
            },
            // 单个选择
            oneChange(item) {
                let that = this;
                let is_all = 0;
                that.list.some((item,index) => {
                    if (item.is_choose == 1) {
                        is_all = 1;
                    }else {
                        is_all = 0;
                        return true;
                    }
                })
                that.is_all_choose = is_all;
            },
            selectionChange(goods_list){
                // console.log(goods_list);
                this.goods_list.forEach((item,index) => {
                    item.is_choose = 0;
                })
                if (goods_list.length > 0){
                    goods_list.forEach((item,index) => {
                        item.is_choose = 1;
                    })
                }
                console.log(this.goods_list);
            },
            // 全选
            allChoose() {
                let that = this;
                let status = 0;
                if (that.is_all_choose == 1){
                    status = 1;
                }
                else{
                    status = 0;
                }
                that.list.forEach((item,index) => {
                    item.is_choose = status;
                })
            },
            addModal() {
                this.goods_show = true;
            },
            search(val) {
                this.getData(val);
            },
            searchGoods(val) {
                this.getGoods(val);
            },
            del(id) {
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.point-mall.admin.goods.del-goods') !!}',{goods_id:id}).then(function (response) {
                        if (response.data.result){
                            this.$message.success("操作成功");
                            this.search(this.current_page);
                        }
                        else {
                            this.$message.error( response.data.msg );
                        }
                        loading.close();
                    },function (response) {
                        this.$message.error(response.data.msg);
                        loading.close();
                    }
                );
            },
            batchDel() {
                let ids = [];
                this.list.forEach((item,index) => {
                    if (item.is_choose > 0){
                        ids.push(item.id);
                    }
                })
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.point-mall.admin.goods.batch-del-goods') !!}',{goods_ids:ids}).then(function (response) {
                        if (response.data.result){
                            this.$message.success("操作成功");
                            this.search(this.current_page);
                        }
                        else {
                            this.$message.error( response.data.msg );
                        }
                        loading.close();
                    },function (response) {
                        this.$message.error(response.data.msg);
                        loading.close();
                    }
                );
            },
            submitGoods(){
                let goods_ids = [];
                this.goods_list.forEach((item,index) => {
                    if (item.is_choose > 0){
                        goods_ids.push(item.id);
                    }
                })
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.point-mall.admin.goods.add-point-goods') !!}',{goods_ids:goods_ids}).then(function (response) {
                        if (response.data.result){
                            this.$message.success("操作成功");
                            this.search(this.current_page);
                        }
                        else {
                            this.$message.error( response.data.msg );
                        }
                        loading.close();
                        this.goods_show = false;
                    },function (response) {
                        this.$message.error(response.data.msg);
                        loading.close();
                    }
                );
            },
            cancel(){
                this.goods_show = false;
            },
            cancel1(){
                this.edit_show = false;
            },
            editPoint(id){
                // console.log(id)
                let json = {
                    goods_id: id
                };
                this.edit_goods_id = id;
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.point-mall.admin.goods.get-goods-point-list') !!}',json).then(function(response) {
                    if (response.data.result) {
                        // console.log(response.data.data.list.total)
                        this.point_list = response.data.data;
                        this.edit_show  = true;
                        loading.close();
                    } else {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                    loading.close();
                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                    loading.close();
                });
            },
            submitPoint(){
                let json = {
                    goods_id:this.edit_goods_id,
                    point:this.point_list
                };
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! yzWebFullUrl('plugin.point-mall.admin.goods.edit-point') !!}',json).then(function (response) {
                        if (response.data.result){
                            this.$message.success("操作成功");
                            this.search(this.current_page);
                        }
                        else {
                            this.$message.error( response.data.msg );
                        }
                        loading.close();
                    },function (response) {
                        this.$message.error(response.data.msg);
                        loading.close();
                    }
                );
            },
        },
    })
</script>
@endsection