<template>
  <div v-loading="loading" class="setMember usersList usersListEdit">
    <div class="head-title">
      <span @click="CommonJump('mailRules')" 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="分类">
          <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-item label="包邮名称" prop="Name" class="is-required">
          <el-input v-model="addMsg.Name" placeholder="请输入包邮名称" />
        </el-form-item>
        <el-form-item label="包邮类型" prop="IsEnable">
          <el-radio v-model="rulesType" :label="1" @change='addMsg.FullMoneyPinkage=0'>件数包邮</el-radio>
          <el-radio v-model="rulesType" :label="2" @change='addMsg.FullNumPinkage=0'>满额包邮</el-radio>
        </el-form-item>
        <el-form-item label="包邮件数" prop="FullNumPinkage" class="is-required">
          <el-input :disabled="rulesType==1?false:true" v-model="addMsg.FullNumPinkage" placeholder="请输入包邮件数" type='number' :min='0'>
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="满额包邮" prop="FullMoneyPinkage" class="is-required">
          <el-input :disabled="rulesType==2?false:true" v-model="addMsg.FullMoneyPinkage" placeholder="请输入满额度"  type='number' :min='0'>
             <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="跳转链接">
          <el-input  v-model="addMsg.FreeShippingUrl" placeholder="请输入链接"  >
             
          </el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="IsEnable">
          <el-radio v-model="addMsg.IsEnable" :label="1">是</el-radio>
          <el-radio v-model="addMsg.IsEnable" :label="0">否</el-radio>
        </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>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: [],
        cities: [],
        cityOptions: [],
        isIndeterminate: true,
        flDig: false,
        rulesType:1,
        addMsg: {
          Id: 0,
          FullNumPinkage:0,
          FullMoneyPinkage:0,
          IsEnable: 0,
          Name:'',
          CategoryList: [],
          FreeShippingUrl:'',
        },
        rules: {
          FullNumPinkage: [{
            required: true,
            message: '请输入件数',
            trigger: 'blur'
          }],
           Name: [{
            required: true,
            message: '请输入包邮名称',
            trigger: 'blur'
          }],
          FullMoneyPinkage: [{
            required: true,
            message: '请选择额度',
            trigger: 'change'
          }],
          IsEnable: [{
            required: true,
            message: '请选择是否启用',
            trigger: 'change'
          }],
         
          
        },
        loading: false,
        fenleiData:[],
        childList2: [],
        childList3: [],
        keepCategoryList: [],
        NewCategoryList: [],
      };
    },
    created() {

      this.getTree();
      if(this.$route.query.ID){
          this.getData(this.$route.query.ID)
      }
    },
    methods: {
     
 

      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.addMsg.CategoryList.length == 0) {
              this.Error("请选择分类！");
              return;
            }
            if(this.addMsg.FullNumPinkage == 0 && this.addMsg.FullMoneyPinkage == 0){
                 this.Error("包邮件数和满额额度至少一个大于0");
                 return;
            }
            let List = []
            this.addMsg.CategoryList.forEach(x=>{
                let obj = {}
                obj.CategoryId = x.CategoryId;
                obj.CategoryName = x.CategoryName;
                List.push(obj)
            })
             this.addMsg.CategoryList = List

            this.apipost("/api/MallBase/AddOrUpdateFreeShipping", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('mailRules');
                this.Success(res.data.message);
              } 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)
                }
              })
            })
          })
        })
      },
      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;
                })
              })
            })
          }
        })
      },
      getData(ID) {
        this.loading = true;
        this.apipost("/api/MallBase/GetFreeShippingModel", {
          Id: ID
        }, res => {
          this.loading = false;
          this.addMsg = res.data.data;
          if(this.addMsg.FullMoneyPinkage!=0 && this.addMsg.FullNumPinkage==0){
            this.rulesType=2
          }
          this.NewCategoryList = [];
          this.addMsg.CategoryList.forEach(item => {
            item.Name = item.CategoryName;
            this.NewCategoryList.push(item.CategoryId)
          })
          this.checkedCities = [];
       
        })
      },
    },
    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>
