<template>

  <view class="example">
    <uni-forms ref="formRef" :modelValue="outcomeFormData" :rules="rules" validateTrigger="submit" label-position="top">
      <uni-forms-item label="交付物名称" required label-width="105px" name="name">
        <uni-easyinput v-model="outcomeFormData.name" placeholder="请输入交付物名称" />
      </uni-forms-item>
      <uni-forms-item label="计划交付时间" required label-width="105px" name="plan_time">
        <uni-datetime-picker type="date" v-model="outcomeFormData.plan_time" />
      </uni-forms-item>
      <!-- <uni-group>
        <view style="margin-bottom: 10px;">
          <custom-button width="100%" type="filled" color="#007aff" @click="handlerAddOutcome()">提交</custom-button>
        </view>
        <view>
          <custom-button width="100%" type="filled" color="#dd524d" @click="restForm()">重置</custom-button>
        </view>
      </uni-group> -->
    </uni-forms>
    <view style="margin: 10px 0;display: flex;">
      <custom-button width="100%" type="filled" color="#dd524d" @click="restForm()"
        style="margin-right: 5px;flex:1">重置</custom-button>
      <custom-button width="100%" type="filled" color="#007aff" style="flex:1;"
        @click="handlerAddOutcome()">提交</custom-button>
    </view>
  </view>

</template>

<script lang="ts" setup>
import { addOutcome } from '@/api/project-center/outcome';
import { useEmitt } from '@/logics/mitt/useEmitt';


const formRef = ref()
const { emitter } = useEmitt()

const rules = {
  // 对name字段进行必填验证
  name: {
    // name 字段的校验规则
    rules: [
      // 校验 name 不能为空
      {
        required: true,
        errorMessage: '名称不能为空',
      }
    ]
  },
  plan_time: {
    rules: [
      {
        required: true,
        errorMessage: '计划时间不能为空',
      }
    ]
  },
}
const outcomeFormData = ref<{
  task_id?: string
  task_name?: string
  name?: string
  plan_time?: string
  draft?: boolean
}>({})


const handlerAddOutcome = async () => {
  const isValid = await formRef.value?.validate()
  if (!isValid) {
    return
  }
  const { draft, name, plan_time, task_id } = unref(outcomeFormData)
  await addOutcome({
    draft: draft!,
    name: name!,
    plan_time: plan_time!,
    task_id: task_id!
  })
  emitter.emit('get_outcome_list')
  if (draft) {
    emitter.emit('get_task_list')
  }
  uni.showModal({
    title: '添加成功',
    content: `是否返回`,
    success: (res: { confirm: boolean }) => {
      const { confirm } = res;
      if (confirm) {
        return uni.navigateBack()
      }
    }
  })

}

onLoad((option) => {
  outcomeFormData.value.task_id = option?.task_id
  outcomeFormData.value.task_name = option?.task_name
  outcomeFormData.value.draft = JSON.parse(option?.draft as string)
});

const restForm = async () => {
  outcomeFormData.value = {
    task_id: outcomeFormData.value.task_id,
    task_name: outcomeFormData.value.task_name,
  }
  formRef.value?.clearValidate()

}


onMounted(() => {

})

</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'apply-shared', //解除样式隔离
  }

}
</script>
<style scoped lang="scss">
.example {
  padding: 15px;
  background-color: #fff;
}

:deep(.is-disabled) {
  color: #333;

}

.custom-select-class {
  border-color: #e5e5e5;
  background-color: transparent;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.custom-select-content {
  width: auto;
  position: relative;
  overflow: hidden;
  flex: 1;
  line-height: 1;
  font-size: 14px;
  line-height: 35px;
  padding-left: 10px;
  height: 35px;

}

.tag-container {
  &__item {
    padding: 0 6px 0 0;
  }
}
</style>