<template>
  <div class="dialog">
    <div class="dialog-header">
      <div class="dialog-title">
        <h1>可可智慧教育平台账号申请</h1>
      </div>
      <div class="dialog-main">
        <div class="dialog-content">
          <div class="dialog-content-item">
            <div class="dialog-content-item-content1">
              <span>
                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />组织名称 </span>
              <input v-model="orgName" type="text" placeholder="请输入组织名称" class="input" />
              <!-- <el-select
                v-loading="orgLoading"
                v-model="orgName"
                placeholder="请选择组织名称"
                class="input"
                clearable
                filterable
                @change="orgChange"
              >
                <el-option
                  v-for="(org, index) in orgs"
                  :key="index"
                  :label="org.name"
                  :value="org.id"
                >
                  {{ org.name }}
                </el-option>
              </el-select> -->
            </div>

            <!-- <div class="dialog-content-item-content1">
              <span>
                <img
                  src="@/assets/startIcon.svg"
                  alt="字符"
                  class="search-icon2"
                />
                学校名称
              </span>
              <el-select
                v-loading="schoolLoading"
                v-model="schoolName"
                placeholder="请选择学校名称"
                class="input"
                clearable
                filterable
                @change="schoolChange"
              >
                <el-option
                  v-for="(school, index) in schools"
                  :key="index"
                  :label="school.name"
                  :value="school.id"
                >
                  {{ school.name }}
                </el-option>
              </el-select>
            </div> -->

            <div class="dialog-content-item-content1">
              <span>
                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                姓名
              </span>
              <input v-model="Name" type="text" placeholder="请输入名称" class="input" />
            </div>
            <div class="dialog-content-item-content1">
              <span>
                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                账号
              </span>
              <input v-model="username" type="text" placeholder="请输入账号" class="input" />
            </div>
            <div class="dialog-content-item-content1">
              <span>
                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                联系电话
              </span>
              <input v-model="phonenumber" type="text" placeholder="请输入联系电话" class="input" />
            </div>

            <div class="dialog-content-item-content1">
              <span> 其他备注(如联系人或组织) </span>
              <p style="color: gray; font-size: 12px; margin-top: 10px">
                此项用于审核认证，如有请说明。
              </p>
              <input v-model="remark" type="text" placeholder="请输入备注" class="input" />
            </div>
          </div>
        </div>
      </div>
      <div class="user_p">
        <p style="color: #535353; font-size: 15px">
          请填写以上申请信息,我们将在工作日24小时内回复您,您的信息将被严格保密,不会被用于其他用途
        </p>
      </div>
      <button @click="submitForm" class="button">确认提交</button>
    </div>
  </div>
</template>

<script>
import { API_CONFIG } from "@/common/apiConfig";

