<template>
  <el-form ref="form" :model="form" style="padding: 50px" :rules="rules">
    <el-row style="color: red">
      <el-col :span="12">
        **以下信息** <br/>
        请务必在填写时仔细确认帐号、密码等个人信息，确保准确无误。我们无法为您检查信息的正确性，请提前自行核对。如填写错误，可能会导致申请失败。
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="团名" >
          <el-input v-model="perform" maxlength="50" :disabled="true" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="Weverse账号" prop="weverseEmail">
          <el-input v-model="form.weverseEmail" maxlength="50"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="Weverse密码" prop="weversePassword">
          <el-input v-model="form.weversePassword" maxlength="50"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="生日(格式：19990501)" prop="birthday">
          <el-input v-model="form.birthday" type="text" maxlength="50"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="手机区号（格式：+86）" prop="countryCode">
          <el-input v-model="form.countryCode" type="text" maxlength="50"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="手机号" prop="phoneNum">
          <el-input v-model="form.phoneNum" type="text" maxlength="50"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="微信号（用于联系您）" prop="wechatNum">
          <el-input v-model="form.wechatNum" type="text" maxlength="50"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item>
          <el-button type="primary" size="mini" @click="submit">提交</el-button>
          <el-button type="danger" size="mini" @click="close">返回首页</el-button>
        </el-form-item>
      </el-col>
    </el-row>

  </el-form>
</template>

<script>
import {getUserProfile} from "@/api/system/user";
import {addApply} from "@/api/system/apply";
import {getNormalPerform} from "@/api/system/perform";


export default {
  name: "Apply",
  data() {
    return {
      form: {},
      perform: "",
      // 表单校验
      rules: {
        performId: [
          {required: true, message: "申请团名不能为空", trigger: "blur"}
        ],
        weverseEmail: [
          {required: true, message: "Weverse账号不能为空", trigger: "blur"}
        ],
        weversePassword: [
          {required: true, message: "Weverse密码不能为空", trigger: "blur"}
        ],
        birthday: [
          {required: true, message: "生日不能为空", trigger: "blur"}
        ],
        countryCode: [
          {required: true, message: "手机区号不能为空", trigger: "blur"}
        ],
        phoneNum: [
          {required: true, message: "手机号不能为空", trigger: "blur"}
        ],
        wechatNum: [
          {required: true, message: "微信号不能为空", trigger: "blur"}
        ],
      }

    };
  },
  mounted() {

    const performId = this.$route.query.performId;
    if (!this.$route.query.performId) {
      this.$alert('演出不存在或已结束', '提示 ', {});
      this.$router.push({path: this.redirect || "/"})
      return;
    }

    getNormalPerform(performId).then(response => {
      if (!response.data) {
        this.$alert('演出不存在或已结束', '提示 ', {});
        this.$router.push({path: this.redirect || "/"})
        return;
      }
      this.perform = response.data.name + "    " + response.data.startTime;
    });

    getUserProfile().then(response => {
      const user = response.data;
      this.form = {
        "weverseEmail": user.weverseEmail,
        "weversePassword": user.weversePassword,
        "birthday": user.birthday,
        "countryCode": user.countryCode,
        "phoneNum": user.phoneNum,
        "wechatNum": user.wechatNum,
      };
    });


  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.performId = this.$route.query.performId;
          addApply(this.form).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.$router.push({path: this.redirect || "/performConfig/apply"})
          });
        }
      });
    },
    close() {
      this.$router.push({path: this.redirect || "/"})
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
