<template>
    <div class="goodsClass">
        <div class="head-title">
            分类列表
            <el-button style="float:right;margin-top: -5px;margin-left:20px;" size="small" type="primary">分类导出</el-button>
            <el-button @click="goUrl" style="float:right;margin-top: -5px;" size="small" type="primary">添加分类</el-button>
        </div>
        <div style="margin-top:10px;background:#fff;padding:20px">
            <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="商品分类" name="first">
                <div style="margin-bottom:18px">
                    <template v-if="!dragState">
                        <div class="searchInput" style="width:250px">
                            <el-input style="display:inline-block;width:225px;height:30px"
                            placeholder="请输入搜索内容"
                            v-model="Name"
                            size="small"
                            clearable>
                            </el-input>
                            <span @click="getSearch" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
                        </div>
                        <el-button @click="dragState=true" style="margin-left:10x;" size="small" type="primary">编辑排序</el-button>
                    </template>
                    <template v-if="dragState">
                        <el-button :loading="saveBtnLoad" @click="addSort" size="small" type="primary">保存排序</el-button>
                        <el-button @click="dragState=false" style="margin:0 10x;" size="small" type="primary">取消编辑</el-button>
                        <span>拖动分类名称排序</span>
                    </template>   
                </div>
                <div v-loading="loading" flex="dir:left box:mean" class="cat-list nopadding">
                    <el-card class="card-item-box" shadow="never">
                        <div slot="header" class="clearfix">
                            <el-checkbox v-model="val"></el-checkbox>
                            <span>一级分类</span>
                        </div>
                        <draggable
                            class="syllable_ul"
                            element="ul"
                            :list="tableData1"
                            :options="{ animation:150}"
                            :no-transition-on-drag="false"
                            draggable= ".draggable" 
                            >
                            <!-- @change="change"
                            @start="start"
                            @end="end" -->
                            <div @click="getChild(item,index)" :class="{'draggable':dragState,'itemActive':activeIndex==item.Id}" v-for="(item,index) in tableData1" :key="index">
                                <el-row style="padding:7px 0;height:50px;box-sizing:border-box">
                                    <el-col :span="2" flex="main:center" style="padding-top:6px">
                                        <el-checkbox v-model="val"></el-checkbox>
                                    </el-col>
                                    <el-col :span="4" style="padding-top:6px">
                                        <el-tooltip class="item" effect="dark" :content="item.Id+''" placement="top">
                                            <div class="cat-id">{{item.Id}}</div>
                                        </el-tooltip>
                                    </el-col>
                                    <el-col :span="11" flex="cross:center">
                                        <div v-if="item.IconPath==''" class="app-image cat-icon noIcon"></div>
                                        <div v-else class="app-image cat-icon" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + item.IconPath + ')',backgroundSize:'cover'}"></div>
                                        <div class="cat-name-info">
                                            <el-tooltip class="item" effect="dark" :content="item.Name" placement="top">
                                                <span>{{item.Name}}</span>
                                            </el-tooltip>
                                        </div>
                                    </el-col>
                                    <el-col :span="7">
                                        <template v-if="!dragState">
                                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                <img @click="goUrl(item)" style="margin-right:9px" src="../../assets/img/userman/edit.png" alt="">
                                            </el-tooltip>
                                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                <img @click="Delete(item)" src="../../assets/img/userman/del.png" alt="">
                                            </el-tooltip>
                                        </template>
                                    </el-col>
                                </el-row>
                            </div>
                        </draggable>
                    </el-card>
                    <el-card class="card-item-box" shadow="never">
                        <div slot="header" class="clearfix">
                            <el-checkbox v-model="val"></el-checkbox>
                            <span>二级分类</span>
                        </div>
                        <draggable
                            class="syllable_ul"
                            element="ul"
                            :list="tableData2"
                            :options="{ animation:150}"
                            :no-transition-on-drag="false"
                            draggable= ".draggable" 
                            >
                            <div @click="getChild2(index,item)" :class="{'draggable':dragState,'itemActive':activeIndex2==index}" v-for="(item,index) in tableData2" :key="item.Id">
                                <el-row style="padding:7px 0;height:50px;box-sizing:border-box">
                                    <el-col :span="2" flex="main:center" style="padding-top:6px">
                                        <el-checkbox v-model="val"></el-checkbox>
                                    </el-col>
                                    <el-col :span="4" style="padding-top:6px">
                                        <el-tooltip class="item" effect="dark" :content="item.Id+''" placement="top">
                                            <div class="cat-id">{{item.Id}}</div>
                                        </el-tooltip>
                                    </el-col>
                                    <el-col :span="11" flex="cross:center">
                                        <div v-if="item.IconPath==''" class="app-image cat-icon noIcon"></div>
                                        <div v-else class="app-image cat-icon" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + item.IconPath + ')',backgroundSize:'cover'}"></div>
                                        <div class="cat-name-info">
                                            <el-tooltip class="item" effect="dark" :content="item.Name" placement="top">
                                                <span>{{item.Name}}</span>
                                            </el-tooltip>
                                        </div>
                                    </el-col>
                                    <el-col :span="7">
                                        <template v-if="!dragState">
                                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                <img @click="goUrl(item)" style="margin-right:9px" src="../../assets/img/userman/edit.png" alt="">
                                            </el-tooltip>
                                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                <img @click="Delete(item)" src="../../assets/img/userman/del.png" alt="">
                                            </el-tooltip>
                                        </template>
                                    </el-col>
                                </el-row>
                            </div>
                            <el-row v-if="tableData2.length==0" style="padding:7px 0;height:50px;box-sizing:border-box">
                                <el-col :span="2" flex="main:center" style="padding-top:6px">
                                    <el-checkbox v-model="val"></el-checkbox>
                                </el-col>
                                <el-col :span="4" style="padding-top:6px">
                                    <el-tooltip class="item" effect="dark" content="" placement="top">
                                        <div class="cat-id"></div>
                                    </el-tooltip>
                                </el-col>
                                <el-col :span="11" flex="cross:center">
                                    <div class="app-image nodataicon"></div>
                                    <div class="cat-name-info">
                                        <el-tooltip class="item" effect="dark" content="敬请期待" placement="top">
                                            <span>敬请期待</span>
                                        </el-tooltip>
                                    </div>
                                </el-col>
                                <el-col :span="7">
                                    <template v-if="!dragState">
                                        <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                            <img @click="goUrl(item)" style="margin-right:9px" src="../../assets/img/userman/edit.png" alt="">
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                            <img @click="Delete(item)" src="../../assets/img/userman/del.png" alt="">
                                        </el-tooltip>
                                    </template>

                                </el-col>
                            </el-row>
                        </draggable>
                    </el-card>
                    <el-card class="card-item-box" shadow="never">
                        <div v-if="tableData3.length>0" slot="header" class="clearfix">
                            <el-checkbox v-model="val"></el-checkbox>
                            <span>三级分类</span>
                        </div>
                        <draggable v-if="tableData3.length>0"
                            class="syllable_ul"
                            element="ul"
                            :list="tableData2"
                            :options="{ animation:150}"
                            :no-transition-on-drag="false"
                            draggable= ".draggable" 
                            >
                            <div @click="getChild3(index)" :class="{'draggable':dragState,'itemActive':activeIndex3==index}" v-for="(item,index) in tableData3" :key="item.Id">
                                <el-row style="padding:7px 0;height:50px;box-sizing:border-box">
                                    <el-col :span="2" flex="main:center" style="padding-top:6px">
                                        <el-checkbox v-model="val"></el-checkbox>
                                    </el-col>
                                    <el-col :span="4" style="padding-top:6px">
                                        <el-tooltip class="item" effect="dark" :content="item.Id+''" placement="top">
                                            <div class="cat-id">{{item.Id}}</div>
                                        </el-tooltip>
                                    </el-col>
                                    <el-col :span="11" flex="cross:center">
                                        <div v-if="item.IconPath==''" class="app-image cat-icon noIcon"></div>
                                        <div v-else class="app-image cat-icon" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + item.IconPath + ')',backgroundSize:'cover'}"></div>
                                        <div class="cat-name-info">
                                            <el-tooltip class="item" effect="dark" :content="item.Name" placement="top">
                                                <span>{{item.Name}}</span>
                                            </el-tooltip>
                                        </div>
                                    </el-col>
                                    <el-col :span="7">
                                        <template v-if="!dragState">
                                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                <img @click="goUrl(item)" style="margin-right:9px" src="../../assets/img/userman/edit.png" alt="">
                                            </el-tooltip>
                                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                <img @click="Delete(item)" src="../../assets/img/userman/del.png" alt="">
                                            </el-tooltip>
                                        </template>
                                    </el-col>
                                </el-row>
                            </div>
                        </draggable>
                    </el-card>
                </div>
            </el-tab-pane>
            <el-tab-pane label="商品分类转移" name="second">
                <div class="app-transfer">
                    <div flex="dir:left">
                        <el-card shadow="never" class="transfer">
                            <div slot="header" class="clearfix">
                                <span @click="getnoChangeData(1)" :class="transChild1!='' ? 'blue' :''" class="point">分类</span>
                                <span v-if="transChild1!=''">/{{transChild1}}</span>
                            </div>
                            <div class="cat-body">
                                <div class="searchInput" style="width:240px">
                                    <el-input style="display:inline-block;width:219px;height:30px"
                                    placeholder="请输入搜索内容"
                                    v-model="msg1.Name"
                                    size="small"
                                    clearable>
                                    </el-input>
                                    <span @click="getList1(1)" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
                                </div>
                                <div v-for="(item,index) in transData1" :key="index" flex="dir:left box:first" style="width:100%;margin-top:16px">
                                    <div class="app-ellipsis">
                                        <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 1;">
                                            <el-radio @change="radioChange" v-model="transMsg.CategoryId" :label="item.Id">{{item.Name}}</el-radio>
                                        </div>
                                    </div>
                                    <button @click="nextData(1,item)" v-if="item.ChildList.length>0" type="button" class="el-button cat-next el-button--text">
                                        <i class="el-icon-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                        </el-card>
                        <div flex="dir:left cross:center">
                            <el-button size="mini" class="middle" :type="transActive" icon="el-icon-arrow-right" circle></el-button>
                        </div>
                        <el-card shadow="never" class="transfer">
                            <div slot="header" class="clearfix">
                                <span @click="getnoChangeData(2)" :class="transChild2!='' ? 'blue' :''" class="point">分类</span>
                                <span v-if="transChild2!=''">/{{transChild2}}</span>
                            </div>
                            <div class="cat-body">
                                <div class="searchInput" style="width:240px">
                                    <el-input style="display:inline-block;width:219px;height:30px"
                                    placeholder="请输入搜索内容"
                                    v-model="msg1.Name"
                                    size="small"
                                    clearable>
                                    </el-input>
                                    <span @click="getList1(2)" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
                                </div>
                                <div v-for="(item,index) in transData2" :key="index" flex="dir:left box:first" style="width:100%;margin-top:16px">
                                    <div class="app-ellipsis">
                                        <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 1;">
                                            <el-radio @change="radioChange" v-model="transMsg.ParentId" :label="item.Id">{{item.Name}}</el-radio>
                                        </div>
                                    </div>
                                    <button @click="nextData(2,item)" v-if="item.ChildList.length>0" type="button" class="el-button cat-next el-button--text">
                                        <i class="el-icon-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <el-button :loading="saveBtnLoad" @click="transClass" style="margin-top:10px" size="mini" type="primary">开始转移</el-button>
                    
                </div>
            </el-tab-pane>
            <el-tab-pane label="分类样式" name="third">
                <div class="app-style">
                    <div flex="dir:left" class="tab-box">
                        <div @click="changeImg(typeList,1)" :class="changestyle.Type==1 ? 'active' : ''" class="btn">一级分类样式</div>
                        <div @click="changeImg(typeList2,2)" :class="changestyle.Type==2 ? 'active' : ''" class="btn">二级分类样式</div>
                        <div @click="changeImg(typeList3,3)" :class="changestyle.Type==3 ? 'active' : ''" class="btn">三级分类样式</div>
                    </div>
                    <div>
                        <div flex="dir:left">
                            <div :class="(styleData.Type!=changestyle.Type || changestyle.Style!=item.Style) ? 'hoverClass' :''" v-for="(item,index) in styleList" :key="index" flex="main:center">
                                <div flex="main:center" class="image-box" style="border: 1px solid rgb(242, 244, 245);"><div>
                                    <div class="cat-style-model"></div>
                                    <img :src="item.src"></div>
                                    <div v-if="styleData.Type==changestyle.Type && changestyle.Style==item.Style" class="style-img active"></div>
                                    <div @click="SelectStyle(item.Style)" class="text">
                                        启用该样式
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="padding: 18px 20px;border-bottom: 1px solid #EBEEF5;box-sizing: border-box;"> 
                            显示设置
                        </div>
                        <el-form :model="changestyle" style="padding:0 30px;margin:20px 0" :rules="changestylerules" ref="changestyle" label-width="180px">
                            <el-form-item label="每个分类商品显示总数" prop="CategoryNum" class="is-required">
                                <el-tooltip class="item" effect="dark" content="每个分类板块显示的商品最大数(0~100)" placement="top"
                                            style="position: absolute;left: -10px;top:10px">
                                <i class="el-tooltip el-icon-info"></i>
                                </el-tooltip>
                                <el-input v-model="changestyle.CategoryNum" style="width:393px;margin-left:15px" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                    <el-button slot="append">个</el-button>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="商品每行显示数量" prop="RowNum" class="is-required">
                                <el-tooltip class="item" effect="dark" content="默认首页显示" placement="top"
                                            style="position: absolute;left: -10px;top:10px">
                                <i class="el-tooltip el-icon-info"></i>
                                </el-tooltip>
                                <el-select style="margin-left:15px" v-model="changestyle.RowNum" placeholder="请选择" size="small">
                                    <el-option label="1" :value="1"> </el-option>
                                    <el-option label="2" :value="2"> </el-option>
                                    <el-option label="3" :value="3"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form> 
                        <el-button :loading="saveBtnLoad" @click="SaveStyle('changestyle')" style="margin-left: 10px;" size="small" type="primary">保存</el-button>

                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        </div>
        <!-- 商品分类搜索 -->
        <el-dialog
            title=""
            :visible.sync="searchDig"
            width="960px">
            <el-table
                class="tableCenter"
                :data="searchList"
                border
                style="width: 100%">
                <el-table-column
                prop="Tier"
                label="分类等级"
                width="200">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Tier==1">一级分类</span>
                        <span v-if="scope.row.Tier==2">二级分类</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="Name"
                label="分类名称"
                width="300">
                    <template slot-scope="scope">
                        <span>
                            <img v-if="scope.row.IconPath!=''" style="width:30px;height:30px" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+scope.row.IconPath" alt="">
                            {{scope.row.Name}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="Tier"
                
                label="操作">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                            <img @click="goUrl(scope.row)" style="margin-right:9px" src="../../assets/img/userman/edit.png" alt="">
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <img @click="Delete(scope.row)" src="../../assets/img/userman/del.png" alt="">
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
 import draggable from "vuedraggable"
export default {
    name: "goodsClass",
    components: {
      draggable
    },
    data(){
        return{
            transChild1:'',
            transChild2:'',
            transActive:'',
            loading:false,
            searchDig:false,
            val:'',
            activeName:'first',
            dragState:false,
            msg1:{
                Id:0,
                Name:'',
                Tier:0,
                ParentId:0,
                Enabled:1,
                IsShow:1,
            },
            msg2:{
                pageIndex:0,
                pageSize:1000,
                Id:0,
                Name:'',
                Tier:0,
                ParentId:0,
                Enabled:1,
                IsShow:1,
            },
            tableData1:[],
            tableData2:[],
            tableData3:[],
            activeIndex:0,
            activeIndex2:-1,
            activeIndex3:-1,
            sortList:[],
            saveBtnLoad:false,
            searchList:[],
            Name:'',
            transMsg:{
                CategoryId:-1,
                ParentId:-1,
            },
            transData1:[],
            transData2:[],
            noChangeData:[],
            typeList:[
                {
                    Style:1,
                    src:this.domainManager().ImageUrl + '/Static/one-a.png',
                },
                {
                    Style:2,
                    src:this.domainManager().ImageUrl + '/Static/one-b.png',
                },
                {
                    Style:3,
                    src:this.domainManager().ImageUrl + '/Static/one-c.png',
                },
                {
                    Style:4,
                    src:this.domainManager().ImageUrl + '/Static/one-d.png',
                },
            ],
            typeList2:[
                {
                    Style:1,
                    src:this.domainManager().ImageUrl + '/Static/two-a.png',
                },
                {
                    Style:2,
                    src:this.domainManager().ImageUrl + '/Static/two-c.png',
                },
                {
                    Style:3,
                    src:this.domainManager().ImageUrl + '/Static/two-b.png',
                },
                {
                    Style:4,
                    src:this.domainManager().ImageUrl + '/Static/two-d.png',
                },
            ],
            typeList3:[
                {
                    Style:1,
                    src:this.domainManager().ImageUrl + '/Static/three-a.png',
                },
                {
                    Style:2,
                    src:this.domainManager().ImageUrl + '/Static/three-b.png',
                },
                {
                    Style:3,
                    src:this.domainManager().ImageUrl + '/Static/three-c.png',
                },
            ],
            styleData:{},
            styleList:[],
            changestyle:{
                Id:-1,
                Type:-1,
                Style:-1,
                CategoryNum:1,
                RowNum:1,
            },
            changestylerules:{

            },
            
        }
    },
    created(){
        this.getList1();
        this.getStyle();
    },
    methods:{
        goUrl(item){
            if(item){
                this.$router.push({
                    name: 'addGoodsClass',
                    query: {
                        UserId:item.Id
                    }
                });
            }
            else{
                this.$router.push({
                    name: 'addGoodsClass'
                });
            }
        },
        SaveStyle(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.saveBtnLoad=true;
                    this.apipost("/api/product/SetProductCategoryStyleInfo",this.changestyle,
                        res => {
                            this.saveBtnLoad=false;
                            if (res.data.resultCode === 1) {
                                this.getStyle();
                                this.Success(res.data.message);
                            } else {
                                this.Error(res.data.message);
                            }
                            },
                        null
                    );
                } else {
                return false;
                }
            });
        },
        SelectStyle(Style){
            this.changestyle.Style=Style;
             this.styleData.Type= this.changestyle.Type

        },
        changeImg(list,type){
            this.styleList=list;
            this.changestyle.Type=type;
        },
        getStyle(){
            this.loading=true;
            this.apipost("/api/product/GetProductCategoryStyleInfo",{}, res => {
                if(res.data.resultCode==1){
                    let data=res.data.data;
                    this.styleData=res.data.data;
                    this.changestyle={
                        Id:data.Id,
                        Type:data.Type,
                        Style:data.Style,
                        CategoryNum:data.CategoryNum,
                        RowNum:data.RowNum,
                    }
                    if(this.styleData.Type==1){
                        this.styleList=this.typeList;
                    }
                    if(this.styleData.Type==2){
                        this.styleList=this.typeList2;
                    }
                    if(this.styleData.Type==3){
                        this.styleList=this.typeList3;
                    }
                }
                
            })
        },
        getnoChangeData(num){
            if(num==1){
                this.transData1=this.noChangeData;
                this.transChild1=''
            }
            else{
                this.transData2=this.noChangeData;
                this.transChild2=''

            }
        },
        radioChange(){
            if(this.transMsg.CategoryId > 0 && this.transMsg.ParentId > 0){
                this.transActive="primary"
            }

        },
        // 转移分类
        transClass(){
            if(this.transMsg.CategoryId<0){
                this.Error("必须选择转移前的分类！");
                return;
            }
            if(this.transMsg.ParentId<0){
                this.Error("必须选择转移后的分类！");
                return;
            }
            this.saveBtnLoad=true;
            this.apipost("/api/product/SetProductCategoryTransfer",this.transMsg, res => {
                this.saveBtnLoad=false;
                if(res.data.resultCode==1){
                    this.Success(res.data.message)
                    this.getList1();
                    this.transMsg={
                        CategoryId:-1,
                        ParentId:-1,
                    }
                }
            })

        },
        nextData(num,item){
            if(num==1){
                this.transData1=item.ChildList;
                this.transChild1=item.Name;
            }else{
                this.transData2=item.ChildList;
                this.transChild2=item.Name;


            }
        },
        // 删除分类
        Delete(item){
            let that=this;
            that.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.apipost('/api/product/DelProductCategoryInfo',{CategoryId:item.Id},
                    res => {
                    if (res.data.resultCode === 1) {
                        this.getList1();
                        this.Success(res.data.message)
                        this.searchDig=false;

                    } else {
                        this.Error(res.data.message);
                    }
                    },
                    null
                );
            }).catch(() => {
                
            });
        },
        getSearch(){
            if(this.Name==''){
                this.msg1.Name=this.Name;
                this.getList1()
            }else{
                this.msg2.Name=this.Name;
                this.getList2();
                this.searchDig=true
            }
            
        },
        addSort(){
            this.sortList=[];
            this.tableData1.forEach((item,index)=>{
                item.ChildList.forEach((item2,index2)=>{
                    let obj={
                        Id:item2.Id,
                        Sort:index2,
                        Name:item2.Name,
                    }
                    this.sortList.push(obj)
                })
                let obj={
                    Id:item.Id,
                    Sort:index,
                    Name:item.Name,
                }
                this.sortList.push(obj)
            })
            this.saveBtnLoad=true;
            this.apipost("/api/product/SetProductCategorySort",this.sortList, res => {
                this.saveBtnLoad=false;
                if(res.data.resultCode==1){
                    this.Success(res.data.message)
                    this.getList1();
                }
            })
        },
        getChild3(index){
            this.activeIndex3=index;
        },
        getChild2(index){
            this.activeIndex2=index;
            this.tableData3=this.tableData2[index].ChildList;
        },
        getChild(item,index){
            this.activeIndex=item.Id;
            this.tableData2=this.tableData1[index].ChildList;
            if(this.tableData2.length>0){
                this.tableData3=this.tableData2[0].ChildList;
            }
            

        },
        handleClick(val){

        },
        getList1(num){
            this.loading=true;
            this.apipost("/api/product/GetProductCategoryTreeList", this.msg1, res => {
                this.loading=false;
                if(res.data.resultCode==1){
                    let pageData=res.data.data;
                    if(!num){
                        this.tableData1=pageData;
                        this.noChangeData=pageData;
                        if(this.tableData1.length>0){
                            let index=this.activeIndex;
                            this.tableData2=this.tableData1[index].ChildList
                            if(this.tableData2.length>0){
                                let index2=0;
                                if(this.activeIndex2>-1){
                                    index2=this.activeIndex2;
                                }
                                this.tableData3=this.tableData2[index].ChildList
                            }
                        }
                        this.transData1=pageData;
                        this.transData2=pageData;
                    }
                    if(num && num==1){
                        this.transData1=pageData;
                    }  
                    if(num && num==2){
                        this.transData2=pageData;
                    } 
                    
                    
                }
                
            })
        },
        getList2(){
            this.loading=true;
            this.apipost("/api/product/GetProductCategoryPageList", this.msg2, res => {
                this.loading=false;
                if(res.data.resultCode==1){
                    let pageData=res.data.data.pageData;
                    this.searchList=pageData; 
                }
                
            })
        },
    },
};
</script>

