<template>
  <a-form
    ref="flowForm"
    :label-col="formItemLayout.labelCol"
    :wrapper-col="formItemLayout.wrapperCol"
  >
    <div :class="$style.border">
      <div :class="$style.label">候选参与者</div>
      <a-form-item label="角色">
        <sd-role-picker v-model="participants.role" @change="onChange"></sd-role-picker>
      </a-form-item>
      <!-- <a-form-item label="策略接口">
        <sd-value-picker
          :modal-props="{ class: $style.userpicker, width: 900 }"
          option-label="text"
        >
          <template v-slot="scope">
            <sd-strategy-picker title="动态用户集合" v-bind="scope"></sd-strategy-picker>
            <sd-default-strategy-picker
              title="动态角色成员"
              v-bind="scope"
            ></sd-default-strategy-picker>
          </template>
        </sd-value-picker>
      </a-form-item> -->
      <a-form-item label="组织">
        <sd-group-picker v-model="participants.group" @change="onChange"></sd-group-picker>
      </a-form-item>
      <a-form-item label="用户">
        <sd-user-picker v-model="participants.user" @change="onChange"></sd-user-picker>
      </a-form-item>
    </div>
    <div :class="$style.border">
      <div :class="$style.label">默认参与者</div>
      <a-form-item label="角色">
        <sd-role-picker v-model="defaultParticipants.role" @change="onChange"></sd-role-picker>
      </a-form-item>
      <!-- <a-form-item label="策略接口">
        <sd-user-picker></sd-user-picker>
      </a-form-item> -->
      <a-form-item label="组织">
        <sd-group-picker v-model="defaultParticipants.picker" @change="onChange"></sd-group-picker>
      </a-form-item>
      <a-form-item label="用户">
        <sd-user-picker v-model="defaultParticipants.user" @change="onChange"></sd-user-picker>
      </a-form-item>
    </div>
  </a-form>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import components from './_import-components/sd-participant-form-import'

export default {
  name: 'SdParticipantForm',
  metaInfo: {
    title: 'SdParticipantForm',
  },
  components,
  mixins: [storeMixin],
  data() {
    return {
      roleList: [],
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
      },
      participants: {
        role: [],
        group: [],
        user: [],
      },
      defaultParticipants: {
        role: [],
        group: [],
        user: [],
      },
    }
  },
  created() {},
  methods: {
    onChange(val) {
      this.$emit('change', {
        participants: Object.values(this.participants).flat().length
          ? Object.values(this.participants).flat()
          : null,
        defaultParticipants: Object.values(this.defaultParticipants).flat().length
          ? Object.values(this.defaultParticipants).flat()
          : null,
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.border {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  .label {
    margin: 10px;
    font-weight: bold;
  }
}
// .userpicker {
//   :global .ant-transfer-list:nth-child(1) {
//     margin-right: 200px;
//   }
//   :global(.source-list-header_sd-value-picker_common) {
//     left: 38%;
//   }
// }
</style>
