<template>
  <div>
    <el-dialog
      title="选择人员"
      :visible.sync="isOpen"
      width="500px"
      append-to-body
      @close="cancel"
      :close-on-click-modal="false"
    >
      <el-form ref="form"  :model="form"  label-position="top" :rules="rules">
        <el-form-item label="审核人员"   prop="selectReviewer">
          <el-select v-model="form.selectReviewer"  multiple placeholder="请选择审核人员" clearable style="width: 100%">
            <el-option
              v-for="item in reviewer"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标注人员" prop="selectLabeling">
          <el-select v-model="form.selectLabeling" multiple placeholder="请选择标注人员" clearable style="width: 100%">
            <el-option
              v-for="item in labeling"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getAllList } from "@/api/dataCenter/teamMember";

export default {
  props: {
    open: {
      type: Boolean,
      default: false,
      required: true,
    },
  },
  computed: {
    isOpen: {
      get() {
        return this.open;
      },
      set(value) {
        this.$emit("update:open", value);
      },
    },
  },
  watch: {
    open(newVal) {
      if (newVal) {
        this.getList();
      }
    },
  },
  data() {
    return {
      list:[],
      reviewer: [], // 审核人员列表
      labeling: [], // 标注人员列表
      form:{
        selectLabeling: [], // 被选中的标注人员
        selectReviewer: [], // 被选中的审核人员
      },
      rules: {
        selectReviewer: [
          { required: true, message: "请选择审核人员", trigger: "blur", type: 'array'},
        ],
        selectLabeling: [
          { required: true, message: "请选择标注人员", trigger: "blur" ,type: 'array'},
        ],
      },
    };
  },
  methods: {
    // 获取人员列表
    getList() {
      getAllList().then((res) => {
        // 初始化人员列表
        this.reviewer = [];
        this.labeling = [];
        this.list =[];
        this.list =res.data;
        // 遍历返回的数据
        res.data.forEach((item) => {
          const roleIds = item.roleId.split(",");
          if (roleIds.includes("0")) {
            // 如果角色包含标注人员角色，加入标注人员列表
            this.labeling.push({ id: item.memberId, name: item.userName });
          }
          if (roleIds.includes("1")) {
            // 如果角色包含审核人员角色，加入审核人员列表
            this.reviewer.push({ id: item.memberId, name: item.userName });
          }
        });
      });
    },
    // 提交表单
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const data = {
            selectReviewer:[],
            selectLabeling:[],
          };
          this.form.selectReviewer.forEach((id) => {
            const result = this.reviewer.find(item => item.id === id);

            data.selectReviewer.push({id: result.id, name: result.name,num:0,type:'0'});
          })
          this.form.selectLabeling.forEach((id) => {
            const result = this.labeling.find(item => item.id === id);
            console.log(result)
            data.selectLabeling.push({id: result.id, name: result.name,num:0,type:'1'});
          })
          this.$emit('update-data', data); // 触发事件并传递数据
          this.cancel();
        }
      });
    },
    // 关闭对话框
    cancel() {
      this.isOpen = false; // 关闭对话框
      this.reset(); // 重置表单
      this.$emit("dialog-cancel"); // 通知父组件
    },
    // 重置表单
    reset() {
      this.selectReviewer = []; // 清空已选的审核人员
      this.selectLabeling = []; // 清空已选的标注人员
      this.$refs.form.resetFields(); // 重置表单字段
    },
  },
};
</script>

<style scoped>
/* 样式按需定义 */
</style>
