<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 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 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 style="margin-right:9px" src="../../assets/img/userman/edit.png" alt="">
                                            </el-tooltip>
                                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                <img 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" 
                            >
                            <!-- @change="change"
                            @start="start"
                            @end="end" -->
                            <div @click="getChild2(index)" :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 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 style="margin-right:9px" src="../../assets/img/userman/edit.png" alt="">
                                            </el-tooltip>
                                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                <img 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 style="margin-right:9px" src="../../assets/img/userman/edit.png" alt="">
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                            <img 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">
                        
                    </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>分类</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="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>
                                <div v-for="item in 4" flex="dir:left box:first" style="width:100%;margin-top:10px">
                                    <div class="app-ellipsis">
                                        <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 1;">
                                            <el-radio v-model="radio" label="1">备选项</el-radio>
                                        </div>
                                    </div>
                                    <button type="button" class="el-button cat-next el-button--text">
                                        <i class="el-icon-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="分类样式" name="third">商品分类</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 style="margin-right:9px" src="../../assets/img/userman/edit.png" alt="">
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <img 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{
            loading:false,
            searchDig:false,
            val:'',
            activeName:'second',
            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:[],
            activeIndex:0,
            activeIndex2:-1,
            sortList:[],
            saveBtnLoad:false,
            searchList:[],
            Name:'',
        }
    },
    created(){
        this.getList1();
    },
    methods:{
        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();
                }
            })
        },
        getChild2(index){
            this.activeIndex2=index;
        },
        getChild(item,index){
            this.activeIndex=item.Id;
            this.tableData2=this.tableData1[index].ChildList;
        },
        handleClick(val){

        },
        getList1(){
            this.loading=true;
            this.apipost("/api/product/GetProductCategoryTreeList", this.msg1, res => {
                this.loading=false;
                if(res.data.resultCode==1){
                    let pageData=res.data.data;
                    this.tableData1=pageData;
                    if(this.tableData1.length>0){
                        this.tableData2=this.tableData1[0].ChildList
                    }
                }
                
            })
        },
        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; 
                    console.log("searchList",this.searchList) 
                }
                
            })
        },
    },
};
</script>

<style>
.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>
