<script lang="tsx" setup>
import { ref } from 'vue'
const conditions = [{
  title: '用户名',
  name: 'username',
  component: 'l-input',
  props: {
    defaultValue: '哈哈哈',
  },
}, {
  title: '性别',
  name: 'sex',
  component: 'l-radio-group',
  props: {
    options: [
      {
        label: '男',
        value: '0',
      },
      {
        label: '女',
        value: '1',
      },
    ],
    defaultValue: '0',
  },
}, {
  title: '爱好',
  name: 'hobby',
  component: 'l-checkbox-group',
  props: {
    options: [{
      label: '英语',
      value: 'en',
    }, {
      label: '中文',
      value: 'cn',
    }],
    defaultValue: ['en'],
  },
}, {
  title: '选择',
  name: 'select',
  component: 'l-select',
  props: {
    options: [{
      label: '选项一',
      value: '1',
    }, {
      label: '选项二',
      value: '2',
    }],
    defaultValue: '1',
  },
}, {
  title: '日期',
  name: 'date',
  component: 'l-date-picker',
}, {
  title: '时间',
  name: 'time',
  component: 'l-time-picker',
}, {
  title: '测试长度',
  name: 'test',
  component: 'l-input',
  props: {
    defaultValue: '333',
  },
}]

const columns = ref([
  { colKey: 'applicant', title: '申请人', width: '100' },
  { colKey: 'status', title: '申请状态',},
  { colKey: 'channel', title: '签署方式' },
  { colKey: 'detail.email', title: '邮箱地址', ellipsis: true },
  { colKey: 'createTime', title: '申请时间' },
])

const data: any[] = []

const total = 28
for (let i = 0; i < total; i++) {
  data.push({
    index: i + 1,
    applicant: ['贾明', '张三', '王芳'][i % 3],
    status: i % 3,
    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
    detail: {
      email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],
    },
    matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
    time: [2, 3, 1, 4][i % 4],
    createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
  })
}

const current = ref(1)
</script>

<template>
  <ld-page>
    <div style="position:absolute;top:0;right:0;bottom:0;left:0;">
      <ld-query
        :conditions="conditions"
        :columns="columns"
        :data="data"
        :pageSize="10"
        :total="total"
        :current="current"
      />
    </div>
  </ld-page>
</template>
