<template>
  <basic-container>
    <div class="flex">
      <div class="flex1 mg-r-20">
        <p>工程节点信息</p>
        <div class="flex">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          <el-button type="info" class="mg-l-20">导入划分</el-button>
        </div>
        <el-tree
          class="filter-tree" lazy
          :load="loadNode" @node-click="getNodeDetail"
          :props="defaultProps"
           highlight-current
          :filter-node-method="filterNode"
          ref="tree">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              {{ node.label }}
              <el-dropdown @click="command=>{setLeftType(command,data)}">
                <el-button
                  type="text" icon="el-icon-more" class="normal-black">
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="setLeftType(1,data,node)" icon="el-icon-circle-plus-outline">新增子级</el-dropdown-item>
                  <el-dropdown-item @click.native="setLeftType(2,data,node)" icon="el-icon-edit">编辑节点</el-dropdown-item>
                  <el-dropdown-item @click.native="setLeftType(3,data,node)" icon="el-icon-document-copy">复制节点</el-dropdown-item>
                  <el-dropdown-item @click.native="setLeftType(4,data,node)" icon="iconfont hcicon-danganziliao-biaogetianxie" class="font-s-12">表单设置</el-dropdown-item>
                  <el-dropdown-item @click.native="setLeftType(5,data,node)" icon="el-icon-coin">元素设置</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </el-tree>
      </div>
      <div class="flex1">
        <template v-if="leftType==2 || leftType==1">
          <p>节点信息</p>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column align="center" prop="deptName" label="当前节点" ></el-table-column>
            <el-table-column align="center" prop="deptCategory" label="节点类型" width="180"></el-table-column>
            <el-table-column align="center" prop="parentName" label="上级节点"></el-table-column>
          </el-table>
        </template>
        <template v-if="leftType==4">
          <el-table :data="formData" border style="width: 100%">
            <el-table-column align="center" prop="tableName" label="表单名称" ></el-table-column>
            <el-table-column align="center" prop="tableType" label="表单类型"></el-table-column>
            <el-table-column align="center" prop="elementTotal" label="元素总量"></el-table-column>
            <el-table-column align="center" prop="isCreateTable" label="是否创建表"></el-table-column>
            <el-table-column align="center" prop="tableName" label="所属方"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" append-to-body>
      <el-form ref="nodeDetail" :model="nodeDetail" label-width="110px">
        <el-form-item label="节点名称">
          <el-input v-model="nodeDetail.deptName"></el-input>
        </el-form-item>
        <el-form-item label="上级节点">
          <el-input v-model="nodeDetail.parentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="节点类型">
          <el-select v-model="nodeDetail.deptCategory" placeholder="请选择" class="w-100p">
            <el-option v-for="item in deptCategorylist" :key="item.id" :label="item.dictValue"  :value="item.dictKey"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="划分编号">
          <el-input v-model="nodeDetail.partitionCode"></el-input>
        </el-form-item>
        <el-form-item label="唯一编码">
          <el-input v-model="nodeDetail.uniqueCode"></el-input>
        </el-form-item>
        <el-form-item label="是否有混凝土">
          <el-radio-group v-model="nodeDetail.isConcrete" size="small">
            <el-radio :label="0" border>无</el-radio>
            <el-radio :label="1" border>有</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否试验节点">
          <el-radio-group v-model="nodeDetail.isExpernode" size="small">
            <el-radio :label="0" border>否</el-radio>
            <el-radio :label="1" border>是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="试验节点">
          <el-input v-model="nodeDetail.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveNode">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getLazytree,getDetail,update,selectByNodeTable} from "@/api/manager/wbstree";
  import {getDictionary} from "@/api/system/dict";
  import {mapGetters} from "vuex";
  export default {
    data() {
      return {
        id:'',
        filterText:'',
        treeData:[],
        defaultProps: {
          children: 'children',
          label: 'title',
          isLeaf: function(data){
            return !data.hasChildren;
          }
        },
        leftType:2,
        curTreeData:{},
        tableData:[],
        nodeDetail:{},
        formData:[],

        dialogVisible:false,
        deptCategorylist:[],
      };
    },
    computed: {
      ...mapGetters(["userInfo"]),

      dialogTitle:function(){
        let text = '节点';
        if(this.leftType == 1){
          text = '新增'+text;
        }else if(this.leftType == 2){
          text = '编辑'+text;
        }
        return text;
      },
    },
    created() {
      this.init();
    },
    methods: {
      init(){
        this.id = this.$route.params.id;
      },
      loadNode(node, resolve){
        let pid = 0;
        if (node.level != 0) {
          pid = node.data.id
        }
        getLazytree(this.id ,pid).then((res)=>{
          return resolve(res.data.data);
        })
      },

      getNodeDetail(data,node){
        //console.log(data,node,ref)
        let parentName = '';
        if(node.parent.data){
          parentName = node.parent.data.title;
        }
        this.curTreeData = data;
        this.curTreeData.parentName = parentName;
        getDetail(data.id).then((res)=>{
          res.data.data.parentName = parentName;
          this.tableData = [res.data.data];
          this.nodeDetail = Object.assign({},res.data.data);
        })
      },

      saveNode(){
        update(this.nodeDetail).then(()=>{
          let node = this.tableData[0];
          node.deptName = this.nodeDetail.deptName;
          node.deptCategory = this.nodeDetail.deptCategory;
          this.curTreeData.title = this.nodeDetail.deptName;
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        })
      },
      addNode(){

      },

      setLeftType(type,data,node){
        this.leftType = type;
        this.curTreeData = data;

        if(this.leftType == 1 || this.leftType == 2){
          this.getDeptCategorylist();
          this.dialogVisible = true;
        }

        getDetail(data.id).then((res)=>{
          let parentName = '';
          if(node.parent.data){
            parentName = node.parent.data.title;
          }
          res.data.data.parentName = parentName;
          this.tableData = [res.data.data];
          if(this.leftType == 1){
            this.nodeDetail = {
              parentId:res.data.data.id,
              parentName:parentName
            };
          }else{
            this.nodeDetail = Object.assign({},res.data.data);
          }
        })
        if(this.leftType == 4){
          selectByNodeTable(data.id).then((res)=>{
            console.log(res)
          })
        }
        
      },

      getDeptCategorylist(){
        if(this.deptCategorylist.length >1){
          return;
        }
        getDictionary({
          code:'wbs_node_type'
        }).then((res)=>{
          this.deptCategorylist = res.data.data;
        })
      },

      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    }
  };
</script>

<style scoped lang="scss">
  .font-s-12 /deep/ .iconfont{
    font-size: 12px;
  }
  .el-popper[x-placement^=bottom]{
    margin-top: -6px;
  }
</style>
