<template lang="">
    <div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="资产" name="first">
          <div class="common-layout">
            <el-container>
              <el-aside width="240px">
                <div class="el-aside_div">
                  <el-input
                    v-model="search_input"
                    style="width: 200px"
                    placeholder="搜索"
                    :prefix-icon="Search"
                  />
                  <el-button class="el-button_one" :icon="Plus"
                    >新建分类</el-button
                  >
                  <el-tree
                    style="max-width: 240px"
                    :data="data"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  >
                    <template #default="{ node, data }">
                      <span class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <span>
                          <el-icon><MoreFilled /></el-icon>
                        </span>
                      </span>
                    </template>
                  </el-tree>
                </div>
              </el-aside>
              <el-main>
                <text style="font-weight: bolder">{{ title }}</text>
                <text> 资产数 {{ title_number }}</text>
                <div class="el-main_div" style="margin-top: 10px">
                  <div>
                    <el-input
                      v-model="search_input_t"
                      style="width: 200px"
                      placeholder="请搜索资产编号"
                      :prefix-icon="Search"
                    />
                    <el-button style="margin-left: 10px" :icon="Edit" />
                  </div>
                  <div style="margin-right: 10px">
                    <el-button plain>批量删除</el-button>
                    <el-button plain>变量分类</el-button>
                    <el-button plain>批量导入/导出</el-button>
                    <el-button plain :icon="Plus" type="primary">添加</el-button>
                  </div>
                </div>
                <div class="el-main_table">
                  <el-table
                    ref="multipleTableRef"
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column
                      type="selection"
                      :selectable="selectable"
                      width="55"
                    />
                    <el-table-column label="资产编号" width="120">
                      <template #default="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                      property="name"
                      label="资产分类"
                      width="120"
                    />
                    <el-table-column property="address" label="资产名称" />
                    <el-table-column property="location" label="位置" />
                    <el-table-column label="操作">
                      <template #default="scope">
                        详情
                        <el-icon><MoreFilled /></el-icon>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div style="display: flex; justify-content: flex-end">
                  <el-pagination
                    v-model:current-page="currentPage1"
                    :page-size="10"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="total, prev, pager, next"
                    :total="100"
                  />
                </div>
              </el-main>
            </el-container>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分类" name="second">分类</el-tab-pane>
      </el-tabs>
    </div>
  </template>
  <script setup>
  import { ref, onMounted } from 'vue'
  import { Search, Plus, Edit } from '@element-plus/icons-vue'
  
  const data = ref([
    {
      label: '电子产品',
      children: [
        {
          label: '笔记本电脑',
          children: [
            {
              label: '触控板',
            },
          ],
        },
        {
          label: '台式电脑',
          children: [
            {
              label: '主机',
            },
          ],
        },
        {
          label: '电子配件',
          children: [
            {
              label: '键盘',
              children: [
                {
                  label: '机械键盘',
                },
                {
                  label: '无线键盘',
                },
              ],
            },
            {
              label: '鼠标',
              children: [
                {
                  label: '无线鼠标',
                },
                {
                  label: '有线鼠标',
                },
              ],
            },
          ],
        },
        {
          label: '硬盘',
          children: [
            {
              label: '固态硬盘',
              children: [
                {
                  label: '机械键盘',
                },
                {
                  label: '无线键盘',
                },
              ],
            },
            {
              label: '移动硬盘',
              children: [
                {
                  label: '无线鼠标',
                },
                {
                  label: '有线鼠标',
                },
              ],
            },
          ],
        },
      ],
    },
    {
      label: '办公家具',
      children: [
        {
          label: '桌子',
          children: [
            {
              label: '折叠桌',
            },
          ],
        },
        {
          label: '椅子',
          children: [
            {
              label: '折叠椅',
            },
          ],
        },
      ],
    },
  ])
  
  const title = ref('机械键盘')
  const title_number = ref(86)
  const size = ref('large')
  const background = ref(true)
  const defaultProps = {
    children: 'children',
    label: 'label',
  }
  const tableData = ref([
    {
      id: 1,
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      location: '浦东新区',
    },
    {
      id: 2,
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      location: '浦东新区',
    },
    {
      id: 3,
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      location: '浦东新区',
    },
    {
      id: 4,
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      location: '浦东新区',
    },
    {
      id: 5,
      date: '2016-05-08',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      location: '浦东新区',
    },
    {
      id: 6,
      date: '2016-05-06',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      location: '浦东新区',
    },
    {
      id: 7,
      date: '2016-05-07',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      location: '浦东新区',
    },
  ])
  
  // onMounted(() => {
  //   for (let i = 8; i < 90; i++) {
  //     tableData.value.push({
  //       id: i,
  //       date: '2016-05-07',
  //       name: 'Tom',
  //       address: 'No. 189, Grove St, Los Angeles',
  //       location: '浦东新区',
  //     })
  //   }
  // })
  const activeName = ref('first')
  const search_input = ref('')
  const search_input_t = ref('')
  
  const handleNodeClick = event => {
    title.value = event.label
    console.log(event.label)
  }
  </script>
  <style lang="scss" scoped>
  .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
  }
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
  .common-layout {
    .el-aside {
      height: 100%;
      .el-aside_div {
        display: flex;
        flex-direction: column;
        .el-button_one {
          width: 240px;
          margin-top: 10px;
          height: 30px;
          color: black;
          line-height: 40px;
          margin-bottom: 10px;
        }
        .custom-tree-node {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          padding-right: 8px;
        }
      }
    }
    .el-main {
      padding: 0;
      height: 700px;
      overflow: hidden;
      .el-main_div {
        display: flex;
        justify-content: space-between;
      }
      .el-main_table {
        height: 600px;
      }
    }
  }
  </style>
  