
<template>
  <div class="goodsListEdit">
    <div class="head-title">
        <span @click="CommonJump('goodsList')" class="blue point">商品列表</span> / 添加商品
    </div>
    <div style="background:#fff;margin-top:10px;padding:10px 20px 20px">
        <el-form class="app-batch" :model="addMsg" :rules="rules" ref="addMsg" label-width="180px">
            <el-tabs v-model="activeName">
                <el-tab-pane label="商品设置" name="first">
                    <el-card shadow="never">
                        <div slot="header" class="clearfix">
                            <span>选择分类</span>
                        </div>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="商品分类">
                                    <template v-if="addMsg.CategoryList && addMsg.CategoryList.length>0">   
                                        <el-tag type="warning" style="margin-right:10px;" @close="exitCheck(item,index)" v-for="(item,index) in addMsg.CategoryList" :key="index" closable>{{item.Name}}</el-tag>
                                    </template>
                                    <el-button type="primary" @click="flDig=true,keepCategoryList=addMsg.CategoryList" style="margin:0 10px;" size="small">选择分类</el-button>
                                    <span @click="CommonJump('addGoodsClass')" class="blue point">添加分类</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card shadow="never">
                        <div slot="header" class="clearfix">
                            <span>基本信息</span>
                        </div>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="商城商品编码">
                                    <el-tooltip class="item" effect="dark" content="只能从商城中获取商品信息，且基本信息与商城商品保持一致" placement="top"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.Id" 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="Name">
                                    <el-input v-model="addMsg.Name" size="small" placeholder="请输入内容" maxlength="100" show-word-limit>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="商品轮播图(多张)">
                                    <el-tooltip class="item" effect="dark" content="第一张图片为封面图" placement="top"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <p style="color:#c9c9c9;margin-bottom: 12px;">第一张图片为缩略图,其它图片为轮播图,建议像素750*750,最多支持上传9张</p>
                                    <div flex="dir:left">
                                        <div flex="dir:left">
                                            <div style="margin-right: 20px; position: relative; ">
                                                <div class="colapp-image" style="background-image: url(https://cdnimg.iotweixin.com/uploads/mall1285/20200508/dcd7c4f5a4c25ea6edfe38c1f8a68769.png); "></div>
                                                <el-button class="delBtn" type="danger" icon="el-icon-close" circle></el-button>
                                            </div>
                                            <div class="add-image-btn">
                                                + 添加图片
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label="商品视频">
                                    <el-input v-model="addMsg.Id" size="small" placeholder="请输入内容">
                                        <el-button slot="append">添加视频</el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="自定义分享标题">
                                    <el-tooltip class="item" effect="dark" content="分享给好友时，作为商品名称" placement="top"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.Id" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select"></el-input>
                                    <p class="blue point" @click="imgDig=true">查看图例</p>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="分销价设置" name="second">配置管理</el-tab-pane>
                <el-tab-pane label="会员价设置" name="third">角色管理</el-tab-pane>
            </el-tabs>
        </el-form>
        <div class="bottom-div" style="margin-top:20px">
            <el-button size="small" type="primary" @click="Save">保存</el-button>
            <el-button size="small">预览</el-button>
        </div>
    </div>
    <!-- 选择分类 -->
    <el-dialog custom-class="app-add-cat" title="选择分类" :visible.sync="flDig" width="1100px">
        <el-row>
            <el-col :span="8" style="padding:0 10px;box-sizing:border-box">
                <h3 style="padding:15px 0">一级分类</h3>
                <div class="app-goods-cat-list active">
                    <el-checkbox-group v-model="addMsg.CategoryList" @change="handleCheckChange">
                        <div v-for="(item,index) in fenleiData" :key="index" flex="dir:left box:first" class="cat-item">
                            <el-checkbox :label="item">
                                <span style="display: none;">{{item.Name}}</span>
                            </el-checkbox>
                            <div flex="box:last cross:center">
                                <span>{{item.Name}}</span>
                                <i v-if="item.ChildList.length>0" @click="getChild2(item.ChildList)" class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </el-checkbox-group>
                    
                </div>
            </el-col>
            <el-col v-show="childList2.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
                <h3 style="padding:15px 0">二级分类</h3>
                <div class="app-goods-cat-list active">
                    <el-checkbox-group v-model="addMsg.CategoryList">
                        <div v-for="(item,index) in childList2" :key="index" flex="dir:left box:first" class="cat-item">
                            <el-checkbox :label="item">
                                <span style="display: none;">{{item.Name}}</span>
                            </el-checkbox>
                            <div flex="box:last cross:center">
                                <span>{{item.Name}}</span>
                                <i v-if="item.ChildList.length>0" @click="getChild3(item.ChildList)" class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </el-checkbox-group>
                    
                </div>
            </el-col>
            <el-col v-show="childList3.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
                <h3 style="padding:15px 0">三级分类</h3>
                <div class="app-goods-cat-list active">
                    <el-checkbox-group v-model="addMsg.CategoryList">
                        <div v-for="(item,index) in childList3" :key="index" flex="dir:left box:first" class="cat-item">
                            <el-checkbox :label="item">
                                <span style="display: none;">{{item.Name}}</span>
                            </el-checkbox>
                            <div flex="box:last cross:center">
                                <span>{{item.Name}}</span>
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </el-checkbox-group>
                    
                </div>
            </el-col>
        </el-row>
        <div class="tag-box">
            <el-tag @close="exitCheck(item)" v-for="(item,index) in addMsg.CategoryList" :key="index" type="warning" closable style="margin-right:5px">{{item.Name}}</el-tag>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="flDig=false,addMsg.CategoryList=keepCategoryList">取 消</el-button>
            <el-button @click="flDig = false" size="small" type="primary">确 定</el-button>
        </span>
    </el-dialog>   
    <!-- 查看图例 -->
    <el-dialog title="查看自定义分享图片图例" :visible.sync="imgDig" width="30%">
        <div class="center">
            <img style=" width: 310px;height: 360px;" src="../../assets/img/userman/app-share-name.png" alt="">
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="imgDig = false" size="small" type="primary">我知道了</el-button>
        </span>
    </el-dialog>  
  </div>
