<template>
    <div>
        <en-table-layout :tableData="tableData.records" :loading="loading" :selection-change="handleSelectionChange">
            <div slot="toolbar" class="inner-toolbar">
                <div class="toolbar-btns">
                    <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="handleAddBrand"
                        v-if="checkPermission(['productClassAdd'])">添加</el-button>
                </div>
                <div class="toolbar-search">
                    <en-table-search @search="searchEvent" placeholder="请输入品牌名称" />
                </div>
            </div>
            <template slot="table-columns">
                <el-table-column type="selection" width="100" />
                <!--品牌名称-->
                <el-table-column prop="name" label="组合名称" />
                <!--品牌图片-->
                <el-table-column label="组合说明" prop="remark">
                </el-table-column>
                <!--操作-->
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button size="mini" 
                            @click="handleCheckBrand('check', scope.row)"  v-if="checkPermission(['productClassCheck'])" >查看</el-button>
                        <el-button size="mini" type="primary" v-if="checkPermission(['productClassEdit'])"
                            @click="handleEditBrand('edit', scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" v-if="checkPermission(['product:remove'])"
                            @click="handleDeleteBrand(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
            <el-pagination v-if="tableData" slot="pagination" @size-change="handlePageSizeChange"
                @current-change="handlePageCurrentChange" :current-page="tableData.pages"
                :page-sizes="[10, 20, 50, 100]" :page-size="tableData.size"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
            </el-pagination>
        </en-table-layout>
    </div>
</template>

<script>
import * as API_productClass from "@/api/productClass.js"
export default {
    name: 'brandList',
    data() {
        return {
            /** 列表loading状态 */
            loading: false,
            /** 列表参数 */
            params: {
                pages: 1,
                size: 10
            },
            /** 列表数据 */
            tableData: '',
            /** 被选数据 */
            selectedData: [],

            // 添加、修改品牌 dialog
            dialogBrandVisible: false,

            /** 添加、修改品牌 表单 */
            brandForm: {
                logo: ".."
            },

        }
    },
    mounted() {
        this.GET_BrandList()
    },
    methods: {
        /** 当选择项发生变化 */
        handleSelectionChange(val) {
            this.selectedData = val.map(item => item.brand_id)
        },
        uploadSuccess(res) {
            this.$set(this.brandForm, 'logo', res.url)
            this.$refs['brandForm'].validateField('logo')
        },
        /** 图片移除之后 */
        delGiftImg() {
            this.fileList = []
            this.brandForm.logo = ''
        },
        /** 分页大小发生改变 */
        handlePageSizeChange(size) {
            this.params.size = size
            this.GET_BrandList()
        },

        /** 分页页数发生改变 */
        handlePageCurrentChange(page) {
            this.params.page = page
            this.GET_BrandList()
        },

        /** 搜索事件触发 */
        searchEvent(data) {
            this.params.page = 1
            this.params.name = data
            if (!data) delete this.params.name
            this.GET_BrandList()
        },

        /** 获取品牌列表 */
        GET_BrandList() {
            this.loading = true
            API_productClass.getProductList(this.params).then(response => {
                this.loading = false
                this.tableData = response
            }).catch(() => { this.loading = false })
        },
        /** 添加品牌触发事件 */
        handleAddBrand() {
            this.$router.push({
                name: "productClassAdd",
            });
        },
        /** 添加、修改品牌 表单提交 */
        submitBrandForm(formName) {
           
        },
        /** 修改品牌操作 */
        handleEditBrand(index, row) {
            this.$router.push({
                name: "productClassEdit",
                params: { id:row.id, type:index },
            });
           /*  this.brandForm = this.MixinClone(row)
            this.fileList = this.brandForm.logo ? [{ name: 'brand_image', url: this.brandForm.logo }] : []
            this.dialogBrandVisible = true */
        },
        /* 查看商品组合 */
        handleCheckBrand(index, row){
            this.$router.push({
                name: "productClassCheck",
                params: { id:row.id, type:index },
            });
        },
        /** 删除品牌操作 */
        handleDeleteBrand(index, row) {
            this.$confirm('确定要删除这个品牌吗？', '提示', { type: 'warning' }).then(() => {
                this.DELETE_Brand(row.id)
            }).catch(() => { })
        },
        /** 删除商品组合 */
        DELETE_Brand(ids) {
            API_productClass.removeProduct(ids).then(() => {
                this.$message.success('删除成功！')
                this.GET_BrandList()
            })
        }
    }
}
</script>

<style type="text/scss" lang="scss" scoped>
/deep/ .el-table td:not(.is-left) {
    text-align: center;
}

.inner-toolbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 20px;
}

.goods-image {
    max-width: 120px;
    height: 75px;
}

/deep/ .el-select .el-input {
    width: 100px;
}

/deep/ .input-with-select .el-input-group__prepend {
    background-color: #fff;
}

/deep/ .el-form-item__content .edui-editor {
    line-height: normal;
}
</style>