<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <TopNavigation title="添加考勤组"></TopNavigation>
  <view class="h-[calc(100vh-60px)] p-3 box-border">
    <view class="bg-white rounded-1.2 mt-2">
      <CommonItem text="考勤组名称" isMust value="有多少">
        <template v-slot:child>
          <input
            class="text-right"
            v-model="name"
            placeholder="必填"
            placeholder-class="input-placeholder"
            @input="nameInput()"
            :maxlength="15"
          />
        </template>
      </CommonItem>
      <CommonItem text="考勤类型" noLine value="固定班制"></CommonItem>
    </view>
    <view class="bg-white rounded-1.2 mt-2">
      <CommonItem text="考勤人员" isMust value=""></CommonItem>
      <CommonItem text="考勤时间" noLine value="周一至周五,09:00-17:00"></CommonItem>
    </view>
    <view class="bg-white rounded-1.2 mt-2">
      <CommonItem text="打卡方式" value="打卡设备"></CommonItem>
      <CommonItem text="打卡设备" isMust noLine value="" hint="未选择"></CommonItem>
    </view>
    <view class="bg-white rounded-1.2 mt-2">
      <CommonItem text="加班统计规则" noLine value="" hint="未开启"></CommonItem>
    </view>
    <view class="fixed bottom-0 left-0 w-full p-3 box-border">
      <wd-button block>保存</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import CommonItem from '@/components/CommonItemItem/CommonItem.vue'
  const name = ref('')
  const nameInput = () => {
    console.log(name.value)
  }
  //
</script>

<style lang="scss" scoped>
  page {
    background-color: #f6f8fc;
  }
</style>
