<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 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();
  },
  methods: {
    // 加载表格数据
    getTableList () {

      const queryOptionsid = {
        conditionGroup: {
          queryRelation: "AND",
          conditions: [
            {
              property: "code",
              value: "BDCJGPT",
              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>