<template>
  <div className="page">
    <LayoutTable notPagination ref="layoutTable" :data="tableData" :config="tableConfig"/>
    <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) {
      console.log(data)
      data.data = handleTree(data.data, "id", "parentId");
      console.log("tree data:",data.data)
      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);
    },

    handleRowClick(row){
      console.log(row)
      //if(row.children || row.children.length === 0) return ;
      //this.$refs.layoutTable.toggleRowExpansion(row,true)
    },

    /** 重写新增方法 */
    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>
    },
    // 操作菜单状态
    changeStatus(row, column) {
      return (
          <my-switch
              confirm
              url='/menu/save'
              row={row}
              onChange={this.statusChange}
              value={this.tableData.data}
              onInput={(data)=>{
                this.tableData.data = data;
              }}/>
      )
    },
    statusChange() {
      this.$store.dispatch('login');
    },
  },
  data() {
    return {
      config: {
        /** 树表是否默认展开 */
        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',
          },
          {
            prop: 'url',
            label: '地址',
          },
          {
            prop: 'status',
            label: '状态',
            width: 100,
            formatter: this.changeStatus,
          },
          // {label: "菜单名称", prop: "name"},
          // {label: "连接地址", prop: "url"},
          // {label: "当前节点父id路径，“，”分割，服务端生成", prop: "ancestors"},
          // {label: "父菜单ID，一级菜单的该字段值为-1", prop: "parentId", formatter: this.formatterString},
          // {label: "排序编号", prop: "orderId"},
          // {label: "菜单状态，0：禁用，1：启用，默认1", prop: "status"},
          // {label: "链接方式，0：普通，1：弹出，2：脚本", prop: "linkType"},
          // {label: "分组编号，使用菜单分隔符按该值分隔，默认1", prop: "groupId", formatter: this.formatterString},
          // {label: "", prop: "groupName"},
          // {label: "主菜单图标，主菜单图标的css样式名", prop: "imgPath"},
          // {label: "按钮图标，按钮图标的css样式名", prop: "buttonImgPath"},
          // {label: "常用菜单图标，常用菜单图标的css样式名", prop: "imgCommPath"},
          // {label: "是否常用菜单，0：非常用，1：常用，默认0", prop: "commMenu"},
          // {label: "菜单类型，0：主菜单，1：非主菜单", prop: "menuType"},
          // {label: "权限类型，0：无限制，1：无需登录查看，2：需要登录查看，3：需要角色权限查看，默认3", prop: "authType"},
          // {label: "创建用户名称", prop: "createUserName"},

          {
            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>
