
<template>
  <div class="addGoodsClass usersList usersListEdit">
    <div class="head-title">
        <span @click="goUrl" class="blue point">分类</span> / 分类编辑
    </div>
    <div class="content">
        <el-form style="width:50%" :model="userInfo" :rules="rules" ref="userInfo" label-width="120px">
                <el-form-item label="选择分类级别" prop="Tier">
                    <template v-if="editState">
                        <el-radio :disabled="editState" v-model="userInfo.Tier" :label="1">一级分类</el-radio>
                        <el-radio :disabled="editState" v-model="userInfo.Tier" :label="2">二级分类</el-radio>
                        <el-radio :disabled="editState" v-model="userInfo.Tier" :label="3">三级分类</el-radio>
                    </template> 
                    <template v-else>
                        <div @click="SelectTier(1)" style="display:inline-block;margin-right:18px">
                            <el-radio :disabled="editState" v-model="userInfo.Tier" :label="1">一级分类</el-radio>
                        </div>
                        <div @click="SelectTier(2)" style="display:inline-block;margin-right:18px">
                            <el-radio :disabled="editState" v-model="userInfo.Tier" :label="2">二级分类</el-radio>
                        </div>
                        <div @click="SelectTier(3)" style="display:inline-block">
                            <el-radio :disabled="editState" v-model="userInfo.Tier" :label="3">三级分类</el-radio>
                        </div>
                    </template>   
                     
                </el-form-item>
                <el-form-item v-if="userInfo.Parent1Name && (userInfo.Tier==2 || userInfo.Tier==3)" label="一级分类">
                    <span>{{userInfo.Parent1Name}}</span>
                    <span @click="SelectTier(2)" v-if="userInfo.Tier==2 && !editState" style="margin-left:10px" class="blue point">修改</span>
                </el-form-item>
                <el-form-item v-if="userInfo.Parent2Name && userInfo.Tier==3" label="二级分类">
                    <span>{{userInfo.Parent2Name}}</span>
                    <span v-if="!editState" @click="SelectTier(3)" style="margin-left:10px" class="blue point">修改</span>
                </el-form-item>
                <el-form-item label="分类名称" prop="Name">
                    <el-input v-model="userInfo.Name" size="small"></el-input>
                </el-form-item>
                <el-form-item class="commonLabel discount" label="排序" prop="Sort">
                    <el-tooltip class="item" effect="dark" content="排序值越小排序越靠前" placement="top-start">
                        <i class=" elzk el-tooltip el-icon-info"></i>
                    </el-tooltip>
                    <el-input type="number" min="1" size="small" placeholder="请输入" v-model="userInfo.Sort">
                    </el-input>
                </el-form-item>
                <el-form-item label="分类图标">
                    <el-tooltip class="item" effect="dark" content="建议尺寸200*200" placement="top">
                        <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
                    </el-tooltip>
                        <div class="app-gallery-item">
                            <el-button @click="userInfo.IconPath='',userInfo.Icon=''" v-if="userInfo.IconPath!=''" type="danger" icon="el-icon-close" circle></el-button>
                            <img style="width:100px;height:100px" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+userInfo.IconPath" alt="">
                        </div>
                </el-form-item>
                <el-form-item class="commonLabel discount" label="分类大图">
                    <el-tooltip class="item" effect="dark" content="显示在分类页面" placement="top-start">
                        <i class="elzk el-tooltip el-icon-info"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="建议尺寸702*212" placement="top">
                        <el-button @click="openChangeDig(2)" size="small">选择文件</el-button>
                    </el-tooltip>
                    <div class="app-gallery-item">
                        <el-button @click="userInfo.BigIconPath='',userInfo.BigIcon=''" v-if="userInfo.BigIconPath!=''" type="danger" icon="el-icon-close" circle></el-button>
                        <img style="width:100px;height:100px" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+userInfo.BigIconPath" alt="">
                    </div>
                    <p class="blue f12">
                        <span @click="czjfDig=true,imgDig=1" class="point">查看图例</span>
                    </p>
                </el-form-item>
                <el-form-item class="commonLabel discount" label="分类广告图">
                    <el-tooltip class="item" effect="dark" content="小图标模式下显示" placement="top-start">
                        <i class="elzk el-tooltip el-icon-info"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="建议尺寸500*184" placement="top">
                        <el-button @click="openChangeDig(3)" size="small">选择文件</el-button>
                    </el-tooltip>
                    <div class="app-gallery-item">
                        <el-button @click="userInfo.AdvertisingImagePath='',userInfo.AdvertisingImage=''" v-if="userInfo.AdvertisingImagePath!=''" size="mini" type="danger" icon="el-icon-close" circle></el-button>
                        <img style="width:100px;height:100px" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+userInfo.AdvertisingImagePath" alt="">
                    </div>
                    <p class="blue f12">
                        <span @click="czjfDig=true,imgDig=2" class="point">查看图例</span>
                    </p>
                </el-form-item>
                <el-form-item label="分类广告链接">
                    <el-input v-model="userInfo.AdvertisingAddress" size="small" :disabled="true" placeholder="请输入">
                        <el-button slot="append">选择链接</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch
                        v-model="userInfo.Enabled"
                        active-color="#409EFF"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-switch
                        v-model="userInfo.IsShow"
                        active-color="#409EFF"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </el-form> 
            
    </div>
    <div style="margin-top:20px">
        <el-button size="small" type="primary" @click="Save('userInfo')">保存</el-button>
    </div>
    <!-- 查看图例 -->
    <el-dialog title="查看" :visible.sync="czjfDig" width="600px">
      <div class="center">
          <img v-if="imgDig==1" style="width:280px" src="../../assets/img/userman/example-1.png" alt="">
          <img v-if="imgDig==2" style="width:280px" src="../../assets/img/userman/example-2.png" alt="">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="czjfDig = false">确定</el-button>
      </span>
    </el-dialog>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
        <ChooseImg  @SelectId="SelectId"></ChooseImg>   
    </el-dialog>
    <!-- 分类弹窗 -->
    <el-dialog :destroy-on-close="true" :title="titleDig" :visible.sync="tierDig" :width="tierWidth">
        <div v-loading="loading">
            <div style="margin-bottom:20px">
                <div class="searchInput" style="width:250px">
                    <el-input style="display:inline-block;width:225px;height:30px"
                    placeholder="请输入搜索内容"
                    v-model="msg1.Name"
                    size="small"
                    clearable>
                    </el-input>
                    <span @click="getList" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
                </div>
            </div>
            <ul class="tierUl">
                <li @click="SelectTier1(item,index,2)" :class="active1==index ? 'SelectLi' :''" v-for="(item,index) in tableData" :key="index">
                    <span>{{item.Name}}</span>
                    <span v-if="userInfo.Tier==3 && item.ChildList.length>0" style="float:right">
                        <i class="el-icon-arrow-right"></i>
                    </span>
                </li>
                <div v-show="tableData.length==0" class="empty-text">
                    暂无数据
                </div>
            </ul>
            <ul v-if="userInfo.Tier==3" class="tierUl" style="margin-left:10px">
                <li @click="SelectTier2(item,index,3)" :class="active2==index ? 'SelectLi' :''" v-show="tableData2 && tableData2.ChildList" v-for="(item,index) in tableData2.ChildList" :key="index">
                    <span>{{item.Name}}</span>
                </li>
                <div v-show="tableData2.ChildList && tableData2.ChildList.length==0" class="empty-text">
                    暂无数据
                </div>
            </ul>
            <div style="text-align:right;margin-top:20px" slot="footer" class="dialog-footer">
                <el-button size="small" @click="ExitTier">取消</el-button>
                <el-button type="primary" size="small" @click="TierOk">确定</el-button>
            </div>
        </div>
    </el-dialog>    
  </div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    components: {
      ChooseImg
    },
    data() {
      return {
        tableData: [],
        tableData2: [],
        changeState:false,
        imgDig:1,
        czjfDig:false,
        userInfo:{
            Id:0,
            Tier:1,
            Name:'',
            Sort:1,
            ParentId:0,
            Icon:'',
            IconPath:'',
            BigIcon:'',
            BigIconPath:'',
            AdvertisingImage:'',
            AdvertisingImagePath:'',
            AdvertisingAddress:'',
            Enabled:1,
            IsShow:1,
        },
        val:'',
        value:'',
        total:0,
        rules: {
            Name: [
                { required: true, message: '请填写分类名称', trigger: 'blur' }
            ],
            Sort: [
                { required: true, message: '请填写排序', trigger: 'blur' }
            ],
        },
        UserId:'',
        imgType:1,
        editState:false,
        titleDig:'选择归属的一级分类',
        tierDig:false,
        tierWidth:'31%',
        msg1:{
            Id:0,
            Name:'',
            Tier:0,
            ParentId:0,
            Enabled:1,
            IsShow:1,
        },
        loading:false,
        active1:-1,
        active2:-1,
        keepData:{},
        tierOk:0,
      };
    },
    created() {
        if(this.$route.query.UserId){
            this.UserId=this.$route.query.UserId;
            this.getData()
            this.editState=true;
        }
        else{
            this.keepData=this.userInfo;
        }
        this.getList();
    },
    methods: {
        TierOk(){
            this.tierDig =false;  
            this.userInfo.Tier=this.tierOk;
        },
        ExitTier(){
           this.userInfo.ParentId=this.keepData.ParentId; 
           this.userInfo.Parent1Name=this.keepData.Parent1Name; 
           this.userInfo.Parent2Name=this.keepData.Parent2Name; 
            this.tierDig =false;  
        },
        SelectTier2(item,index,num){
            this.active2=index;
            this.userInfo.ParentId=item.Id;
            this.userInfo.Parent2Name=item.Name;
            this.tierOk=num;
        },
        SelectTier1(item,index,num){
            this.tableData2=this.tableData[index];
            this.active1=index;
            this.userInfo.ParentId=item.Id;
            this.userInfo.Parent1Name=item.Name;            
            this.tierOk=num;
            this.active2=-1;
            this.userInfo.Parent2Name="";
        },
        SelectTier(num){
            if(num==1){
                this.active1=-1;
                this.active2=-1;
                this.userInfo.ParentId=this.keepData.ParentId; 
                this.userInfo.Parent1Name=this.keepData.Parent1Name; 
                this.userInfo.Parent2Name=this.keepData.Parent2Name; 
            }
            if(num==2){
                this.tierDig=true;
                this.titleDig='选择归属的一级分类';
                this.tierWidth='20%'
            }
            if(num==3){
                this.tierDig=true;
                this.titleDig='选择归属的二级分类';
                this.tierWidth='600px'
            }
        },
        openChangeDig(val){
            this.changeState=true;
            this.imgType=val;
        },
        SelectId(msg){
            if(this.imgType==1){
                this.userInfo.Icon=msg.selectId;
                this.userInfo.IconPath=msg.url;
            }
             if(this.imgType==2){
                this.userInfo.BigIcon=msg.selectId;
                this.userInfo.BigIconPath=msg.url;
            }
             if(this.imgType==3){
                this.userInfo.AdvertisingImage=msg.selectId;
                this.userInfo.AdvertisingImagePath=msg.url;
            }
            this.changeState=false;
            
        },
        Save(){
            this.apipost("/api/product/SetProductCategoryInfo",this.userInfo, res => {
                if(res.data.resultCode==1){
                    this.goUrl();
                }else {
                    this.Error(res.data.message);
                }
            })

        },
        goUrl(){
            this.$router.push({
                name: 'goodsClassification',
                query: {
                    blank: "y"
                }
            });
        },
        getList(){
            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.tableData=pageData;
                }
                
            })
        },
        getData(){
            this.apipost("/api/product/GetProductCategoryInfo",{CategoryId:this.UserId}, res => {
                this.userInfo=res.data.data;
                this.keepData=res.data.data;
            })
        },

    },
    mounted() {
      
    }
  };