export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      orgName: "", // 定义 orgName 在 data 中
      schoolName: "", // 定义 schoolName 在 data 中
      orgs: [],
      schools: [
        // 示例学校数据
        // { id: 1, name: '学校A' },
        // { id: 2, name: '学校B' },
        // { id: 3, name: '学校C' }
      ],
      Name: "", // 定义 Name 在 data 中
      phonenumber: "", // 定义 phonenumber 在 data 中
      remark: "", // 定义 remark 在 data 中
      username: "",
      orgLoading: false,
      schoolLoading: false,
      timer: null,
    };
  },
  methods: {
    submitForm() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // 检查必填字段
        if (!this.orgName) {
          this.$message.error("组织名称不能为空");
          return;
        }

        // if (!this.schoolName) {
        //   this.$message.error("学校选择不能为空");
        //   return;
        // }
        if (!this.Name) {
          this.$message.error("姓名不能为空");
          return;
        }
        if (!this.username) {
          this.$message.error("账号不能为空");
          return;
        }
        if (!/\S+@\S+\.\S+/.test(this.username)) {
          this.$message.error("请输入有效的邮箱地址");
          return;
        }
        if (!this.phonenumber) {
          this.$message.error("联系电话不能为空");
          return;
        }

        // 添加审核接口
        let params = [
          {
            functionName: "addExamineUser2",
            org: this.orgName,
            un: this.Name,
            usern: this.username,
            phone: this.phonenumber,
            r: this.remark,
          },
        ];

        this.$ajax
          .post(API_CONFIG.baseUrl, params)
          .then((res) => {
            if (res.data && res.data[0][0].success == 2) {
              this.$message.success("提交成功");
              this.reset()
            } else if (res.data && res.data[0][0].success == 1) {
              this.$message.error("此账号已创建，具体登录原因请联系管理员");
            }
            console.log("返回的结果为：", res.data);
          })
          .catch((err) => {
            this.$message.error("提交失败");
            console.error("请求失败，错误信息：", err);
          });
      }, 300);
    },
    reset() {
      this.orgName = "";
      this.schoolName = "";
      this.Name = "";
      this.username = "";
      this.phonenumber = "";
      this.remark = "";
    },
    //组织查询
    ajax_org() {
      this.orgLoading = false
      const params = [API_CONFIG.ajax_org]; // 使用配置中的接口参数
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then((res) => {
          this.orgLoading = false
          // console.log("返回的数据为：", res.data);  // 检查返回的数据
          if (res.data && Array.isArray(res.data[0])) {
            // 使用 map() 提取所有组织名称
            this.orgs = res.data[0].map((item) => ({
              name: item.name,
              id: item.id,
            }));
          }
          console.log("返回的结果为：", res.data);
        })
        .catch((err) => {
          this.orgLoading = false
          this.$message.error("查询失败");
          console.error("请求失败，错误信息：", err);
        });
    },
    // 学校查询
    ajax_school() {
      API_CONFIG.ajax_school.u_org = this.orgName
      const params = [API_CONFIG.ajax_school]; // 使用配置中的接口参数
      this.schoolLoading = true
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then((res) => {
          this.schoolLoading = false
          // console.log("返回的数据为：", res.data);  // 检查返回的数据
          if (res.data && Array.isArray(res.data[0])) {
            // 将 name 和 org 都存入 cn_school 数组中
            this.schools = res.data[0].map((item) => ({
              name: item.name,
              id: item.id,
              org: item.org,
            }));
          }
        })
        .catch((err) => {
          this.schoolLoading = false
          this.$message.error("查询失败");
          console.error("请求失败，错误信息：", err);
        });
    },
    orgChange() {
      // this.schoolName = ""
      // this.ajax_school()
    },
    schoolChange() {
      for (var i = 0; i < this.schools.length; i++) {
        if (this.schools[i].id == this.schoolName && this.schools[i].org) {
          this.orgName = this.schools[i].org
        }
      }

    }
  },
  mounted() {
    this.ajax_org(); // 组件创建时，立即调用 ajax_org 获取数据
    this.ajax_school(); // 组件创建时，立即调用 ajax_scholl 获取数据
  },
};
</script>

<style scoped>
/* 通过设置body为flex布局来保证居中 */
html,
body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 弹窗整体大小 */
.dialog {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: auto;
}

/* 弹窗内部的一些样式，可以根据需要修改 */
.dialog-header,
.dialog-title,
.dialog-main {
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
}

.search-icon {
  width: 170px;
  height: 50px;
  margin-top: 30px;
}

.search-icon2 {
  width: 10px;
  height: 10px;
}

.dialog-title h1 {
  font-size: 28px;
}

/* 弹窗内容 */
.dialog-content-item-content1 {
  font-size: 15px;
  font-weight: 550;
}

.dialog-content-item-content1+.dialog-content-item-content1 {
  margin-top: 20px;
}

/* input输入框样式 */
.input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f2f5;
  height: 36px;
  outline: none;
}

.input>>>.el-input--suffix .el-input__inner {
  padding: 0
}

/* 用户协议框架 */
.user_p {
  /* width: 500px; */
  height: 50px;
  /* border: 1px solid black; */
  /* margin-left: 69px;
  margin-top: 10px; */
}

/* 提交按钮样式 */
.button {
  width: 100%;
  height: 50px;
  background-color: #3681fc;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  margin-top: 10px;
  outline: none;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  background: none;
  border: none;
  color: #a8a8a8;
  cursor: pointer;
  transition: color 0.3s;
}

/* 使用 v-deep 深度选择器，修改 el-input 内部 input 的背景色 */
::v-deep .el-input__inner {
  background-color: #f0f2f5 !important;
  /* 修改输入框的背景色 */
  border: none;
}

/* 保持字体颜色不变，防止被覆盖 */
::v-deep .el-select .el-input__inner::placeholder {
  color: gray;
  /* 修改为你想要的颜色，如番茄色。 */
}

.dialog_success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.confirmBtn {
  width: 5vw;
  height: 30px;
  background-color: #3681fc;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  margin-top: 10px;
  outline: none;
  line-height: 30px;
}
</style>
