@extends('layouts.base')
@section('title', "商品搜索")
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/cloud-warehouse/views/index.css')}}">
    <style>

    </style>
    <div class="all">
        <div id="app" v-cloak>
            <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">商品列表
                        <span style="font-weight: 300;font-size: 10px;">只能搜索平台和供应商商品规格</span></div>
                    <div class="vue-main-title-button"></div>
                </div>
                <div class="vue-search">
                    <el-form :inline="true" :model="search_form" ref="search_form" style="margin-left:10px;">
                        <el-row>
                            <el-form-item label="" prop="goods_id">
                                <el-input v-model="search_form.goods_id" placeholder="请输入商品ID"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="goods_name">
                                <el-input v-model="search_form.goods_name" placeholder="请输入商品名称"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="goods_option_name">
                                <el-input v-model="search_form.goods_option_name" placeholder="请输入商品规格名称"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="search(1)">搜索
                                </el-button>
                            </el-form-item>
                            </el-col>
                        </el-row>
                    </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">
                        </div>
                    </div>
                    <el-table :data="list" style="width: 100%" max-height="600" v-loading="table_loading">
                        <el-table-column prop="id" label="规格ID" width="120" align="center"></el-table-column>
                        <el-table-column prop="goods_id" label="商品id" width="120" align="center"></el-table-column>
                        <el-table-column label="商品规格" align="center" prop="goods" width="100">
                            <template slot-scope="scope">
                                <div>
                                    <el-image :src="scope.row.thumb" alt="" style="width:50px;height:50px;"></el-image>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="" prop="title" align="left"></el-table-column>
                        <el-table-column prop="market_price" label="原价" width="120" align="center"></el-table-column>
                        <el-table-column prop="product_price" label="现价" width="120" align="center"></el-table-column>
                        <el-table-column prop="cost_price" label="成本价" width="120" align="center"></el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 分页 -->
            <div class="vue-page" v-if="total>0">
                <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>

        </div>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {

                    log:[],

                    dialogTableVisible:false,

                    search_form:{
                    },
                    table_loading:false,
                    dialog_table_loading:false,

                    list: [],
                    current_page: 0,
                    total:0,
                    per_page:0,
                }
            },
            created() {
                // this.search(1);
            },
            mounted() {

            },
            methods: {
                setData(data) {
                    console.log(data);
                    this.list = data.data;
                    this.current_page = data.current_page;
                    this.total = data.total;
                    this.per_page = data.per_page;
                },

                search(page) {
                    console.log(this.search_form);
                    let that = this;
                    that.table_loading = true;
                    that.$http.post("{!! yzWebFullUrl('plugin.leading-in-order.admin.goods-search.search') !!}",{page:page,search:this.search_form}).then(response => {
                        // console.log(response);
                        if (response.data.result == 1) {
                            this.setData(response.data.data);
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }), function (res) {
                        console.log(res);
                        that.table_loading = false;
                    };
                },
            },
        })
    </script>
@endsection