<template>
  <div class="app-container fixed-scroll-error">
    <el-form :model="queryParams" ref="queryForm" size="small" inline label-position="right" v-show="showSearch"
             label-width="96px">
      <el-form-item label="姓名：" prop="studentName">
        <el-input v-model="queryParams.studentName" placeholder="请输入学生姓名" clearable
                  @keyup.enter.native="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="年级：" prop="gradeValue">
        <el-select v-model="queryParams.gradeValue" style="width:100%;" placeholder="请选择学生年级">
          <el-option v-for="dict in dict.type.Grade" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="班级：" prop="classValue">
        <el-select v-model="queryParams.classValue" style="width:100%;" placeholder="请选择学生班级">
          <el-option v-for="dict in dict.type.Class" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-select v-model="queryParams.sex" style="width:100%;" placeholder="请选择学生性别">
          <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="级/届：" prop="enrollmentYear">
        <el-date-picker v-model="queryParams.enrollmentYear" style="width: 100%" type="year" value-format="yyyy"
                        placeholder="选择入学年">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="全国学籍号：" prop="nationalNumber">
        <el-input v-model="queryParams.nationalNumber" placeholder="请输入学生全国学籍号"></el-input>
      </el-form-item>
      <el-form-item label="注册序号：" prop="schoolNo">
        <el-input v-model="queryParams.schoolNo" placeholder="请输入学生注册序号"></el-input>
      </el-form-item>
      <el-form-item label="学生状态：" prop="studentStatus">
        <el-select v-model="queryParams.studentStatus" placeholder="请选择学生状态" style="width: 100%;">
          <el-option v-for="dict in dict.type.child_state" :key="dict.value" :label="dict.label" :value="dict.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生类型：" prop="studentType">
        <el-select v-model="queryParams.studentType" placeholder="请选择学生类型" style="width: 100%;">
          <el-option v-for="dict in dict.type.student_type" :key="dict.value" :label="dict.label" :value="dict.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号：" prop="idCard">
        <el-input v-model="queryParams.idCard" placeholder="请输入学生身份证号" clearable></el-input>
      </el-form-item>
      <el-form-item class="ml20">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['system:student:add']">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                   v-hasPermi="['system:student:remove']">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                   v-hasPermi="['system:student:edit']">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" size="mini" plain icon="el-icon-view" :disabled="single" @click="handleView">查看
        </el-button>
      </el-col>

      <el-col :offset="1" :span="1.5">
        <el-button type="success" plain icon="el-icon-upload" size="mini" @click="handleImport"
                   v-hasPermi="['system:student:export']">导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                   v-hasPermi="['system:student:export']">导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-upload v-loading="uploadFileLoading" class="upload-demo" action="#" :show-file-list="false"
                   :before-upload="beforeFileUpload" :http-request="uploadFiles" accept=".zip">
          <el-button size="mini" type="success" plain icon="el-icon-upload">学生照片导入</el-button>
        </el-upload>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-s-check" size="mini" @click="handlePermissionDialog">权限修改
        </el-button>
      </el-col>

      <el-col :span="1.5" style="position: absolute; right: 0px">
        <!--<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"-->
        <!--           v-hasPermi="['system:student:export']">导出-->
        <!--</el-button>-->
        <el-select style="width: 100%" size="mini" v-model="queryParams.schoolYear" @change="handleQuery">
          <el-option v-for="item in yearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-col>
      <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>-->
    </el-row>

    <el-table stripe v-loading="loading" width="100%" :cell-style="cellStyle" :data="studentList"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column fixed="left" key="avatar" align="center" prop="avatar" label="头像">
        <template slot-scope="scope">
          <ListImage :image-url="isEmptyAvatar(scope.row.avatar, scope.row.sex)"></ListImage>
        </template>
      </el-table-column>
      <el-table-column fixed="left" key="studentName" min-width="80px" align="center" prop="studentName" label="姓名"/>
      <el-table-column key="grade" min-width="100px" align="center" prop="classAlias" label="班级"/>
      <el-table-column key="sex" min-width="50" align="center" prop="sex" label="性别">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column key="nation" width="100" align="center" prop="nation" label="民族"/>
      <el-table-column key="nativePlace" min-width="100" header-align="center" align="center" prop="nativePlace"
                       label="籍贯" show-overflow-tooltip></el-table-column>
      <el-table-column key="idCard" width="180" align="center" prop="idCard" label="身份证号"/>
      <el-table-column key="stuTelephone" width="130" align="center" prop="stuTelephone" label="联系电话"/>
      <el-table-column key="birthAddress" width="150" align="center" prop="birthAddress" label="出生地"/>
      <el-table-column key="postalCode" width="150" align="center" prop="postalCode" label="邮政编码"/>
      <el-table-column key="enrollmentYear" width="100" align="center" prop="enrollmentYear" label="级/届"/>
      <el-table-column key="enrollmentTime" min-width="100" header-align="center" align="center" prop="enrollmentTime"
                       label="入学时间" show-overflow-tooltip></el-table-column>
      <el-table-column key="platform" width="180" align="center" prop="platform" label="平台"/>
      <el-table-column key="studentType" width="130" align="center" prop="studentType" label="学生类型">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.student_type" :value="scope.row.studentType"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column key="provincialNumber" width="150" align="center" prop="provincialNumber" label="省学籍辅号"/>
      <el-table-column key="nationalNumber" width="150" align="center" prop="nationalNumber" label="全国学籍号"/>
      <el-table-column key="studentStatus" width="80" align="center" prop="studentStatus" label="学生状态">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.child_state" :value="scope.row.studentStatus"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column key="schoolNo" width="100" align="center" prop="schoolNo" label="注册序号"/>
      <el-table-column key="registeredAddress" min-width="100" header-align="center" align="center"
                       prop="registeredAddress" label="户口所在地" show-overflow-tooltip></el-table-column>
      <el-table-column key="registeredType" width="180" align="center" prop="registeredType" label="户口性质">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.regist_type" :value="scope.row.registeredType"/>
        </template>
      </el-table-column>
      <el-table-column key="juniorSchool" width="130" align="center" prop="juniorSchool" label="初中学校"/>
      <el-table-column key="region" width="150" align="center" prop="region" label="国家地区"/>
      <el-table-column key="foreignLanguages" width="150" align="center" prop="foreignLanguages" label="外语语种"/>
      <el-table-column key="appearance" width="150" align="center" prop="appearance" label="政治面貌">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.politics_tatus" :value="scope.row.appearance"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column key="birthday" width="120" sortable align="center" prop="birthday"
                       label="出生日期"></el-table-column>
      <el-table-column key="homeAddress" min-width="200" align="center" prop="homeAddress" label="家庭住址"
                       show-overflow-tooltip>
        <template v-slot="scope">
          <span class="one-line-omit">
            {{ scope.row.homeAddress }}
          </span>
        </template>
      </el-table-column>
      <el-table-column key="bloodType" width="100" align="center" prop="bloodType" label="血型"/>
      <el-table-column key="health" min-width="100" header-align="center" align="center" prop="health" label="健康状况"
                       show-overflow-tooltip></el-table-column>
      <el-table-column key="otherRegions" width="180" align="center" prop="otherRegions" label="港澳台侨"/>
      <el-table-column key="floatingPopulation" width="130" align="center" prop="floatingPopulation"
                       label="流动人口状况"/>
      <el-table-column key="onlyChild" width="150" align="center" prop="onlyChild" label="独生子女">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.only_child" :value="scope.row.onlyChild"/>
        </template>
      </el-table-column>
      <el-table-column key="nature" width="150" align="center" prop="nature" label="性质">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.student_nature" :value="scope.row.nature"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column key="support" width="150" align="center" prop="support" label="接收资助情况"></el-table-column>
      <el-table-column label="操作" align="center" min-width="200px" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="parentsEdit(scope.row)">家长信息
          </el-button>
          <!-- <el-button size="mini" type="text" @click="moralScore(scope.row)">学生积分
          </el-button> -->
          <!--          <el-button size="mini" type="text" @click="handleView(scope.row)" v-hasPermi="['system:student:edit']">查看-->
          <!--          </el-button>-->
          <el-button size="mini" type="text" @click="studentTable(scope.row)" v-hasPermi="['system:student:edit']">学籍表
          </el-button>
          <el-button size="mini" type="text" @click="studentProve(scope.row)" v-hasPermi="['system:student:edit']">学籍证明
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <ExPagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>

    <!-- 添加或修改学生对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" @close="dialogClose">
      <el-form ref="form" :model="form" label-width="114px" :rules="rules" :disabled="formDisabled">
        <el-form-item prop="avatar" label-width="0" style="display: flex; justify-content: center;">
          <el-upload v-loading="uploadLoading" class="avatar-uploader" action="#" accept="image/*"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :http-request="uploadImage">
            <img v-if="form.avatar" :src="baseUrl + form.avatar" style="width: 178px; height: 178px;" class="avatar"
                 alt=""/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div slot="error">
            <img :src="isEmptyAvatar(form.avatar, form.sex)" style="width: 178px; height: 178px; border-radius: 50%"
                 alt="">
          </div>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="姓名：" prop="studentName">
              <el-input placeholder="请输入姓名" :disabled="isEditMode" v-model.trim="form.studentName" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号：" prop="idCard">
              <el-input placeholder="请输入身份证号" :disabled="isEditMode" v-model.trim="form.idCard" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别：" prop="sex">
              <el-select v-model="form.sex" placeholder="请输入性别" style="width: 100%;">
                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                           :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="籍贯：" prop="nativePlace">
              <el-input placeholder="请输入籍贯" v-model="form.nativePlace"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期：" prop="birthday">
              <el-date-picker v-model="form.birthday" type="date" value-format="yyyy-MM-dd" placeholder="请选择出生日期"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="班级：" prop="classAlias">
              <el-input v-model="form.classAlias" placeholder="请选择班级" readonly @focus="selectClass"
                        style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">

            <el-form-item label="学生状态：" prop="studentStatus">
              <el-select v-model="form.studentStatus" placeholder="请输入学生状态" style="width: 100%;">
                <el-option v-for="dict in dict.type.child_state" :key="dict.value" :label="dict.label"
                           :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生类型：" prop="studentType">
              <el-select v-model="form.studentType" placeholder="请输入学生类型" style="width: 100%;">
                <el-option v-for="dict in dict.type.student_type" :key="dict.value" :label="dict.label"
                           :value="dict.value">{{ dict.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册序号：" prop="schoolNo">
              <el-input placeholder="请输入注册序号" v-model.trim="form.schoolNo"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="省学籍辅号：" prop="provincialNumber">
              <el-input placeholder="请输入省学籍辅号" v-model.trim="form.provincialNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="全国学籍号：" prop="nationalNumber">
              <el-input placeholder="请输入全国学籍号" v-model.trim="form.nationalNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族：" prop="nation">
              <el-select :disabled="isEditMode" v-model="form.nation" placeholder="请选择民族" style="width: 100%">
                <el-option v-for="item in Nations" :key="item.label" :label="item.label"
                           :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>


        </el-row>
        <el-row :gutter="20">

          <el-col :span="8">
            <el-form-item label="联系电话：" prop="stuTelephone">
              <el-input placeholder="请输入联系电话" v-model.trim="form.stuTelephone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现住地址：" prop="homeAddress">
              <el-input placeholder="请输入现住地址" v-model="form.homeAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="通讯地址：" prop="postalAddress">
              <el-input placeholder="请输入通讯地址" v-model="form.postalAddress"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="邮政编码：" prop="postalCode">
              <el-input placeholder="请输入邮政编码" v-model.trim="form.postalCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="级/届：" prop="enrollmentYear">
              <el-date-picker style="width:100%" v-model="form.enrollmentYear" value-format="yyyy" type="year"
                              placeholder="选择入学年">
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="8">
            <el-form-item label="入学时间：" prop="enrollmentTime">
              <el-date-picker v-model="form.enrollmentTime" value-format="yyyy-MM-dd" style="width: 100%" type="date"
                              placeholder="选择入学时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="平台：" prop="platform">
              <el-input placeholder="请输入平台" v-model="form.platform"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="初中学校：" prop="juniorSchool">
              <el-input placeholder="请输入初中学校" v-model="form.juniorSchool"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校园一卡通：" prop="oneCard">
              <el-input placeholder="请输入校园一卡通号码" v-model.trim="form.oneCard" clearable></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="出生地：" prop="birthAddress">
              <el-input placeholder="请输入出生地" v-model="form.birthAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="户口所在地：" prop="registeredAddress">
              <el-input placeholder="请输入户口所在地" v-model="form.registeredAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="户口性质：" prop="registeredType">
              <el-select v-model="form.registeredType" style="width: 100%" placeholder="请输入户口性质">
                <el-option
                  v-for="dict in dict.type.regist_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="国家地区：" prop="region">
              <el-input placeholder="请输入国家地区" v-model="form.region"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="外语语种：" prop="foreignLanguages">
              <el-input placeholder="请输入外语语种" v-model="form.foreignLanguages"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="政治面貌：" prop="appearance">
              <el-select v-model="form.appearance" style="width: 100%" placeholder="请选择政治面貌">
                <el-option v-for="dict in dict.type.politics_tatus" :key="dict.value" :label="dict.label"
                           :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="血型：" prop="bloodType">
              <el-input placeholder="请输入血型" v-model="form.bloodType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="健康状况：" prop="health">
              <el-input placeholder="请输入健康状况" v-model="form.health"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="港澳台侨：" prop="otherRegions">
              <el-input placeholder="请输入港澳台侨" v-model="form.otherRegions"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="流动人口状况：" prop="floatingPopulation">
              <el-input placeholder="请输入流动人口状况" v-model="form.floatingPopulation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="独生子女：" prop="onlyChild">
              <el-select v-model="form.onlyChild" style="width: 100%" placeholder="请选择是否为独生子女">
                <el-option
                  v-for="dict in dict.type.only_child"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性质：" prop="nature">
              <el-select v-model="form.nature" placeholder="请选择学生性质" style="width: 100%;">
                <el-option v-for="dict in dict.type.student_nature" :key="dict.value" :label="dict.label"
                           :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="接收资助状况：" prop="support">
              <el-input placeholder="请输入接收资助状况" v-model="form.support"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="lookOpen">
          <br/> <br/> <br/>
          <b>班级信息</b>
          <br/> <br/>
          <el-table :data="studentClassRelation" border :row-style="{ height: '30px' }" :cell-style="{ padding: '0' }"
                    style="font-size: 14px" stripe>
            <el-table-column type="index" label="序号" width="240" align="center"/>
            <el-table-column prop="" label="学年" width="240" align="center">{{
                studentClassRelation[0].schoolYear
              }}
            </el-table-column>
            <el-table-column prop="" label="班级" align="center">{{
                studentClassRelation[0].classAlias
              }}
            </el-table-column>
          </el-table>
          <br/> <br/> <br/>
          <b>家长信息</b>
          <br/> <br/>
          <el-table :data="studentParents" border :row-style="{ height: '30px' }" :cell-style="{ padding: '0' }"
                    style="font-size: 14px" stripe>
            <el-table-column type="index" label="序号" width="60" align="center"/>
            <el-table-column prop="relationship" label="关系" min-width="60" align="center">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.relationship" :value="scope.row.relationship"/>
              </template>
            </el-table-column>
            <el-table-column prop="parentName" label="家长姓名" align="center"/>
            <el-table-column prop="telephone" label="联系电话" min-width="120" align="center"/>
            <el-table-column prop="idCard" label="身份证号" min-width="160" align="center"/>
            <el-table-column label="工作地址" align="center" prop="workAddress" min-width="120"/>
            <el-table-column label="联系地址" align="center" prop="contactAddress" min-width="120"/>
            <el-table-column label="邮政编码" align="center" prop="postalCode" min-width="120"/>
          </el-table>
          <br/> <br/> <br/>
          <b>关键信息变更</b>
          <br/> <br/>
          <el-table :data="studentInfoChange" border :row-style="{ height: '30px' }" :cell-style="{ padding: '0' }"
                    style="font-size: 14px" stripe>
            <el-table-column type="index" label="序号" width="240" align="center"/>
            <el-table-column prop="studentName" label="曾：姓名" width="240" align="center"/>
            <el-table-column prop="idCard" label="曾：历史身份证号" align="center"/>
            <el-table-column prop="nation" label="曾：民族" align="center"/>
          </el-table>
          <br/> <br/> <br/>
          <b>异动信息</b>
          <br/> <br/>
          <el-table :data="studentTurnover" border :row-style="{ height: '30px' }" :cell-style="{ padding: '0' }"
                    style="font-size: 14px" stripe>
            <el-table-column type="index" label="序号" width="60" align="center"/>
            <el-table-column prop="changeType" label="异动类型" min-width="140" align="center">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.change_type" :value="scope.row.changeType"/>
              </template>
            </el-table-column>
            <el-table-column prop="remark" min-width="240" label="说明" align="center"/>
          </el-table>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button v-show="!formDisabled" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">{{ formDisabled ? '退 出' : '取 消' }}</el-button>
      </div>
      <!--      <div slot="footer" class="dialog-footer">-->
      <!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
      <!--        <el-button @click="cancel">取 消</el-button>-->
      <!--      </div>-->


    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!--<div class="el-upload__tip" slot="tip">-->
          <!--  <el-checkbox v-model="upload.updateSupport"/>-->
          <!--  是否更新已经存在的用户数据-->
          <!--</div>-->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                   @click="importTemplate">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 选择班级 -->
    <ClassSelect v-if="classOptions.open" :openSelect.sync="classOptions.open" :title="classOptions.title"
                 @getClassList="getClassList" @setClassInfo="setClassInfo"></ClassSelect>
    <ExportTable :open-export.sync="exportOptions.open" :title="exportOptions.title" @export="exportFile"></ExportTable>
    <el-dialog title="权限修改" :visible.sync="permissionDialog" width="300px">
      <div style="width:250px; margin: 0 auto; font-size: 23px">
        <el-row>
          <el-col :span="17">
            <span>级部修改权限 </span>
          </el-col>
          <el-col :span="7">
            <el-switch v-model="permissionState1" :width="50" active-color="#13ce66" active-value="1" inactive-value="0"
                       @change="(state) => permissionAlter(state, '级部')"/>
          </el-col>

        </el-row>
        <br/>
        <el-row>
          <el-col :span="17">
            <span>班主任修改权限</span>
          </el-col>
          <el-col :span="7">
            <el-switch v-model="permissionState2" active-color="#13ce66" active-value="1" inactive-value="0" :width="50"
                       @change="(state) => permissionAlter(state, '班主任')">
            </el-switch>
          </el-col>
        </el-row>
        <br/>
        <el-row>
          <el-col :span="17">
            <span>家长修改权限</span>
          </el-col>
          <el-col :span="7">
            <el-switch v-model="permissionState3" :width="50" active-color="#13ce66" active-value="1" inactive-value="0"
                       @change="(state) => permissionAlter(state, '家长')">
            </el-switch>
          </el-col>
        </el-row>
      </div>
      <!--      <el-button @click="permissionDialog = false">取 消</el-button>-->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="permissionDialog = false">关 闭</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import ClassSelect from '@/views/smartSchool/teachAffairAdministration/affairStudentManage/components/classSelect'
import {
  listStudent,
  getStudent,
  delStudent,
  addStudent,
  updateStudent,
  filesUpload,
  setPermission,
  getPermission,
  getAllInfo,
} from '@/api/smartSchool/teachAffairAdministration/affairStudentManage'
import {getToken} from '@/utils/auth'
import {CustomCellStyle} from '@/enums/customStyle'
import {getClassList} from '@/api/smartSchool/classManage'
import PicAvatar from '@/views/smartSchool/schoolManage/introduce/schoolInfo/profile/picAvatar'
import {uploadImage as commonUpload} from '@/api/common'
import {ExportType, Gender, Nations, Area} from '@/enums/common'
import {getYearList} from '@/utils/utilLibrary/getYearList'
import {getNewYear} from "@/api/smartSchool/teachAffairAdministration/affairClassView";

export default {
  name: 'AffairStudentManage',
  components: {ClassSelect, PicAvatar},
  dicts: ['only_child', 'regist_type', 'politics_tatus', 'sys_user_sex', 'Grade', 'Class', 'student_type', 'Whether_Delete', 'child_state', 'student_nature', "change_type", 'relationship'],
  data() {
    return {
      baseUrl: [process.env.VUE_APP_BASE_API],
      studentClassRelation: [],
      formDisabled: false,
      permissionState1: false,
      permissionState2: false,
      permissionState3: false,
      permissionDialog: false,
      pev: process.env.VUE_APP_BASE_API,
      fileList: [],
      // 民族
      Nations,
      Area,
      //获取子组件传来的信息
      pic: [],
      // 限制选择日期不能超过今天
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      // 图片路径
      imageUrl: undefined,
      // 图片上传遮罩层
      uploadLoading: false,
      uploadFileLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 学生表格数据
      studentList: [],
      // 增加家长信息列表
      parentsList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      //查看
      lookOpen: false,
      // 家长编辑对话框
      dialogVisibleForParents: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        studentName: null,
        studentStatus: null,
        sex: null,
        gradeValue: null,
        classValue: null,
        studentType: null,
        delFlag: null,
        schoolNo: null,
        // schoolYear: 2000
        schoolYear: null
      },
      // 表单参数
      form: {},
      //学生及家长数据
      studentform: [],
      studentInfoChange: [],
      studentParents: [],
      studentTurnover: [],
      // 表单校验
      rules: {
        idCard: [
          {required: true, message: "身份证号不能为空", trigger: 'blur'},
          {validator: this.validID, trigger: 'blur'}
        ],
        nation: [{required: true, message: '民族不能为空', trigger: 'blur'}],
        studentName: [{required: true, message: '学生姓名不能为空', trigger: 'blur'}],
        birthday: [{required: true, message: '出生日期不能为空', trigger: 'blur'}],
        nativePlace: [{required: true, message: '籍贯不能为空', trigger: 'blur'}],
        sex: [{required: true, message: '学生姓名不能为空', trigger: 'blur'}],
        schoolNo: [{required: true, message: '注册序号不能为空', trigger: 'blur'}],
        studentType: [{required: true, message: '学生类型不能为空', trigger: 'change'}],
        studentStatus: [{required: true, message: '学生状态不能为空', trigger: 'change'}],
        classAlias: [{required: true, message: '班级不能为空', trigger: 'change'}],
        provincialNumber: [{required: true, message: '省学籍辅号不能为空', trigger: 'blur'}],
      },
      // 班级编辑表单
      classForm: {
        name: '',
        birthday: '',
        id: '',
        studentNo: ''
      },
      // 当前年份
      schoolYear: null,
      // 班级编辑添加表格
      classTable: [],
      //选中的从表数据
      checkedDetail: [],
      // 德育打分日期
      moralScoreDate: '',
      // 学生导入参数
      upload: {
        // 是否显示弹出层（学生导入）
        open: false,
        // 弹出层标题（学生导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的学生数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: 'Bearer ' + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/school/student/importData'
      },
      //
      tableKey: Math.random(),
      // 自定义列表单元格样式
      cellStyle: CustomCellStyle,
      // 选择班级对话框
      classOptions: {
        open: false,
        title: '选择班级'
      },
      // 导出选项
      exportOptions: {
        title: '选择导出类别',
        open: false
      },
      // 导出
      exportType: '',
      // 年份列表数据
      yearList: []
    }
  },
  computed: {
    resolveAvatar() {
      return (url, sex) => {
        return this.isEmptyAvatar(url, sex);
      }
    },
    isEditMode() {
      return !!this.form.id
    },
  },
  watch: {
    // elementUi时间日期控件传值不能为Number类型，必须为String。
    'form.schoolYear'(val) {
      this.form.schoolYear = '' + val
    },
    pic: {
      handler(newValue, oldValue) {
        this.isUploadPic = newValue[3]
      }
    },
  },
  created() {
    this.yearList = getYearList()
    this.newYear()
  },
  methods: {
    newYear() {
      return getNewYear().then(response => {
        this.queryParams.schoolYear = response.schoolYear;
        this.handleQuery()
      })
    },


    /** 查询学生列表 */
    getList() {
      this.loading = true
      listStudent(this.queryParams).then(response => {
        this.studentList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        gradeId: '',
        oneCard: '',
        studentType: '',
        studentStatus: '',
        tabooFood: '',
        schoolNo: '',
        idCard: '',
        classes: '',
        grade: '',
        schoolYear: '',
        nativePlace: '',
        homeAddress: '',
        nation: '',
        birthday: '',
        // sex: Gender.MALE,
        sex: "",
        studentName: '',
        avatar: ''
      }
      this.imageUrl = ''
      this.resetForm('form')
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        studentName: undefined,
        studentStatus: '',
        sex: '',
        gradeValue: '',
        classValue: '',
        studentType: '',
        schoolNo: '',
      }
      this.newYear()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 获取学生头像
    getStudentInfoPic(val) {
      this.pic = val
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = '添加学生信息';
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      // 获取学生个人信息
      getStudent(id).then(response => {
        this.form = response.data;
        this.imageUrl = this.isEmptyAvatar(this.form.avatar, this.form.sex);
        this.open = true;
        this.title = '修改学生信息';
        // 如果图片为空
      })
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.reset();
      const id = row.id || this.ids;
      getAllInfo(id).then(response => {
        this.form = response.data
        this.studentInfoChange = response.studentInfoChange;
        this.studentParents = response.studentParents;
        this.studentTurnover = response.studentTurnover;
        this.studentClassRelation = response.studentClassRelation
        this.formDisabled = true;
        this.open = true;
        this.title = '学生信息查看';
        this.lookOpen = true;
      })
    },
    dialogClose() {
      this.lookOpen = false;
      this.formDisabled = false;
    },
    // 学籍表
    studentTable(row) {
      this.$router.push({
        path: '/teachAffairAdministration/studentTable',
        query: {
          id: row.id,
          // name: row.studentName,
          // idCard: row.idCard,
          // schoolNo: row.schoolNo
        }
      })
    },
    // 学籍证明
    studentProve(row) {
      this.$router.push({
        path: '/teachAffairAdministration/studentProve',
        query: {
          id: row.id,
          name: row.studentName,
          idCard: row.idCard,
          schoolNo: row.schoolNo
        }
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateStudent(this.form).then(({code}) => {
              if (code == 200) {
                this.$modal.msgSuccess('修改成功')
                this.open = false
                this.getList()
              }
            }).catch(() => {
                this.$modal.msgError("修改失败");
              }
            )
          } else {
            addStudent(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            }).catch(() => {
                this.$modal.msgError("新增失败");
              }
            )
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id || this.ids
      this.$modal
        .confirm('是否确认删除选中的数据项？')
        .then(function () {
          return delStudent(id)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '学生导入'
      this.upload.open = true
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {dangerouslyUseHTMLString: true})
      this.getList()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    /** 导出按钮操作 */
    handleExport() {
      // 导出选中，导出全部，根据查询条件导出
      this.exportOptions.open = true
    },
    /** 导出 */
    exportFile(callback) {
      const ids = this.ids
      const options = [
        {type: ExportType.TOTAL, path: '/school/student/export', params: {}},
        {type: ExportType.SELECT, path: '/school/student/export/' + ids, params: {}},
        {type: ExportType.QUERY, path: '/school/student/export', params: this.queryParams}
      ]
      callback(options, `学生信息${new Date().getTime()}.xlsx`)
    },

    /** 关闭 */
    closeExport() {
      this.exportOptions.open = false
    },
    // 下载学生模板
    importTemplate() {
      this.download('/school/student/importTemplate', {}, `student_template_${new Date().getTime()}.xlsx`)
    },
    // 移除图片
    handleRemove() {
      this.imageUrl = undefined
    },
    // 上传成功回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data.url
      this.commonUpload(file)
    },
    // 上传前格式和图片大小限制
    beforeAvatarUpload(file) {
      const type = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!type) {
        this.$message.error('图片格式不正确!(只能包含jpg，png，webp，JPEG)')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return type && isLt2M
    },

    // 上传图片
    uploadImage(file) {
      const fileData = file.file
      const formData = new FormData()
      formData.append('file', fileData)
      this.uploadLoading = true
      commonUpload(formData)
        .then(response => {
          this.uploadLoading = false
          this.$modal.msgSuccess('上传成功')
          this.imageUrl = this.pev + response.url
          this.form.avatar = response.url
        })
        .catch(error => {
          this.uploadLoading = false
        })
    },

    // 班级编辑
    classEdit(row) {
      const id = row.id
      this.$router.push({
        path: '/studentmanage/stuclass',
        query: {studentId: row.id}
      })
    },
    /**教务管理--学生管理---家长信息*/
    parentsEdit(row) {
      this.$router.push({
        path: '/teachAffairAdministration/studentManage/parentInfo',
        query: {studentId: row.id}
      })
    },
    // 学生积分
    moralScore(row) {
      this.$router.push({
        path: '/studentmanage/moralEducationCheck',
        query: {
          id: row.id,
          name: row.studentName,
          idCard: row.idCard,
          schoolNo: row.schoolNo
        }
      })
    },

    /** 更多下拉菜单 */
    handleCommand(command, row) {
      this[command].apply(undefined, [row])
    },

    /** 选择班级(打开对话框) */
    selectClass() {
      this.classOptions.open = true
    },

    /** 获取班级信息列表 */
    getClassList(queryForm, callback) {
      getClassList(queryForm)
        .then(response => {
          callback(response.rows, response.total)
        })
        .catch(error => {
          callback([], 0)
        })
    },

    /** 设置班级信息 */
    setClassInfo(item) {
      console.log('item', item)
      this.$set(this.form, 'classId', item.id)
      this.$set(this.form, 'schoolYear', item.schoolYear)
      this.$set(this.form, 'grade', item.gradeValue)
      this.$set(this.form, 'classes', item.classValue)
      this.$set(this.form, 'gradeId', item.id)
      this.$set(this.form, 'className', item.className)
      this.$set(this.form, 'classAlias', item.classAlias)
    },

    /** 判断学生头像是否为空 */
    isEmptyAvatar(imageUrl, sex) {
      if (!imageUrl) {
        let url = null;
        if (Gender.MALE === sex) {
          url = require('@/assets/images/boy.png');
        } else {
          url = require('@/assets/images/girl.png');
        }
        return url;
      } else {
        return this.pev + imageUrl;
      }
    },
    // 身份证验证
    async validID(rule, value, callback) {
      console.log("ddddd")
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (reg.test(value)) {
        await this.go(value.length);
        callback()
      } else {
        callback(new Error('身份证号码不正确'))
      }
    },

    // 实现自动生成生日，性别，年龄
    go(val) {
      let iden = this.form.idCard;
      let sex = null;
      let birth = null;
      let myDate = new Date();
      let month = myDate.getMonth() + 1;
      let day = myDate.getDate();
      let age = 0;
      if (val === 18) {
        age = myDate.getFullYear() - iden.substring(6, 10) - 1;
        sex = iden.substring(16, 17);
        birth = iden.substring(6, 10) + "-" + iden.substring(10, 12) + "-" + iden.substring(12, 14);
        if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;

      }
      if (val === 15) {
        age = myDate.getFullYear() - iden.substring(6, 8) - 1901;
        sex = iden.substring(13, 14);
        birth = "19" + iden.substring(6, 8) + "-" + iden.substring(8, 10) + "-" + iden.substring(10, 12);
        if (iden.substring(8, 10) < month || iden.substring(8, 10) == month && iden.substring(10, 12) <= day) age++;
      }

      if (sex % 2 === 0)
        sex = '1';
      else
        sex = '0';
      this.form.sex = sex;
      // this.form.age = age;
      this.form.birthday = birth;
      this.form.nativePlace = this.Area[iden.substring(0, 2)];
    },
    // 文件压缩包上传前格式限制
    beforeFileUpload(file) {
      console.log(file, 1148)
      const type = file.type === 'application/x-zip-compressed'
      // const isLt2M = file.size / 1024 / 1024 < 2
      if (!type) {
        this.$message.error('文件格式不正确!(只能上传zip文件)')
      }
      // if (!isLt2M) {
      //   this.$message.error('上传图片大小不能超过 2MB!')
      // }
      return type
    },
    // 上传学生照片压缩包文件
    uploadFiles(file) {
      const fileData = file.file
      const formData = new FormData()
      formData.append('file', fileData)
      this.uploadFileLoading = true
      filesUpload(formData).then(response => {
        this.uploadFileLoading = false
        this.$modal.msg(response.msg)
        this.getList()
      }).catch(error => {
        this.uploadFileLoading = false
      })
    },
    handlePermissionDialog() {
      getPermission().then(res => {
        this.permissionState1 = res.data.grade
        this.permissionState2 = res.data.classHeader
        this.permissionState3 = res.data.parent
        this.permissionDialog = true
      })

    },
    permissionAlter(state, type) {
      this.$confirm(state === "1" ? '确定开启 ' + type + ' 修改权限？' : '确定关闭 ' + type + ' 修改权限？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setPermission({
          "grade": this.permissionState1,
          "classHeader": this.permissionState2,
          "parent": this.permissionState3
        }).then(() => {
          if (state === "1") {
            this.$message({
              type: 'success',
              message: `${type} 权限开启成功!`
            });
          } else {
            this.$message({
              type: 'success',
              message: `${type} 权限关闭成功!`
            });
          }
        }).catch(() => {
          if (type == '级部') {
            this.permissionState1 = state === '0' ? '1' : '0'
          } else if (type == '班主任') {
            this.permissionState2 = state === '0' ? '1' : '0'
          } else if (type == '家长') {
            this.permissionState3 = state === '0' ? '1' : '0'
          }
          // state = state === '0' ? '1' : '0'
          if (state === "1") {
            this.$message({
              type: 'success',
              message: `${type} 权限开启失败!`
            });
          } else {
            this.$message({
              type: 'success',
              message: `${type} 权限关闭失败!`
            });
          }
        })
      }).catch(() => {
        if (type == '级部') {
          this.permissionState1 = state === '0' ? '1' : '0'
        } else if (type == '班主任') {
          this.permissionState2 = state === '0' ? '1' : '0'
        } else if (type == '家长') {
          this.permissionState3 = state === '0' ? '1' : '0'
        }
      });
    }

  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.one-line-omit {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.permissStyle {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

[v-clock] {
  display: none;
}

#table {
  margin: 30px 0 auto;

}

.background {
  background-color: #f8f8f9;
}

.all {
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #dfe6ec;
  word-break: break-word;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
  border: 1px solid #e8e7e7;
}
</style>
