<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="950px" :title="drawerProps.title">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="导入日志" name="1">
        <div class="table-box">
          <ProTable :columns="iColumns" :tool-button="false" row-key="id" :data="tableData">
            <template #status="scope">
              <div class="i-text">
                <span v-show="scope.row.status == 1" style="margin-right: 8px">
                  <i class="dot-class" style="background-color: #67c23a"></i>
                </span>
                <span v-show="scope.row.status == 0" style="margin-right: 8px">
                  <i class="dot-class" style="background-color: #f56c6c"></i>
                </span>
                {{ scope.row.status }}
              </div>
            </template>
            <!-- 表格操作 -->
            <template #operation>
              <el-button type="primary" link> 下载 </el-button>
            </template>
          </ProTable>
        </div>
      </el-tab-pane>
      <el-tab-pane label="导出日志" name="second">
        <div class="table-box">
          <ProTable :columns="eColumns" :tool-button="false" row-key="id" :data="tableData">
            <!-- 表格操作 -->
            <template #operation>
              <el-button type="primary" link> 下载 </el-button>
            </template>
          </ProTable>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<script setup lang="ts" name="IEDrawer">
import { ColumnProps } from '@/components/ProTable/interface'

const activeName = ref('1')
interface DrawerProps {
  title: string
}

const drawerVisible = ref(false)
const drawerProps = ref<DrawerProps>({
  title: '我的导入导出'
})

const tableData = [
  {
    id: 11,
    name: 'Tom',
    status: '1',
    createBy: 'wanggaokun',
    updateTime: '2024-06-21 17:25:33'
  }
]

// 导入信息表格配置项
const iColumns = reactive<ColumnProps<any>[]>([
  {
    prop: 'name',
    label: '文件名称',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'status',
    label: '数据导入状态',
    search: {
      el: 'input'
    },
    width: 220
  },
  {
    prop: 'createBy',
    label: '操作人',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'updateTime',
    label: '操作时间',
    search: {
      el: 'date-picker',
      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
    },
    width: 220
  },
  { prop: 'operation', label: '操作', width: 100 }
])
// 导出信息表格配置项
const eColumns = reactive<ColumnProps<any>[]>([
  {
    prop: 'name',
    label: '文件名称',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'createBy',
    label: '操作人',
    search: {
      el: 'input'
    },
    width: 220
  },
  {
    prop: 'updateTime',
    label: '操作时间',
    search: {
      el: 'date-picker',
      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
    },
    width: 220
  },
  {
    prop: 'status',
    label: '状态',
    search: {
      el: 'input'
    },
    width: 120
  },
  { prop: 'operation', label: '操作', width: 100 }
])

// 接收父组件传过来的参数
const acceptParams = () => {
  drawerVisible.value = true
}

defineExpose({
  acceptParams
})
</script>
<style scoped lang="scss">
.dot-class {
  display: block;
  width: 10px;
  height: 10px;
  margin-left: 10px; // 这个用于圆点居中
  border-radius: 50%;
}
.i-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
