<template>
  <view class="bg-white mx-4 p-2 rounded-2 mb-2 shadow-sm">
    <Input :id="0" title="访客姓名" :required="true" @change="inputChange" inline></Input>
    <wd-divider color="#bcbfbe"></wd-divider>
    <Input
      :id="1"
      title="访客手机"
      :required="true"
      :maxlength="11"
      @change="inputChange"
      inline
      type="number"
    ></Input>
    <wd-divider color="#bcbfbe"></wd-divider>
    <SelectPicker required :id="2" title="访客类型" :columns="columns" inline></SelectPicker>
    <wd-divider color="#bcbfbe"></wd-divider>
    <NavigatorSelector :id="3" title="通行门禁点" type="accessControl" inline></NavigatorSelector>
  </view>
  <view class="bg-white mx-4 p-2 rounded-2 mb-2 shadow-sm">
    <Keyboard :id="4" title="车牌号码" type="car" :maxlength="8" inline></Keyboard>
  </view>
  <view class="bg-white mx-4 p-2 rounded-2 mb-2 shadow-sm">
    <DatetimePicker
      :id="5"
      ref="startDatetimePicker"
      title="预约到访时间"
      @change="changeDate"
      type="datetime"
      inline
      required
    ></DatetimePicker>
    <wd-divider color="#bcbfbe"></wd-divider>
    <VisitDuration :id="6" title="访问时长" required value="2小时" inline></VisitDuration>
    <wd-divider color="#bcbfbe"></wd-divider>
    <Input :id="7" title="同行人数" @change="inputChange" inline></Input>
    <wd-divider color="#bcbfbe"></wd-divider>
    <Input :id="8" title="访问单位" @change="inputChange" inline></Input>
    <wd-divider color="#bcbfbe"></wd-divider>
    <Input :id="9" title="到访事由说明" @change="inputChange" inline></Input>
    <wd-divider color="#bcbfbe"></wd-divider>
    <Input :id="10" title="访问地址" @change="inputChange" inline></Input>
    <wd-divider color="#bcbfbe"></wd-divider>
    <Description :id="11" title="表单通过后，访客将收到断音邀请通知"></Description>
  </view>
</template>

<script setup lang="ts">
  import Input from '@/pages/approval/components/Input.vue'
  import SelectPicker from '@/pages/approval/components/SelectPicker.vue'
  import Description from '@/pages/approval/components/Description.vue'
  import Keyboard from '@/pages/approval/components/Keyboard.vue'
  import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
  import NavigatorSelector from '@/pages/approval/components/NavigatorSelector.vue'
  import VisitDuration from '@/pages/approval/components/VisitDuration.vue'

  const columns = ref<Record<number, string>>([
    {
      value: 0,
      label: '外卖快递'
    },
    {
      value: 1,
      label: '会议洽谈'
    },
    {
      value: 2,
      label: '探亲访友'
    },
    {
      value: 3,
      label: '业务沟通'
    }
  ])

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

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

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