<template>
  <div class="messbox" style='height:85vh;'>
    <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
      <template #content>
        <MOSTY.Assort :title="'基本信息'" />
        <div style="width: 100%;">
          <el-form ref="ruleFormRef" :model="data.addForm" width="800px" :rules="rules" :disabled="!props.saveBtnShow"
            label-width="120px" :size="formSize" status-icon>
            <el-form-item label="机构名称:" prop="title" style="width: 100%">
              <el-input v-model="data.addForm.title" type="name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="机构类型:" prop="type" style="width: 100%;">
              <el-select v-model="data.addForm.type" clearable placeholder="请选择机构类型" style="width: 100%;">
                <el-option v-for="item in props.dictList.D_BZ_QTAQJGLX" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="成员:" style="width: 100%">
              <el-input v-model="data.addForm.skzmembers" type="textarea" readonly
                :autosize="{ minRows: 7, maxRows: 20 }" style="width:92%;margin-right:10px;"></el-input>
              <el-button type="primary" @click="ChooesDdld('01')">选择</el-button>
            </el-form-item>
            <el-form-item label="附件:" style="width: 100%">
              <MOSTY.Upload v-model="data.addForm.file" :isAutoWidth="true" :showinput="true" :limit="1"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']" :disabled="!props.saveBtnShow" :delrow="delrow"
                :showbut="true" :isEdit="fileEdit" :nopicer="true" :ShowfileList="true" :isImg="false" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>

        <el-button style="margin-left: 10px" type="primary" v-if="saveBtnShow" :loading="loading"
          @click="searchHander(ruleFormRef)">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
    </MOSTY.FromPage>

    <!-- 选择成员 -->
    <ChooseUser v-model="chooseUserVisible" :Single="false" :data="memberList" :leaderid="leaderid"
      @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
import { ref, watchEffect, defineEmits, reactive, getCurrentInstance } from "vue";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { postApi } from "@/api/tobAcco_api.js";
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const chooseUserVisible = ref(false);
const ruleFormRef = ref()
const leaderid = ref("");
const fileEdit = ref(true);
const zzlx = ref(null);
const listQuery = reactive({})
//成员选择的id回显
const memberList = ref([]);
// 新增保存按钮截流
const loading = ref(false);
const props = defineProps({
  dictList: Array,
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  title: String,
  rowData: {
    default: {},
    type: Object
  },
});
const data = reactive({
  addForm: {}
});
watchEffect(() => {
  if (props.rowData) {
    data.addForm = props.rowData;
  }
});
//规则校验
const rules = reactive({
  title: [{ required: true, message: "机构名称不能为空", trigger: "blur" }],
  type: [{ required: true, message: "机构类型不能为空", trigger: "blur" }],
});
function ChooesDdld(val) {
  zzlx.value = val;
  if (val == "01" && data.addForm.skzmembersid) {
    memberList.value = data.addForm.skzmembersid.split(',')
  }
  chooseUserVisible.value = true;
}
const getSonValue = (value) => {
  if (zzlx.value == "01") {
    let arr = [];
    let arrid = [];
    for (let i = 0; i < value.length; i++) {
      const element = value[i];
      element.zzlx = zzlx.value;
      arr.push(element.userName + "(" + element.deptName + ")");
      arrid.push(element.id);
    }
    memberList.value = value.map((item) => {
      return item.id;
    });
    data.addForm.usernamelist = value.map((item) => {
      return {
        userid: item.id,
        username: item.userName
      };
    });
    data.addForm.skzmembers = arr.join("，");
    data.addForm.skzmembersid = arrid.join(",");
  }
};
// 关闭弹窗
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close");
  }

};

const searchHander = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      data.addForm.file = data.addForm.file ? data.addForm.file.toString() : null;
      if (!data.addForm.id) {
        postApi(data.addForm, "/mosty-jcgl/double/addDoubleOrg").then(() => {
          loading.value = false;
          ElMessage.success("新增成功");
          emits("close");
        }).catch(() => {
          loading.value = false;
        });
      } else {
        postApi(data.addForm, "/mosty-jcgl/double/editDoubleOrg").then((res) => {
          loading.value = false;
          ElMessage.success("修改成功");
          emits("close");
        }).catch(() => {
          loading.value = false;
        });
      }
    } else {
      ElMessage.warning('请输入必填项！！！')
    }
  })
};
</script>

<style lang="scss" scoped>
.el-form {
  flex-wrap: wrap;
  align-items: center;
  margin: 0 auto;
  width: 90%;
  margin-top: 30px;
  justify-content: space-between;
}

.el-form-item {
  margin-bottom: 10px !important;
  width: 38%;
}

.flx {
  display: flex;
  align-items: center;
  width: 100%;
}


::v-deep .el-upload-list {
  width: 50%;
}
</style>