<template>
  <view>
    <u-sticky
        class="sticky"
        :custom-nav-height="0"
    >
      <u-navbar
          title="新增派工"
          bg-color="transparent"
          :auto-back="true"
          :title-style="{ fontWeight: 'bold' }"
          safe-area-inset-top
          placeholder
      />
    </u-sticky>
    <view class="container">
      <!-- 自定义表单校验 -->
      <uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="formData">
        <uni-forms-item label="工位" required name="name">
          <u-input v-model="name" placholder="请输入名称" disabled/>
        </uni-forms-item>
        <uni-forms-item  label="班别" required name="groupType">
          <uni-data-checkbox v-model="formData.groupType" :localdata="groupTypes" @change="getUserList"/>
        </uni-forms-item>
        <uni-forms-item label="工作日期" required name="planDates">
          <u-input v-model="formData.planDates" placeholder="请选择工作日期"  prefixIcon="calendar"  @click="show=true"></u-input>
          <u-calendar :show="show" mode="multiple" @confirm="confirm" @close="show=false"></u-calendar>
        </uni-forms-item>
        <uni-forms-item v-if="formData.groupType" required label="工人"  name="workerId">
          <uni-data-select  v-model="formData.workerId" :localdata="userList"/>
        </uni-forms-item>
      </uni-forms>
      <view class="u-flex justify-end">
        <view @click="submit()">
          <u-button type="primary">
            <uni-icons type="checkbox" class="u-m-r-10"/>
            确定
          </u-button></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onReady } from "@dcloudio/uni-app";
import tab from "@/plugins/tab";
import modal from "@/plugins/modal";
import { groupTypes } from "@/api/system/dict/data";
import { createWorker, getUserList2 } from "@/api/mes/deskArrangement";

const formData = ref({
  orgId: undefined,
  groupType: undefined,
  workerId: undefined,
  planDates: undefined,
  orgType: undefined
})

const name = ref('')

const userList = ref([])
/** 工序类型变化，可选负责人跟着变化 */
const getUserList = ()=>{
  if(formData.value.orgId && formData.value.groupType) {
    getUserList2({ orgId: formData.value.orgId, groupType: formData.value.groupType } ).then(response => {
      userList.value = response.data
      userList.value.forEach(user => {
        user.text = user.nickname;
        user.value = user.id;
        delete user.nickname;
        delete user.id;
      });
    })
  }
}
const customForm = ref()
// 自定义表单校验规则
const customRules = ref({
  groupType: { rules: [{ required: true, errorMessage: '班别不能为空'}]},
  workerId: { rules: [{ required: true, errorMessage: '工人不能为空'}]},
  planDates: { rules: [{ required: true, errorMessage: '工作日期不能为空'}]}
})

const submit = ()=>{
  customForm.value.validate(async(valid)=>{
    if(!valid){
      // 日期格式化
      for (let i = 0; i < formData.value.planDates.length; i++) {
        const dateObj = new Date(formData.value.planDates[i]);
        formData.value.planDates[i] = dateObj.toISOString().replace('T', ' ').split('.')[0];
      }
      await createWorker(formData.value)
      modal.msgSuccess("保存成功")
      await tab.navigateBack()
      uni.$emit('success', true)
    }
  })
}

onReady(()=>{
  // 设置自定义表单校验规则，必须在节点渲染完毕后执行
  customForm.value.setRules(customRules.value)
})

const show = ref(false)
const confirm = (e)=>{
  formData.value.planDates = e
  show.value = false
}

onLoad(() => {
  name.value = tab.getParams().name
  formData.value.orgId = tab.getParams().id
  formData.value.orgType = tab.getParams().orgType
  getUserList()
});
</script>

<style scoped lang="sass">
.sticky
  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%)
  backdrop-filter: blur(27.18px)
  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1), 0 0.5px 0 0 rgba(0, 0, 0, 0.1)
  padding-bottom: 20rpx
.container
  padding: 20rpx
  margin: 20rpx
  background-color: #ffffff
.uniui-checkbox:before
  color: #ffffff
.u-button
  height: 70rpx
:deep(.u-calendar-header)
  padding: 40rpx
:deep(.u-calendar-header__title)
  display: block
:deep(.u-calendar-month__title)
  padding: 40rpx
</style>
