<script setup lang="ts">
import type { BasicForm, ICRUD } from '@/types/form'

const CRUD: ICRUD = {
  create(data) {
    return new Promise(resolve => console.log(data))
  },
  update(data) {
    return new Promise(resolve => console.log(data))
  },
  getList() {
    return new Promise(resolve => {
      resolve({
        list: [],
        total: 2
      })
    })
  },
  delete(data) {
    return new Promise(resolve => console.log(data))
  },
  deleteBatch(data) {
    return new Promise(resolve => console.log(data))
  }
}

const logtFormConfig = reactive<BasicForm>({
  span: 24,
  formItems: [
    {
      label: '日期',
      value: '',
      name: 'date',
      type: 'date-picker',
      props: {
        type: 'datetimerange',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间'
      },
      rules: [{ required: true, message: '请选择日期', trigger: 'change' }],
      search: true
    },
    {
      label: '操作菜单',
      value: '',
      name: 'menu',
      type: 'input',
      rules: [{ required: true, message: '请输入操作菜单', trigger: 'change' }],
      search: true
    },
    {
      label: '操作用户',
      value: '',
      name: 'type',
      type: 'input',
      rules: [{ required: true, message: '请输入操作用户', trigger: 'blur' }],
      search: true
    },
    {
      label: 'url',
      value: '',
      name: 'url',
      type: 'input',
      rules: [{ required: true, message: '请输入url', trigger: 'blur' }],
      search: true
    }
  ]
})

const curRow = ref<any>(null)
const handleRowClick = ({ row }: { row: any }) => {
  console.log(row)
  curRow.value = row
}
const rowClassName = ({ row }: { row: any }) => {
  if (row.id === curRow.value.id) {
    return 'active'
  }
}
</script>

<template>
  <el-container class="h-full">
    <el-aside width="200px" class="log-aside">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        active-text-color="#409EFF"
        background-color="#ffffff"
        text-color="#303133"
      >
        <el-menu-item index="2">
          <el-icon>
            <InfoFilled color="#409eff" />
          </el-icon>
          <span>登录日志</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <QuestionFilled color="#e6a23d" />
          </el-icon>
          <span>访问日志</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <CircleCloseFilled color="#f56c6d" />
          </el-icon>
          <span>异常日志</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main class="log-main h-full">
      <pro-table :crud="CRUD" :formConfig="logtFormConfig" :row-class-name="rowClassName" @cell-click="handleRowClick">
        <vxe-column field="description" title="访问功能"></vxe-column>
        <vxe-column field="type" title=""></vxe-column>
      </pro-table>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.log-aside {
  background-color: #fff;

  .el-menu {
    border-right: 0;
  }
}

.log-main {
  padding: 0 0 0 var(--main-padding);
}
</style>
