<template>
  <!-- 菜单管理 -->
  <div class="from-clues">
    <div class="from-clues-header">
      <el-form ref="ruleForm" :model="form" label-width="100px">
        <el-form-item v-if="BASE_API.THEME=='jg'">
          <Breadcrumb />
        </el-form-item>
        <el-row class="mb-5">
          <el-col :span="4">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model.trim="form.menuName" class="width100" clearable placeholder="菜单名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20" class="btnColRight">
            <btn nativeType="cx" @click="searchQuery">查询</btn>
            <btn nativeType="cx" @click="handleAdd()">新增菜单</btn>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="from-clues-content">
      <lb-table :pagination="false" :column="tableData.columns" :calcHeight="BASE_API.calcHeight" :data="tablelistData" row-key="id"
        default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

      </lb-table>
    </div>
    <edit-dialog ref="dialogForm" v-model="isDialog" :product-id="productId" :resource-category-id="resourceCategoryId"
      @ok="reloadTableData" />
  </div>
</template>
<script>
  import data from "./data";
  import { deleteAction, getAction, api, httpAction } from "@/api/manageApi";
  import EditDialog from "./edit-dialog.vue";
  import { mapGetters } from "vuex";
  import { getMenuInfo } from "@/api/user";
  import { updateOrder } from "@/api/orders"
  import { judgeSort } from "@/utils/operation";
  export default {
    name: "menus",
    components: {
      EditDialog,
    },
    data () {
      return {
        isDialog: false,
        tablelistData: [],//菜单数据
        listData: [],
        resourceCategoryId: "",
        form: {
          menuName: "",
        },
        title: "",//标题
        // 表格数据
        tableData: {
          columns: []
            .concat(data.columns())
            .concat([
              {
                label: "排序",
                width: 300,
                render: (h, scope) => {
                  return (
                    <div>
                      <el-button
                        type="text"
                        class='movebtnColor'
                        disabled={scope.row.isTop}
                        onClick={() => {
                          this.moveUp(scope.row, 'TOP')
                        }}
                      >
                        置顶
                      </el-button>
                      <el-button
                        type="text"
                        class='movebtnColor'
                        disabled={scope.row.isTop}
                        onClick={() => {
                          this.moveUp(scope.row, 'UP');
                        }}
                      >
                        上移
                      </el-button>
                      <el-button
                        type="text"
                        class='movebtnColor'
                        disabled={scope.row.isBottom}
                        onClick={() => {
                          this.moveDown(scope.row, 'DOWN');
                        }}
                      >
                        下移
                      </el-button>
                      <el-button
                        type="text"
                        class='movebtnColor'
                        disabled={scope.row.isBottom}
                        onClick={() => {
                          this.moveDown(scope.row, 'BOTTOM');
                        }}
                      >
                        置底
                      </el-button>
                    </div>
                  );
                },
              },
            ]).concat([
              {
                label: "操作",
                width: 380,
                render: (h, scope) => {
                  return (
                    <div>
                      <el-button
                        type="text"
                        class='successColor'
                        onClick={() => {
                          this.handleEdit(scope.row);
                        }}
                      >
                        修改
                      </el-button>

                      <el-button
                        type="text"
                        class='delColor'
                        onClick={() => {
                          this.handleDelete(scope.row.id, scope.row.name);
                        }}
                      >
                        删除
                      </el-button>
                    </div>
                  );
                },
              },
            ]),
          data: [],
        },
        tableUrl: api.menus, // 菜单接口地址
        meumurlid: api.subsystem,// 项目id接口地址
        productId: "",//项目id
      };
    },
    created () {
      this.getTableList();
    },
    computed: {
      ...mapGetters(["products"])
    },
    methods: {
      //查询
      searchQuery () {
        if (this.form.menuName) {
          this.tablelistData = this.childrenFn(this.listData, this.form.menuName);
        } else {
          this.getTableList()
        }
      },
      // 数据处理方法
      childrenFn (arr, key) {
        const that = this;
        let searchTree = [];
        arr.forEach((item, index) => {
          if (item.children != undefined && item.children.length != 0) {
            let leaf = that.childrenFn(item.children, key);
            if (leaf != undefined) {
              let { name, code, resourceCategoryId, id, iproductId, operations, metadata } = item;
              let parentObj = {
                code, name, resourceCategoryId, id, iproductId, operations, metadata, children: leaf
              };
              searchTree.push(parentObj);
            } else {
              if (item.name.indexOf(key) != -1) {
                searchTree.push(item);
              }
            }
          } else {
            if (item.name.indexOf(key) != -1) {

              searchTree.push(item);
            }
          }
        });
        if (searchTree != undefined && searchTree.length != 0) {
          return searchTree;
        }
      },
      // 加载表格数据
      getTableList () {
        getMenuInfo(this.BASE_API.CODE).then((res) => {
          if (res.code === 200) {
            this.tablelistData = judgeSort(res.result)
            this.listData = this.tablelistData
          } else {
            this.$message.error({ message: res.message, showClose: true })
          }
        })
        const queryOptionsid = {
          conditionGroup: {
            queryRelation: "AND",
            conditions: [
              {
                property: "code",
                value: this.BASE_API.CODE,
                operator: "EQ",
              },
            ],
          },
        };
        const params = {
          queryOptions: queryOptionsid,
        };
        // 获取系统id
        getAction(this.meumurlid, params)
          .then((res) => {
            this.productId = res.content[0].id;
            // this.selectedSubsystemCode = res.content[0].code

          })
          .catch((error) => {
            console.log("er", error);
          })
      },
      // 新增菜单
      handleAdd () {
        this.isDialog = true
        this.$refs.dialogForm.add();
        this.$refs.dialogForm.title = "新增";
      },

      // 修改
      handleEdit (record) {
        this.isDialog = true
        this.$refs.dialogForm.edit(record);
        this.$refs.dialogForm.title = "修改";
      },
      // 删除
      handleDelete (id, content) {
        this.$confirm(
          `<div  class="customer-message-wrapper">
              <h5 class="title">您确认要执行该操作用于以下信息:</h5>
              <p class="content" aria-controls="${content}">${content}
              </p>
               <p class="result">执行后，数据将
                 <span >无法恢复</span>
                </p>
        </div>`,
          '执行确认',
          {
            dangerouslyUseHTMLString: true,
            customClass: 'customer-delete',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            if (!this.tableUrl) {
              this.$message.error({
                message: '请设置tableUrl属性为接口地址!',
                showClose: true
              })
              return
            }
            const url = this.tableUrl + '/' + id
            deleteAction(url).then(res => {
              if (res.status === 1) {
                this.$message.success({ message: res.message, showClose: true })
                this.reloadTableData()
              } else {
                this.$message.error({ message: res.message, showClose: true })
              }
            })
          })
          .catch(() => { })
      },
      // 新增、编辑回显
      reloadTableData () {
        this.getTableList()
      },

      // 排序
      moveUp (row, operate) {
        if (row.isTop) {
          return;
        } else {
          this.realMove(row, operate);
        }
      },
      moveDown (row, operate) {
        if (row.isBottom) {
          return;
        } else {
          this.realMove(row, operate);
        }
      },

      //树形表格移动
      realMove (row, operate) {
        function tarverse (nodes, id) {
          let result;
          for (let i = 0; i < nodes.length; i++) {
            if (nodes[i].children && nodes[i].children.length > 0) {
              result = tarverse(nodes[i].children, id);
            }
            if (nodes[i].id == id) {
              if (operate === 'UP') {
                result = nodes[i - 1].id;
              } else if (operate === 'DOWN') {
                result = nodes[i + 1].id;
              }
              return result;
            }

            if (result) return result;
          }
          return result
        }

        this.$nextTick(() => {
          updateOrder('/rest/menus', row, operate, tarverse(this.tablelistData, row.id)).then(res => {
            if (res.status === 1) {
              this.getTableList()
              this.$message.success({ message: res.message, showClose: true })
            } else {
              this.$message.error({ message: res.message, showClose: true })
            }
          })
          this.tablelistData = judgeSort(this.tablelistData || []);
        })
        // this.tablelistData = changeSort(this.tablelistData, row.id);
        // function changeSort (arr, id) {
        //   if (arr.length) {
        //     let flag = false;
        //     for (let i in arr) {
        //       if (arr[i].id == id) {
        //         if (operate === "UP") {
        //           arr[i] = arr.splice(i - 1, 1, arr[i])[0];
        //         } else if (operate === "DOWN") {
        //           let temp = arr.splice(i - 0 + 1, 1, arr[i])
        //           arr[i] = temp[0];
        //         } else if (operate === "TOP") {
        //           arr.unshift(arr.splice(i, 1)[0]);
        //         } else if (operate === "BOTTOM") {
        //           arr.push(arr.splice(i, 1)[0]);
        //         }
        //         flag = true;
        //         break;
        //       }
        //       if (!flag && arr[i].children && arr[i].children.length) {
        //         arr[i].children = changeSort(arr[i].children, id);
        //       }
        //     }
        //   }
        //   return arr;
        // }
      }
    },
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";

  // @import "~@/styles/public.scss";
</style>