<script lang="ts" setup>
import { Button, DatePicker, InputAdornment, Select, Textarea } from '@ldesign/desktop-next'
import type { Ref } from 'vue'
import { inject, ref } from 'vue'
import type { LeapRouter } from '../../../../public/src/router'

const $router = inject<LeapRouter>('$router')

function onClick() {
  $router?.push({
    path: '/custom/document',
    component: '/src/views/Custom/Test.vue',
    container: 'body',
    params: {
      a: 1,
    },
  })
}

const $watermarkInfo = inject<Ref<any>>('$watermarkInfo')

const description = ref({
  number: 'QJSQ202304037',
  date: '2023-04-07 15:31',
})

const options = [
  {
    title: '工号',
    component: 'div',
    props: {
      innerHTML: '200295',
    },
    span: 12,
  },
  {
    title: '申请人',
    component: 'div',
    required: true,
    props: {
      innerHTML: '刘勇',
    },
    span: 6,
  },
  {
    title: '申请时间',
    component: 'div',
    labelWidth: '6em',
    props: {
      innerHTML: '2023/04/07 15:32',
    },
    span: 6,
  },
  {
    title: '所属机构',
    component: 'div',
    props: {
      innerHTML: '永兴元科技-深圳市永兴元科技股份有限公司-研发中心-开发部',
    },
    span: 12,
  },
  {
    title: '岗位',
    component: 'div',
    props: {
      innerHTML: 'web前端技术主管',
    },
    span: 6,
  },
  {
    title: '请假类型',
    component: Select,
    labelWidth: '6em',
    props: {
      options: [{
        label: '年假',
        value: '0',
      }, {
        label: '病假',
        value: '1',
      }, {
        label: '哺乳假',
        value: '2',
      }, {
        label: '产假',
        value: '3',
      }, {
        label: '父亲假',
        value: '4',
      }, {
        label: '工伤假',
        value: '5',
      }, {
        label: '婚假',
        value: '6',
      }, {
        label: '事假',
        value: '7',
      }, {
        label: '丧假',
        value: '8',
      }, {
        label: '探亲假',
        value: '9',
      }],
    },
    span: 6,
  },
  {
    title: '已使用年假时长',
    component: 'div',
    props: {
      innerHTML: '38.75小时',
    },
    span: 6,
  },
  {
    title: '剩余年假时长	',
    component: 'div',
    labelWidth: '6em',
    props: {
      innerHTML: '0小时',
    },
    span: 6,
  },
  {
    title: '开始时间',
    component: DatePicker,
    required: true,
    props: {
    },
    span: 6,
  },
  {
    title: '截止时间',
    component: DatePicker,
    labelWidth: '6em',
    props: {
    },
    span: 6,
  },
  {
    title: '请假时长',
    required: true,
    component: InputAdornment,
    props: {
    },
    span: 6,
  },
  {
    title: '请假天数',
    required: true,
    component: InputAdornment,
    labelWidth: '6em',
    props: {
    },
    span: 6,
  },
  {
    title: '请假理由',
    required: true,
    component: Textarea,
    props: {
      autosize: {
        minRows: 5,
      },
    },
    span: 12,
  },
  {
    title: '工作交接对象',
    required: true,
    component: Button,
    props: {
      default: '选择',
    },
    span: 12,
  },
  {
    title: '工作交接内容',
    required: true,
    component: Textarea,
    props: {
    },
    span: 12,
  },
]
</script>

<template>
  <ld-document
    title="请假申请表"
    :options="options"
    :description="description"
    :watermark="$watermarkInfo"
  >
    <template #footer>
      <l-button theme="default" variant="base">
        打印
      </l-button>
      <l-button theme="default" variant="outline">
        暂存
      </l-button>
      <l-button variant="outline" theme="primary">
        收藏
      </l-button>
      <l-button @click="onClick">
        办结
      </l-button>
      <l-button>送领导审批</l-button>
    </template>
  </ld-document>
</template>
