<script lang="tsx" setup>
import { CheckboxGroup, DatePicker, Input, MessagePlugin, RadioGroup, Select, TimePicker } from '@ldesign/desktop-next'
import {
  CheckCircleFilledIcon,
  CloseCircleFilledIcon,
  ErrorCircleFilledIcon,
  FileCopyIcon,
} from '@ldesign/icons-vue-next'
import { reactive, ref } from 'vue'

/** 搜索条件数据 */
const options = [{
  title: '用户名',
  name: 'username',
  component: Input,
  props: {
    defaultValue: '哈哈哈',
  },
}, {
  title: '性别',
  name: 'sex',
  component: RadioGroup,
  props: {
    options: [
      {
        label: '男',
        value: '0',
      },
      {
        label: '女',
        value: '1',
      },
    ],
    defaultValue: '0',
  },
}, {
  title: '爱好',
  name: 'hobby',
  component: CheckboxGroup,
  props: {
    options: [{
      label: '英语',
      value: 'en',
    }, {
      label: '中文',
      value: 'cn',
    }],
    defaultValue: ['en'],
  },
}, {
  title: '选择',
  name: 'select',
  component: Select,
  props: {
    options: [{
      label: '选项一',
      value: '1',
    }, {
      label: '选项二',
      value: '2',
    }],
    defaultValue: '1',
  },
}, {
  title: '日期',
  name: 'date',
  component: DatePicker,
}, {
  title: '时间',
  name: 'time',
  component: TimePicker,
}, {
  title: '测试长度',
  name: 'test',
  component: Input,
  props: {
    defaultValue: '333',
  },
}]
const form = reactive({
  username: '2',
  sex: '',
  hobby: [],
  select: '',
  date: '',
  time: '',
  test: '',
})
/** 表格数据 */
const getAttach = () => document.body

function copyToClipboard(text: string) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text)
  }
  else {
    const textarea = document.createElement('textarea')
    document.body.appendChild(textarea)
    textarea.style.position = 'fixed'
    textarea.style.clip = 'rect(0 0 0 0)'
    textarea.style.top = '10px'
    textarea.value = text
    textarea.select()
    document.execCommand('copy', true)
    document.body.removeChild(textarea)
  }
  MessagePlugin.success('文本复制成功')
}
/** 表格数据 */
const data: any[] = []
const total = 20
const statusNameListMap: any = {
  0: { label: '审批通过', theme: 'success', icon: <CheckCircleFilledIcon /> },
  1: { label: '审批失败', theme: 'danger', icon: <CloseCircleFilledIcon /> },
  2: { label: '审批过期', theme: 'warning', icon: <ErrorCircleFilledIcon /> },
}
/** 初始化表格数据 */
for (let i = 0; i < total; i++) {
  data.push({
    id: i + 1,
    applicant: ['贾明（kyrieJia）', '张三（threeZhang)', '王芳（fangWang)'][i % 3],
    status: i % 3,
    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
    desc: ['单元格文本超出省略设置', '这是普通文本的超出省略'][i % 2],
    link: '点击查看审批详情',
    something: '仅标题省略',
    // 透传 Tooltip Props 到浮层组件
    ellipsisProps: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],
    // 完全自定义超出省略的 Tips 内容
    ellipsisContent: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
    propsAndContent1: ['2021-11-01', '2021-12-01', '2022-01-01', '2022-02-01', '2022-03-01'][i % 4],
    propsAndContent2: [2, 3, 1, 4][i % 4],
  })
}

/** 表格列数据 */
const columns = ref([
  {
    colKey: 'applicant',
    title: '申请人',
    ellipsis: true,
  },
  {
    colKey: 'status',
    title: '审批状态',
    width: 120,
    cell: (h: any, { col, row }: any) => {
      return (
        <l-tag shape="round" theme={statusNameListMap[row.status].theme} variant="light-outline">
          {statusNameListMap[row.status].icon}
          {statusNameListMap[row.status].label}
        </l-tag>
      )
    },
  },
  {
    title: '签署方式（超长标题示例）',
    colKey: 'channel',
    width: 120,
    ellipsisTitle: true,
  },
  {
    title: '邮箱地址',
    colKey: 'ellipsisProps',
    // 浮层浅色背景，方向默认朝下出现
    ellipsis: {
      theme: 'light',
      placement: 'bottom',
    },
  },
  {
    title: '申请事项',
    colKey: 'ellipsisContent',
    // ellipsis 定义超出省略的浮层内容，cell 定义单元格内容
    ellipsis: (h: any, { row }: any) => (
      <div>
        {row.ellipsisContent}
        <FileCopyIcon
          style={{ cursor: 'pointer', marginLeft: '4px' }}
          onClick={() => copyToClipboard(row.ellipsisContent)}
        />
      </div>
    ),
  },
  {
    title: '审核时间',
    colKey: 'propsAndContent1',
    // 支持同时设置 tooltipProps 和 浮层内容,
    width: 100,
    ellipsis: {
      props: {
        theme: 'light',
        placement: 'bottom-right',
      },
      content: (h: any, { row }: any) => (
        <div>
          <p>
            <b>创建日期:</b> {row.propsAndContent1}
          </p>
          <p>
            <b>审核时长(天):</b> {row.propsAndContent2}
          </p>
        </div>
      ),
    },
  },
  {
    title: '操作',
    colKey: 'link',
    // 超出省略的内容显示纯文本，不带任何样式和元素
    ellipsis: (h: any, { row }: any) => row.link,
    // 注意这种 JSX 写法需设置 <script lang="jsx" setup>
    cell: (h: any, { row }: any) => (
      <l-link theme="primary" href="/vue-next/components/table" target="_blank">
        {row.link}
      </l-link>
    ),
  },
])
/** 分页数据 */
const pageSize = ref(20)
const current = ref(1)
const contentHeight = ref(0)
function onPageResizeChange(res: any) {
  contentHeight.value = res.height
}
</script>

<template>
  <ld-page
    @resize="onPageResizeChange"
  >
    <template #header>
      <ld-query v-model="form" :options="options" />
    </template>
    <template #default>
      <l-table :height="contentHeight" row-key="id" :data="data" :columns="columns" />
    </template>
    <template #footer>
      <l-pagination v-model="current" v-model:page-size="pageSize" :total="101" show-jumper />
    </template>
  </ld-page>
</template>
