<template>
  <div style="background-color: #f4f7fc; height: 82vh; padding: 20px">
    <el-row>
      <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="16"
        ><div
          class="grid-content ep-bg-purple-light"
          style="
            background-color: white;
            height: 78vh;
            border: 1px solid #e4e7ed;
          "
        >
          <div
            style="
              height: 60px;
              line-height: 60px;
              text-align: center;
              color: red;
              font-weight: 700;
              font-size: 20px;
              border-bottom: 1px solid #e4e7ed;
            "
          >
            外出授课备案
          </div>
          <div style="padding: 20px; height: 700px; margin-top: 20px">
            <el-form
              ref="ruleFormRef"
              :model="form1"
              :rules="formRules"
              label-width="10vw"
            >
              <div style="display: flex">
                <el-form-item prop="name" label="申请人：">
                  <el-input
                    v-model="form1.userName"
                    style="width: 12vw"
                    :disabled="true"
                  />
                </el-form-item>
                <el-form-item prop="inviteUnit" label="邀请单位：">
                  <el-input v-model="form1.inviteUnit" style="width: 12vw" />
                </el-form-item>
              </div>
              <div style="display: flex">
                <el-form-item prop="trainName" label="培训名称：">
                  <el-input v-model="form1.trainName" style="width: 12vw" />
                </el-form-item>
                <el-form-item prop="destination" label="目的地：">
                  <el-input v-model="form1.destination" style="width: 12vw" />
                </el-form-item>
              </div>
              <el-form-item prop="dateRange1" label="起止日期：">
                <el-col :span="24">
                  <el-date-picker
                    style="width: 20vw"
                    v-model="form1.dateRange1"
                    value-format="YYYY-MM-DD"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="请选择起始日期"
                    end-placeholder="请选择截止日期"
                    :size="size"
                  />
                </el-col>
              </el-form-item>

              <div style="display: flex">
                <el-form-item prop="teacherTitle" label="具体授课题目：">
                  <el-input v-model="form1.teacherTitle" style="width: 12vw" />
                </el-form-item>
                <el-form-item
                  prop="numberOfParticipants"
                  label="参加培训人数："
                >
                  <el-input
                    v-model="form1.numberOfParticipants"
                    style="width: 12vw"
                  />
                </el-form-item>
              </div>
            </el-form>
            <div style="text-align: center">
              <el-form-item style="margin-left: 21.5vw">
                <el-button
                  style="padding: 0 30px; margin-top: 14vh"
                  type="primary"
                  @click="onSubmit"
                  >提交</el-button
                >
              </el-form-item>
            </div>
          </div>
        </div></el-col
      >
      <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    </el-row>
  </div>
</template>

<script>
import {
  startRegistration,
  selDetailByWorkId,
} from "@/api/office/registration";
import { ElMessage } from "element-plus";
import { getInfo } from "@/api/login";
export default {
  name: "Registration",
  selected: false,
  data() {
    var validator2 = (rule, val, callback) => {
      if (!val) {
        callback(new Error("请输入培训人数"));
      } else {
        const reg = /^([0-9])*$/; //
        if (reg.test(val)) {
          return callback();
        } else {
          callback(new Error("格式错误，仅支持输入纯数字"));
        }
      }
    };
    return {
      formRules: {
        // name: [{ required: true, trigger: "blur", message: "请输入您的姓名" }],
        inviteUnit: [
          {
            required: true,
            message: "请输入邀请单位",
            trigger: "change",
          },
        ],
        trainName: [
          {
            required: true,
            message: "请输入培训名称",
            trigger: "change",
          },
        ],
        destination: [
          {
            required: true,
            message: "请输入目的地",
            trigger: "change",
          },
        ],
        teacherTitle: [
          {
            required: true,
            message: "请输入授课题目",
            trigger: "change",
          },
        ],
        numberOfParticipants: [
          {
            required: true,
            trigger: "blur",
            validator: validator2,
            // message: "请输入培训人数",
          },
        ],

        dateRange1: [
          {
            required: true,
            message: "请选择起止日期",
            trigger: "change",
          },
        ],
      },
      selectedIndex: 0,
      showSearch: true,
      ids: [],
      deptOptions: [],
      dateRange1: [],
      fontIndex: 0,
      userList: [],
      delPeopleInfo: {
        groupId: undefined,
        userId: undefined,
      },
      dialogVisible2: false,
      dialogVisible1: false,
      contactsOptions: undefined,
      forwardInfo: {
        mailId: null,
        userIds: [],
      },
      groupInfo: {
        groupName: "",
      },
      // 查询参数
      queryParams1: {
        pageNum: 1,
        pageSize: 50,
        userId: "1",
      },
      selection: [],
      contactsList: [],
      dialogVisible11: false,
      ruleForm: {
        mailUserIds: [],
        isRead: "N",
        isDel: "N",
        mailState: "1",
        mailType: null,
        sendTime: "",
        files: [],
      },
      mailUserIds: [],
      show: true,
      total: 0,

      peopleInfo: {
        groupId: null,
        userIds: [],
      },
      form: {
        workId: "",
      },
      input: "",
      form1: {
        inviteUnit: "",
        trainName: "",
        destination: "",
        startTime: "",
        endTime: "",
        teacherTitle: "",
        numberOfParticipants: "",
        workId: "",
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  mounted() {},

  methods: {
    getUserInfo() {
      getInfo().then((res) => {
        this.form1.userName = res.user.nickName;
      });
    },
    onSubmit() {
      this.$modal.loading("提交中...");
      this.form.startTime = this.form1.dateRange1[0];
      this.form.endTime = this.form1.dateRange1[1];
      this.form.userName = this.form1.userName;
      this.form.trainName = this.form1.trainName;
      this.form.destination = this.form1.destination;
      this.form.teacherTitle = this.form1.teacherTitle;
      this.form.inviteUnit = this.form1.inviteUnit;
      this.form.numberOfParticipants = this.form1.numberOfParticipants;
      this.$refs["ruleFormRef"].validate((valid) => {
        if (valid) {
          startRegistration(this.form).then((response) => {
            ElMessage({
              message:
                "已发送到" +
                response.data.VarToNodeName +
                "节点，接收人：" +
                response.data.VarAcceptersName,
              type: "success",
            });
            this.reset();
            this.$refs.ruleFormRef.resetFields();
            this.$modal.closeLoading();
            this.$emit("change1");
          });
          // this.$nextTick(() => {
          //   this.reset();
          // });
        } else {
          this.$modal.closeLoading();
        }
      });
    },

    reset() {
      this.form1 = {
        userName: this.form.userName,
        inviteUnit: "",
        trainName: "",
        destination: "",
        startTime: "",
        endTime: "",
        teacherTitle: "",
        numberOfParticipants: "",
        workId: "",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep img {
  max-width: 790px;
}
::v-deep .el-tree-node__content {
  display: flex;
  align-items: center;
  height: 26px;
  cursor: pointer;
  font-size: 16px;
}
::v-deep .el-dialog__body {
  padding: 20px 30px;
  color: var(--el-text-color-regular);
  font-size: var(--el-dialog-content-font-size);
  word-break: break-all;
}
.hover-li:hover {
  background-color: #f5f7fa;
}
.selected {
  font-size: 17px;
  margin-left: 25px;
  padding-right: 25px;
  border-right: 1px solid #e7eaec;
  color: #3792f4; // 字体颜色变为蓝色
}
.lineStyle.active {
  background-color: #ebf5ff;
}
#bg:hover {
  background-color: #f5f7fa;
}
</style>
