<script setup>
import { ref, watch, onMounted, nextTick } from "vue";
import { raiInterface } from "@/api/api.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  selectionArr: {
    type: Array,
    required: true,
    default: () => [],
  },
  messageDialog: {
    type: Boolean,
    required: true,
    default: false,
  },
  typeMessage: {
    type: String,
    default: "",
  },
});

const previewList = ref(["https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/template.png"]);
const messageForm = ref({
  sendId: [7],
  beforeText: "",
  activityName: "",
  content: "",
});
const rules = ref({
  sendId: [{ required: true, message: "请选择发送对象", trigger: "change" }],
  activityName: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
  content: [{ required: true, message: "请输入变更内容", trigger: "blur" }],
});
const defaultSalesProps = ref({
  multiple: true,
  label: "Name",
  value: "Id",
});
const sendOptions = ref([]);

async function activitySendGroupList() {
  const res = props.typeMessage == "确定行程" ? await raiInterface.activityTripSendGroupList() : await raiInterface.activitySendGroupList();
  if (res.Ret === 200) {
    sendOptions.value = res.Data;
    messageForm.value.sendId = props.typeMessage == "确定行程" ? [1] : [7];
  }
}

// 点击了注释
function annotationHandler() {
  $("#TripImgLink").click();
}

function handleClickStop() {
  nextTick(() => {
    let domImageView = document.querySelector(".el-image-viewer__mask"); // 获取遮罩层dom
    if (!domImageView) {
      return;
    }
    domImageView.addEventListener("click", () => {
      // 点击遮罩层时调用关闭按钮的 click 事件
      document.querySelector(".el-image-viewer__close").click();
    });
  });
}

const messageFormRef = ref(null);

const $emit = defineEmits();
// 弹框关闭
function handleClose() {
  messageFormRef.value.resetFields();
  previewList.value = [];
  messageForm.value = {
    sendId: [7],
    beforeText: "",
    activityName: "",
    content: "",
  };
  $emit("update:messageDialog", false);
}

// 弹框确定饰件
function confirmPerson() {
  messageFormRef.value.validate(async (valid) => {
    if (valid) {
      let params = {
        ActivityIds: props.selectionArr[0].ActivityId + "",
        ResearchTheme: props.selectionArr[0].ResearchTheme || "",
        SendGroup: messageForm.value.sendId.join(","),
        ActivityName: messageForm.value.activityName,
        Content: messageForm.value.content,
      };
      const res = props.typeMessage == "确定行程" ? await raiInterface.activityTripSignupTempMsg(params) : await raiInterface.activitySignupTempMsg(params);
      if (res.Ret === 200) {
        ElMessage.success("发送成功");
        handleClose();
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}

watch(
  () => props.messageDialog,
  (newValue) => {
    if (newValue) messageForm.value.activityName = props.selectionArr[0].ActivityName || props.selectionArr[0].ResearchTheme;
    activitySendGroupList();
  }
);
</script>

<template>
  <div class="container container-message-dlg">
    <el-dialog width="560px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="props.messageDialog" title="发送模板消息" :before-close="handleClose">
      <div class="content">
        <div class="annotation">
          <div class="annotation-box" @click="annotationHandler">
            <img style="margin-right: 5px" src="~@/assets/img/icons/annotation_icon.png" alt="" />
            注释
          </div>
        </div>
        <el-form :model="messageForm" :rules="rules" ref="messageFormRef" class="demo-ruleForm">
          <el-form-item prop="sendId">
            <el-select style="width: 100%" v-model="messageForm.sendId" multiple placeholder="请选择发送对象（可多选）" :disabled="props.typeMessage == '确定行程'">
              <el-option v-for="item in sendOptions" :key="item.Id" :label="item.Name" :value="item.Id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="activityName">
            <el-input type="textarea" :rows="2" :placeholder="`请输入${props.typeMessage == '确定行程' ? '调研主题' : '活动名称'}（20字内）`" v-model="messageForm.activityName"> </el-input>
          </el-form-item>
          <el-form-item prop="content">
            <el-input type="content" :rows="2" placeholder="请输入变更内容（20字内）" v-model="messageForm.content"> </el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-image
        style="width: 0px; height: 0px"
        src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/templet_new.png"
        id="TripImgLink"
        :preview-src-list="['https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/templet_new.png']"
      ></el-image>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirmPerson">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.container-message-dlg {
  .content {
    .annotation {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;
      .annotation-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 60px;
        cursor: pointer;
      }
    }
  }
  .el-input {
    width: 100% !important;
  }
  .el-image-viewer__canvas .el-image-viewer__img {
    width: 700px;
    height: 50%;
  }
}
</style>
