<template>
  <div>
    <el-form :inline="true" :model="topForm" label-width="110px" ref='form'>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学生姓名：">
            {{ topForm.userName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号：">
            {{ topForm.phone }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="付费课资格："
            prop="paySeniorNum"
            style="width: 100%"
            :rules="[
              {
                required: true,
                message: '请输入付费课资格数',
                trigger: 'blur',
              },
              {
                pattern: /^(0|\+?[1-9][0-9]*)$/,
                message: '请输入正确的付费课资格数',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              v-model="topForm.paySeniorNum"
              style="width: 270px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
          prop="giveSeniorNum"
            label="赠课资格："
            v-if="hasGive"
            style="width: 100%"
            :rules="[
              { required: true, message: '请输入赠课资格数', trigger: 'blur' },
              {
                pattern: /^(0|\+?[1-9][0-9]*)$/,
                message: '请输入正确的赠课资格数',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              v-model="topForm.giveSeniorNum"
              style="width: 270px"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="调整原因:" prop="memo"  :rules="[
              { required: true, message: '请输入调整原因', trigger: 'blur' },
            ]">
          <el-input
            style="width: 650px"
            type="textarea"
            v-model="topForm.memo"
             maxlength="50"
              show-word-limit
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-row>
      <!-- <p style="color: red">资格调整不影响该活动学员购买次数</p> -->
    </el-form>
  </div>
</template>
<script>
import { addActivityUserMapperStudents } from "@/api/vipSeting";
export default {
  props: ["hasGive", "activeRow"],
  data() {
    return {
      topForm: {
        userName: "",
        phone: "",
        paySeniorNum: "",
        giveSeniorNum: "",
      },
    };
  },
  mounted() {
    this.topForm.userName = this.activeRow?.username || "";
    this.topForm.phone = this.activeRow?.phone || "";
  },
  methods: {
    submit() {
      this.$refs.form.validate(async (flag) => {
        if (flag) {
          let obj = {
            activityId: this.$route.query.id,
            memo: this.topForm.memo,
            activityStudentAdjustDtos: [
              {
                courseNum: this.topForm.paySeniorNum,
                giveCourseNum: this.topForm.giveSeniorNum,
                userId: this.activeRow.userId,
              },
            ],
          };
          try {
            const res = await addActivityUserMapperStudents(obj);
            this.$message.success("添加成功");
            this.$emit("getList");
            this.$emit("close");
          } catch (e) {
            console.log(e);
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form--inline .el-form-item {
  margin-right: 0;
}
</style>
