<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-forms>
    <view style="margin-bottom: 10px;">
      <custom-button width="100%" type="filled" color="#4cd964" @click="handlerModifyOutcome()">修改</custom-button>
    </view>
  </view>

</template>

<script lang="ts" setup>
import { addOutcome, getOutcomeDetail, modifyOutcome } 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<{
  id?: string
  name?: string
  plan_time?: string
  draft?: boolean
}>({})


const handlerModifyOutcome = async () => {
  const isValid = await formRef.value?.validate()
  if (!isValid) {
    return
  }
  const { draft, name, plan_time, id } = unref(outcomeFormData)
  try {
    await modifyOutcome({ id: id!, name, draft: draft!, plan_time })
    emitter.emit('get_outcome_list')
    if (draft) {
      emitter.emit('get_task_list')
    }
    uni.showModal({
      title: '修改成功',
      success: (res: { confirm: boolean }) => {
        const { confirm } = res;
        if (confirm) {
          return uni.navigateBack()
        }
      }
    })
  } catch (_e) {
    getDetail(id!, draft!)
  }
}

// 获取详情
const getDetail = async (outcome_id: string, draft: boolean) => {
  const { name, plan_time } = await getOutcomeDetail({
    draft,
    outcome_id
  })
  outcomeFormData.value.name = name
  outcomeFormData.value.plan_time = plan_time
  uni.setNavigationBarTitle({
    title: `修改${name}`,
  })
}


onLoad((option) => {
  outcomeFormData.value.id = option?.outcome_id
  const draft = JSON.parse(option?.draft as string)
  outcomeFormData.value.draft = JSON.parse(option?.draft as string)
  getDetail(option?.outcome_id!, draft)
});




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>