<template>

  <view class="example">
    <uni-forms ref="formRef" :modelValue="formData" :rules="rules" validateTrigger="submit" label-position="top">
      <uni-forms-item label="审核名称" required label-width="90px" name="name">
        <uni-data-select v-model="formData.name" :localdata="nameList" placeholder="请选择审核名称"></uni-data-select>
      </uni-forms-item>
      <uni-forms-item label="审核组成员" required label-width="90px" name="bizman_id">
        <view class="custom-select-class" @click="showTreeSelectModal(accountList, formData.handlers_id || [])">
          <view class="custom-select-content">
            <view v-if="formData.handlers_id && formData.handlers_id.length > 0" class="tag-container">
              <uni-tag :text="item" :inverted="true"
                :custom-style='"font-weight:bolder;border: 1px solid transparent;background:#e8f3ff;color:rgb(22, 93, 255);"'
                class="tag-container__item" v-for="item in handlers_name.slice(0, 2)" :key="item">
              </uni-tag>
              <uni-tag :inverted="true" type="primary" v-if="formData.handlers_id.length > 2"
                :custom-style='"font-weight:bolder;border: 1px solid transparent;background:#e8f3ff;color:rgb(22, 93, 255);"'
                :text="`+${formData.handlers_id.length - 2}...`" />
            </view>
            <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="120px" name="due_day">
        <view style="margin-top:5px;">
          <uni-number-box v-model="formData.due_day" :min="3" />
        </view>
      </uni-forms-item>
    </uni-forms>
    <view style="margin-bottom: 10px;">
      <custom-button width="100%" type="filled" color="#4cd964" @click="handlerModifyChecker()">修改</custom-button>
    </view>
    <next-tree :ifSearch="true" :border="true" labelKey="name" ref="treeSelectRef" funcMode="checkbox"
      :treeData="treeSelectData" @confirm="confirmTreeSelect" @cancel="cancelTreeSelect"></next-tree>
  </view>

</template>

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

const accountList = ref<{ id: string, name: string }[]>([])
const checkers = ref<Checker[]>([])
const treeSelectData = ref<DomainTree[]>([]) // 区域树
const formRef = ref()
const treeSelectRef = ref()
const { emitter } = useEmitt()

const nameList = [{ value: '互校', text: '互校' },
{ value: '二审', text: '二审' },
{ value: '终审', text: '终审' }]
const rules = {
  name: {
    rules: [
      {
        required: true,
        errorMessage: '审核名称不能为空',
      }
    ]
  },
  handlers_id: {
    rules: [
      {
        required: true,
        errorMessage: '审核成员不能为空',
      }
    ]
  },
  due_day: {
    rules: [
      {
        required: true,
        errorMessage: '超时时限不能为空',
      }
    ]
  }
}

const formData = ref<{
  cIndex?: number
  handlers_id?: string[] // 项目负责人账号id
  name?: string
  handlers_name?: string[]
  due_day: number
}>({
  due_day: 3
})



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 (treeData: any, selectId?: any) => {
  treeSelectData.value = treeData;
  checkedTreeData(treeSelectData.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)
  }
}

const handlers_name = computed(() => {
  const arrName: string[] = []
  formData.value.handlers_id?.map((item: string | number) => {
    const isFind = accountList.value?.find(p => p.id === item)
    if (isFind) {
      arrName.push(isFind.name)
    }
    return item
  })
  return arrName
})






function confirmTreeSelect(list: { id: string, name: string }[]) {
  if (list.length > 0) {
    formData.value.handlers_id = list.map(item => item.id)
    formData.value.handlers_name = list.map(item => item.name)
  }
  treeSelectData.value = [];
}


const cancelTreeSelect = () => {
  treeSelectData.value = []
}

/**
 * 确认添加审核组成员
 */
const handlerModifyChecker = async () => {
  const isValid = await formRef.value?.validate()
  if (!isValid) {
    return
  }
  const { handlers_id, due_day, name, cIndex } = unref(formData)
  emitter.emit('modify_task_checkers', {
    cIndex,
    checker: {
      handlers: handlers_id,
      due_day,
      name
    }
  })
  setTimeout(() => {
    return uni.navigateBack()
  }, 1500)
}


onLoad((option) => {
  formData.value.handlers_id = option?.handlers_id?.split(',')
  formData.value.name = option?.name
  formData.value.due_day = Number(option?.due_day)
  formData.value.cIndex = Number(option?.cIndex)
});


onMounted(() => {
  getAccountList()

})

</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>