<template>
  <div class="addLayerType-container">
    <div class="cate-title">
      分类信息

      <span class="close-btn" @click="$emit('close')">
          &times;
        </span>

    </div>
    <div class="form-container">
      <el-form ref="form" size="mini" :model="form" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="分类图标">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="上级分类">
          <el-cascader :options="jsonDataTree" :props="{ value: 'id',label: 'name',children: 'children',checkStrictly: true}" @change="setParentId" ></el-cascader>
        </el-form-item>

        <el-form-item label="分类描述">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addData()">立即创建</el-button>
          &nbsp;
          <el-button @click="$emit('close')">取消</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>
<script>
import { postMethodCommon, getMethodCommon } from '../../api/common.js';
export default {
  name:"AddLayerType",
  data(){
    return {
      typetree:null,
      jsonDataTree:null,
      options:null,
      form:{
        name:"",
        code:"",
        parentId:"",
        parentcode:"",
        remark:"",
      },
      imageUrl:null,
    }
  },
  created(){
   
    this.loadTypeTree();

    //

  },
  mounted(){

  },
  methods:{
    setParentId(parentId){
      this.form.typeid = parentId[parentId.length-1]
    },
    loadTypeTree(){
      getMethodCommon("/Dictionary/LoadAll").then(res=>{
        if(res.code == 200){
          this.typetree = res.result;
           this.jsonDataTree = this.transData(this.typetree, 'id', 'parentId', 'children')
           console.log("jsonDataTree",this.jsonDataTree);
        }
      })
    },
    addData(){
     
      postMethodCommon("/Dictionary/Add",this.form).then(res=>{
        if(res.code == 200){
          this.$emit("close");
        }
      })
    },
    handleAvatarSuccess(){

    },
    beforeAvatarUpload(){

    },

    transData(jsonArr, idStr, pidStr, childrenStr){
      // 存放的最终结果树数组
      const result = [];
      const id = idStr;
      const pid = pidStr;
      const children = childrenStr;
      const len = jsonArr.length;

      // 遍历得到以id为键名的对象(建立整棵树的索引)
      const hash = {};
      jsonArr.forEach(item => {
          hash[item[id]] = item;
      });

        for (let j = 0; j < len; j++) {
            const jsonArrItem = jsonArr[j];
            const hashItem = hash[jsonArrItem[pid]];
            if (hashItem) {
                // 如果当前项还没有children属性，则添加该属性并设置为空数组
                !hashItem[children] && (hashItem[children] = []);
                hashItem[children].push(jsonArrItem);
            } else {
                result.push(jsonArrItem);
            }
        }
        return result;
    },

  }
}
</script>
<style scoped>
.addLayerType-container{
  width:500px;
  height:600px;
  position:absolute;
  top:0px;
  left:0px;
  background-image:url(/images/system/cate-bg.png);
  background-size:100% 100%;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.cate-title{
  width:100%;
  height:30px;
  line-height:30px;
  color:#fff;
  text-indent:12px;
}
.form-container{
  width: calc( 100% - 34px);
  height: calc( 100% - 64px);
  padding:15px;
  background:rgba(43,50,79,0.8);
  margin:2px auto;
  position: relative;
  z-index:999999;
}

::v-deep .el-input__inner{
  background:rgba(0,0,0,0);
  color:#8a91aa;
}
::v-deep .el-textarea__inner{
  background:rgba(0,0,0,0);
  color:#8a91aa;
}
::v-deep .el-upload,.el-upload--text{

}
::v-deep .el-icon-plus{
  width:80px;
  height:80px;
  line-height: 80px;
  font-size:20px;
  border-radius:3px;
  border:1px dashed #8a91aa;
  color:#8a91aa;
}

.close-btn{
  float:right;font-size:24px;margin-right:10px;cursor:pointer;
}
.close-btn:hover{
  color:#cecece;
}
</style>