<template>
    <!-- <div> -->
    <!-- <el-form :inline="true" :model="form" class="demo-form-inline"> -->
    <el-form-item label="上级菜单:">
      <el-select ref="selectTree1" v-model="form.valueTitle" >
        <el-option
          :value="form.editCheckCode"
          :label="form.valueTitle"
          class="options"
        >
          <el-tree
            id="tree-option"
            ref="selectTree"
            :accordion="form.accordion"
            :data="form.options"
            :highlight-current="true"
            :expand-on-click-node="false"
            :default-expanded-keys="form.defaultExpandedKey"
            @node-click="handleNodeClick"
            node-key="id"
          >
            <span slot-scope="{ node, data }">
              <i
                :class="[data.color != null ? 'ification_col' : '']"
                :style="{ 'background-color': data.color }"
              ></i
              >&nbsp;&nbsp;{{ data.name }}
            </span>
          </el-tree>
        </el-option>
      </el-select>
    </el-form-item>
    <!-- </el-form> -->
    <!-- </div> -->
  </template>
  <script>
  import { add, list, update, listmesg, deleteMenu } from "@/api/admin/menu";
  import { deptTree } from "@/api/admin/dept";
  export default {
    data() {
      return {
        vh: "",
        IdData: "",
        form: {
          value: "",
          valueTitle: "",
          editCheckCode: "", //选择的id
          accordion: true,
          defaultExpandedKey: [],
          //区域
          options: [],
          default: {
            value: "id",
            children: "children",
            label: "name",
          },
        },
      };
    },
    created() {
      this.menu();
    },
    mounted() {
      this.form.valueTitle = JSON.parse(
        window.sessionStorage.getItem("Info")
      ).deptName;
    },
    computed: {},
    methods: {
      //区域
      menu() {
        this.form.defaultExpandedKey = [];
        list().then((response) => {
        var data = response.data;
        data.splice(0, 1);
        data.forEach((m) => {
          m.addflag = true;
          if (m.children.length !== 0) {
            if (m.type == 0 && m.children[0].type == 1) {
              m.children = [];
            }
          }
          m.children.forEach((n) => {
            n.addflag = true;
            if (n.children.length !== 0) {
              if (n.type == 0 && n.children[0].type == 1) {
                n.children = [];
              }
            }

            n.children.forEach((d) => {
              d.addflag = false;
              // if (d.type==0 && d.children[0].type==1) {
              d.children = [];
              //  }
            });
          });
        });
       
        this.options = data;
      });
      },
      // 切换选项
      handleNodeClick(data) {
        this.form.editCheckCode = data.id;
        this.form.valueTitle = data.name;
        // this.form.defaultExpandedKey = [];
        this.$emit("click", data);
        this.$refs.selectTree1.blur();
      },
    },
  };
  </script>
  <style lang="less" scoped>
  @import url("../../../styles/comStyle.less");
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    // max-height: 1000px;
    padding: 0;
    overflow: hidden;
    overflow-y: hidden;
  }
  
  .el-select-dropdown__item.selected {
    font-weight: normal;
  }
  
  ul li > .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
  }
  
  .el-tree-node__label {
    font-weight: normal;
  }
  
  .el-tree > .is-current .el-tree-node__label {
    font-weight: 700;
    color: #409eff;
  }
  
  .el-tree > .is-current .el-tree-node__children .el-tree-node__label {
    font-weight: normal;
    color: #606266;
  }
  
  .el-popper {
    z-index: 9999;
  }
  .ification_col {
    display: inline-block;
    width: 20px;
    height: 10px;
  }
  </style>
  