<template>
  <div class="app-container fixed-scroll-error">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <el-card class="scrollable-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 type="flex" justify="end">-->
        <!--  <div class="classes-info__edit">-->
        <!--    <i class="el-icon-edit"></i>-->
        <!--    <span v-html="`&nbsp;编辑`"></span>-->
        <!--  </div>-->
        <!--</el-row>-->
        <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>
                    </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="200px" fixed="right">
              <template slot-scope="scope">
                <!--                <el-button-->
                <!--                  type="text"-->
                <!--                  size="mini"-->
                <!--                  icon="el-icon-edit-outline"-->
                <!--                  @click="getStudentEvaluation(scope.row)"-->
                <!--                >评测-->
                <!--                </el-button>-->
                <el-button type="text" size="mini" icon="el-icon-edit-outline" @click="parentsInfo(scope.row)">家长信息
                </el-button>
                <el-button type="text" size="mini" icon="el-icon-edit-outline" @click="studentInfo(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="isEmptyAvatar(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="studentForm.avatar" :preview-src-list="[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="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-col :span="8">
            <el-form-item label="平台：" prop="platform">
              <el-input placeholder="请输入平台" v-model="studentForm.platform"></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="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>
  </div>
</template>

<script>
import {
  getClassTreeList,
  getDetailInfo,
  getStudentList,
  getTeacherList
} from "@/api/smartSchool/classAdviser/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";
import { getNewYear } from "@/api/smartSchool/gradeWork/classView";

export default {
  name: "ClassAdviserClassView",
  dicts: ['only_child', 'regist_type', 'Grade', 'Class', 'grade_type', 'sys_user_sex', 'education', 'student_type', 'child_state', 'student_nature', 'politics_tatus'],
  data() {
    const Types = {
      'STUDENT': '0',
      'TEACHER': '1'
    };
    return {
      clientHeight: document.body.scrollHeight + 'px',
      yearClass: "",
      baseUrl: process.env.VUE_APP_BASE_API,
      /* 民族 */
      Nations,
      /* 标签页 */
      Types,
      /* 左侧下拉树 */
      leftOptions: {
        // 头部模糊查询
        queryName: '',
        // 下拉树数据
        treeOptions: [],
        // 默认下拉树，字段
        defaultProps: {
          children: "children",
          label: "label"
        },
      },
      /* 右侧数据 */
      rightData: {
        // 班级信息
        classInfo: {},
        // 学生列表
        studentList: [],
        // 教师列表
        teacherList: []
      },
      /* 查询参数 */
      queryParams: {
        gradeId: 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
      },
      /* 学生详情表单 */
      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.yearList = getYearList();
  },
  methods: {
    newYear() {
      getNewYear().then((res) => {
        this.queryParams.schoolYear = res.schoolYear
        // console.log(this.queryParams.schoolYear,8888888)
        // this.handleYearChange(res.schoolYear)
        // this.getList()
        this.getTreeData();
      })
    },
    /** 更多下拉菜单 */
    handleCommand(command, row) {
      this[command].apply(undefined, [row])
    },
    // 家长信息
    parentsInfo(row) {
      const id = row.id
      this.$router.push({
        path: '/classAdviser/classView/parentInfo',
        query: { studentId: row.id }
      })
    },
    //学生信息
    studentInfo(row) {
      const id = row.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();
      })
    },


    // newYear() {
    //   getNewYear().then((res) => {
    //     this.queryParams.schoolYear = res.schoolYear
    //     this.handleYearChange(res.schoolYear)
    //   })
    // },
    /** 获取班级下拉树数据 */
    getTreeData() {
      getClassTreeList(this.queryParams).then(response => {
        if (response.data == false) {
          this.yearClass = 0
          this.leftOptions.treeOptions = []
          this.classInfo = {}
          this.rightData.studentList = []
          this.rightData.teacherList = []
        } else {
          this.yearClass = 1
          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.gradeId = data.id;
          this.getClassDetails();
          this.getClassBaseInfo(this.queryParams.gradeId);
        } else {
          this.rightData.studentList = [];
          this.rightData.teacherList = [];
        }
      }
    },
    // 处理学年更改时
    handleYearChange(value) {
      this.queryParams.pageNum = 1;
      this.queryParams.schoolYear = value;
      this.getTreeData()
    },

    /** 查询班级信息 */
    getClassDetails() {
      if (this.yearClass != 1) {
        return; // 年级不是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;
        })
      }
    },

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

    /** 查询班级详情信息 */
    getClassBaseInfo(id) {
      getDetailInfo(id).then(response => {
        this.classInfo = response.data;
      }).catch(error => {
      })
    },
    // resolveAvatar(url, sex) {
    //   // return (url, sex) => {
    //     return this.isEmptyAvatar(url, sex);
    //   // }
    // },

    /** 获取学生详情 */
    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;
    },

    // 【测评】按钮
    getStudentEvaluation(row) {
      console.log(row);
      this.$router.push({
        path: "/classView/comprehensiveEvaluation",
        query: {
          stuId: row.id,
          studentName: row.studentName,
          schoolNo: row.schoolNo
        }
      })
    },
    /** 判断学生头像是否为空 */
    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;
}

.scrollable-card {
  overflow: auto;
}
</style>
