<template>
    <div>
        <el-card :body-style="{ padding: '20px 20px 0 20px' }">
            <div class="goods">
                <el-form ref="form" :inline="true" :model="searchForm">
                    <el-form-item label="商品名称:">
                        <el-input v-model="searchForm.goods_title" placeholder="商品名称" style="width: 100px"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编码:">
                        <el-input v-model="searchForm.external_sku_id" placeholder="商品编码" style="width: 100px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleChoose(1)">筛选</el-button>
                        <el-button plain @click="handleReChoose()">重置筛选</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <el-card style="margin-top: 10px">
            <div>
                <!-- 表格头部操作 -->
                <div class="btn">
                    <el-button type="primary" plain @click="addGoodsCombination">新增组合商品</el-button>
                </div>
                <!-- 表格 -->
                <el-table v-loading="loading" ref="multipleTable" :data="tableData" class="table" tooltip-effect="dark"
                    style="width: 100%" row-key="id" :tree-props="{ children: 'children' }">
                    <el-table-column label="商品信息" width="400">
                        <template slot-scope="scope">
                            <div class="commodityimg">
                                <img :src="scope.row.img_url" class="Img" />
                            </div>
                            <div>
                                <p>{{ scope.row.title }}</p>
                                <p>{{ scope.row.external_sku_id }}</p>
                                <p>{{ scope.row.updated_at }}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="组合数量"></el-table-column>
                    <el-table-column prop="reference_price" label="售价"></el-table-column>
                    <el-table-column prop="stock" label="库存"></el-table-column>
                    <el-table-column prop="status" label="状态"> </el-table-column>
                    <el-table-column label="操作" width="130">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
                            <!-- <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页功能 -->
            <div class="page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
                    layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
                </el-pagination>
            </div>
        </el-card>

        <el-dialog title="新增组合商品" :visible.sync="dialogVisible">
            <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                <el-form-item label="商品名称" prop="title" :rules="[
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                ]">
                    <el-input v-model="dynamicValidateForm.title"></el-input>
                </el-form-item>
                <el-form-item label="商品编码" prop="external_sku_id" :rules="[
                    { required: true, message: '请输入商品编码', trigger: 'blur' },
                ]">
                    <el-input v-model="dynamicValidateForm.external_sku_id"></el-input>
                </el-form-item>
                <el-form-item v-for="(item, index) in dynamicValidateForm.combination_goods" :label="'子商品' + index"
                    :key="item.item_id" :prop="'combination_goods.' + index + '.item_id'" :rules="{
                        required: true, message: '子商品不能为空', trigger: 'blur'
                    }">
                    <el-col :span="8">
                        <el-select v-model="item.item_id" filterable remote reserve-keyword placeholder="请选择子商品"
                            :remote-method="remoteMethod" :loading="remoteLoading">
                            <el-option v-for="sku in skus" :key="sku.id" :label="sku.title" :value="sku.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="2">
                        <el-input v-model="item.item_num" placeholder="数量"></el-input>
                    </el-col>
                    <el-button type="danger" @click.prevent="removeItem(index)">删除</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                    <el-button @click="addItem">添加子商品</el-button>
                    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getGoodsCombination, addGoodsCombination, showGoodsCombination, delGoodsCombination, getGoodsFilter } from "../../api/goods.js";
export default {
    data() {
        return {
            dialogVisible: false,
            loading: false,
            tableData: [], // 商品列表
            searchForm: {
                external_sku_id: "",
                goods_title: "", // 商品名称
            },
            Paginationdata: {}, // 分页相关数据
            current_page: 1, // 当前页
            per_page: 100, // 每页显示数量
            dynamicValidateForm: {
                id: 0,
                title: '',
                external_sku_id: '',
                combination_goods: [{
                    item_id: '',
                    item_num: 1,
                }],
            },
            skus: [{
                'id': '',
                'title': ''
            }],
            remoteLoading: false
        };
    },
    methods: {
        // 列表编辑
        handleEdit(id) {
            this.dialogVisible = true;
            showGoodsCombination(id).then((res) => {
                this.dynamicValidateForm = res.data.data;
                this.skus = res.data.data.skus;
            });
        },
        // 删除
        handleDelete(id) {

        },
        // 获取商品列表
        getList(params) {
            getGoodsCombination(params).then((res) => {
                this.tableData = res.data.data;
                this.Paginationdata = res.data.meta;
                this.loading = false;
            });
        },
        // 筛选
        handleChoose() {
            this.searchForm = {
                ...this.searchForm,
                page: this.current_page,
                per_page: this.per_page,
            };
            this.getList(this.searchForm);
        },
        // 重置筛选
        handleReChoose() {
            this.form = {
                external_sku_id: "",
                goods_title: "", // 商品名称
            };
        },
        // 分页功能
        handleSizeChange(val) {
            // 当前条数
            this.per_page = val;
            this.current_page = 1;
            this.handleChoose();
        },
        handleCurrentChange(val) {
            // 当前页
            this.current_page = val;
            this.handleChoose();
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addGoodsCombination(this.dynamicValidateForm).then((res) => {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.dialogVisible = false;
                        this.handleCurrentChange(1);
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        removeItem(index) {
            this.dynamicValidateForm.combination_goods.splice(index, 1)
        },
        addItem() {
            this.dynamicValidateForm.combination_goods.push({
                item_id: '',
                item_num: 1,
            });
        },
        remoteMethod(query) {
            if (query !== '') {
                this.remoteLoading = true;
                getGoodsFilter(query).then((res) => {
                    this.skus = res.data.data;
                    this.remoteLoading = false;
                });
            } else {
                this.skus = [];
            }
        },
        addGoodsCombination() {
            this.dialogVisible = true;
            this.dynamicValidateForm = {
                id: 0,
                title: '',
                external_sku_id: '',
                combination_goods: [{
                    item_id: '',
                    item_num: 1,
                }],
            };
        }
    },

    mounted() {
        this.getList();
    },
};
</script>

<style lang="css" scoped>
.table {
    margin-top: 20px;
    position: relative;
}

.btn {
    float: right;
}

::v-deep .cell {
    display: flex;
    align-items: center;
}

.commodityimg {
    width: 59px;
    height: 59px;
    background: rgba(227, 227, 227, 0.39);
    opacity: 1;
    display: block;
    margin-right: 12px;
}

.Img {
    width: 100%;
    height: 100%;
}

::v-deep .btn11 {
    padding: 0;
    width: 14px;
    height: 14px;
}

::v-deep .btn11 img {
    width: 100%;
    height: 100%;
}

.page {
    margin-top: 20px;
}
</style>
