<!--
 * @Date: 2021-11-30 09:28:55
 * @LastEditors: JinxuChen
 * @LastEditTime: 2021-12-03 15:22:29
 * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\off-limits-main\off-limits-type\index.vue
 * @description:
-->
<template>
    <div class="custom-tree-container">

  <div class="block">

    <el-tree
      :data="data"
      node-key="id"
      :default-expand-all="false"
      :render-after-expand="true"
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }} ( {{ data.no }} )</span><span></span>

        <div class="Operation">
        <span>
          <el-button v-if=" data.children"
            type="text"
            size="mini"
            @click="() => append(node,data)">
            增加类别
          </el-button>
          <el-button v-if="!data.children"
            type="text"
            size="mini"
            @click="() => modify(node, data)">
            修改
          </el-button>
          <el-button v-if="!data.children"
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span></div>
      </span>
    </el-tree>
    <el-row>

      <el-col :span="8"><div class="grid-content bg-purple-light add-btn"  >
        <el-button type="text" @click="dialogVisible = true">  增加场景</el-button>
        </div></el-col>



    </el-row>

    <el-dialog
  title="新增场景"
  :visible.sync="dialogVisible"
  width="50%"
   >
  <el-form :model="currentAddScenes" ref="currentAddScenes">
    <el-form-item label="场景"
      prop="inputNew"
      :rules="[
        { required: true, message: '场景不能为空'}
      ]"
      >
      <el-input v-model="currentAddScenes.inputNew" placeholder="请输入场景"></el-input>

    </el-form-item>
    <el-form-item>

          <el-button type="primary" @click="submitScenesForm('currentAddScenes')">提交</el-button>
          <el-button @click="resetForm('currentAddScenes')">重置</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </el-form-item>


  </el-form>
</el-dialog>

 <el-dialog
  :title="titleTypeAddorModify"
  :visible.sync="dialogVisibleType"
  width="50%"
   >
   <el-form :model="currentAddType" ref="currentAddType">
     <el-form-item label="类别"
      prop="typeLabel"
      :rules="[
        { required: true, message: '类别不能为空'}
      ]"
      >
      <el-input v-model="currentAddType.typeLabel"    placeholder="请输入类别"></el-input>

      </el-form-item>
        <el-form-item>

          <el-button type="primary" @click="submitForm('currentAddType')">提交</el-button>
          <el-button @click="resetForm('currentAddType')">重置</el-button>
          <el-button @click="dialogVisibleType = false">取 消</el-button>
        </el-form-item>



   </el-form>
</el-dialog>


  <el-dialog
    title="修改类别"
    :visible.sync="dialogVisibleM"
    width="50%"
    >
    <el-input v-model="inputModify" placeholder="请输入类别"></el-input>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisibleM = false">取 消</el-button>
      <el-button type="primary" @click="() => save()">确 定</el-button>
    </span>
  </el-dialog>

  </div>
    </div>
</template>
<script>
 let id = 1000;
export default {
  name:'',
  data(){
    const data = [{
        id: 1,
        no:101,
        label: '场景1',
        children: [{
          id: 4,
          no:101001,
          label: '类别 1-1'
        }]
      }, {
        id: 2,
        no:102,
        label: '场景 2',
        children: [{
          id: 5,
          no:102001,
          label: '类别 2-1'
        }, {
          id: 6,
          no:102002,
          label: '类别 2-2'
        }]
      }
      ];
      return {
        titleTypeAddorModify:"新增类别",
        inputNew: '',
        inputType:'',
        inputModify: '',
        parentNode:{},
        dialogVisible: false,
        dialogVisibleType:false,
        dialogVisibleM: false,
        currentData:{},
        currentParentData:{},
        currentAddScenes:{
          inputNew:"",
        },
        currentAddType:{
          typeLabel:""
        },

        data: JSON.parse(JSON.stringify(data))
      }
  },
   methods: {
     submitScenesForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            this.addScenes();

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            if(this.titleTypeAddorModify=="增加类别")
            {
              this.addType();
            }
            else
            {
              this.save();
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      append(node,data) {
        const parent = node;
        this.currentParentData=parent.data;
        this.dialogVisibleType=true;
        this.titleTypeAddorModify="增加类别";

        if(this.$refs['currentAddType']){
          this.resetForm('currentAddType');
        }

      },

      addScenes(){
        this.dialogVisible=false;
        let no=this.data[this.data.length-1].no+1;
        let id=this.data[this.data.length-1].id+1;

        this.data.push(  {
        id: id,
        no:no,
        label: this.currentAddScenes.inputNew,
        children: []
      });


      },
      addType(){

        this.dialogVisibleType=false;

        //模拟保存
        this.data.forEach(i=>{

          if(i.id==this.currentParentData.id)
          {

           let no,id;
           if(i.children && i.children.length>0){
            no=i.children[i.children.length-1].no+1;
            id=i.children[i.children.length-1].id+1;
           }
           else{
              no=i.no+'001';
              id=i.id+'001';
           }


           i.children.push({
             id:id,
             label: this.currentAddType.typeLabel,
             no:no
           });
          }
        });

         //this.inputType
      },
      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
      modify(node,data){
        this.titleTypeAddorModify="修改类别";
        this.dialogVisibleType=true;
        this.currentData=data;
        //this.dialogVisibleM=true;
        //this.inputModify=data.label;
        this.currentAddType.typeLabel=data.label;
      },
      save(){

        //模拟保存：
        this.dialogVisibleType = false
        this.data.forEach(element => {
          if(element.children)
          {
            element.children.forEach(i=>{
              if(i.id===this.currentData.id)
              {
                i.label=this.currentAddType.typeLabel;
              }
            });

          }
        });


      },
      renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
              <el-button v-if="node.children.len==0" size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
            </span>
          </span>);
      }
    }
}
</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .custom-tree-container .block{
    width: 50%;
    margin-top: 5%;
    margin-left: 5%;
  }

  .add-btn {
    margin-left:10%;
  }

</style>