<template>

  <view class="example">

    <uni-forms ref="planFormRef" :modelValue="planFormData" :rules="rules" validateTrigger="submit" label-position="top">
      <uni-forms-item label="父级任务" required label-width="105px" name="handler_id" v-if="planFormData.task_pid">
        <view class="custom-select-class" style="background: #f7f6f6;cursor: not-allowed;color: #d5d5d5">
          <view class="custom-select-content">
            <text >{{ planFormData.task_pname }}</text>
          </view>
        </view>
      </uni-forms-item>
      <uni-forms-item :label="planFormData.task_pid?'子任务名称':'任务名称'" required label-width="105px" name="name">
        <uni-easyinput v-model="planFormData.name" placeholder="请输入任务名称" />
      </uni-forms-item>
      <uni-forms-item label="主负责人" required label-width="105px" name="handler_id">
        <view class="custom-select-class" @click="showTreeSelectModal([planFormData.handler_id])">
          <view class="custom-select-content">
            <text v-if="planFormData.handler_id">{{ planFormData.handler_name }}</text>
            <text v-else style="color:#909399;font-size: 12px;">请选择任务负责人</text>
          </view>
          <uni-icons :size="14" color="#909399" type="down" style=" padding: 0 5px;"></uni-icons>
        </view>
      </uni-forms-item>
      <uni-forms-item label="计划开始时间" required label-width="105px" name="begin_at">
        <uni-datetime-picker type="date" v-model="planFormData.begin_at" />
      </uni-forms-item>
      <uni-forms-item label="预计结束时间" required label-width="105px" name="end_at">
        <uni-datetime-picker type="date" v-model="planFormData.end_at" />
      </uni-forms-item>
    </uni-forms>
    <view style="margin-bottom: 10px;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="handlerAddPlan()">提交</custom-button>
    </view>
    <next-tree :ifSearch="true" :border="true" labelKey="name" ref="treeSelectRef" :checkStrictly="true"
      :funcMode="'radio'" :treeData="accountList" @confirm="confirmTreeSelect" @cancel="cancelTreeSelect"></next-tree>
  </view>

</template>

<script lang="ts" setup>
import { getStaffList } from '@/api/biz/staff';
import { addPlanTask } from '@/api/project-center/plan-task';
import nextTree from '@/components/next-tree/next-tree.vue'
import { useEmitt } from '@/logics/mitt/useEmitt';
import { AddTaskReqParams } from '@/types/plan-task';


const accountList = ref<{ id: string, name: string }[]>([])
const planFormRef = ref()
const treeSelectRef = ref()
const { emitter } = useEmitt()

const rules = {
  // 对name字段进行必填验证
  name: {
    // name 字段的校验规则
    rules: [
      // 校验 name 不能为空
      {
        required: true,
        errorMessage: '名称不能为空',
      }
    ]
  },
  handler_id: {
    rules: [
      {
        required: true,
        errorMessage: '负责人不能为空',
      }
    ]
  },
  end_at: {
    rules: [
      {
        required: true,
        errorMessage: '预计结束时间不能为空',
      }
    ]
  },
  begin_at: {
    rules: [
      {
        required: true,
        errorMessage: '任务开始不能为空',
      }
    ]
  },
}
const planFormData = ref<{
  task_pid?: string
  task_pname?: string
  name?: string
  prj_id?: string // 
  handler_id?: string // 
  handler_name?: string
  begin_at?: string,
  end_at?: string
  draft?: boolean
}>({})



function checkedTreeData(treeData: any, selectIds?: any) {
  treeData.map((item: any) => {
    if (selectIds.indexOf(item.id) !== -1) {
      item.checked = true
    } else {
      item.checked = false
    }
    if (item.children && item.children.length) {
      checkedTreeData(item.children, selectIds)
    }
  })
}

const showTreeSelectModal = async (selectId?: any) => {
  checkedTreeData(accountList.value, selectId)
  unref(treeSelectRef).showTree = true
}



/**
* 获取用户列表
*/
const getAccountList = async () => {
  try {
    const { list } = await getStaffList({ page_no: 1, page_size: 9999 })
    accountList.value = list
  } catch (e) {
    console.error(e)
  }
}




function confirmTreeSelect(list: { id: string, name: string }[]) {
  if (list.length > 0) {
    planFormData.value.handler_id = list[0].id
    planFormData.value.handler_name = list[0].name
  }
}


const cancelTreeSelect = () => {
  // checkedTreeData(unref(tr), []) 
}




const handlerAddPlan = async () => {
  const isValid = await planFormRef.value?.validate()
  if (!isValid) {
    return
  }
  const { name, handler_id, begin_at, end_at, prj_id, task_pid, draft } = unref(planFormData)
  const params: AddTaskReqParams = {
    prj_id: prj_id!,
    task_pid,
    name: name!,
    handler_id: handler_id!,
    begin_at: begin_at!,
    end_at: end_at!,
    draft: draft,
  }
  await addPlanTask(params)
  setTimeout(()=>{
    emitter.emit('get_task_list')
    uni.showModal({
    title: '添加成功',
    content: `是否返回计划列表`,
    success: (res: { confirm: boolean }) => {
      const { confirm } = res;
      if (confirm) {
        return uni.navigateBack()
      }
    }
  })
  }, 1500)
}

onLoad((option) => {
  planFormData.value.prj_id = option?.id
  planFormData.value.task_pid = option?.task_pid
  planFormData.value.task_pname = option?.task_pname
  planFormData.value.draft = JSON.parse(option?.draft as string)
  getAccountList()
});

const restForm = async () => {
  planFormData.value = {
    task_pid:  planFormData.value.task_pid,
    task_pname:  planFormData.value.task_pname,
  }
  planFormRef.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>