<template>
  <div class="container">
    <a-button
      size="small"
      type="primary"
      shape="round"
      @click="showPicker"
    >
      <template slot="icon">
        <i class="x-iconfont x-icon-plus" />
      </template>
      选择抄送人
    </a-button>

    <OrgItemsView v-model="nodeAssigneeList" />

    <!-- 抄送人员选择弹窗 -->
    <OrgPicker
      ref="orgPickerRef"
      :multiple="true"
      :selected="nodeAssigneeList"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import OrgPicker from '@comp/OrgPicker/OrgPicker.vue'
import OrgItemsView from '@/views/workFlow/designer/common/OrgItemsView.vue';

export default {
  name: 'CcNodeConfig',
  components: {
    OrgPicker,
    OrgItemsView
  },
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      orgPickerRef: null,
      nodeAssigneeList: this.config.nodeAssigneeList || []
    };
  },
  methods: {
    showPicker() {
      this.$refs.orgPickerRef && this.$refs.orgPickerRef.show();
    },
    confirmHandle(data) {
      this.nodeAssigneeList.splice(0, this.nodeAssigneeList.length);
      data.forEach(val => this.nodeAssigneeList.push(val));
    }
  }
};
</script>

<style scoped>
.container {
  padding: 4px 0;
}
</style>
