<!--
@ 作者: 秦东
@ 时间: 2023-10-17 13:20:34
@ 备注: 选择角色
-->
<script lang='ts' setup>
import { roles, getDebounceData, getRoleList, searchVal } from '@/components/workflow/dialog/common'
import $func from '@/utils/workflow/index'
//引入样式
import '@/styles/workflowcss/dialog.scss'
//引入页面
import selectBox from '@/components/workflow/selectBoxs.vue'
import selectResult from '@/components/workflow/selectResult.vue'

let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Array,
    default: () => []
  }
});
let checkedRoleList = ref([])
let emits = defineEmits(['update:visible', 'change'])
let list = computed(() => {
  return [{
    type: 'role',
    not: true,
		isDepartment:false,
    data: roles.value,
    isActive: (item:any) => $func.toggleClass(checkedRoleList.value, item, 'roleId'),
    change: (item:any) => {
      checkedRoleList.value = [item]
    }
  }]
})
let resList = computed(() => {
  return [{
    type: 'role',
    data: checkedRoleList.value,
    cancel: (item:any) => $func.removeEle(checkedRoleList.value, item, 'roleId')
  }]
})
let visibleDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    closeDialog()
  }
})
watch(() => props.visible, (val:any) => {
  if (val) {
    getRoleList();
    searchVal.value = "";
    checkedRoleList.value = props.data.map(({ name, targetId }) => ({
      roleName: name,
      roleId: targetId
    }));
  }
})
let total = computed(() => checkedRoleList.value.length)
const saveDialog = () => {
  let checkedList = checkedRoleList.value.map((item:any) => ({
    type: 2,
    targetId: item.roleId,
    name: item.roleName
  }))
  emits('change', checkedList)
}
const delList = () => {
  checkedRoleList.value = [];
}

const closeDialog = () => {
  emits('update:visible', false)
}
</script>
<template>
	<el-dialog v-model="visibleDialog" title="选择角色" :width="600" append-to-body class="promoter_person">
      <div class="person_body clear">
		  	<el-row>
				<el-col :span="12">
					<div class="person_tree l">
						<input v-model="searchVal"  type="text" placeholder="搜索角色" @input="getDebounceData($event,2)">
						<selectBox :list="list"/>
					</div>
				</el-col>
				<el-col :span="12">
					<selectResult :list="resList" :total="total" @del="delList"/>
				</el-col>
			</el-row>
      </div>
      <template #footer>
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="saveDialog">确 定</el-button>
      </template>
  </el-dialog>
</template>
<style  lang='scss' scoped>

</style>
