<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
        <template #content>
          <MOSTY.Assort :title="'基本信息'" />
          <div class="frombox">
            <el-form ref="elform" label-width="130px" :model="dialogForm" :inline="true" :rules="rules"
              :disabled="!props.saveBtnShow">
              <el-form-item label="承诺书名称：" prop="cnsmc">
                <el-input v-model="dialogForm.cnsmc" />
              </el-form-item>
              <el-form-item label="签订类型：" prop="qdlx">
                <el-select v-model="dialogForm.qdlx" clearable placeholder="请选择签订类型">
                  <el-option v-for="item in Options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="内容：" prop="cnsnr">
                <!-- <el-input v-model="dialogForm.cnsnr" type="textarea" :rows="20" /> -->
                <div class="full-text">
                  <vue-ueditor-wrap v-model="dialogForm.cnsnr" editor-id="editor" :config="editorConfig"
                    :editorDependencies="['ueditor.config.js', 'ueditor.all.js']" />
                </div>
              </el-form-item>
              <el-form-item v-if="dialogForm.qdlx == 2" label="签订人员列表：" prop="pscmembers">
                <div style="display: flex; width: 100%;align-items: center;">
                  <el-input v-model="dialogForm.username" style="width: 98%" type="textarea" />
                  <el-button type="primary" @click="ChooesDdld('05')">选择</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>

          <el-button type="primary" @click="save(elform)" v-if="props.saveBtnShow" :loading="loading">
            <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>

    </div>
    <!-- 选择带队领导 -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
      :deptId="listQuery.orgCode" @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, watch, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  title: String,
  rowid: String,
});
const elform = ref()
//规则校验
const rules = reactive({
  cnsmc: [{ required: true, message: "承诺书名称不能为空", trigger: "blur" }],
  qdlx: [{ required: true, message: "签订类型不能为空", trigger: "blur" }],
  cnsnr: [{ required: true, message: "签订内容不能为空", trigger: "blur" }],
})
// 数据

const Options = reactive([
  { value: "1", label: "全员签订" },
  { value: "2", label: "部分人员签订" }
]);
/** 富文本config */
const editorConfig = {
  serverUrl: '',
  UEDITOR_HOME_URL: '/UEditorPlus/'
}
const bigHeight = ref(); //整个高度
const dialogForm = ref({});
// 分页
const listQuery = ref({});
const singleShow = ref(true); //单选多选
const zzlx = ref(null);
const memberList = ref([]); //成员选择的id回显
const chooseUserVisible = ref(false);
onMounted(() => {
  if (props.rowid) {
    getxq(props.rowid)
  }
  bigHeightFn();
});

//获取详情
function getxq(id) {
  getApi({ id }, "/mosty-jcgl/cns/getCnsInfo").then((res) => {
    if (res) {
      let arr = [];
      dialogForm.value = res;
      dialogForm.value.user = dialogForm.value.qdxxList;
      dialogForm.value.qdxxList.forEach((element) => {
        arr.push(element.ryXm + "(" + element.xtCjbmmc + ")");
      });
      dialogForm.value.username = arr.join(",");
      if (dialogForm.value.user) {
        let arr = [];
        for (let i = 0; i < dialogForm.value.user.length; i++) {
          arr.push(dialogForm.value.user[i]);
        }
        dialogForm.value.userList = arr;
        dialogForm.value.userIdList = dialogForm.value.qdxxList.map(item => {
          return item.ryId
        });
      }
    }
  });
}

function ChooesDdld(val) {
  zzlx.value = val;
  if (val == "05" && dialogForm.value.userList) {
    memberList.value = dialogForm.value.userList.map((item) => {
      return item.ryId;
    });
  }
  chooseUserVisible.value = true;
  singleShow.value = false;
}
const getSonValue = (value) => {
  if (zzlx.value == "05") {
    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;
    });
    dialogForm.value.userList = value.map((item) => {
      return {
        ryId: item.id
      };
    });
    dialogForm.value.username = arr.join(",");
    dialogForm.value.userIdList = arrid;
  }
};
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};

//关闭
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close");
        // 关闭上一次的表单校验
        elform.value.clearValidate();
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close");
    // 关闭上一次的表单校验
    elform.value.clearValidate();
  }

};
const loading = ref(false); //新增保存按钮截流
// 保存
const save = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      if (dialogForm.value.id) {
        postApi(dialogForm.value, "/mosty-jcgl/cns/editCns")
          .then((res) => {
            loading.value = false;
            ElMessage.success("修改成功");
            emits("close");
          })
          .catch((err) => {
            loading.value = false;
          });

      } else {
        postApi(dialogForm.value, "/mosty-jcgl/cns/addCns")
          .then((res) => {

            loading.value = false;
            ElMessage.success("新增成功");
            emits("close");
          })
          .catch((err) => {
            loading.value = false;
          });
      }

    } else {
      ElMessage.warning('请输入必填项！！！')
    }
  })
}


</script>

<style lang="scss" scoped>
.bigBox {
  display: block;




  .frombox {
    width: 100%;
  }

  .full-text {
    width: calc(100% - 127px);
  }

  .btnBox {
    display: flex;
  }
}

.el-form {
  display: block !important;
  width: 1200px !important;
  margin: 0 auto;

  .el-form-item {
    width: 1000px;
    margin: 0 auto;
    margin-top: 10px;
  }
}

// ::v-deep .el-textarea__inner {
//   min-height: 400px !important;
// }</style>