<template>
  <div class="numbox">
    <div class="numboxx">
      <span>常用功能</span>
      <span
        @click="RowTitle"
        style="float: right; cursor: pointer; color: rgb(82, 212, 252)"
        >设置>></span
      >
    </div>
    <div class="foxbox">
      <el-tag
        v-for="(item, index) in dynamicTags"
        :key="index"
        size="large"
        type="info"
        class="tags"
        :disable-transitions="false"
      >
        <i
          @click="tagrouter($event, item, index)"
          class="icon"
          v-if="item.icon"
          v-html="item.icon"
        >
          {{ item.icon }}
        </i>
        <span :title="item.functionName" @click="tagrouter($event, item, index)">
          <!-- <i class="el-icon-date"></i>  -->
          {{ item.functionName }}
        </span>
      </el-tag>
      <el-button
        class="button-new-tag"
        type="info"
        size="small"
        @click="showMenu()"
      >
        ✚ 添加功能
      </el-button>
      <el-dialog
        title="添加常用功能"
        :visible.sync="menuStatus"
        width="40%"
        :close-on-press-escape="false"
        :show-close="false"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <div style="height: 300px; overflow: auto">
          <el-tree
            class="tree-line-style"
            :expand-on-click-node="true"
            :auto-expand-parent="true"
            :default-expand-all="true"
            :default-checked-keys="checkedMenu"
            :data="menuList"
            show-checkbox
            @check="checkChange"
            node-key="functionCode"
          >
            <span class="custom-tree-node" slot-scope="{ node }">
              <span>
                <!-- <span
                  v-if="node.data.children.length > 0"
                  style="color: #009cff"
                  class="iconfont icon-wenjianjia"
                ></span> -->
                <span
                  style="color: #fdb441"
                  class="iconfont icon-wenjian"
                ></span>
                {{ node.data.functionName }}
              </span>
            </span>
          </el-tree>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              () => {
                menuStatus = false;
              }
            "
            >取 消</el-button
          >
          <el-button v-show="subBtn" @click="subMenu">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="设置常用功能"
        :visible.sync="setStatus"
        width="40%"
        :close-on-press-escape="false"
        :show-close="false"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <div style="height: 300px; overflow: auto">
          <el-tree
            class="tree-line-style"
            :expand-on-click-node="true"
            :auto-expand-parent="true"
            :default-expand-all="true"
            draggable
            :allow-drop="collapse"
            :default-checked-keys="checkedMenu"
            :data="dynamicTags"
            show-checkbox
            @check="checkChange"
            node-key="functionCode"
          >
            <span class="custom-tree-node" slot-scope="{ node }">
              <span>
                <!-- <span
                  v-if="node.data.children.length > 0"
                  style="color: #009cff"
                  class="iconfont icon-wenjianjia"
                ></span> -->
                <span
                  style="color: #fdb441"
                  class="iconfont icon-wenjian"
                ></span>
                {{ node.data.functionName }}
              </span>
            </span>
          </el-tree>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              () => {
                setStatus = false;
              }
            "
            >取 消</el-button
          >
          <el-button v-show="subBtn" @click="deletMenu">删 除</el-button>
          <el-button v-show="subBtn" @click="saveMenu">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  props: ["dynamicTags"],
  data() {
    return {
      // dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      roleData: "", // 某一条数据
      checkedMenu: [], // 选中节点的functionCode
      subBtn: true,
      menuStatus: false,
      setStatus: false,
      menuList: [], // tree数据源
      checkedNodes: [],
    };
  },
  methods: {
    collapse(moveNode, inNode, type) {//只允许拖拽
      if (type === "inner") return;
      if (moveNode.nextSibling === undefined) {
        return type === "prev";
      } else if (inNode.nextSibling === undefined) {
        return type === "next";
      } else if (moveNode.nextSibling.id !== inNode.id) {
        return type === "prev";
      } else {
        return type === "next";
      }
    },
    tagrouter(e, item, index) {
      // console.log(e, item, index);
      this.$router.push(item.jspUrl);
    },
    RowTitle() {
      this.setStatus = true;
    },
    // 树形图 复选框监听事件
    checkChange(a, b, c, d) {
      this.checkedNodes = b.checkedNodes;
      let list = {};
      for (let i = 0; i < b.halfCheckedNodes.length; i++) {
        list = Object.assign({}, b.halfCheckedNodes[i]);
        list.children = "";
        this.checkedNodes.push(list);
      }
    },
    // 弹出菜单配置弹窗
    showMenu() {
      this.checkedMenu = [];
      this.menuStatus = true;
      this.$http({
        url: "/sysmgr/sys/login/auth/functions",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          // roleCode: val.roleCode,
          // roleCode: "647733085966045184"
        },
      }).then((res) => {
        let men = res.data.functions;
        let newmen = [];
        for (let i in men) {
          if (men[i].jspUrl != "#") {
            newmen.push(men[i]);
          }
        }
        // console.log("array", newmen);
        this.menuList = newmen;
      });
    },
    //设置 保存按钮
    saveMenu() {
      console.log(this.dynamicTags);
      this.$http({
        url: "/market/usuaFun/reSetOrder",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          data: this.dynamicTags,
        },
      }).then((res) => {
        if (res.data.result == 0) {
          this.$notify({
            title: "保存成功",
            message: res.data.desc,
            type: "success",
          });
          this.setStatus = false;
          location.reload();
        }
      });
    },
    //删除常用功能
    deletMenu() {
      this.$http({
        url: "/market/usuaFun/delete",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          data: this.checkedNodes,
        },
      }).then((res) => {
        if (res.data.result == 0) {
          this.$notify({
            title: "删除成功",
            message: res.data.desc,
            type: "success",
          });
          this.setStatus = false;
          location.reload();
        }
      });
    },

    // 提交常用功能
    subMenu() {
      // let checknode = [];
      // this.checkedNodes.map(function (item, index) {
      //   console.log(item.jspUrl); // 1
      //   checknode.push(item.jspUrl);
      //   checknode.push(item.functionName);
      // });
      // console.log(checknode)
      this.$http({
        url: "/market/usuaFun/save",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          data: this.checkedNodes,
        },
      }).then((res) => {
        if (res.data.result == 0) {
          this.$notify({
            title: "成功",
            message: res.data.desc,
            type: "success",
          });
          this.menuStatus = false;
          location.reload();
        }
      });
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.numbox {
  width: 100%;
  background: #fff;
  margin-top: 10px;
  // padding-top: 10px;
  padding-left: 10px;
  border-radius: 5px;

  .numboxx {
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 16px;
    font-weight: 600;
  }
  .foxbox {
    background: #fff;
    margin-left: 5px;
  }
  .tags {
    margin: 5px;
    float: left;
    width: 165px;
    padding: 0;
    height: 50px;
    // background: url(../../../../src/assets/djlph-bt-bj.jpg) no-repeat 5px center;
    span {
      cursor: pointer;
      display: inline-block;
      font-size: 14px;
      line-height: 50px;
      overflow: hidden;
      text-overflow: ellipsis; /*超出部分省略号表示*/
      width: 110px;
      text-align: left;
    }
    .icon {
      float: left;
      width: 50px;
      height: 50px;
      cursor: pointer;
    }
  }
  .button-new-tag {
    margin: 5px;
    width: 165px;
    float: left;
    height: 50px;
    font-size: 16px;
  }
}
.el-button--info,
.el-button--info:focus,
.el-button--info.is-active,
.el-button--info:active {
  background: #f2f2f2;
  color: #161616;
  border-color: #f2f2f2;
}
.el-button--info:hover {
  background: #66a4a7;
  border-color: #66a4a7;
  color: #161616;
}
.el-tag--info {
  background: #f2f2f2;
  color: #161616;
  border-color: #f2f2f2;
}
</style>
