<template>
  <div class="application-form-container" style="display: flex; justify-content: center; align-items: center">
    <div id="print" ref="print" style="width: auto;">
      <h2 class="form-title">广西水利电力职业技术学院</h2>
      <h3 class="form-subtitle">退役复学申请表</h3>

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <table class="application-table">
          <!-- 基本信息行1 -->
          <tr>
            <td class="label">姓名</td>
            <td class="input-cell">
              <!-- <el-form-item prop="stName" class="form-item-custom">
                <el-input v-model="form.stName" placeholder="请输入姓名" class="basic-input" disabled></el-input>
              </el-form-item> -->
              {{ form.stName }}
            </td>
            <td class="label">性别</td>
            <td class="input-cell">
              <!-- <el-form-item prop="sex" class="form-item-custom">
                <el-select v-model="form.sex" placeholder="请选择性别" class="basic-input" disabled>
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item> -->
              {{ form.sex }}
            </td>
            <td class="label">民族</td>
            <td class="input-cell">
              <!-- <el-form-item prop="nations" class="form-item-custom">
                <el-input v-model="form.nations" placeholder="请输入民族" class="basic-input" disabled></el-input>
              </el-form-item> -->
              <!-- 用dict-tag组件渲染字典标签 -->
              <dict-tag :options="dict.type.rt_nation" :value="form.nations" />
            </td>
            <td class="label">班级</td>
            <td class="input-cell" colspan="2">
              <!-- <el-form-item prop="stClass" class="form-item-custom">
                <el-input v-model="form.stClass" placeholder="请输入年级" class="basic-input" disabled></el-input>
              </el-form-item> -->
              {{ form.stClass }}
            </td>
          </tr>


          <!-- 专业、学号、班级行 -->
          <tr>
            <td class="label">学号</td>
            <td class="input-cell">
              <!-- <el-form-item prop="stId" class="form-item-custom">
                <el-input v-model="form.stId" placeholder="请输入学号" class="basic-input" type="textarea" disabled
                  :rows="3"></el-input>
              </el-form-item> -->
              {{ form.stId }}
            </td>
            <td class="label" rowspan="2">专业<br />名称</td>
            <td class="input-cell" colspan="3" rowspan="2">
              <!-- <el-form-item prop="majors" class="form-item-custom">
                <el-input v-model="form.majors" placeholder="请输入专业名称" class="major-input" type="textarea" disabled
                  :rows="3"></el-input>
              </el-form-item> -->
              {{ form.majors }}
            </td>

            <td class="label">联系电话</td>
            <td class="input-cell" colspan="2">
              <!-- <el-form-item prop="datab" class="form-item-custom">
                <el-input v-model="form.datab" placeholder="请输入电话" class="basic-input" type="textarea" disabled
                  :rows="3"></el-input>
              </el-form-item> -->
              {{ form.datab }}
            </td>
          </tr>
          <tr></tr>

          <tr>
            <td class="label" rowspan="4">申请<br />理由</td>
            <td class="input-cell" colspan="8" rowspan="4">
              <p class="reason-text">本人于
                <!-- <el-form-item prop="rwTime" class="form-item-custom inline-item">
                  <el-date-picker v-model="form.rwTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
                    value-format="yyyy-MM-dd" class="date-picker"></el-date-picker>
                </el-form-item> -->
                {{ form.rwTime | formatDate }}
                应征入伍，于
                <!-- <el-form-item prop="dataa" class="form-item-custom inline-item">
                  <el-date-picker v-model="form.dataa" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
                    value-format="yyyy-MM-dd" class="date-picker"></el-date-picker>
                </el-form-item>  -->
                {{ form.dataa | formatDate }}
                日退役，退役后申请复学。
              </p>
              <p class="reason-text" style="" v-if="form.conversion == 'Y'">是否申请转专业：（√）是 （）否
              </p>
              <p class="reason-text" style="" v-else>是否申请转专业：（）是 （×）否
              </p>
              <p v-if="form.conversion === 'Y'" class="reason-text" style="color: red;">原年级和专业:__
                {{ form.maList.length > 0 ? form.maList[0].oldgrade : '' }}
                __{{ form.maList.length > 0 ? form.maList[0].oldmajor : '' }}__
                <!-- <el-input v-model="form.maList.oldgrade" type="textarea" :rows="3"
              class="opinion-textarea">{{oldgrade}}</el-input> -->
                <!-- <el-input v-model="form.maList.oldgrade" type="textarea" :rows="3"
              class="opinion-textarea"></el-input> -->

                申请转入年级和专业：__
                {{ saveGradeName }}
                __
                {{ saveClassName }}__
              </p>

              <image-preview v-if="form.maList.length > 0 && form.maList[0].proof" :src="form.maList[0].proof"
                :width="240" :height="160" />
              <span v-else></span>

              <image-preview v-if="form.maList.length > 0 && form.maList[0].idcard" :src="form.maList[0].idcard"
                :width="240" :height="160" />
              <span v-else></span>

              <image-preview v-if="form.maList.length > 0 && form.maList[0].material" :src="form.maList[0].material"
                :width="240" :height="160" />
              <span v-else></span>

              <p class="attachment-tip"></p>
              <div class="applicant-info right-align">
                <span>申请人：</span>
                <!-- <el-input v-model="form.stName" readonly class="applicant-input" disabled></el-input> -->
                {{ form.stName }}
                <span class="date-label">日期：</span>
                <!-- <el-form-item prop="times" class="form-item-custom inline-item">
                  <el-date-picker v-model="form.times" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
                    value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker>
                </el-form-item> -->
                {{ form.times | formatDate }}
              </div>
            </td>
          </tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>

          <!-- 招生意见行 -->
          <tr v-if="form.conversion === 'Y'">
            <td class="label" rowspan="4">招生与<br />就业处<br />意见</td>
            <td class="input-cell" colspan="8" rowspan="4">
              <p class="reason-text" style="color: red;">符合转专业条件，拟同意转入年级和专业：
                __{{ saveGradeName }}
                __
                {{ saveClassName }}__
              </p>
              <div class="signature-area right-align">
                <span>审批结果：</span>
                <el-select v-model="form.zsStatus" placeholder="" class="short-select" disabled>
                  <el-option label="重新审核" value="0"></el-option>
                  <el-option label="通过" value="1"></el-option>
                  <el-option label="退回" value="2"></el-option>
                  <el-option label="驳回" value="3"></el-option>
                </el-select>
                <span class="date-label">签名：</span>
                <!-- <el-input v-model="form.idea" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
                {{ form.zsIdea }}
                <span class="date-label">日期：</span>
                <!-- <el-date-picker v-model="form.time" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
                  value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
                {{ form.zsTime | formatDate }}
              </div>
            </td>
          </tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>

          <!-- 辅导员意见行 -->
          <tr>
            <td class="label" rowspan="4">辅导员<br />意见</td>
            <td class="input-cell" colspan="8" rowspan="4">
              <!-- <el-input v-model="form.fdIdea" type="textarea" :rows="3" placeholder="请填写辅导员意见..." disabled
                class="opinion-textarea"></el-input> -->
              {{ form.fdIdea }}
              <div class="signature-area right-align">
                <span>审批结果：</span>
                <el-select v-model="form.fdStatus" placeholder="待审核" class="short-select" disabled>
                  <el-option label="重新审核" value="0"></el-option>
                  <el-option label="通过" value="1"></el-option>
                  <el-option label="退回" value="2"></el-option>
                  <el-option label="驳回" value="3"></el-option>
                </el-select>
                <span class="date-label">签名：</span>
                <!-- <el-input v-model="form.fdQm" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
                {{ form.fdQm }}
                <span class="date-label">日期：</span>
                <!-- <el-date-picker v-model="form.fdTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
                  value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
                {{ form.fdTime | formatDate }}
              </div>
            </td>
          </tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>


          <!-- 学务意见行 -->
          <tr>
            <td class="label" rowspan="4">学务<br />意见</td>
            <td class="input-cell" colspan="8" rowspan="4">
              <!-- <el-input v-model="form.xwIdea" type="textarea" :rows="3" placeholder="请填写意见..."
                class="opinion-textarea"></el-input> -->
              <div v-if="form.xwStatus == '0' ||  form.xwStatus == null || form.xwStatus == '2'" >{{ form.xwIdea }}拟编入____</div>
                     <!-- 同意 -->
                     <div v-if="form.xwStatus == '1'">{{ form.xwIdea || '暂无意见' }},拟编入__{{finalGradeName}}_{{finalClassName}}__</div> 
              <div class="signature-area right-align">
                <span>审批结果：</span>
                <el-select v-model="form.xwStatus" placeholder="待审核" class="short-select" disabled>
                  <el-option label="重新审核" value="0"></el-option>
                  <el-option label="通过" value="1"></el-option>
                  <el-option label="退回" value="2"></el-option>
                  <el-option label="驳回" value="3"></el-option>
                </el-select>
                <span class="date-label">签名：</span>
                <!-- <el-input v-model="form.xwQm" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
                {{ form.xwQm }}
                <span class="date-label">日期：</span>
                <!-- <el-date-picker v-model="form.xwTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
                  value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
                {{ form.xwTime | formatDate }}
              </div>
            </td>
          </tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>


          <!-- 二级意见行 -->
          <tr>
            <td class="label" rowspan="4">二级学<br />院意见</td>
            <td class="input-cell" colspan="8" rowspan="4">
              <!-- <el-input v-model="form.twoIdea" type="textarea" :rows="3" placeholder="请填写意见..."
                class="opinion-textarea"></el-input> -->
              {{ form.twoIdea }}
              <div class="signature-area right-align">
                <span>审批结果：</span>
                <el-select v-model="form.twoStatus" placeholder="待审核" class="short-select" disabled>
                  <el-option label="重新审核" value="0"></el-option>
                  <el-option label="通过" value="1"></el-option>
                  <el-option label="退回" value="2"></el-option>
                  <el-option label="驳回" value="3"></el-option>
                </el-select>
                <span class="date-label">签名：</span>
                <!-- <el-input v-model="form.erQm" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
                {{ form.erQm }}
                <span class="date-label">日期：</span>
                {{ form.twoTime | formatDate }}
                <!-- <el-date-picker v-model="form.twoTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
                  value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
              </div>
            </td>
          </tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>

          <!-- 学籍管理科意见行 -->
          <tr>
            <td class="label" rowspan="4">学籍管<br />理科意见</td>
            <td class="input-cell" colspan="8" rowspan="4">
              <!-- <el-input v-model="form.xjIdea" type="textarea" :rows="3" placeholder="请填写意见..." disabled
                class="opinion-textarea"></el-input> -->
              {{ form.xjIdea }}
              <div class="signature-area right-align">
                <span>审批结果：</span>
                <el-select v-model="form.xjglStatus" placeholder="待审核" class="short-select" disabled>
                  <el-option label="重新审核" value="0"></el-option>
                  <el-option label="通过" value="1"></el-option>
                  <el-option label="退回" value="2"></el-option>
                  <el-option label="驳回" value="3"></el-option>
                </el-select>
                <span class="date-label">签名：</span>
                <!-- <el-input v-model="form.xjQm" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
                {{ form.xjQm }}
                <span class="date-label">日期：</span>
                {{ form.xjTime | formatDate }}
                <!-- <el-date-picker v-model="form.xjTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
                  value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
              </div>
            </td>
          </tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>


          <!-- 教务处主意见行 -->
          <tr>
            <td class="label" rowspan="4">教务处<br />主管领导意见</td>
            <td class="input-cell" colspan="8" rowspan="4">
              <!-- <el-input v-model="form.jwIdea" type="textarea" :rows="3" placeholder="请填写意见..." disabled
                class="opinion-textarea"></el-input> -->
              {{ form.jwIdea }}
              <div class="signature-area right-align">
                <span>审批结果：</span>
                <el-select v-model="form.jwStatus" placeholder="待审核" class="short-select" disabled>
                  <el-option label="重新审核" value="0"></el-option>
                  <el-option label="通过" value="1"></el-option>
                  <el-option label="退回" value="2"></el-option>
                  <el-option label="驳回" value="3"></el-option>
                </el-select>
                <span class="date-label">签名：</span>
                <!-- <el-input v-model="form.jwQm" placeholder="请输入姓名" class="signature-input" disabled></el-input> -->
                {{ form.jwQm }}
                <span class="date-label">日期：</span>
                {{ form.jwTime | formatDate }}
                <!-- <el-date-picker v-model="form.jwTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" disabled
                  value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
              </div>
            </td>
          </tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>

        </table>
        <!-- 说明信息 -->
        <div class="form-description">
          <p>说明：1.本表应附学生入伍证明材料复印件；</p>
          <p>2.本表一式两份，二级学院和教务处各留存一份。</p>
        </div>


        <!-- 操作按钮 -->
        <!-- <div class="form-btn-group"> -->
        <!-- <el-button type="primary" @click="submitForm">提交审核</el-button> -->
        <!-- <el-button @click="resetForm">重置表单</el-button> -->
        <!-- <el-button type="text" @click="printForm">打印表单</el-button> -->
        <!-- </div> -->
      </el-form>
    </div>
    <!-- 按钮 -->
    <div class="form-btn-group">
      <el-button type="primary" @click="doPrint">打印表单</el-button>
    </div>

  </div>

