<template>
  <div class="timedTask from-clues">
    <div class="from-clues-header">
      <el-form ref="ruleForm" :model="form" label-width="100px">
        <el-form-item>
          <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="3" 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="200" :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 } from "@/api/manageApi";
import EditDialog from "./edit-dialog.vue";
import { mapGetters } from "vuex";
import { getMenuInfo } from "@/api/user";
import {
  getUuid,
  judgeSort,
  realMove,
  findParents,
  removeTreeListItem,
} from "@/utils/operation";
export default {
  name: "menus",
  components: {
    EditDialog,
  },
  data () {
    return {
      isDialog: false,
      tablelistData: [],
      listData: [],
      resourceCategoryId: "",
      taskData: null,
      form: {
        menuName: "",
      },
      title: "",
      queryParam: {},
      selectType: "0",
      queryName: "",
      organizationId: "", // 组织机构ID
      departmentId: "", // 部门ID
      departmentList: [], // 部门列表
      levelList: [], // 职务级别
      sexList: [],

      selectionList: [],
      tableData: {
        columns: [].concat(data.columns()).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: sessionStorage.getItem("products"),
              operator: "EQ",
            },
          ],
        },
      };
      const params = {
        queryOptions: queryOptionsid,
      };
      // 获取系统id
      getAction(this.meumurlid, params)
        .then((res) => {
          this.productId = res.content[0].id;
          this.getAuthorityList(res.content[0].id, res.content[0].code)
          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()
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";

// @import "~@/styles/public.scss";

/deep/.el-table__expand-icon {
  color: #fff;
}
</style>