<template>
  <div>
    <el-dialog :title="title" v-model="props.modelValue" width="80%" :before-close="closeDialog">
      <div class="config">
        <el-form ref="dialogFormRef" :inline="true" label-position="top" :model="dialogForm" :rules="rules">
          <el-form-item class="ww100" label="用户组名称" prop="userNameGroup">
            <el-input show-word-limit placeholder="请填写用户组名称" v-model="dialogForm.userNameGroup"></el-input>
          </el-form-item>
          <el-form-item label="用户组成员:" prop="userGroupMember" style="display: flex;width:100%;">
            <el-input v-model="dialogForm.userGroupMember" placeholder="请选择用户组成员" type="textarea" :rows="4" readonly
              style="width: 900px" clearable>
            </el-input>
            <el-button class='cursor ml10' @click="ChooesDdld()">选择</el-button>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="handleSave(dialogFormRef)">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button @click="closeDialog" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 选择责任人 -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { ref, onMounted, watch, getCurrentInstance } from "vue";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue"
import { ElMessage } from "element-plus";
const emits = defineEmits(["changeAddVi"]);
const props = defineProps({
  saveAddBtn: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: Boolean,
    default: false
  },
  editObj: {
    type: Object,
    default: () => { }
  },
});
const rules = ref({
  userNameGroup: [
    { required: true, message: "请填写用户组名称", trigger: "blur" }
  ],
  userGroupMember: [
    { required: true, message: "请选择用户组成员", trigger: "blur" }
  ]
})

const loading = ref(false); //新增保存按钮截流
const title = ref("新增");
const dialogFormRef = ref();
const dialogForm = ref({});
onMounted(() => {
})
const leaderid = ref(null)
const singleShow = ref(false)
const chooseUserVisible = ref(false)
//选择用户组成员
const ChooesDdld = () => {
  leaderid.value = dialogForm.value.userGroupMemberperson ? dialogForm.value.userGroupMemberperson.split(",") : []
  singleShow.value = false
  chooseUserVisible.value = true
}
const getSonValue = value => {
  dialogForm.value.userGroupMember = value.map(item => {
    if (item.mobile) {
      return item.userName + "（" + item.mobile + "）"
    } else {
      return item.userName
    }
  }).toString()
  dialogForm.value.userGroupMemberperson = value.map(item => {
    return item.id
  }).toString()
}
// 保存
const handleSave = async (dialogFormRef) => {
  if (!dialogFormRef) return;
  await dialogFormRef.validate((valid) => {
    if (valid) {
    } else {
      ElMessage.error("请输入必填项");
    }
  });
};
// 关闭
const closeDialog = () => {
  loading.value = false;
  emits("changeAddVi", false);
};
</script>

<style lang="scss" scoped>
.config {
  .el-form {
    padding: 10px 40px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .el-form-item {
    text-align: center;
  }
}
</style>