<template>
  <view class="pb-3 mb-2">
    <Visitor></Visitor>
    <view class="bg-white mx-4 px-2 pt-3 pb-4 rounded-2 shadow-sm">
      <Input
        :id="0"
        value="单行"
        title="单行文本"
        :required="true"
        placeholder="单行文本"
        @change="inputChange"
      ></Input>
      <wd-divider color="#bcbfbe"></wd-divider>
      <Textarea
        :id="1"
        title="多行文本"
        :required="false"
        placeholder="多行文本"
        @change="textareaChange"
      ></Textarea>
      <wd-divider color="#bcbfbe"></wd-divider>
      <SelectPicker
        :value="1"
        :id="2"
        title="单选框"
        placeholder="单选"
        :columns="columns"
      ></SelectPicker>
      <wd-divider color="#bcbfbe"></wd-divider>
      <SelectPicker
        :value="[0]"
        :id="3"
        title="多选框"
        placeholder="多选"
        type="checkbox"
        :columns="columns"
      ></SelectPicker>
      <wd-divider color="#bcbfbe"></wd-divider>
      <Input
        :id="4"
        type="number"
        title="数字"
        :required="true"
        placeholder="数字"
        @change="inputChange"
      ></Input>
      <wd-divider color="#bcbfbe"></wd-divider>
      <DatetimePicker :id="5" title="日期1" @change="changeDate"></DatetimePicker>
      <wd-divider color="#bcbfbe"></wd-divider>
      <DatetimePicker
        :id="6"
        title="日期2"
        type="dateHalfDay"
        @change="changeDate"
      ></DatetimePicker>
      <wd-divider color="#bcbfbe"></wd-divider>
      <DatetimePicker
        :id="7"
        type="datetime"
        :value="1737043380000"
        title="日期3"
        @change="changeDate"
      ></DatetimePicker>
      <wd-divider color="#bcbfbe"></wd-divider>
      <Images :id="8" title="图片"></Images>
      <wd-divider color="#bcbfbe"></wd-divider>
      <Description
        :id="9"
        title="图片21378912378923718982371217389712397837889713247893428793142897134728900978"
      ></Description>
      <wd-divider color="#bcbfbe"></wd-divider>
      <NavigatorSelector :id="10" title="成员" type="member" :multiple="true"></NavigatorSelector>
      <wd-divider color="#bcbfbe"></wd-divider>
      <NavigatorSelector
        :id="11"
        title="部门"
        type="department"
        :multiple="true"
      ></NavigatorSelector>
      <wd-divider color="#bcbfbe"></wd-divider>
      <Leave :id="12"></Leave>
      <wd-divider color="#bcbfbe"></wd-divider>
      <DatetimePickerGroup :id="13" type="businessTrip" unit="date"></DatetimePickerGroup>
      <wd-divider color="#bcbfbe"></wd-divider>
      <DatetimePickerGroup :id="14" type="goOut" unit="dateHalfDay"></DatetimePickerGroup>
      <wd-divider color="#bcbfbe"></wd-divider>
      <Overtime :id="15"></Overtime>
      <wd-divider color="#bcbfbe"></wd-divider>
      <DatetimePicker
        :id="16"
        type="datetime"
        required
        title="补卡时间"
        @change="changeDate"
      ></DatetimePicker>
    </view>
  </view>
</template>

<script setup lang="ts">
  import Input from '@/pages/approval/components/Input.vue'
  import Textarea from '@/pages/approval/components/Textarea.vue'
  import SelectPicker from '@/pages/approval/components/SelectPicker.vue'
  import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
  import Images from '@/pages/approval/components/Images.vue'
  import Description from '@/pages/approval/components/Description.vue'
  import NavigatorSelector from '@/pages/approval/components/NavigatorSelector.vue'
  import Leave from '@/pages/approval/components/Leave.vue'
  import DatetimePickerGroup from '@/pages/approval/components/DatetimePickerGroup.vue'
  import Overtime from '@/pages/approval/components/Overtime.vue'
  import Visitor from '@/pages/approval/components/Visitor.vue'

  const columns = ref<Record<number, string>>([
    {
      value: 0,
      label: '男装'
    },
    {
      value: 1,
      label: '奢侈品'
    },
    {
      value: 2,
      label: '女装'
    }
  ])

  const inputChange = e => {
    console.log('inputChange', e)
  }

  const textareaChange = e => {
    console.log('textareaChange', e)
  }

  const changeDate = e => {
    console.log('changeDate', e)
  }
</script>

<style lang="scss" scoped>
  .wd-divider {
    padding: 0 0.5rem;
  }
</style>