</template>
<script>
export default {
    data() {
        return {
            imgDig:false,
            activeName:'first',
            flDig:false,
            addMsg:{
                Id:0,
                CategoryList:[],
                Name:'',
            },
            fenleiData:[],
            checkList:[],
            childList2:[],
            childList3:[],
            keepCategoryList:[],
            rules:{
                CategoryIdNew: [
                    { required: true, message: '分类不能为空', trigger: 'change' }
                ],
                Name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ],
            },
            
        };
    },
    created() {
        if(this.$route.query.UserId){
            this.UserId=this.$route.query.UserId;
            // this.getData()

        }
        this.getTree();
    },
    methods: {
        Save(){},
        getChild3(ChildList){
            this.childList3=ChildList;
        },
        getChild2(ChildList){
            this.childList2=ChildList;
        },
        handleCheckChange(){},
        exitCheck(item,index){
            this.addMsg.CategoryList.forEach((list,k)=>{
                if(list.Id==item.Id){
                    this.addMsg.CategoryList.splice(k,1);
                }
            })
        },
        getTree(){
            let msg1={
                Id:0,
                Name:'',
                Tier:0,
                ParentId:0,
                Enabled:1,
                IsShow:1,
            }
            this.apipost("/api/product/GetProductCategoryTreeList", msg1, res => {
                if(res.data.resultCode==1){
                    let pageData=res.data.data;
                    this.fenleiData=pageData;  
                }
                
            })
        },
        getData(){
            this.apipost("/api/user/GetMemberUserInfo",{UserId:this.UserId}, res => {
                this.userInfo=res.data.data;
            })
        },

    },
    mounted() {
      
    }
  };

</script>
<style>
.goodsListEdit .delBtn{
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px;
}
.goodsListEdit .add-image-btn {
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #419EFB;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    text-align: center;
}
.goodsListEdit .colapp-image{
    background-size: cover; 
    background-position: center center; 
    width: 100px; height: 100px; 
    border-radius: 0%;
}
.goodsListEdit .el-form-item__label{
    padding-right:26px;
}
.app-add-cat .el-checkbox-group{
    font-size: 14px!important;
}
.app-add-cat .el-checkbox {
    margin-right: 0;
}
.app-add-cat .el-dialog__body{
    padding:10px 20px!important;
}
.app-add-cat .tag-box .tag-item {
    margin-right: 5px;
}
.app-add-cat .tag-box {
    margin: 20px 0;
}
.app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
}
.app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
}
.app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
}
.goodsListEdit .bottom-div {
    border-top: 1px solid #E3E3E3;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    z-index: 999;
    padding: 10px;
    width: 80%;
}

</style>
