<template>
  <div class="app-container fixed-scroll-error">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <el-card shadow="never" :style="{ height: clientHeight }">
          <template slot="header">
            <div style="display: flex; justify-content: space-between">
              <div style="display: flex; align-items: center">
                <span>班级列表</span>
              </div>
              <el-select v-model="queryParams.schoolYear" style="width: 100px" size="small" @change="handleYearChange">
                <el-option v-for="item in yearList" :key="item.value" :value="item.value"
                           :label="item.label"></el-option>
              </el-select>
            </div>
          </template>
          <div class="head-container">
            <el-tree :data="leftOptions.treeOptions" :props="leftOptions.defaultProps" :expand-on-click-node="false"
                     :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
                     @node-click="handleNodeClick"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="20" :xs="24">
        <div class="form-header h4">
          <div>班级简介</div>
        </div>
        <el-row :gutter="20" type="flex">
          <el-col :offset="1" :span="15">
            <div class="classes-info-table el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%">
                <tbody>
                <tr>
                  <td class="el-table__cell">
                    <div class="cell">班级 :</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">{{ classInfo.className }}</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">类别 :</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">{{ resolveGradeType(classInfo.classType) }}</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell">
                    <div class="cell">年级 :</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">{{ classInfo.gradeName }}</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">班主任 :</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">{{ classInfo.teacherName }}</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell">
                    <div class="cell">别名 :</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">{{ classInfo.classAlias }}</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">联系电话 :</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">{{ classInfo.teacherTel }}</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell">
                    <div class="cell">开始学年 :</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">{{ classInfo.schoolYear }}</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">班级口号 :</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">{{ classInfo.classSlogan }}</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell">
                    <div class="cell">所在教学楼 :</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">{{ classInfo.houseName }}</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">班主任寄语 :</div>
                  </td>
                  <td class="el-table__cell">
                    <div class="cell">{{ classInfo.teacherWord }}</div>
                    <div class="cell" v-if="JSON.stringify(classInfo) == '{}'">暂无数据</div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-col>
          <el-col :span="8" class="classes-image-container">
            <el-image class="classes-image" :src="classInfo.picUrl" :preview-src-list="[classInfo.picUrl]">
              <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
              <div slot="error"></div>
            </el-image>
          </el-col>
        </el-row>
        <el-row class="mt20">
          <h4 class="form-header h4">成员信息</h4>
        </el-row>
        <el-row>
          <el-radio-group v-model="activeName" @change="getClassDetails" style="margin-bottom: 0px">
            <el-radio-button :label="Types.STUDENT">学生信息</el-radio-button>
            <el-radio-button :label="Types.TEACHER">老师信息</el-radio-button>
          </el-radio-group>

          <el-table v-if="activeName === Types.STUDENT" stripe v-loading="studentLoading" width="100%"
                    :cell-style="customCellStyle" :data="rightData.studentList" :key="Types.STUDENT">
            <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="80" align="center" prop="studentName"
                             label="姓名"/>
            <el-table-column key="score" min-width="80" align="center" prop="score" label="积分"/>
            <el-table-column key="grade" min-width="100px" align="center" prop="classAlias" label="班级"/>
            <el-table-column key="sex" min-width="50px" 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 width="80" 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="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="180px" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="getStudentDetail(scope.row.id)">
                  学生详情
                </el-button>
                <el-button type="text" size="mini" @click="getParentInfo(scope.row)">
                  家长信息
                </el-button>
              </template>
            </el-table-column>
          </el-table>


          <el-table v-else v-loading="teacherLoading" stripe border style="width: 100%" :cell-style="customCellStyle"
                    :data="rightData.teacherList" :key="Types.TEACHER">
            <el-table-column label="头像" align="center" width="100" prop="picUrl">
              <template slot-scope="scope">
                <ListImage :image-url="isEmptyTeacherUrl(scope.row.picUrl, scope.row.sex)"></ListImage>
              </template>
            </el-table-column>
            <el-table-column label="老师名称" align="center" prop="teacherName"/>
            <el-table-column label="性别" align="center" width="55" prop="sex">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
              </template>
            </el-table-column>
            <el-table-column label="工作编号" width="180px" align="center" prop="teacherCode"/>
            <el-table-column label="老师电话" width="180px" align="center" prop="teacherTel"/>
            <el-table-column label="任教课程" align="center" prop="courseName"></el-table-column>
            <el-table-column label="学历" align="center" prop="education">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.education" :value="scope.row.education"/>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-search" @click="getTeacherDetail(scope.row.teacherId)">
                  老师详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <ExPagination :total="activeName === Types.STUDENT ? studentTotal : teacherTotal"
                        :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"
                        @pagination="getClassDetails">
          </ExPagination>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog :title="personDetail.title" :visible.sync="personDetail.open" width="1200px">
      <el-form v-if="personDetail.isStudent" ref="studentForm" :model="studentForm" disabled label-width="114px">
        <el-form-item prop="avatar" label-width="0" style="display: flex; justify-content: center;">
          <el-image :src="isEmptyAvatar(studentForm.avatar)" :preview-src-list="[isEmptyAvatar(studentForm.avatar)]"
                    style="width: 178px; height: 178px; border-radius: 50%">
            <div slot="error">
              <img :src="isEmptyAvatar(studentForm.avatar, studentForm.sex)"
                   style="width: 178px; height: 178px; border-radius: 50%">
            </div>
          </el-image>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="姓名：" prop="studentName">
              <el-input placeholder="请输入姓名" v-model="studentForm.studentName" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号：" prop="idCard">
              <el-input placeholder="请输入身份证号" v-model="studentForm.idCard" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别：" prop="sex">
              <el-select v-model="studentForm.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="studentForm.nativePlace"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期：" prop="birthday">
              <el-date-picker v-model="studentForm.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-input v-model="studentForm.className" clearable></el-input>-->
            <el-form-item label="班级：" prop="classAlias">
              <el-input v-model="studentForm.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="studentForm.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="studentForm.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="studentForm.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="studentForm.provincialNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="全国学籍号：" prop="nationalNumber">
              <el-input placeholder="请输入全国学籍号" v-model="studentForm.nationalNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族：" prop="nation">
              <el-select v-model="studentForm.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="telephone">
              <el-input placeholder="请输入联系电话" v-model="studentForm.telephone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现住地址：" prop="homeAddress">
              <el-input placeholder="请输入现住地址" v-model="studentForm.homeAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="通讯地址：" prop="postalAddress">
              <el-input placeholder="请输入通讯地址" v-model="studentForm.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="studentForm.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="studentForm.enrollmentYear" 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="studentForm.enrollmentTime" 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="studentForm.platform"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="初中学校：" prop="juniorSchool">
              <el-input placeholder="请输入初中学校" v-model="studentForm.juniorSchool"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校园一卡通：" prop="oneCard">
              <el-input placeholder="请输入校园一卡通号码" v-model="studentForm.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="studentForm.birthAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="户口所在地：" prop="registeredAddress">
              <el-input placeholder="请输入户口所在地" v-model="studentForm.registeredAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="户口性质：" prop="registeredType">
              <el-select v-model="studentForm.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="studentForm.region"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="外语语种：" prop="foreignLanguages">
              <el-input placeholder="请输入外语语种" v-model="studentForm.foreignLanguages"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="政治面貌：" prop="appearance">
              <el-select v-model="studentForm.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="studentForm.bloodType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="健康状况：" prop="health">
              <el-input placeholder="请输入健康状况" v-model="studentForm.health"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="港澳台侨：" prop="otherRegions">
              <el-input placeholder="请输入港澳台侨" v-model="studentForm.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="studentForm.floatingPopulation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="独生子女：" prop="onlyChild">

              <el-select v-model="studentForm.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="studentForm.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="8">
            <el-form-item label="积分：" prop="score">
              <el-input placeholder="请输入积分" v-model="studentForm.score"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="接收资助状况：" prop="support">
              <el-input placeholder="请输入接收资助状况" v-model="studentForm.support"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form v-else ref="teacherForm" :model="teacherForm" disabled label-width="114px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="教师名称" prop="teacherName">
              <el-input v-model="teacherForm.teacherName" placeholder=""/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="teacherForm.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-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model.trim="teacherForm.idCard" placeholder=""/>
            </el-form-item>
            <el-form-item label="手机号码" prop="teacherTel">
              <el-input v-model="teacherForm.teacherTel" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="picUrl">
              <template slot-scope="scope">
                <!--<AvatarUploud :imgSrc="teacherForm.picUrl"></AvatarUploud>-->
                <el-image :src="teacherForm.picUrl" :preview-src-list="[teacherForm.picUrl]"
                          style="width: 178px; height: 178px; border-radius: 50%">
                  <div slot="error">
                    <img :src="isEmptyTeacherUrl(teacherForm.avatar, teacherForm.sex)"
                         style="width: 178px; height: 178px; border-radius: 50%"/>
                  </div>
                </el-image>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-row>-->
        <!--  <el-col :span="12">-->
        <!--  -->
        <!--  </el-col>-->
        <!--  <el-col :span="12">-->
        <!--    <el-form-item label="登录密码" prop="password">-->
        <!--      <el-input v-model="teacherForm.password" placeholder="请输入登录密码" type="password" maxlength="20"-->
        <!--                show-password/>-->
        <!--    </el-form-item>-->
        <!--  </el-col>-->
        <!--</el-row>-->
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作编号" prop="teacherCode">
              <el-input v-model="teacherForm.teacherCode" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptName">
              <!--<treeselect-->
              <!--  v-model="teacherForm.deptId"-->
              <!--  :options="[]"-->
              <!--  :show-count="true"-->
              <!--  :defaultExpandLevel="2"-->
              <!--  placeholder="请选择归属部门"/>-->
              <el-input v-model="teacherForm.deptName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位" prop="postId">
              <el-select multiple v-model="teacherForm.postId" placeholder="" style="width: 100%">
                <el-option v-for="item in []" :key="item.postId" :label="item.postName"
                           :value="item.postId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleId">
              <el-select v-model="teacherForm.roleId" multiple placeholder="" style="width: 100%">
                <el-option v-for="item in []" :key="item.roleId" :label="item.roleName"
                           :value="item.roleId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker clearable v-model="teacherForm.birthday" type="date" style="width: 100%"
                              value-format="yyyy-MM-dd" placeholder=""></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="nation">
              <el-select v-model="teacherForm.nation" style="width: 100%" placeholder="">
                <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>
          <el-col :span="12">
            <el-form-item label="学历" prop="education">
              <el-select v-model="teacherForm.education" style="width: 100%" placeholder="请选择学历">
                <el-option v-for="dict in dict.type.education" :key="dict.value" :label="dict.label"
                           :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家庭住址" prop="homeAddress">
              <el-input v-model="teacherForm.homeAddress" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose(personDetail.isStudent ? 'studentForm' : 'teacherForm')">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="parentInfo.title" :visible.sync="parentInfo.open" width="800px">
      <el-form ref="teacherForm" :model="teacherForm" disabled label-width="114px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="教师名称" prop="teacherName">
              <el-input v-model="teacherForm.teacherName" placeholder=""/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="teacherForm.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-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model.trim="teacherForm.idCard" placeholder=""/>
            </el-form-item>
            <el-form-item label="手机号码" prop="teacherTel">
              <el-input v-model="teacherForm.teacherTel" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="picUrl">
              <template slot-scope="scope">
                <!--<AvatarUploud :imgSrc="teacherForm.picUrl"></AvatarUploud>-->
                <el-image :src="isEmptyTeacherUrl(scope.row.picUrl, scope.row.sex)"
                          :preview-src-list="[isEmptyTeacherUrl(scope.row.picUrl, scope.row.sex)]"
                          style="width: 178px; height: 178px; border-radius: 50%">
                  <div slot="error">
                    <img :src="isEmptyTeacherUrl(teacherForm.picUrl, teacherForm.sex)"
                         style="width: 178px; height: 178px; border-radius: 50%"/>
                  </div>
                </el-image>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作编号" prop="teacherCode">
              <el-input v-model="teacherForm.teacherCode" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptName">
              <el-input v-model="teacherForm.deptName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位" prop="postId">
              <el-select multiple v-model="teacherForm.postId" placeholder="" style="width: 100%">
                <el-option v-for="item in []" :key="item.postId" :label="item.postName"
                           :value="item.postId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleId">
              <el-select v-model="teacherForm.roleId" multiple placeholder="" style="width: 100%">
                <el-option v-for="item in []" :key="item.roleId" :label="item.roleName"
                           :value="item.roleId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker clearable v-model="teacherForm.birthday" type="date" style="width: 100%"
                              value-format="yyyy-MM-dd" placeholder=""></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="nation">
              <el-select v-model="teacherForm.nation" style="width: 100%" placeholder="">
                <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>
          <el-col :span="12">
            <el-form-item label="学历" prop="education">
              <el-select v-model="teacherForm.education" style="width: 100%" placeholder="请选择学历">
                <el-option v-for="dict in dict.type.education" :key="dict.value" :label="dict.label"
                           :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家庭住址" prop="homeAddress">
              <el-input v-model="teacherForm.homeAddress" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose(personDetail.isStudent ? 'studentForm' : 'teacherForm')">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getNewYear,
  getClassTreeList,
  getDetailInfo,
  getStudentList,
  getTeacherList
} from '@/api/smartSchool/classTeacherWork/classView'
import {getFirstLeafNode, handleTreeData} from '@/utils/utilLibrary/getTreeClass'
import {getYearList} from '@/utils/utilLibrary/getYearList'
import {CustomCellStyle} from '@/enums/customStyle'
import {getStudent} from '@/api/smartSchool/studentManage'
import {getInform} from '@/api/smartSchool/teacherManage/teacherInformation'
import {Gender, Nations} from '@/enums/common'

