<template>

  <el-form-item label="⚙ 选择审批对象" prop="text" class="user-type">
    <el-radio-group v-model="nodeProps.assignedType">
      <el-radio v-for="item in approvalTypes" :label="item.type" :key="item.type">{{ item.name }}</el-radio>
    </el-radio-group>

    <!--      <div v-else>-->
    <!--        <span class="item-desc">发起人自己作为审批人进行审批</span>-->
    <!--      </div>-->
  </el-form-item>
  <div v-if="nodeProps.assignedType === 'ASSIGN_USER'">
    <el-button size="mini" icon="Plus" type="primary"  @click="selectUser" round>选择抄送人</el-button>
    <avatar-ellipsis :row="3" :user-info="assignedUser"/>
    <user-picker title="请选择抄送人" multiple ref="userPicker" :v-model="assignedUser" @ok="selectedUser"/>
  </div>
<!--  <div class="option">-->
<!--    <el-checkbox label="允许发起人添加抄送人" v-model="shouldAdd"></el-checkbox>-->
<!--  </div>-->
  <!--    <org-items v-model="select"/>-->
</template>

<script setup>
import {useProcessStore} from '@/stores/processStore.js'
import {computed, defineProps} from 'vue'
import UserPicker from "../common/UserPicker.vue";
import AvatarEllipsis from "../common/AvatarEllipsis.vue";
const processStore = useProcessStore()
const userPicker=ref()
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const approvalTypes = reactive([
  {name: "指定人员", type: "ASSIGN_USER"},
  {name: "财务部门研发投入核算对接人", type: "FINANCIAL_ASSOCIATE"},
])
const shouldAdd = computed({
  get() {
    return props.config.shouldAdd || false
  },
  set(val) {
    props.config.shouldAdd = val
  }
})

const nodeProps = computed(() => {
  return processStore.getSelectedNode().props;
})
const assignedUser = computed({
  get() {
    return props.config.assignedUser || []
  },
  set(val) {
    props.config.assignedUser = val
  }
})
const selectUser = () => {
  userPicker.value.showUserPicker()
}
const selectedUser = (select) => {
  let userInfoList = []
  for (let val of select) {
    let userInfo = {
      id: val.id,
      name: val.name,
      avatar: val.avatar,
    }
    userInfoList.push(userInfo)
  }
  assignedUser.value = userInfoList
}

</script>

<style lang="scss" scoped>
.option {
  color: #606266;
  margin-top: 20px;
  font-size: small;
}

.desc {
  font-size: small;
  color: #8c8c8c;
}

.org-item {
  margin: 5px;
}
</style>
