<template>
  <div
    class="page"
    style="padding: 0 !important;height: 81% !important; min-height: 81% !important;"
  >
    <el-card>
      <LayoutTable
        notPagination
        ref="layoutTable"
        :data="tableData"
        :config="tableConfig"
      />
    </el-card>
    <dialog-show ref="dialogform" @ok="getData" />
  </div>
</template>

<script>
import { handleTree } from "@/assets/utils/table";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import table from "@/assets/mixins/table";
import dialogShow from "./dialogshow";

export default {
  name: "Menu",
  mixins: [table],
  components: { Treeselect, dialogShow },
  created() {
    this.query = { page: 1, size: -1 };
  },
  methods: {
    afterRender(data) {
      data.data = handleTree(data.data, "id", "parentId");
      this.menuOptions = data.data;
      this.$refs.layoutTable.showType = "treetable";
    },

    handleUp(data) {
      let type = 0;
      let url = "/menu/upOrDown";
      this.switchSort(url, data.id, type);
    },

    handleDown(data) {
      let type = 1;
      let url = "/menu/upOrDown";
      this.switchSort(url, data.id, type);
    },

    switchSort(url, id, type) {
      this.loading = true;
      this.$post(url, {
        id: id,
        type: type,
      })
        .then((res) => {
          if (res && res.code && res.code == 1) {
            this.getData();
            this.loading = false;
            this.$message.success("更新排序成功！");
          }
        })
        .catch((error) => {
          this.loading = false;
          this.$message.error(error.message);
        });
    },

    handleAdd(row) {
      this.$refs.dialogform.add(row, this.menuOptions);
    },

    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.dialogform.add(row, this.menuOptions);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.loading = true;
      this.$post(this.pageInfo.exclude, { id: row.id })
        .then((res) => {
          if (res && res.code && res.code == 1) {
            this.menuOptions = handleTree(res.data.data);
            this.$refs.dialogform.edit(row, this.menuOptions);
            this.loading = false;
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.dialogform.view(row, this.menuOptions);
    },

    // 展示菜单图标
    showIcon(row, column) {
      return <i class={"el-icon-" + row.imgPath}></i>;
    },

    handleStatus(row) {
      if (row.status == 1) {
        this.$post("/menu/change/status", { id: row.id, status: 0 })
          .then((res) => {
            if (res.code == 1) {
              row.status = 0;
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      } else {
        this.$post("/menu/change/status", { id: row.id, status: 1 })
          .then((res) => {
            if (res.code == 1) {
              row.status = 1;
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      }
    },
  },
  data() {
    return {
      value: "1",
      config: {
        isshowTabPane: true,
        /** 树表是否默认展开 */
        expand: false,
        showType: "treetable",
        search: [],
        columns: [
          {
            type: "selection",
            width: 60,
          },
          {
            prop: "id",
            label: "ID",
            width: 120,
          },
          {
            prop: "name",
            label: "名称",
            width: 160,
          },
          {
            prop: "imgPath",
            label: "图标",
            width: 50,
            formatter: this.showIcon,
          },
          {
            prop: "authType",
            label: "权限类型",
            formatter: this.formatter,
          },
          {
            prop: "parentId",
            label: "父ID",
            width: 160,
          },
          {
            prop: "url",
            label: "地址",
            width: 160,
          },
          {
            prop: "status",
            label: "状态",
            width: 100,
            formatter: (row) => {
              return (
                <el-switch
                  value={row.status + ""}
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0"
                  onChange={() => {
                    this.handleStatus(row);
                  }}
                ></el-switch>
              );
            },
          },
          {
            label: "操作",
            width: 280,
            formatter: (row) => {
              return (
                <div>
                  <el-link
                    style="margin-right:5px;margin-left:5px"
                    icon="el-icon-top"
                    onClick={() => {
                      this.handleUp(row);
                    }}
                  ></el-link>

                  <el-link
                    style="margin-right:5px;margin-left:5px"
                    icon="el-icon-bottom"
                    onClick={() => {
                      this.handleDown(row);
                    }}
                  ></el-link>

                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit-outline"
                    onClick={() => {
                      this.handleAdd(row);
                    }}
                  >
                    新增
                  </el-button>
                  <table-buttons
                    noAdd
                    noView
                    row={row}
                    onEdit={this.toEdit}
                    onView={this.toView}
                    onDel={this.toDel}
                  />
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>
