<template>
    <div>
        <div class="mb-10">
            <my-process-viewer
                ref="processViewer"
                :value="bpmnXML"
                :prefix="prefix"
                :activityData="activityData"
                :processInstanceData="processInstanceData"
                :taskData="taskData"
            />
        </div>
        <el-form label-position="left" label-width="100px">
          <el-form-item :label="$t('抄送')">
            <el-select v-model="valueSync" multiple :placeholder="$t('请选择抄送人')" style="width:100%">
                <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.nickname"
                :value="item.id">
                </el-option>
            </el-select>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {getProcessDefinitionBpmnXMLByKey} from "@/api/bpm/definition"
import {listSimpleUsers} from '@/api/system/user'
export default {
    props:{
        xmlkey: String, // 流程标识
        value: Array,
        prefix: { // 使用哪个引擎
            type: String,
            default: "camunda",
        },
        activityData: { // 活动的数据。传递时，可高亮流程
            type: Array,
            default: () => [],
        },
        processInstanceData: { // 流程实例的数据。传递时，可展示流程发起人等信息
            type: Object,
        },
        taskData: { // 任务实例的数据。传递时，可展示 UserTask 审核相关的信息
            type: Array,
            default: () => [],
        }
    },
    data(){
        return {
            valueSync: [],
            bpmnXML: null,
            users: [],
            selectedUserIds:[]
        }
    },
    watch:{
        value(){
            this.valueSync = this.value || []
        },
        valueSync(val){
            this.$emit('input', val)
        },

    },
    created(){
        if(this.value){
            this.valueSync = this.value
        }
        listSimpleUsers().then(res => {
            this.users = res.data
        })
        this.loadData()
    },
    methods:{
        loadData(){
            getProcessDefinitionBpmnXMLByKey(this.xmlkey).then(response => {
                this.bpmnXML = response.data
            })
        }
    }

}
</script>