<template>
  <div v-loading="loading" class="setMember usersList usersListEdit">
    <div class="head-title">
      <span @click="CommonJump('PeaceDistribution')" class="blue point">和平分销</span> / 编辑和平分销
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:60%">
           
            <el-form-item label="分销名称" prop="Name">
                <el-input v-model="addMsg.Name" size="small"></el-input>
            </el-form-item>
            <el-form-item label="返佣小数类型" prop="DecimalType">
                <el-radio v-model="addMsg.DecimalType" :label="1">整数</el-radio>
                <el-radio v-model="addMsg.DecimalType" :label="2">保留2位小数</el-radio>
            </el-form-item>
            <el-form-item label="是否启用" prop="Enabled">
                <el-radio v-model="addMsg.Enabled" :label="1">是</el-radio>
                <el-radio v-model="addMsg.Enabled" :label="2">否</el-radio>
            </el-form-item>
            <el-form-item label="等级">
                <el-button @click="gradeDig=true" size="small" type="primary" style="margin-bottom:10px">选择等级</el-button>
                <el-table
                    :data="addMsg.RatioList"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="GradeName"
                        label="名称">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="比例">
                        <template slot-scope="scope">
                            <el-input @input="inputVal(scope.row)" type="number" min="1" v-model="scope.row.CommissionRatio" size="small" placeholder="请输入">
                                <el-button slot="append">%</el-button>
                            </el-input>
                        </template>  
                    </el-table-column>
                    <el-table-column
                        width="80px"
                        prop="address"
                        label="操作">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <img @click="Delete(scope.row,scope.$index)" style="width:32px;height:32px;margin:0 10px" src="../../assets/img/userman/del.png" alt="">
                            </el-tooltip>
                        </template>  
                    </el-table-column>
                </el-table>
            </el-form-item>
            <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.CategoryName}}
                    </el-tag>
                </template>
                <el-button type="primary" @click="flDig=true,keepCategoryList=addMsg.CategoryList"
                style="margin:0 10px;" size="small">选择分类</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div style="margin-top:20px">
        <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </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="NewCategoryList" @change="handleCheckChange">
                    <div v-for="(item,index) in fenleiData" :key="index" flex="dir:left box:first" class="cat-item">
                        <el-checkbox :label="item.Id">
                        <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="NewCategoryList" @change="handleCheckChange">
                    <div v-for="(item,index) in childList2" :key="index" flex="dir:left box:first" class="cat-item">
                        <el-checkbox :label="item.Id">
                        <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="NewCategoryList" @change="handleCheckChange">
                    <div v-for="(item,index) in childList3" :key="index" flex="dir:left box:first" class="cat-item">
                        <el-checkbox :label="item.Id">
                        <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,ExitCateList()">取 消</el-button>
            <el-button @click="flDig = false" size="small" type="primary">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 选择等级 -->
    <el-dialog title="选择等级" :visible.sync="gradeDig" width="510px">
        <div style="box-sizing: border-box;background-color: #F3F5F6;width: 100%;padding-left: 20px;height: 50px;line-height: 50px;">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
            </el-checkbox>
        </div>
        <div style="margin: 15px 0;"></div>
        <div style="padding: 10px 25px 20px;">
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox style="margin-bottom:10px;width:110px" v-for="city in cities" :label="city.Id" :key="city.GradeName">
                {{city.GradeName}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="gradeDig = false">取 消</el-button>
            <el-button size="small" type="primary" @click="chooseGrade">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: [],
        cities: [],
        cityOptions: [],
        isIndeterminate: true,
        gradeDig:false,
        flDig:false,
        addMsg: {
            Id: 0,
            DecimalType: 2,
            Name: '',
            Enabled:2,
            RatioList:[],
            CategoryList:[],
        },
        rules: {
          Name: [{
            required: true,
            message: '请输入分销名称',
            trigger: 'blur'
          }],
          DecimalType: [
            { required: true, message: '请选择类型', trigger: 'change' }
          ],
          Enabled: [
            { required: true, message: '请选择是否启用', trigger: 'change' }
          ],
        },
        GradeId: '',
        loading: false,
        gradeList: [],
        fenleiData:[],
        checkList: [],
        childList2: [],
        childList3: [],
        keepCategoryList: [],
        HpGradeList:[],
        NewCategoryList:[],
      };
    },
    created() {
      
      this.getTree();
      this.getHpDistributorGrade();
    },
    methods: {
        inputVal(row){
            if(Number(row.CommissionRatio)<0){
                row.CommissionRatio=1;
            }
            if(Number(row.CommissionRatio)>100){
                row.CommissionRatio=100;
            }
        },
        Delete(item,index){
            this.addMsg.RatioList.splice(index, 1);
            this.checkedCities.forEach((list,k)=>{
                if(list==item.GradeId){
                    this.checkedCities.splice(k, 1);
                }
            })
        },
        chooseGrade(){
            let arr=[];
            this.addMsg.RatioList=[];
            this.cities.forEach(item=>{
                this.checkedCities.forEach(list=>{
                    if(item.Id==list){
                        let Obj={
                            Grade:item.Grade,
                            GradeId:item.Id,
                            CommissionRatio:'',
                            GradeName:item.GradeName,
                        }
                        arr.push(Obj);
                    }
                })
            })
            
            let list=arr.sort(this.compareGrade("Grade",true));
            this.addMsg.RatioList=list;
            this.gradeDig=false;
        },
        compareGrade(property,desc) {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                if(desc==true){
                    // 升序排列
                    return value1 - value2;
                }else{
                    // 降序排列
                    return value2 - value1;
                }
            }
        },
        handleCheckAllChange(val) {
            this.checkedCities = val ? this.cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        
        Save(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                if(this.addMsg.RatioList.length==0){
                    this.Error("请选择返佣等级！");
                    return;
                }
                this.apipost("/api/user/SetHpDistributorInfo", this.addMsg, res => {
                if (res.data.resultCode == 1) {
                    this.CommonJump('PeaceDistribution');
                } else {
                    this.Error(res.data.message);
                }
                })
            } else {
                return false;
            }
            });
        },
        ExitCateList(){
            this.NewCategoryList=[];
            this.addMsg.CategoryList.forEach(item=>{
                item.Name=item.CategoryName;
                this.NewCategoryList.push(item.CategoryId)
            })
        },
        handleCheckChange() {
            this.addMsg.CategoryList=[];
            this.NewCategoryList.forEach(list=>{
                this.fenleiData.forEach(item => {
                    if(list==item.Id){
                        item.CategoryId=item.Id;
                        this.addMsg.CategoryList.push(item)
                    }
                    item.ChildList.forEach(item2=>{
                        if(list==item2.Id){
                            item2.CategoryId=item2.Id;
                            this.addMsg.CategoryList.push(item2)
                        }
                        item2.ChildList.forEach(item3=>{
                            if(list==item3.Id){
                                item3.CategoryId=item3.Id;
                                this.addMsg.CategoryList.push(item3)
                            }
                                
                        })

                    })
                })
            })
            console.log("this.addMsg.CategoryList",this.addMsg.CategoryList)
        },
        exitCheck(item, index) {
            this.addMsg.CategoryList.forEach((list, k) => {
            if (list.Id == item.Id) {
                this.addMsg.CategoryList.splice(k, 1);
            }
            })
            this.ExitCateList();
        },
        getChild3(ChildList) {
            this.childList3 = ChildList;
        },
        getChild2(ChildList) {
            this.childList2 = ChildList;
        },
        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;
                this.fenleiData.forEach(item => {
                    item.CategoryName = item.Name;
                    item.ChildList.forEach(item2=>{
                            item2.CategoryName = item2.Name;
                            item2.ChildList.forEach(item3=>{
                                item3.CategoryName = item3.Name;
                            })
                    })
                })
            }

            })
        },
        getHpDistributorGrade() {
            this.cityOptions = [];
            this.apipost("/api/user/GetHpDistributorGradeList", {}, res => {
                this.cities = res.data.data;
                let data = res.data.data;
                data.forEach(item => {
                    this.cityOptions.push(item.Id)
                })
                if (this.$route.query.UserId) {
                    this.GradeId = this.$route.query.UserId;
                    this.getData()
                }


            })
        },
        getData() {
            this.loading = true;
            this.apipost("/api/user/GetHpdistributorInfo", {
                CommissionId: this.GradeId
            }, res => {
                this.loading = false;
                this.addMsg = res.data.data;
                this.NewCategoryList=[];
                this.addMsg.CategoryList.forEach(item=>{
                    item.Name=item.CategoryName;
                    this.NewCategoryList.push(item.CategoryId)
                })
                this.checkedCities=[];
                this.addMsg.RatioList.forEach(item=>{
                    this.cities.forEach(list=>{
                        if(item.GradeId==list.Id){
                            this.checkedCities.push(list.Id);
                        }
                    })
                })
                // 
            })
        },
     

    },
    mounted() {

    }
  };

</script>
<style>
.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;
  }
  .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%;
  }

  .setMember .setTable .el-table__body .cell {
    display: flex;
    align-items: center;

  }

  .setMember .commonLabel .el-form-item__label {
    margin-top: -4px;
  }

  .setMember .discount .el-form-item__label {
    padding-right: 30px;
    margin-top: -4px;
  }

  .setMember .el-form-item .elzk {
    position: absolute;
    left: -25px;
    top: 8px;
  }

  .setMember .el-form-item {
    position: relative;
  }

  .usersList .blue {
    color: #409EFF;

  }

  .usersList .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

</style>
