<template>
  <div class="table-demo">
    <el-row :gutter="20">
      <el-col :span="12">
        <common-table
          :table-header="tableHeader"
          :table-data="tableData"
        ></common-table>
      </el-col>
      <el-col :span="12">
        <common-table
          :table-header="tableHeader"
          :table-data="tableData"
          :highlight="highlight"
          @handle-current-row-change="handleCurrentRowChange"
          @handle-selection-change="handleSelectionChange"
        ></common-table>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <common-table
          :table-header="tableHeader"
          :table-data="tableData"
          :highlight="highlight"
          is-check
          @handle-current-row-change="handleCurrentRowChange"
          @handle-selection-change="handleSelectionChange"
        ></common-table>
      </el-col>

      <el-col :span="12">
        <common-table
          :table-header="tableHeader1"
          :table-data="tableData"
          :highlight="highlight"
          is-check
          @handle-current-row-change="handleCurrentRowChange"
          @handle-selection-change="handleSelectionChange"
        ></common-table>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <common-table
          :table-header="tableHeader2"
          :table-data="tableData"
          :highlight="highlight"
          is-check
          @handle-current-row-change="handleCurrentRowChange"
          @handle-selection-change="handleSelectionChange"
        ></common-table>
      </el-col>

      <el-col :span="12">
        <common-table
          :table-header="tableHeader3"
          :table-data="tableData"
          :highlight="highlight"
          is-check
          @handle-current-row-change="handleCurrentRowChange"
          @handle-selection-change="handleSelectionChange"
        ></common-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tableHeader = ref([
  { label: '姓名', name: 'name', width: '100' },
  { label: '年龄', name: 'age', 'min-width': '100' }
]);

const tableHeader1 = ref([
  { label: '姓名', name: 'name', 'min-width': '100' },
  { label: '年龄', name: 'age', 'min-width': '100' },
  {
    label: '操作',
    name: 'custom',
    type: 'custom',
    fixed: 'right',
    'min-width': '100'
  }
]);

const tableHeader2 = ref([
  { label: '姓名', name: 'name', type: 'input', 'min-width': '100' },
  {
    label: '年龄',
    name: 'age',
    type: 'select',
    attrs: {
      options: [{ label: '123132', value: 123 }]
    },
    'min-width': '100'
  },
  {
    label: '操作',
    name: 'custom',
    type: 'custom',
    fixed: 'right',
    'min-width': '100'
  }
]);

const tableHeader3 = ref([
  { label: '姓名', name: 'name', type: 'input', 'min-width': '100' },
  { label: '年龄', name: 'age', type: 'select', 'min-width': '100' },
  {
    label: '操作',
    name: 'custom',
    type: 'custom',
    fixed: 'right',
    'min-width': '100'
  }
]);

function viewDetail() {}
function deleteDevice() {}
const btns = [
  { label: '查看详情', name: 'view', onClick: viewDetail },
  {
    label: '删除',
    type: 'danger',
    disabled: true,
    name: 'delete',
    onClick: deleteDevice
  },
  {
    label: '更多',
    children: [
      { label: '删除', type: 'danger', name: 'delete', onClick: deleteDevice }
    ]
  }
];

const tableData = ref([
  { name: '张三', age: 12 },
  { name: '张三', age: 12 },
  { name: '张三', age: 12 }
]);
tableData.value.map((item: any) => {
  item.actions = btns;
  return item;
});
const highlight = ref(true);

const currentRow = ref();
// 选择高亮
function handleCurrentRowChange(val: any) {
  currentRow.value = val;
}

// const isCheck = ref(true);
//
function handleSelectionChange(val: any) {
  console.log(val);
}
</script>

<style scoped lang="scss">
.table-demo {
  padding: 20px;
}
</style>