export default {
  name: 'ClassTeacherWorkClassView',
  dicts: ['only_child', 'regist_type', 'student_nature', 'politics_tatus', 'relationship', 'Grade', 'Class', 'grade_type', 'sys_user_sex', 'education', 'student_type', 'child_state'],
  data() {
    const Types = {
      STUDENT: '0',
      TEACHER: '1'
    }
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      clientHeight: document.body.scrollHeight + 'px',
      //保存当前学年是否代办
      isHaveData: undefined,
      parentTable: [],
      /* 民族 */
      Nations,
      /* 标签页 */
      Types,
      /* 左侧下拉树 */
      leftOptions: {
        // 头部模糊查询
        queryName: '',
        // 下拉树数据
        treeOptions: [],
        // 默认下拉树，字段
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      },
      /* 右侧数据 */
      rightData: {
        // 班级信息
        classInfo: {},
        // 学生列表
        studentList: [],
        // 教师列表
        teacherList: []
      },
      /* 查询参数 */
      queryParams: {
        classId: undefined,
        schoolYear: new Date().getFullYear(),
        pageSize: 10,
        pageNum: 1
      },
      /* 遮罩层、总数 */
      studentLoading: false,
      teacherLoading: false,
      studentTotal: 0,
      teacherTotal: 0,
      /* 列表数据 */
      infoList: [],
      /* 年份 */
      yearList: [],
      /* 详情对话框 */
      personDetail: {
        title: '学生详情',
        open: false,
        isStudent: true
      },
      /* 家长信息对话框 */
      parentInfo: {
        title: '家长信息',
        open: false,
        isParent: true
      },
      /* 学生详情表单 */
      studentForm: {},
      /* 老师详情表单 */
      teacherForm: {},
      /** 班级详情 */
      classInfo: {},
      /* 班徽 */
      imageUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      /* 当前选中标签页 */
      activeName: Types.STUDENT,
      // 自定义单元格样式
      customCellStyle: CustomCellStyle
    }
  },
  computed: {
    resolveGradeType() {
      return value => {
        const result = this.dict.type.grade_type.find(item => item.value == value)
        return result ? result.label : ''
      }
    }
  },
  created() {
    //获取最新年份
    this.newYear();
    // 获取班级下拉树数据
    this.getTreeData()
    this.yearList = getYearList()
  },
  methods: {


    newYear() {
      getNewYear().then((res) => {
        this.queryParams.schoolYear = res.schoolYear
        this.handleYearChange(res.schoolYear)
      })
    },

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

    /** 获取班级下拉树数据 */
    getTreeData() {
      getClassTreeList(this.queryParams)
        .then(response => {
          console.log(response, 7878787878)
          this.isHaveData = response.data.length
          this.$nextTick(() => {
            try {
              this.leftOptions.treeOptions = handleTreeData(response.data, this.dict.type.grade_type, this.dict.type.Grade)
            } catch (exception) {
              this.leftOptions.treeOptions = []
            }
            const searchItem = getFirstLeafNode(this.leftOptions.treeOptions[0])
            this.handleNodeClick.apply(undefined, [searchItem])
          })
        })
        .catch(error => {
        })
    },

    /** 筛选节点 */
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    /** 节点单击事件 */
    handleNodeClick(data) {
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(data.id)
      })
      if (!data.hasOwnProperty('children') || data.children == null) {
        if (data.hasOwnProperty('id')) {
          this.queryParams.classId = data.id
          this.getClassDetails()
          this.getClassBaseInfo(this.queryParams.classId)
        } else {
          this.rightData.studentList = []
          this.rightData.teacherList = []
        }
      }
    },
    // 处理学年更改时
    handleYearChange(value) {
      this.queryParams.pageNum = 1
      this.classInfo = {}
      this.rightData.classInfo = {}
      this.rightData.studentList = []
      this.rightData.teacherList = []
      this.getTreeData()
    },


    /** 查询班级信息 */
    getClassDetails() {
      if (!this.isHaveData) {
        return
      }
      // TODO： 调用接口获取数据
      this.queryParams.pageNum = 1
      if (this.activeName === this.Types.STUDENT) {
        this.studentLoading = true
        getStudentList(this.queryParams)
          .then(response => {
            this.studentLoading = false
            this.rightData.studentList = response.rows
            this.studentTotal = response.total
          })
          .catch(error => {
            this.studentLoading = false
          })
      } else {
        this.teacherLoading = true
        getTeacherList(this.queryParams)
          .then(response => {
            this.teacherLoading = false
            this.rightData.teacherList = response.rows
            this.teacherTotal = response.total
          })
          .catch(error => {
            this.teacherLoading = false
          })
      }
    },
    /** 查询班级详情信息 */
    getClassBaseInfo(id) {
      getDetailInfo(id)
        .then(response => {
          this.classInfo = response.data
        })
        .catch(error => {
        })
    },

    /** 获取学生详情 */
    getStudentDetail(id) {
      this.$modal.loading('正在加载数据，请稍等...')
      this.personDetail.isStudent = true
      getStudent(id)
        .then(response => {
          this.$modal.closeLoading()
          this.personDetail.title = '学生详情'
          this.personDetail.open = true
          this.studentForm = response.data || {}
        })
        .catch(error => {
          this.$modal.closeLoading()
        })
    },
    /** 获取老师详情信息 */
    getTeacherDetail(id) {
      this.$modal.loading('正在加载数据，请稍等...')
      this.personDetail.isStudent = false
      getInform(id)
        .then(response => {
          this.$modal.closeLoading()
          this.personDetail.title = '老师详情'
          this.personDetail.open = true
          this.teacherForm = response.data || {}
        })
        .catch(error => {
          this.$modal.closeLoading()
        })
    },

    /** 关闭对话 */
    handleClose(name) {
      this.studentForm = {}
      this.teacherForm = {}
      this.resetForm(name)
      this.personDetail.open = false
    },

    // 【家长信息】按钮
    getParentInfo(row) {
      this.$router.push({
        path: '/teachersWork/classView/parentInfo',
        query: {
          studentId: row.id
        }
      })
    },
    /** 判断学生头像是否为空 */
    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.baseUrl + imageUrl;
    },
    /** 判断老师头像是否为空 */
    isEmptyTeacherUrl(imageUrl, sex) {
      if (!imageUrl) {
        let url = null;
        if (Gender.MALE === sex) {
          url = 'https://eos-wuxi-1.cmecloud.cn/dy-pro/image/2022/08/09/8a6c1334494d418d8a53cc7bf5abd668.jpg';
        } else {
          url = 'https://eos-wuxi-1.cmecloud.cn/dy-pro/image/2022/08/09/b076ed42bfca4a8cae062dfffd5f3618.jpg\'';
        }
        return url
      } else
        return this.baseUrl + imageUrl;
    }
  }
}
</script>

<style lang="scss" scoped>
.classes-info-table table tbody tr td.el-table__cell:nth-child(odd) {
  color: #a6a5a5;
  width: 120px;
}

.classes-info__edit {
  color: #1c84c6;

  &:hover {
    color: #00afff;
    cursor: pointer;
  }
}

.classes-image-container {
  display: flex;

  .classes-image {
    margin: auto;
    width: 178px;
    height: 178px;
    border-radius: 50%;
  }
}

// 重写标题样式
.form-header {
  margin: 8px 0px 25px 0px;
}
</style>