</template>

<script>
import { listBasic, getBasic, delBasic, addBasic, updateBasic } from "@/api/routine/basic";
import { listStudent, getClassName } from '@/api/stuCQS/basedata/student'
import { listGrade } from '@/api/stuCQS/basedata/grade'
import print from 'print-js'

export default {
  name: "Basic",
  dicts: ['sys_yes_no', 'sys_user_sex', 'rt_filling_college', 'sys_commit_status', 'sys_teacher_kpi_filling_year', 'rt_nation', 'rt_classes'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 退伍复学申请表格数据
      basicList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      // 班级名称列表
      ClassNameList: [],

      // 最终班级名称
      finalClassName: null,
      // 最终年级名称
      finalGradeName:null,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fxId: null,
        fxTime: null,
        stId: null,
        stName: null,
        fdName: null,
        sex: null,
        nations: null,
        fdQm: null,
        xwQm: null,
        erQm: null,
        xjQm: null,
        jwQm: null,
        stClass: null,
        majors: null,
        grade: null,
        college: null,
        reasons: null,
        fdIdea: null,
        twoIdea: null,
        xwIdea: null,
        xjIdea: null,
        jwIdea: null,
        zsIdea: null,
        zsStatus: null,
        times: null,
        fdStatus: null,
        xwStatus: null,
        twoStatus: null,
        xjglStatus: null,
        jwStatus: null,
        rwTime: null,
        zsTime: null,
        fdTime: null,
        xwTime: null,
        twoTime: null,
        xjTime: null,
        jwTime: null,
        datab: null,
        dataa: null,
        conversion: null,
        processId: null,
        deployId: null
      },
      // 班级名称
      saveClassName:null,
      // 年级名称
      saveGradeName:null,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    this.showData()
  },
  methods: {

    // 获取学务班级名称列表
      getXWClassNameList() {
  getClassName().then(res => {
    this.ClassNameList = res.data;
    if (this.ClassNameList != null) {
      this.ClassNameList.forEach(element => {
        if (element.value == this.form.maList[0].finaldata1) {
          element.children.forEach(elementTwo => {
            if (elementTwo.value == this.form.maList[0].finaldata2) {
              elementTwo.children.forEach(elementFree => {
                if (elementFree.value == this.form.maList[0].newmajor) {
                  this.finalClassName = elementFree.label;
                  this.classVlue1 = [element.value, elementTwo.value, elementFree.value];
                  
                  // 关键修复：从年级列表中查找年级名称，而不是直接使用 element.label
                  const gradeId = element.value;
                  const gradeItem = this.grade_list.find(item => item.gradeId === gradeId);
                  if (gradeItem) {
                    this.finalGradeName = gradeItem.gradeName; // 正确的年级名称
                    this.$set(this.form.maList[0], 'finallabel', gradeItem.gradeId); // 正确的年级ID
                  }
                }
              });
            }
          });
        }
      });
    }
  })
},

    /** 获取班级名称列表 */
    getClassNameList() {
      getClassName().then(res => {
        this.ClassNameList = res.data
        console.log(this.ClassNameList)
        if (this.ClassNameList != null) {
          this.ClassNameList.forEach(element => {
            if (element.value == this.form.maList[0].data1) {
              // console.log(element.label)
              element.children.forEach(elementTwo => {
                  if (elementTwo.value == this.form.maList[0].data2) {
                    //  console.log(elementTwo.label)
                    this.saveClassName =elementTwo.label
                    // 班级
                    // elementTwo.children.forEach(elementFree => {
                    //   this.saveClassName = elementFree.label
                    //   // console.log(elementFree.label)
                    // });
                  }
                });
            }
          });
        }
      })
    },

    // 打印方法
    doPrint() {
      printJS({
        printable: 'print',
        type: 'html',
        targetStyles: ['*'],
        style: '@page {margin:2.4cm 2cm ;resolution: 300dpi;}',
        onPrintDialogClose: (this.erexcel = false),
        targetStyles: ['*'],
        font_size: '',
      })
    },

    // 回显数据
    showData() {
      if (this.$route.query.id != undefined) {
        console.log(this.$route.query.id)
        getBasic(this.$route.query.id).then((response) => {
          this.form = response.data
          this.getClassNameList()
          this.listGrade()
          this.getXWClassNameList()
          // this.active = response.data.status + 1;
        })
      }
    },

      /** 获取年级列表 */
        async listGrade() {
            try {
                let res = await listGrade()
                if (res.code == 200) {
                    this.grade_list = [...res.rows]
                    console.log(this.grade_list)
                    this.grade_list.forEach(element => {
                      if(element.gradeId == this.form.maList[0].newgrade){
                          this.saveGradeName = element.gradeName
                      }
                       if (element.gradeId == this.form.maList[0].finallabel) {
                        this.finalGradeName = element.gradeName
                    
                      }
                    });
                }
            } catch (error) {
                console.error('获取年级列表失败:', error)
            }
        },

    /** 查询退伍复学申请列表 */
    getList() {
      this.loading = true;
      listBasic(this.queryParams).then(response => {
        this.basicList = response.rows;
        this.total = response.total;
        this.loading = false;


      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        fxId: null,
        fxTime: null,
        stId: null,
        stName: null,
        fdName: null,
        sex: null,
        nations: null,
        fdQm: null,
        xwQm: null,
        erQm: null,
        xjQm: null,
        jwQm: null,
        stClass: null,
        majors: null,
        grade: null,
        college: null,
        reasons: null,
        fdIdea: null,
        twoIdea: null,
        xwIdea: null,
        xjIdea: null,
        jwIdea: null,
        zsIdea: null,
        zsStatus: null,
        times: null,
        fdStatus: null,
        xwStatus: null,
        twoStatus: null,
        xjglStatus: null,
        jwStatus: null,
        rwTime: null,
        zsTime: null,
        fdTime: null,
        xwTime: null,
        twoTime: null,
        xjTime: null,
        jwTime: null,
        datab: null,
        dataa: null,
        conversion: null,
        processId: null,
        deployId: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加退伍复学申请";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getBasic(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改退伍复学申请";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateBasic(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBasic(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除退伍复学申请编号为"' + ids + '"的数据项？').then(function () {
        return delBasic(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('routine/basic/export', {
        ...this.queryParams
      }, `basic_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style scoped>
.application-form-container {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  font-family: "Source Han Sans CN", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.form-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin: 0 0 12px 0;
}

.form-subtitle {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin: 0 0 25px 0;
}

.application-table {
  width: 100%;
  border-collapse: separate;
  /* 关键：使用separate替代collapse */
  border-spacing: 0;
  /* 消除单元格间距 */
  border: 1.5px solid #000;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.application-table td {
  border: 1px solid #000;
  padding: 8px;
  vertical-align: top;
  position: relative;
  /* 关键：为子元素提供定位上下文 */
}

.label {
  width: 80px;
  text-align: center;
  background-color: #f5f5f5;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: middle !important;
}

.input-cell {
  min-height: 36px;
  padding-top: 20px !important;
  padding-bottom: 25px !important;
  /* 关键：预留验证提示空间 */
}

/* 解决验证提示遮挡核心样式 */
.form-item-custom {
  position: relative;
  margin-bottom: 0 !important;
}

.el-form-item__error {
  position: absolute !important;
  left: 0 !important;
  bottom: -22px !important;
  /* 显示在单元格内预留空间 */
  background: #f56c6c !important;
  color: #fff !important;
  padding: 2px 6px !important;
  border-radius: 2px !important;
  z-index: 10 !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.inline-item {
  display: inline-block !important;
}

/* 输入控件样式 */
.basic-input {
  width: 100%;
}

.major-input,
.address-input {
  width: 100%;
  min-height: 72px;
}

.opinion-textarea {
  width: 100%;
  min-height: 80px;
  resize: none;
}

.date-picker {
  width: 150px;
  margin: 0 6px;
}

.date-picker.full-date {
  width: 180px;
}

.applicant-input,
.signature-input {
  width: 200px;
  margin: 0 6px;
  display: inline-block;
}

.short-select {
  width: 120px;
  margin: 0 10px;
  display: inline-block;
}

/* 文本样式 */
.reason-text {
  margin: 10px 0;
  line-height: 2;
  font-size: 14px;
}

.attachment-tip {
  margin: 10px 0;
  color: #666;
  font-size: 13px;
}

.right-align {
  text-align: right;
  margin-top: 15px;
  line-height: 2.2;
}

.date-label {
  margin-left: 20px;
}

/* 按钮样式 */
.form-btn-group {
  margin-top: 30px;
  text-align: center;
}

.form-btn-group .el-button {
  margin: 0 10px;
}

.form-description {
  margin-top: 20px;
  font-size: 13px;
  line-height: 2;
  padding-left: 10px;
}

/* 打印样式 */
@media print {
  .form-btn-group {
    display: none;
  }

  .el-input,
  .el-select,
  .el-textarea {
    border: 1px solid #000 !important;
    background: transparent !important;
  }

  .label {
    background-color: #eee !important;
    -webkit-print-color-adjust: exact;
  }

  .el-form-item__error {
    display: none !important;
  }

  .input-cell {
    padding-bottom: 8px !important;
  }
}



/* 针对所有 .basic-input 去掉边框和背景 */
.basic-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  /* 去掉可能存在的阴影 */
}

.form-table {
  font-family: "微软雅黑", sans-serif;
  font-size: 14px;
  border-collapse: collapse;
  width: 100%;
}

.form-table th,
.form-table td {
  border: 1px solid #000;
  padding: 8px 12px;
  text-align: left;
}

.form-table .label-cell {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 打印专用样式（继承系统样式，覆盖浏览器默认） */
@media print {

  /* 强制打印时使用系统字体 */
  body {
    font-family: "微软雅黑", sans-serif !important;
    font-size: 14px !important;
  }

  /* 确保表格边框、背景与系统一致（部分浏览器打印会忽略背景，需开启） */
  .form-table {
    border-collapse: collapse !important;
    width: 100% !important;
    -webkit-print-color-adjust: exact;
    /* 强制打印背景色 */
    print-color-adjust: exact;
  }

  .form-table th,
  .form-table td {
    border: 1px solid #000 !important;
    padding: 8px 12px !important;
    text-align: left !important;
  }

  .form-table .label-cell {
    background-color: #f5f5f5 !important;
    font-weight: bold !important;
  }

  /* 隐藏打印无关元素（如按钮） */
  .no-print {
    display: none !important;
  }
}
</style>
