<script setup>
import { computed, ref, watch } from 'vue'
import { departments, getDebounceData, getDepartmentList, searchVal } from './common'
import selectResult from '@/components/workFlow/selectResult.vue'
import selectBox from '@/components/workFlow/selectBox.vue'
import $func from '@/plugins/preload.js'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: () => [],
  },
  isDepartment: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['update:visible', 'change'])
const closeDialog = () => {
  emits('update:visible', false)
}
const visibleDialog = computed({
  get() {
    return props.visible
  },
  set() {
    closeDialog()
  },
})
const checkedDepartmentList = ref([])
const checkedEmployessList = ref([])
const list = computed(() => {
  return [{
    isDepartment: props.isDepartment,
    type: 'department',
    data: departments.value.childDepartments,
    isActive: item => $func.toggleClass(checkedDepartmentList.value, item),
    change: item => $func.toChecked(checkedDepartmentList.value, item),
    next: item => getDepartmentList(item.id),
  }, {
    type: 'employee',
    data: departments.value.employees,
    isActive: item => $func.toggleClass(checkedEmployessList.value, item),
    change: item => $func.toChecked(checkedEmployessList.value, item),
  }]
})
const resList = computed(() => {
  const data = [{
    type: 'employee',
    data: checkedEmployessList.value,
    cancel: item => $func.removeEle(checkedEmployessList.value, item),
  }]
  if (props.isDepartment) {
    data.unshift({
      type: 'department',
      data: checkedDepartmentList.value,
      cancel: item => $func.removeEle(checkedDepartmentList.value, item),
    })
  }
  return data
})
watch(() => props.visible, (val) => {
  if (val) {
    getDepartmentList()
    searchVal.value = ''
    checkedEmployessList.value = props.data.filter(item => item.type === 1).map(({ name, targetId }) => ({
      employeeName: name,
      id: targetId,
    }))
    checkedDepartmentList.value = props.data.filter(item => item.type === 3).map(({ name, targetId }) => ({
      departmentName: name,
      id: targetId,
    }))
  }
})

const total = computed(() => checkedDepartmentList.value.length + checkedEmployessList.value.length)

const saveDialog = () => {
  const checkedList = [
    ...checkedDepartmentList.value,
    ...checkedEmployessList.value,
  ].map(item => ({
    type: item.employeeName ? 1 : 3,
    targetId: item.id,
    name: item.employeeName || item.departmentName,
  }))
  emits('change', checkedList)
}
const delList = () => {
  checkedDepartmentList.value = []
  checkedEmployessList.value = []
}
</script>

<template>
  <el-dialog v-model="visibleDialog" title="选择成员" width="600px" append-to-body custom-class="promoter_person">
    <div class="person_body clear">
      <div class="person_tree l">
        <input v-model="searchVal" type="text" placeholder="搜索成员" @input="getDebounceData($event)">
        <p v-if="!searchVal" class="ellipsis tree_nav">
          <span class="ellipsis" @click="getDepartmentList(0)">天下</span>
          <span
            v-for="(item, index) in departments.titleDepartments" :key="`${index}a`"
            class="ellipsis" @click="getDepartmentList(item.id)"
          >{{ item.departmentName }}</span>
        </p>
        <select-box :list="list" />
      </div>
      <select-result :total="total" :list="resList" @del="delList" />
    </div>
    <template #footer>
      <el-button @click="$emit('update:visible', false)">
        取 消
      </el-button>
      <el-button type="primary" @click="saveDialog">
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>

<style>
@import "@/css/dialog.css";
</style>