<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="2" class="btnColRight">
            <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" :data="tablelistData" row-key="id" default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      </lb-table>
    </div>
    <edit-dialog ref="dialogForm" :product-id="productId" :resource-category-id="resourceCategoryId"
      @ok="reloadTableData" />
    <!-- <authorizationdiglog ref="rolesForm" /> -->
  </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";
  // import authorizationdiglog from "./authorizationdiglog.vue";
  export default {
    name: "menus",
    components: {
      EditDialog,
      // authorizationdiglog,
    },
    data () {
      return {
        tablelistData: [],
        resourceCategoryId: "",
        taskData: null,
        form: {
          job_name: "",
          currentPage: 1,
        },
        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"
                      size="mini"
                      icon="el-icon-edit"
                      onClick={() => {
                        this.handleEdit(scope.row);
                      }}
                    >
                      修改
                    </el-button>

                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-delete"
                      style="color:#F56C6C"
                      onClick={() => {
                        this.handleDelete(scope.row.id, scope.row.name);
                      }}
                    >
                      删除
                    </el-button>
                  </div>
                );
              },
            },
          ]),
          data: [],
        },
        pageData: {
          total: 5,
          pageSize: 15,
          current: 1,
        },
        tableUrl: api.menus, // 菜单接口地址
        meumurlid: api.subsystem,// 项目id接口地址
        productId: ""//项目id
      };
    },
    created () {
      this.getTableList();
    },
    computed: {
      ...mapGetters(["products"])
    },
    methods: {
      // 加载表格数据
      getTableList () {
        getMenuInfo(sessionStorage.getItem("products")).then((res) => {
          if (res.code === 200) {
            this.tablelistData = judgeSort(res.result)
          } else {
            this.$message.error({ message: res.message, showClose: true })
          }
        })
        const queryOptionsid = {
          conditionGroup: {
            queryRelation: "AND",
            conditions: [
              {
                property: "code",
                value: this.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
            // let queryOptions = {
            //   conditionGroup: {
            //     conditions: [
            //       {
            //         property: "productId",
            //         value: this.productId,
            //         operator: "EQ",
            //       },
            //     ],
            //     queryRelation: "AND",
            //   },
            //   orderBys: [{ property: "sort", direction: "desc" }],
            // };
            // if (!this.tableUrl) {
            //   console.log("请设置tableUrl属性为接口地址!");
            //   return;
            // }
            // if (this.queryOptions !== "") {
            //   this.queryParam.queryOptions = JSON.stringify(queryOptions);
            // }
            // 查询系统菜单
            // getAction(this.tableUrl, this.queryParam)
            //   .then((res) => {
            //     if (res.status === 1) {
            //       this.loading = false;
            //       // this.menutablelistData = res.content;
            //       console.log("res.content菜单", res.content);
            //     } else {
            //       this.$message.error({ message: res.message, showClose: true });
            //       this.loading = false;
            //     }
            //   })
            //   .catch((error) => {
            //     console.log("er", error);
            //     this.loading = false;
            //   });
          })
          .catch((error) => {
            console.log("er", error);
          });
        // 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;
        //     let queryOptions = {
        //       conditionGroup: {
        //         conditions: [
        //           {
        //             property: "productId",
        //             value: this.productId,
        //             operator: "EQ",
        //           },
        //         ],
        //         queryRelation: "AND",
        //       },
        //       orderBys: [{ property: "sort", direction: "desc" }],
        //     };
        //     if (!this.tableUrl) {
        //       console.log("请设置tableUrl属性为接口地址!");
        //       return;
        //     }
        //     if (this.queryOptions !== "") {
        //       this.queryParam.queryOptions = JSON.stringify(queryOptions);
        //     }
        //     // 查询系统菜单
        //     getAction(this.tableUrl, this.queryParam)
        //       .then((res) => {
        //         if (res.status === 1) {
        //           this.loading = false;
        //           this.tablelistData = res.content;
        //         } else {
        //           this.$message.error({ message: res.message, showClose: true });
        //           this.loading = false;
        //         }
        //       })
        //       .catch((error) => {
        //         console.log("er", error);
        //         this.loading = false;
        //       });
        //   })
        //   .catch((error) => {
        //     console.log("er", error);
        //   });
      },
      // 新增菜单
      handleAdd () {
        this.$refs.dialogForm.add();
        this.$refs.dialogForm.title = "添加";
      },

      // 修改
      handleEdit (record) {
        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";
  .btnColRight {
    margin-top: 20px;
  }

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