<template>
  <div>
    <el-form-item label="团队长：" prop="leader" required>
      <member-select
        :value="leader"
        @updateLeader="updateLeader"
        v-bind="$attrs"
        v-on="$listeners"
      ></member-select>
    </el-form-item>
    <!-- :prop="`users.${index}.userId`" -->
    <el-form-item
      v-for="(item, index) in users"
      :key="`${item.nanoid}${item.userId}`"
      :label="`团队成员${index + 1}：`"
      inline-message
      :rules="rules.userId"
    >
      <member-select2
        :users="users"
        :leader="leader"
        :value="item"
        :index="index"
        @updateUsers="updateUsers"
        v-on="$listeners"
      ></member-select2>
    </el-form-item>
  </div>
</template>
<script>
import MemberSelect from "./MemberSelect.vue";
import MemberSelect2 from "./MemberSelect2.vue";
import XeUtils from "xe-utils";
export default {
  name: "MemberForm",
  components: {
    MemberSelect,
    MemberSelect2,
  },
  props: {
    leader: {
      type: Object,
      default: () => ({}),
    },
    users: {
      type: Array,
      default: () => [],
    },
    rules: {
      type: Object
    }
  },
  data() {
    return {
    };
  },
  methods: {
    updateLeader(value) {
      console.log("value=", value);
      this.$emit("update:leader", value);
    },
    updateUsers(value, index) {
      let newUsers = XeUtils.clone(this.users, true);
      newUsers[index] = XeUtils.clone(value);
      this.$emit("update:users", newUsers);
      console.log("newUsers=", newUsers);
    },
  },
  mounted() {
    console.log("this.$attrs=", this.rules);
  },
};
</script>