</script>
<style>
.addGoodsClass .searchInput{
    border: 1px solid #DCDFE6;
    border-radius: 4px;
}
.addGoodsClass .searchInput .el-input__inner{
    border:none;outline:none;
    height: 30px;
    line-height: 30px;
}
.addGoodsClass .searchInput{
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    width:250px;
    margin-right: 20px;
}
.addGoodsClass .tierUl .empty-text{
    line-height: 60px;
    color: #909399;
    text-align: center;
    border-bottom: 1px solid #EBEEF5;
}
.addGoodsClass .tierUl .SelectLi{
    background-color: #ecf5ff!important;
}
.addGoodsClass .tierUl li:hover{
    background-color: #F5F7FA;
}
.addGoodsClass .tierUl {
    border: 1px solid #E3E3E3;
    height: 250px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 260px;
    overflow-y: auto;
    display: inline-block;
}
.addGoodsClass .tierUl li{
    border-bottom: 1px solid #EBEEF5;
    padding: 8px;
    box-sizing: border-box;
}
li{
    list-style: none;
}
.addGoodsClass .app-gallery-item .el-button{
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px!important;
}
.addGoodsClass .app-gallery-item{
    width: 100px;
    height: 100px;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    margin-right: 10px;
    margin-top: 10px;
    position: relative;
}
.usersListEdit .tip {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ff4544;
    background-color: #FEF0F0;
    padding: 0 20px;
    border-radius: 5px;
}
.usersListEdit .app-image{
    background-size: cover; background-position: center center; width: 80px; height: 80px; border-radius: 0%;
}
.addGoodsClass .setTable .el-table__body .cell{
    display: flex;
    align-items: center;

}
.addGoodsClass .discount .el-form-item__label{
    padding-right: 30px;
}   
.addGoodsClass .el-form-item .elzk{
    position: absolute;
    left: -25px;
    top:12px;
}
.setMember .el-form-item{
    position: relative;
}
.usersList .blue{
    color:#409EFF;
    
}
.usersList .content{
    background: #fff;
    margin-top:10px;
    padding: 20px;
    box-sizing: border-box;
}

</style>