<style>
.goodsClass .noIcon{
    background-image: url('../../assets/img/default.png');
    background-size: cover;
    background-position: center center;
    width: 30px;
    height: 30px;
    border-radius: 0%;
}
.goodsClass .el-form-item__label{
    position: relative;
    top: -3px;
}
.goodsClass .app-style .hoverClass:hover .text{
    display: block;
}
.goodsClass .app-style .hoverClass:hover .cat-style-model{
    display: block;
}
.goodsClass .app-style .style-img{
    background-image: url('../../assets/img/userman/select.png');
     background-size: cover; 
     background-position: center center; 
     width: 80px; 
     height: 80px; 
     border-radius: 0%;
}
.goodsClass .app-style .image-box .active {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}
.goodsClass .app-style .image-box .text {
    cursor: pointer;
    background: #409eff;
    text-align: center;
    position: absolute;
    top: 245px;
    left: auto;
    line-height: 30px;
    width: 90px;
    color: #fff;
    z-index: 999;
    display: none;
}
.goodsClass .app-style .cat-style-model {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    z-index: 1;
    display: none;
}
.goodsClass .app-style .image-box {
    width: 340px;
    border: 1px solid #f2f4f5;
    cursor: pointer;
    border-radius: 25px;
    margin-right: 5px;
    padding: 30px 0;
    position: relative;
}
.goodsClass .app-style .tab-box .active {
    background: #409eff;
    color: #FFFFFF;
}
.goodsClass .app-style .tab-box .btn {
    cursor: pointer;
    padding: 7px 15px;
    margin-right: 10px;
    border: 1px solid #E3E3E3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.goodsClass .app-style .tab-box {
    margin-bottom: 20px;
}
.goodsClass .app-transfer .middle {
    border-radius: 36px;
    width: 36px;
    height: 36px;
    margin: 0 30px;
    font-size: 10px;
}
.goodsClass .app-transfer .transfer .cat-next {
    color: #353535;
    text-align: right;
    font-size: 10px;
    padding: 0;
}
.vue-line-clamp {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.goodsClass .nopadding .el-card__body{
    padding: 0!important;
    height: 500px; overflow: auto;

}
.goodsClass .itemActive {
    background-color: #F5F5F5;
}
.goodsClass .nodataicon{
    background-position: center center; width: 30px; height: 30px; border-radius: 0%;
    background-image: url('../../assets/img/userman/jqqd.png');
    background-size: cover;
    margin-right:10px;
}
.goodsClass .cat-icon{
    background-position: center center; width: 30px; height: 30px; border-radius: 0%;
}
.goodsClass .searchInput{
    border: 1px solid #DCDFE6;
    border-radius: 4px;
}
.goodsClass .searchInput .el-input__inner{
    border:none;outline:none;
    height: 30px;
    line-height: 30px;
}
.goodsClass .searchInput{
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    width:250px;
    margin-right: 20px;
}
.goodsClass .cat-id {
    width: 55px;
    color: #999;
    font-size: 14px;
    margin-left: 5px;
}
.goodsClass .cat-name-info {
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.goodsClass .cat-icon {
    margin-right: 10px;
}
.goodsClass .cat-list .el-card {
    display: inline-block;
}
.goodsClass .cat-list .card-item-box {
    margin-right: 5px;
    height: 552px;
}
.goodsClass .cat-list .el-card:first-of-type {
    margin-left: 0;
}
.goodsClass .cat-list {
    white-space: nowrap;
}
.goodsClass{
    cursor: pointer;
}

</style>
