<template>
  <div class="page">
    <!-- <LayoutTable :data='tableData' :config='tableConfig' notPagination  /> -->
    <!-- <dialog-show ref="dialogform" @ok="getData" /> -->
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          v-for="(item,index) in config.columns" :key="index"
          :prop="item.prop"
          :label="item.label"
          width="180">
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
// import table from '@/assets/mixins/table';
import dialogShow from "./dialogshow";

export default {
  // mixins: [table],
  components: { dialogShow },
  methods: {
    // 菜单表格
    gettableList(){
      this.$post('/menu/list',this.query).then(res => {
        if(res.code == 1){
          // 原数组
          let arr = res.data.data
          this.tableData = this.resetTableList(arr)
          this.total = res.data.total
        }
      })
    },
    // 重排表格
    resetTableList(arr){
      let result = arr.map(item => {
        // 一级目录
        if(item.childList.length == 0){
          return {
            ...item,
            children:[]
          }
        }else if(item.childList.length > 0){
          return {
            ...item,
            children:this.resetTableList(item.childList)
          }
        }
      })
      return result
    },
    // 
    handleSizeChange(size){
      this.query.size = size
      this.gettableList()
    },
    handleCurrentChange(page){
      this.query.page = page
      this.gettableList()
    },
    beforeRender(data) {
      this.allMenu = this.sortByGroup(this.util_copy(data.data));
      console.log(this.allMenu,'菜单数据')
      // 存在查询条件，展开全部
      if(Object.keys(this.$route.query).length) {
        this.select = this.allMenu.filter(i=>!i.parentId).map(i=>i.id);
      }
      return data;
    },
    afterRender() {
      this.showChild();
    },
    // 按parentId排序分组
    sortByGroup(data) {
      return data.filter(i=>!i.parentId).reduce((prev, item)=>{
        return prev.concat([item], data.filter(i=>i.parentId == item.id))
      }, [])
    },
    //重排table
    resetTable(arr){
      // 一级父级
      
    },

    // 查看下级菜单
    selectHandler({id}) {
      // 如果已展开，则关闭
      const index = this.select.indexOf(id);
      if(index > -1) {
        this.select.splice(index, 1);
      }else{
        this.select.push(id);
      }
      this.showChild();
    },
    showChild() {
      this.tableData.data = this.allMenu.filter(item=>{
        return !item.parentId || this.select.indexOf(item.parentId) > -1
      })
    },
    // 展示菜单图标
    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;
          }}/>
      )
    },
    afterDel(id) {
      this.$store.dispatch('login');
    },
    statusChange() {
      this.$store.dispatch('login');
    },
     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);
        });
    },
    /** 重写新增方法 */
    // toAdd(row) {
    //   this.$refs.dialogform.add(row);
    // },
    // /** 重写编辑方法 */
    // toEdit(row) {
    //   this.$refs.dialogform.edit(row);
    // },
    // /** 重写查看方法 */
    // toView(row) {
    //   this.$refs.dialogform.view(row);
    // },
  },
  data() {
    return {
      tableData:[],
      allMenu: [], // 经过分组排序的表格数据
      select: [], // 当前展开的树节点
      query: {
        page:1,
        size:10
      },
      total:0,
      config: {
        search: [
          {
            name: 'name',
            type: 'text',
            label: '菜单名称',
          },
        ],
        columns: [
          // { type: "selection",reserveSelection:true, width: 60 },
          // { type: "index", label: "序号",align:"center", width: 50 },
          // {
          //   width: 60,
          //   formatter: row => {
          //     const icon = this.select.indexOf(row.id) === -1 ? 'right' : 'down';
          //     return (
          //       !row.parentId||row.childList.length>0
          //       ? <div onClick={()=>{this.selectHandler(row)}}>
          //         <i class={'el-icon-arrow-'+icon}></i>
          //       </div>
          //       : ''
          //     )
          //   }
          // },
          {
            prop: 'id',
            label: 'ID',
            width: 60,
          },
          {
            prop: 'name',
            label: '名称',
            width: 160,
          },
          {
            prop: 'imgPath',
            label: '图标',
            width: 120,
            // 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: '操作',
          //   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>

          //       <table-buttons    noView row={row} onEdit={this.toEdit} onDel={this.toDel} />

          //       </div>
          //     )
          //   },
          // },
        ],
      },
    }
  },
  created(){
    this.gettableList()
  }
}
</script>


