<template>
  <div>
    <!-- 头部 -->
    <ZHeader
      :userInfo="userInfo.data.user"
      @handleLogOut="handleLogOutAction"
    />
    <el-container>
      <el-aside width="200px"
        ><!-- 左侧菜单 -->
        <ZMenu
          ref="ZMenu"
          :treelists="treelist"
          :themeColor="themeColor"
          @handleToIndex="handleToIndexAction"
          @handleMenuClick="handleToResUrlAction"
      /></el-aside>
      <el-main style="padding-top: 50px"
        ><ZTable
          :table="reactiveTable.table"
          :columns="reactiveTable && reactiveTable.table.columns"
        ></ZTable
      ></el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {
  reactive,
  ref,
  onMounted
} from 'vue';
//菜单主题颜色
const themeColor = 'red';
//退出登录事件
const handleLogOutAction = () => {
  console.log('退出登录');
};
//跳转到首页事件
const handleToIndexAction = () => {
  console.log('子组件跳转');
};
//路由跳转事件
const handleToResUrlAction = (resUrl) => {
  console.log('路由跳转============ ' + resUrl);
};

const userInfo = {
  data: {
    user: {
      code: 'ZZ0000000',
      hrCode: '你好啊啊',
      name: '名字',
      sex: '0',
      mobile: '',
      email: null,
      deptName: '大连区域/四川分公司',
      superiorDeptName: '辽宁第一片区第二分部',
      postName: '的私人财富中心总经理',
      deptCode: '0350020204',
      areaCode: null,
      areaName: null,
      superiorDeptCode: '03440171',
      postCode: '105755',
      trnsevent: null,
      createId: 'system',
      createTime: '2022-07-30 17:02:48',
      updateId: 'H000034',
      updateTime: '2022-11-03 10:27:48',
    },
    url: 'https://core.chtfund.com/index.html',
  },
};
const treelist = [
  {
    resKey: '1',
    icon: 'icon-xiangmu1',
    resName: '菜单1',
    children: [
      {
        resKey: '1-1',
        resName: '子菜单1-1',
        resUrl: '/router1',
        children: [],
      },
      {
        resKey: '1-2',
        resName: '子菜单1-2',
        resUrl: '/router2',
        children: [],
      },
    ],
  },
  {
    resKey: '2',
    icon: 'icon-xiangmu2',
    resName: '菜单2',
    children: [
      {
        resKey: '2-1',
        resName: '子菜单2-1',
        children: [
          {
            resKey: '2-1-1',
            resName: '子菜单2-1-1',
            resUrl: '/router3',
          },
          {
            resKey: '2-1-2',
            resName: '子菜单2-1-2',
            resUrl: '/router4',
          },
        ],
      },
      {
        resKey: '2-2',
        resName: '子菜单2-2',
        resUrl: '/router5',
        children: [],
      },
    ],
  },
];

onMounted(() => {
  const ZMenu: any = ref<HTMLElement | null>(null);
  // ZMenu.value.resetActiveMenu(treelist[0].resKey, treelist[0].children[0].resKey);
})



const viewDetail = (val) => {
  console.log('viewDetail', val);
};

const edit = (val) => {
  console.log('edit', val);
};

const nullify = (val) => {
  console.log('nullify', val);
};

let reactiveTable = reactive({
  table: {
  total: 20,
  currentPage: 1,
  pageSize: 10,
  border: true,
  // 接口返回数据
  data: [],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100'},
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220', noShowTip: true },
    { prop: 'address', label: '地址', minWidth: '220' },
    { prop: 'address', label: '地址', minWidth: '220' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
  // 表格内操作列
  operator: [
    {
      text: '编辑',
      fun: () => {

      },
    },
    {
      text: '删除',
      fun: () => {

      },
    },
  ],
  // 操作列样式
  operatorConfig: {
    fixed: 'right', // 固定列表右边（left则固定在左边）
    width: 200,
    label: '操作',
  },
}
})

// 模拟接口请求
setTimeout(() => {
  reactiveTable.table.data = [
        {
          id: '1',
          date: '2019-09-25',
          date1: '2019-09-26',
          name: '张三',
          status: '2',
          address: '广东省广州市天河区',
        },
        {
          id: '2',
          date: '2019-09-26',
          date1: '2019-09-27',
          name: '张三1',
          status: '1',
          address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
        },
        {
          id: '3',
          date: '2019-09-26',
          date1: '2019-09-28',
          name: '张三1',
          status: '1',
          address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
        },
        {
          id: '4',
          date: '2019-09-26',
          date1: '2019-09-29',
          name: '张三1',
          status: '1',
          address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
        },
      ]
}, 1000)
</script>
