<!--学生管理-->
<template>
  <div class="app-container student">
    <div v-show="pageType == 1" class="student-one-box">
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" v-show="showSearch">
          <!--v-hasPermiRouter="['laboratory:plan:add']"-->
          <el-form-item label="" prop="searchValue">
            <el-input
              maxLength="20"
              v-model="queryParams.searchValue"
              placeholder="姓名/学号/手机号码"
              clearable
              style="width: 180px"
            />
          </el-form-item>
          <el-form-item label="" prop="deptId">
            <el-select v-model="queryParams.deptId" clearable placeholder="请选择学院" style="width:160px;">
              <el-option
                v-for="item in collegeOptions"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="status">
            <el-select v-model="queryParams.state" clearable placeholder="请选择状态" style="width:160px;">
              <el-option label="启用" :value="true"></el-option>
              <el-option label="停用" :value="false"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="cardNumSimple">
            <el-select v-model="queryParams.cardNumSimple" clearable placeholder="请选择校园卡" style="width:160px;">
              <el-option
                v-for="item in professionOptions"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-hasPermiRouter="['system:user:import']">
            <import-component :importConfig="importConfig"></import-component>
          </el-form-item>
          <el-form-item v-hasPermiRouter="['system:user:export']">
            <export-component :exportConfig="exportConfig"></export-component>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
          <p class="page-submit-common-style-button"
             style="float: right;"
             @click="addButton"
             v-hasPermiRouter="['system:user:add']"
          >新增</p>
          <p class="page-add-common-style-button"
             style="float: right;margin-right:20px;"
             @click="bindingCard"
             v-hasPermiRouter="['system:user:batch']"
          >批量绑卡</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box"  border :data="userList" @selection-change="handleSelectionChange" ref="table-box" :row-key="getRowKeys">
          <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
          <el-table-column label="序号"  width="50" align="center"  type="index"/>
          <el-table-column label="姓名" align="left" prop="userName"/>
          <el-table-column label="学号" align="left" prop="account" width="180">
            <template slot-scope="scope">
              <div style="display: flex">
                <span style="flex:1;">{{scope.row.account}}</span>
                <el-switch
                  v-hasPermiRouter="['system:user:edit']"
                  @click.native="stateChange(scope.row)"
                  class="switch captcha-img"
                  :active-value="true"
                  :inactive-value="false"
                  active-color="#0183FA"
                  inactive-color="#999"
                  v-model="scope.row.state"
                  active-text="启用"
                  inactive-text="停用"
                  disabled
                ></el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="手机号码" align="left" prop="mobile" show-overflow-tooltip width="162"/>
          <el-table-column label="学院" align="left" prop="deptName" show-overflow-tooltip width="200"/>
          <el-table-column label="专业" align="left" prop="majorName" show-overflow-tooltip width="180"/>
          <el-table-column label="学生类别" align="left" prop="education" show-overflow-tooltip width="149">
            <template slot-scope="scope">
              <p v-for="item in educationOptions" v-if="item.value == scope.row.education">{{item.label}}</p>
            </template>
          </el-table-column>
          <el-table-column label="班级" align="center" prop="gradeName" show-overflow-tooltip width="100"/>
          <el-table-column label="导师" align="center" prop="tutorUserName" show-overflow-tooltip width="150"/>
          <el-table-column label="操作" align="left" width="160" class-name="small-padding fixed-width" v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   v-hasPermiRouter="['system:user:detail']"
                   @click="infoButton(scope.row)"
                >详情</p>
                <el-dropdown @command="moreClick" v-if="tableDropdownType">
                  <p class="table-button-p">更多>></p>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;" :command="{row:scope.row,command:1}"
                                      v-hasPermiRouter="['system:user:edit']">编辑</el-dropdown-item>
                    <el-dropdown-item style="margin:0 10px;" :command="{row:scope.row,command:2}"
                                      v-hasPermiRouter="['system:user:del']">删除</el-dropdown-item>
                    <!--<el-dropdown-item style="margin:0 10px;" :command="{row:scope.row,command:3}"-->
                                      <!--v-hasPermiRouter="['system:user:reset']">重置密码</el-dropdown-item>-->
                  </el-dropdown-menu>
                </el-dropdown>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;">
          <!--<p style="flex:4;"></p>-->
          <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;margin-top:20px;font-size:14px;color:#999;">
            <i class="el-icon-warning" style="color:#0183FA;"></i>
            已选择 {{selectedNum}} 项
          </p>
          <div style="flex:5;">
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="total>0"
                        :total="total"
                        style="margin:0;"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
            />
          </div>
        </div>
      </div>
    </div>
    <add-page v-if="pageType == 2" :editType="editType" :propsData="propsData" :titleName="titleName"></add-page>
    <binding-card-page v-if="pageType == 3" :ids="ids"></binding-card-page>
    <!--重置密码-->
    <el-dialog title="重置密码" :visible.sync="reviseOpen" width="600px" append-to-body class="teacher-revise-dialog-box">
      <p class="teacher-text-p">确定要重置该账号的密码吗？</p>
      <p class="teacher-text-p">确定操作后，该账号密码将重置为系统初始密码。</p>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="offTeacherResetPwd">取消</p>
        <p class="dialog-footer-button-primary" @click="teacherResetPwd">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import addPage from "./addPage.vue"
