<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" :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: [],
        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"
                      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: [],
        },
        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: 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";
  .btnColRight {
    height: 60px;
    .button {
      position: absolute;
      left: 30px;
      top: 20px;
    }
  }
  /deep/.el-table__expand-icon {
    color: #fff;
  }
</style>