<template>
  <vxe-modal
    resize
    v-model="showModal"
    title="信息发布"
    height="612"
    width="1303"
    show-footer
    esc-closable
  >
    <div class="card content-box addModel">
      <div class="w-full">
        <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm" label-width="80px">
          <el-form-item label="收件人：" prop="content">
            <div class="flex items-center w-full">
              <el-select
                v-model="ruleForm.userid"
                multiple
                style="width: 97%"
              >
                <el-option
                  v-for="item in ruleForm.receivers"
                  :key="item.value"
                  :label="item.username"
                  :value="item.id"
                />
              </el-select>
              <el-icon @click="chooseUSER" class="cursor-pointer" style="width: 3%"
                ><Plus
              /></el-icon>
            </div>
          </el-form-item>
          <el-form-item label="标题：" prop="content">
            <el-input v-model="ruleForm.title" />
          </el-form-item>
          <myEditor class="myEditor" @select="getRich" ref="childrenRef" :editValue="editValue" />
        </el-form>
      </div>
      <div class="mb-5 w-full flex justify-end mt-2">
        <el-button type="default" @click="showModal = false">取消</el-button>
        <el-button type="primary" @click="save">保存草稿箱</el-button>
      </div>
    </div>
  </vxe-modal>
  <UserModal ref="userModalRef" @confirm="hanldeConfirm" />
</template>

<script setup name="credit">
  import { Plus } from '@element-plus/icons-vue';
  import { getUserPage } from '@/api/user';

  import { ref, watch, computed } from 'vue';
  import { useDict } from '@/hooks/useDict';
  import { ElMessage } from 'element-plus';
  import { inject, reactive } from 'vue';
  import { getAppEnvConfig } from '@/utils/env';
  import { useUserStore } from '@/stores/modules/user';
  import { sendMesage, saveMesage } from '@/api/message';
  import myEditor from './myEditor.vue';
  import UserModal from './UserModal.vue';
  const emits = defineEmits(['success']);
  const showModal = ref(false);
  const userModalRef = ref(null);
  const { PaymentForm, ContractStatus, FlowStatus } = useDict(
    'PaymentForm',
    'ContractStatus',
    'FlowStatus'
  );
  const props = defineProps({
    mergerCase: String,
    returnConfig: Array,
    returnData: Array,
  });
  const userStore = useUserStore();
  const envs = getAppEnvConfig();
  const url = envs.VITE_GLOB_API_URL_PREFIX + '/sys/upload';
  const ruleFormRef = ref();
  const current = ref({});
  const ruleForm = reactive({
    content: '',
    id: '',
    title: '',
    receivers: [],
    userid: [],
  });


  const editValue = ref('');
  const hanldeConfirm = (row) => {
    // const selects = [...ruleForm.receivers, ...row]
    if (row) {
      row.forEach(item => {
        const index = ruleForm.receivers.findIndex(v => v.id === item.id)
        if (index === -1) {
          ruleForm.receivers.push(item)
        }
      })
    }
    // ruleForm.receivers = row;
    ruleForm.userid = ruleForm.receivers.map((v) => v.id);
  };
  const save = () => {
    saveMesage({
      ...current.value,
      title: ruleForm.title,
      content: ruleForm.content,
      id: ruleForm.id,
      status: 'normal',
      messageType: 'system',
      sendType: 'user',
      receiversIds: ruleForm.userid,
    }).then((res) => {
      showModal.value = false;
      emits('success');
    });
  };
  const chooseUSER = () => {
    userModalRef.value?.openModal(ruleForm.receivers);
  };
  //当编辑器的内容更新时，获取该值
  const getRich = function (value) {
    ruleForm.content = value;
  };
  const openModal = (row) => {
    if (row) {
      current.value = row;
      ruleForm.content = row.content;
      editValue.value = row.content;
      ruleForm.title = row.title;
      ruleForm.id = row.id;
      ruleForm.receivers = [];
      if (row.receiversIds) {
        row.receiversIds.forEach((element) => {
          const item = userModalRef.value?.tableData.find((ii) => ii.id === element);
          if (item) {
            ruleForm.receivers.push(item);
          }
        });
        ruleForm.userid = ruleForm.receivers.map((v) => v.id);
      }
    } else {
      ruleForm.content = '';
      current.value = {}
      editValue.value = '';
      ruleForm.title = '';
      ruleForm.receivers = [];
      ruleForm.userid = [];
    }

    showModal.value = true;
  };
  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped>
  table {
    width: calc(100%);
    border-collapse: collapse;
  }
  td {
    border: 1px solid rgba(5, 5, 5, 0.06);
    background: #fff;
    color: #606268;
    // width: 240px;
    line-height: 11px;
    height: 40px;
    font-size: 14px;
    padding-left: 5px;
    &.label {
      text-align: center;
      background: #dfeaf5;
      width: 175px;
      color: #000;
    }
  }
  .addModel {
    :deep(.el-form-item__label) {
      justify-content: flex-start !important;
    }
  }
</style>