import bindingCardPage from "./bindingCardPage.vue"
import { systemUserList,systemUserEditState,systemUserResetPasswd,
  systemUserDelete,systemUserDetail,getDeptDropList  } from "@/api/commonality/permission";
import { getDicts } from "@/api/commonality/noPermission";
import exportComponent from "@/components/exportComponent/exportComponent.vue";
import importComponent from "@/components/importComponent/importComponent.vue";
export default {
  name: "User",
  components: {
    addPage,
    bindingCardPage,
    exportComponent,
    importComponent
  },
  data() {
    return {
      importConfig:{
        upLoadApi:'/system/user/importStudent',                //上传接口地址
        downloadApi:'/system/user/importTemplate',          //下载模板接口地址
        downloadCustomKey:'userType',                                      //下载模板自定义参数KEY(非必填)
        downloadCustomValue:2,                                    //下载模板自定义参数VALUE(非必填)
        loseApi:'/system/user/importErrorData',             //失败报表接口地址
        loseCustomKey:'userType',                                          //失败报表自定义参数KEY(非必填)
        loseCustomValue:2,                                        //失败报表自定义参数VALUE(非必填)
        fileName:'学生导入模板',                                       //下载模板命名
      },
      exportConfig:{
        api:'/system/user/export',              //导出接口地址
        ids:'',                                        //勾选导出,勾选的IDS
        fileName:'学生信息',                           //导出文件的命名
        customKey:'userType',                                //自定义参数KEY(非必填)
        customValue:2                               //自定义参数VALUE(非必填)
      },
      tableButtonType:this.hasPermiDom(['system:user:detail','system:user:edit','system:user:del','system:user:reset',]),
      tableDropdownType:this.hasPermiDom(['system:user:edit','system:user:del','system:user:reset',]),
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: [],
      // 弹出层标题
      title: "",
      //专业列表
      professionOptions:[
        {
          postName:"未绑定",
          postId:"0",
        },
        {
          postName:"已绑定",
          postId:"1",
        },
      ],
      //学院列表
      collegeOptions:[],
      // 部门名称
      deptName: undefined,
      // 查询参数
      queryParams: {
        page: 1,
        pageSize:20,
        deptId:"",
        searchValue: "",
        state: "",
        cardNumSimple: "",
        userType:2,
      },
      //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
      selectedNum:0,
      //页面选项
      pageType:1,
      editType:false,
      //组件传参数据
      propsData:{},
      //弹窗状态
      shadeType:1,
      //类别列表
      educationOptions:[],
      //重置密码id
      reviseOpen:false,
      userId:"",
      currentDate:'',
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getList();
    this.getAll();
  },
  methods: {
    //批量绑卡页面跳转与数量检测
    bindingCard(){
      let self = this;
      if(self.ids.length<1){
        self.msgError('请先勾选人员')
        return
      }
      if(self.ids.length>50){
        self.msgError('批量绑卡最多只可选中50条数据,当前选中了'+self.ids.length+'条.')
        return
      }
      this.pageType = 3;
    },
    offTeacherResetPwd(){
      this.$set(this,'reviseOpen',false);
    },
    //重置密码
    teacherResetPwd(){
      let obj = {
        userId:this.userId
      }
      systemUserResetPasswd(obj).then(response => {
        this.reviseOpen = false;
        this.msgSuccess(response.message);
      });
    },
    //启用/停用
    stateChange(row){
      let text = row.state ? "停用" : "启用";
      this.$confirm('确认要' + text + '"' + row.userName + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return systemUserEditState({userId:row.userId, state:!row.state});
      }).then(() => {
        this.getList();
        this.msgSuccess("操作成功");
      }).catch(function() {
      });
    },
    //获取学院列表&学生类别查询
    getAll(){
      //获取学院列表
      getDeptDropList({level:2,deptType:1}).then(response => {
        this.collegeOptions = response.data;
      });
      //学生类别查询
      getDicts('education').then(response => {
        this.educationOptions = response.data;
      });
    },
    outPage(){
      this.pageType = 1;
      this.getList();
    },
    //新增按钮
    addButton(){
      this.pageType = 2;
      this.propsData = {};
      this.titleName = '新增学生';
      this.editType = false;
    },
    //详情按钮
    infoButton(row){
      systemUserDetail({userId:row.userId}).then(response => {
        this.propsData = response.data;
        this.titleName = '学生详情';
        this.editType = true;
        this.pageType = 2;
      });
    },
    //更多选项
    moreClick(item){
      let self = this;
      if(item.command == 1){
        systemUserDetail({userId:item.row.userId}).then(response => {
          this.titleName = '学生编辑';
          this.propsData = response.data;
          this.editType = false;
          this.pageType = 2;
        });
      }else if(item.command == 2){
        const userIds = item.row.userId || this.ids;
        this.$confirm('确认删除"'+item.row.userName+'"?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return systemUserDelete({userId:userIds});
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      }else if(item.command == 3){
        if(item.row.source == 1){
          this.title = "重置密码";
          this.userId = item.row.userId;
          this.reviseOpen = true;
        }else{
          // 系统对接用户 跳转至统一认证平台
        }
      }
    },
    //=========表格扩展选择器方法---开始=========
    /*===记录勾选数据===
      需要再el-table 添加  :row-key="getRowKeys"
      需要在selection 添加 :reserve-selection="true"
    */
    getRowKeys(row) {
      return row.userId
    },
    //=========表格扩展选择器方法---结束=========
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      systemUserList(obj).then(response => {
          this.userList = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageType = 1;
      this.queryParams.page = 1;
      this.$set(this,"selectedNum",0);
      this.$refs['table-box'].clearSelection()
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.$set(this,'queryParams',{
        page: 1,
        pageSize:20,
        deptId:"",
        searchValue: "",
        state: "",
        cardNumSimple: "",
        userType:2,
      });
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedNum = selection.length;
      this.ids = selection.map(item => item.userId);
      this.exportConfig.ids = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
  }
};
</script>

<style scoped lang="scss">
  .student {
    display: flex!important;
    flex-direction: column;
    overflow: hidden!important;
    .sheet-expand-box{
      height:40px;
      display:flex;
      background:rgba(1,131,250,0.1);
      border-radius: 5px;
      margin-bottom:18px;
      font-size:14px;
      i{
        margin:10px 16px 0 14px;
        height:20px;
        width:20px;
        font-size:20px;
        display: block;
      }
      p{
        margin:0;
      }
      p:nth-child(2){
        width:132px;
        font-size:14px;
        height:40px;
        line-height:40px;
      }
      p:nth-child(3){
        width:60px;
        font-size:14px;
        height:40px;
        line-height:40px;
        margin-right:20px;
      }
      p:nth-child(4){
        width:60px;
        font-size:14px;
        height:40px;
        line-height:40px;
        margin-right:20px;
      }
      p:nth-child(5){
        font-size:14px;
        line-height:30px;
        width: 100px;
        height: 30px;
        border-radius: 6px;
        text-align: center;
        margin-top:5px;
        margin-right:20px;
      }
      p:nth-child(6){
        font-size:14px;
        line-height:30px;
        width: 100px;
        height: 30px;
        border-radius: 6px;
        text-align: center;
        margin-top:5px;
      }
    }
    .button-box{
      width:300px;
      display: flex;
    }
    .data-max-box{
      position:relative;
      margin-top:-20px;
      p{
        margin:0;
      }
      .info-title-p{
        line-height:80px;
        font-size:18px;
        padding-left:20px;
        border-bottom:1px solid #E0E0E0;
      }
      .info-data-box{
        height:100px;
        display:flex;
        padding-left:20px;
        p{
          width:270px;
          line-height:60px;
          font-size:16px;
        }
      }
      .reset-button-p{
        position: absolute;
        right:0;
        top:20px;
        cursor: pointer;
        text-align: center;
        width: 70px;
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        font-size:14px;
        border: 1px solid #DCDFE6;
        color: #606266;
        background: #ffffff;
      }
    }
    .student-one-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden!important;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      .top-max-box{
        flex:1;
        display: flex;
        overflow: hidden!important;
        .left-max-box{
          width:250px;
        }
        .center-max-box{
          border-right:2px dashed #E0E0E0;
          margin-right:50px;
          margin-top:20px;
        }
        .right-max-box{
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden!important;
          .min-list-box{
            flex: 1;
            overflow: hidden!important;
            display: flex;
            margin-bottom:15px;
          }
        }
      }
      .bottom-max-box{
        height:35px;
      }
      .form-box{
        .form-dropdown-box{
          display: flex;
          margin:0;
          padding:0 10px;
          cursor: pointer;
          height:40px;
          img:nth-child(1){
            width:16px;
            height:16px;
            margin-top:12px;
          }
          p{
            width:47px;
            text-align: center;
            font-size:14px;
            margin:0;
            line-height:40px;
          }
          img:nth-child(3){
            width:10px;
            height:6px;
            margin-top:17px;
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .teacher-revise-dialog-box{
    .teacher-text-p{
      margin-left:110px;
      font-size:16px;
    }
    .teacher-revise-dialog-button-box{
      display: flex;
      width:190px;
      margin:0 auto;
      p{
        margin:0;
        width:70px;
        height:30px;
        line-height:30px;
        font-size:14px;
      }
      p:nth-child(1){
        margin-right:50px;
      }
    }
  }
  .teacher-import-dialog-box{
    .teacher-import-dialog-upLoad-box{
      .el-upload{
        width:450px;
        margin:0 55px;
        .el-upload-dragger{
          width:450px;
          .el-icon-upload{
            font-size:100px;
            color:#CBE6FE;
          }
          .el-upload__text{
            margin-top:20px;
          }
        }
      }
      .el-upload__tip{
        margin-left:60px;
        font-size:14px;
        margin-top:10px;
      }
      .el-upload-text-box{
        background: #F5F5F5;
        border-radius: 10px;
        margin:15px 30px 0;
        padding:0 20px 15px;
        overflow: hidden;
        *{
          margin:0;
        }
        .img-text-box{
          display: flex;
          margin-top:15px;
          img{
            width:16px;
            height:16px;
            margin-right:13px;
          }
          p{
            height:16px;
            line-height:16px;
            font-size:12px;
          }
        }
        .text-p{
          margin-top:15px;
          margin-left:29px;
          height:16px;
          line-height:16px;
          font-size:12px;
        }
      }
    }
    .teacher-import-dialog-button-box{
      display: flex;
      width:190px;
      margin:0 auto;
      p{
        width:70px;
        height:30px;
        line-height:30px;
        font-size:14px;
        margin:0 auto;
      }
    }
    .teacher-import-dialog-position-box{
      width:100%;
      height:100%;
      position: absolute;
      top:0;
      left:0;
      z-index: 999;
      background: rgba(255,255,255,0.4);
      border-radius:20px;
    }
  }
</style>
<style lang="scss">
  .student{
    .student-one-box{
      .switch .el-switch__label {
        position: absolute;
        display: none;
        color: #fff !important;
      }
      .switch .el-switch__label--right {
        z-index: 1;
      }
      .switch .el-switch__label--right span{
        margin-left: 10px;
      }
      .switch .el-switch__label--left {
        z-index: 1;
      }
      .switch .el-switch__label--left span{
        margin-left: 24px;
      }
      .switch .el-switch__label.is-active {
        display: block;
      }
      .switch.el-switch .el-switch__core,
      .el-switch .el-switch__label {
        width: 64px !important;
        margin: 0;
      }
    }
  }
</style>
