<template>
  <div class="u-page">
    <div style="padding-bottom: 10px;">
      <div>
        <el-row :gutter="5">
          <el-col :span="4">
            <el-select style="width: 100%" v-model="query.tsystemId" value-key="id" clearable @change="queryChangeSystem" placeholder="教师体系">
              <el-option v-for="item in systemData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select style="width: 100%" v-model="query.tlevelId" clearable value-key="id" placeholder="教师级别">
              <el-option v-for="item in queryLevelData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-input style="width: 100%" placeholder="姓名" v-model="query.name" clearable></el-input>
          </el-col>
          <!-- <el-col :span="4">
            <el-select style="width: 100%" v-model="query.salaryId" clearable value-key="id" placeholder="发薪地">
              <el-option v-for="item in placeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col> -->
          <el-col :span="8">
            <el-button icon="el-icon-search" type="primary"  @click="loadData(1)">搜索</el-button>
            <el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </div>

      <div style="margin-top:10px;padding: 0px 5px;">

        <el-button icon="el-icon-circle-plus-outline" type="primary"  @click="openDialog">新建教师</el-button>
        <el-button icon="el-icon-folder-opened" type="primary" @click="exportsExcel">导出</el-button>
      </div>
    </div>
    <el-table ref="teacherTable" style="100%" :data="tableData" @filter-change="filterChange" border stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="姓名" prop="name" fixed>
        <template slot-scope="scope">
          <span class="previewStyle" @click="handleName(scope.row)">{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="部门" prop="departName"></el-table-column>
      <!-- <el-table-column label="创建时间" sortable prop="sysCreateTime"></el-table-column> -->
      <el-table-column label="修改时间" sortable width="155" prop="sysUpdateTime"></el-table-column>
      <el-table-column label="授课时长" prop="teaching"></el-table-column>
      <el-table-column label="教师体系" prop="tsystemName"></el-table-column>
      <el-table-column label="教师级别" prop="tlevelName"></el-table-column>
      <!-- <el-table-column label="发薪地" prop="salaryName"></el-table-column> -->
      <el-table-column label="在职状态" column-key="waitStatus" width="90" :filters="[{ text: '在职', value: '0'}, { text: '离职', value: '1' }]"
      :filter-method="filterWork">
        <template slot-scope="scope">
          {{scope.row.waitStatus=='0'?'在职': scope.row.waitStatus=='1' ? '离职' :''}}
        </template>
      </el-table-column>
      <el-table-column label="认证状态" column-key="certStatus" width="90" :filters="[{ text: '未认证', value: 0}, { text: '已认证', value: 1 }]"
      :filter-method="filterCertification">
        <template slot-scope="scope">
          {{scope.row.certStatus==0 ?'未认证': scope.row.certStatus==1 ? '已认证' :''}}
        </template>
      </el-table-column>
      <el-table-column label="账号状态" column-key="status" width="90"
      :filters="[{ text: '停用', value: 2}, { text: '启用', value: 1 }]"
      :filter-method="filterStatus">
        <template slot-scope="scope">
          {{scope.row.status===2?'停用':'启用'}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作"  width="260px">
        <template slot-scope="scope">
          <el-tooltip  effect="dark" content="导出授课记录" placement="top">
            <el-button type="text" @click="exportCourse(scope.row)"  icon="el-icon-folder-opened">导出</el-button>
          </el-tooltip>
            <el-button type="text"  icon="el-icon-edit" @click="updateHandle(scope.row)">修改</el-button>
            <el-button type="text" @click="delItem(scope.row)"  icon="el-icon-delete">删除</el-button>
            <el-button type="text" @click="accountAction(scope.row)"  icon="el-icon-video-play">{{scope.row.status===2?'启用':'停用'}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 50px;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
        </el-pagination>
    </div>
    <div style="height: 50px;"></div>
    <el-dialog :title="newOrEdit" custom-class="g-dialog" width="900px" :visible.sync="dialogVisible" :close-on-click-modal='false' >
      <el-form label-width="100px" :model="form" ref="form" :rules="rules">
        <el-form-item>
          <div class="avator">
            <imageUpload dir="avatar" :value="coverImage" @success="handleUploadSuccess" @remove="removeHandle"></imageUpload>
            <div class="avatorText">
              <p>上传头像</p>
              <p>图片尺寸建议在：宽100px,高100px</p>
              <p>图片大小及类型：1.00M|.jpg.gif.png.jpeg.bmp.</p>
            </div>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span='11'>
            <el-form-item label="讲师账号" prop="account.loginName">
              <el-input v-model="form.account.loginName" :disabled="allowInput">
                <el-button slot="append" v-if="form.id == null" @click="searchUser">同步</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span='11' :offset="2">
            <el-form-item label="讲师姓名" prop="user.name">
              <el-input v-model="form.user.name" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='11'>
            <el-form-item label="讲师组织">
              <el-input v-model="form.user.departName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='11' :offset="2">
            <el-form-item label="初始授课时长">
              <el-input v-model="form.teaching"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='11'>
            <el-form-item label="讲师体系" prop="teacherBody">
              <el-select v-model="tSystemData" value-key="id" clearable @change="changeSystem">
                 <el-option v-for="item in systemData" :key="item.id" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span='11' :offset="2">
            <el-form-item label="讲师级别" prop="teacherLevel" >
              <el-select v-model="tLevelData" clearable value-key="id">
                <el-option v-for="item in levelData" :key="item.id" :label="item.name" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='11'>
            <el-form-item label="认证状态">
              <el-radio-group v-model="form.certStatus">
                  <el-radio :label="0">未认证</el-radio>
                  <el-radio :label="1">已认证</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span='11' :offset="2">
              <el-form-item label="在职状态">
                <el-radio-group v-model="form.waitStatus">
                    <el-radio :label="0">在职</el-radio>
                    <el-radio :label="1">离职</el-radio>
                </el-radio-group>
              </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input v-model="form.description" clearable type="textarea" :autosize='{ minRows: 3, maxRows: 6 }'></el-input>
          <!--<WxEditor :toobar="false" v-model="form.description" :minHeight="50"></WxEditor>-->
        </el-form-item>
        <el-form-item label="擅长课程">
          <el-input v-model="form.courses" clearable placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="saveLoading" type="primary" @click="saveHandle">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="教师详情" :close-on-click-modal="false" :visible.sync="showTeacherDetails" width="800px">
    <teacher-details v-if="teacherDetailId != ''" :id="teacherDetailsId" :newId="teacherDetailId"></teacher-details>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCloseOne()">关 闭</el-button>
      <!-- <el-button type="primary" @click="showTeacherDetails = false">确 定</el-button> -->
    </span>
</el-dialog>
  </div>
</template>

<script>
  import WxEditor from '@/components/Editor/index.vue';
  import teacherApi from "@/api/modules/teacher";
  import teacherBoeApi from "@/api/boe/teacher";
  import userApi from "@/api/system/user";
  import imageUpload from '@/components/ImageUpload/index.vue';
  import teacherDetails from './teacherDetails.vue';
  import { mapGetters } from 'vuex';
  export default {
    name: 'teacher',
    components:{imageUpload,teacherDetails,WxEditor},
    data(){
      return {
        query:{
          tsystemId:'',
          tsystemIds:'',
          tlevelId:'',
          name:'',
          salaryId:'',
          waitStatus:0,
          status:'',
          certStatus:'',
          pageIndex: 1,
          pageSize: 10,
        },
        teacherDetailId:'',//新数据id
        teacherDetailsId: '',// sid
        showTeacherDetails:false,
        tSystemData:{},
        tLevelData:{},
        fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
        pageIndex: 1,
        pageSize: 10,
        newOrEdit:'',
        count: 0,
        form:{
          account: {avatar:'',id:'',},
          user: {id:'',name:'',},
          sysId:'',
          photo:'',
          status:1,//启用
          waitStatus:0,//在职
          certStatus:0,//未认证
        },
        rules: {
          "account.loginName": [
            { required: true, message: "请输入讲师账号", trigger: "blur" },
            { max: 20, message: "长度最多20个字符", trigger: "blur" },
          ],
          "user.name": [
            { required: true, message: "请先同步录入讲师姓名", trigger: "blur" },
          ],
          "departName":[
            { required: false, message: "请先同步录入讲师组织", trigger: "blur"},
          ],
          "tSystemId":[
            { required: true, message: "请选择讲师体系", trigger: "change"},
          ],
          "tLevelId":[
            {required: true, message: "请选择讲师级别", trigger: "change"}
          ]
        },
        selectList:[],
        dialogVisible:false,
        tableData:[],
        searchName:null,
        havaInfo:false,
        shareShow:false,
        shareInfo:{
          aid:'',
          name:'',
          toType:1,
          toAid:'',
          toName:'',
          toInfo:'',
          remark:''
        },
        allowInput:false,
        loading:false,//控制点击启用停用的点击操作
        saveLoading:false,//保存控制
        systemLevelTree:[],
        systemData:[],//体系数组{id,name}
        levelData:[],//级别数组{id,name}
        queryLevelData:[],
        teacherSystemids:[],
        coverImage:'',
        placeList:[],
      }
    },
    watch:{
     showTeacherDetails(val) {
      if(!val) {
        this.teacherDetailsId = '';
        this.teacherDetailId = '';
      }
     }
    },
  mounted() {
     this.getTeachersystem();
     this.getPayrollPlace();
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    methods:{
      getPayrollPlace(){
        teacherBoeApi.getPayrollPlace().then(res=>{
          if(res.status == '200') {
            for(let i in res.result){
              this.placeList.push({
                value:i,
                label:res.result[i]
              })
            }
          }
        })
      },
      handleCloseOne() {
        // this.teacherDetailsId = '';
        this.showTeacherDetails = false;
      },
      handleName(row) {
       this.showTeacherDetails = true;
       this.teacherDetailsId = row.sysId;
       this.teacherDetailId = row.id;
      //  this.teacherDetailsId = '13BEBDBD-3D28-244D-648D-0CBD6796717C'
      },
      getTeachersystem() {
        this.systemData=[];
        teacherBoeApi.teacherSystem(this.userInfo.sysId).then(res=>{
          if(res.status == 200) {
             this.systemLevelTree=res.result;

             res.result.forEach(item => {
                this.teacherSystemids.push(item.teacher_system_id);
                this.systemData.push({
                  id:item.teacher_system_id,
                  name:item.system_name
                })
             });

            this.loadData(1);
          } else {
            this.$message.error('教师体系数据获取失败！')
            this.loadData(1);
          }
        })
      },
      queryChangeSystem(val) {
        this.query.tlevelId = '';
        let array=[];
        this.systemLevelTree.forEach(sl=>{
          if(sl.teacher_system_id==val){
            sl.teacher_level.forEach(lev=>{
              array.push({
                id:lev.teacher_level_id,
                name:lev.level_name
              })
            })
          }
        });
        this.queryLevelData=array;
      },
      changeSystem(val){
        this.tLevelData = {};
        this.form.tlevelId = '';
        this.form.tlevelName='';
        let array=[];
        this.systemLevelTree.forEach(sl=>{
          if(sl.teacher_system_id==val.id){
            sl.teacher_level.forEach(lev=>{
              array.push({
                id:lev.teacher_level_id,
                name:lev.level_name
              })
            })
          }
        });
        this.levelData=array;
      },
      reset (){
       this.query.name = '';
       this.query.tsystemId='',
       this.query.tlevelId='',
       this.query.salaryId='',
       this.query.pageIndex= 1,
       this.query.pageSize= 10,
       this.query.waitStatus='';
       this.query.certStatus='';
       this.query.status='';
       this.$refs.teacherTable.clearFilter();
       this.loadData(1);
      },
      openDialog(){
        this.saveLoading=false;
        this.newOrEdit='新建教师';
        this.allowInput=false;
        this.searchName='',
        this.form = {
          account: {avatar:'',id:''},
          user: {id:'',name:''},
          sysId:'',
          photo:'',
          status:1,//启用
          waitStatus:0,//在职
          certStatus:0,//未认证
        }
        this.tSystemData = {};
        this.tLevelData= {};
        this.coverImage = '';
        this.dialogVisible=true
      },
      filterChange(e){
         if(e.waitStatus){
           if(e.waitStatus.length==0 || e.waitStatus.length==2){
              this.query.waitStatus='';
           }
         }
         if(e.certStatus){
           if(e.certStatus.length==0 || e.certStatus.length==2){
              this.query.certStatus='';
           }
         }
         if(e.status){
           if(e.status.length==0 || e.status.length==2){
              this.query.status='';
           }
         }
         this.loadData(1);
      },
      filterWork(value,row){
        this.query.waitStatus=value;
        return row.waitStatus==value
      },
      filterCertification(value,row){
        this.query.certStatus=value;
        return row.certStatus==value
      },
      filterStatus(value,row){
        this.query.status=value;
        return row.status==value
      },
      shareItem(item){
        this.shareShow=true;
      },
      setTop(item,idx){
        let msg='已设置置顶';
        if(item.isTop){
          item.isTop=false;
          msg='已取消置顶';
        }else{
          item.isTop=true;
        }
        this.$message({message:msg,type:'success',offset:50});

      },
      setEssence(item,idx){ //没有了
        let msg='已设置精华';
        if(item.isEssence){
          item.isEssence=false;
          msg='已取消精华';
        }else{
          item.isEssence=true;
        }
        this.$message({message:msg,type:'success',offset:50});
      },
      delItem(row){
        this.$confirm('您确定要删除所选教师吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teacherApi.del(row.id).then(res =>{
            if(res.status == 200){
              if(row.sysId){
                this.deleteTeacher(row.sysId)
              }
              this.loadData(1);
              this.$message({type: 'success',message: '删除成功!',offset:50});
            }
          });
        });
      },
      deleteTeacher(id){
        teacherBoeApi.deleteTeacher(id).then(res=>{
          console.log(res);
        })
      },
      handleSelectionChange(data){
        this.selectList=data
      },
      searchUser(){
        if(this.form.account&&this.form.account.loginName){
          userApi.searchLoginName(this.form.account.loginName).then((res) => {
            if (res.status == 200 && res.result != null) {
              this.havaInfo = true;
              this.form.account = res.result.account;
              if(res.result.account.avatar != '') {
                this.coverImage = this.fileBaseUrl+res.result.account.avatar;
              }
              this.form.user = res.result;
            } else {
              this.havaInfo = false;
              this.form.account = {};
              this.form.user = {};
              this.$message({ type: "info", message: "未找到相关信息" });
            }
          });
        }
      },
      removeHandle(){
         this.form.account.avatar = '';
         this.coverImage = '';
         this.form.photo = '';
      },
      handleUploadSuccess(res){
        this.coverImage = this.fileBaseUrl + res.result.filePath;
        this.form.account.avatar = res.result.filePath;
        this.form.photo = res.result.filePath;
      },
      saveHandle(){
        this.form.tsystemId = this.tSystemData.id;
        this.form.tsystemName=this.tSystemData.name;
        this.form.tlevelId = this.tLevelData.id;
        this.form.tlevelName=this.tLevelData.name;
        this.$refs.form.validate((valid) => {
        if (valid) {
            this.saveLoading=true;
            if(this.form.id == null || this.form.id == ''){
              teacherApi.save(this.form).then((res) => {
                if (res.status == 200) {
                  //this.$message({ type: "success", message: "保存成功" });
                  this.saveBoe();
                  this.dialogVisible = false;
                  this.loadData(1);
                  this.saveLoading = false;
                }else{
                  this.$message({ type: "error", message: res.message });
                }
              }).catch(err => {
                this.saveLoading = false;
                this.$message({ type: "error", message: err });
              });
            }else{
              teacherApi.update(this.form).then((res) => {
                if (res.status == 200) {
                  this.saveBoe();
                  //this.$message({ type: "success", message: "保存成功" });
                  this.dialogVisible = false;
                  this.loadData(1);
                }else{
                  this.saveLoading = false;
                  this.$message({ type: "error", message: res.message });
                }
              }).catch(err => {
                this.saveLoading = false;
                this.$message({ type: "error", message: err });
              });
            }
          }
        });
      },
      saveBoe() {
        let data = {
            teacher_user_id:this.form.user.sysId,// 教师对应的用户的id
            teacher_id:this.form.sysId, // 教师id ，有则编辑，没有则新建教师
            teacher_type:"0", // 教师类型：0：内部讲师；1：外聘讲师；2：助教
            teacher_name:this.form.user.name, // 教师名称
            teacher_thumb_url:this.form.account.avatar, // 头像地址
            description:this.form.user.description, // 介绍
            teacher_system:this.tSystemData.name, // 体系名称
            teacher_system_id:this.tSystemData.id, // 体系id
            default_teaching_time:this.form.teaching, //初始授课时长
            teacher_level_id:this.tLevelData.id, // 讲师级别id
            teacher_level:this.tLevelData.name, // 讲师级别名称
            is_certify:this.form.certStatus, //是否认证 0:未认证 1:已认证)
            certification:"", //认证资料图片地址
            remark:this.form.description, // 备注
            email:"",  // 邮件（外部讲师填写）
            mobile_no:this.form.user.mobileNo // 手机号码（外部讲师填写）
        }
        teacherBoeApi.editTeacher(data).then(res=>{
          this.saveLoading=false;
          if(res.status == 200) {
            this.updateSysId(this.form.user.id,res.result.teacher_id);
            this.$message({ type: "success", message: "保存成功" });
          }else{
            this.$message({ type: "warning", message: "同步失败，本地已保存" });
          }
        })
      },
      updateSysId(id,sysId) {
         teacherApi.updateSysId(id,sysId).then(res=>{
            if(res.status == 200) {
              this.$message.success('教师同步成功！')
            } else {
              this.$message.success('教师同步失败！请手动同步！')
            }
         })
      },
      updateHandle(data){
        this.coverImage = '';
        this.saveLoading=false;
        this.newOrEdit='编辑教师';
        this.allowInput=true;
        teacherApi.detail(data.id).then(res => {
           if (res.status == 200) {
              const result = res.result;
              this.form = result;
              this.tSystemData = {
                id:result.tsystemId,
                name:result.tlevelName
              };
              this.tLevelData = {
                id:result.tlevelId,
                name: result.tlevelName
              };
               if(res.result.photo != '') {
                this.coverImage = this.fileBaseUrl+res.result.photo;
              }
              this.updateSystem(result.tsystemId)
              this.dialogVisible = true;
            }
        })
      },
      updateSystem(val) {
        let array=[];
        this.systemLevelTree.forEach(sl=>{
          if(sl.teacher_system_id==val){
            sl.teacher_level.forEach(lev=>{
              array.push({
                id:lev.teacher_level_id,
                name:lev.level_name
              })
            })
          }
        });
        this.levelData=array;
      },
      loadData(pageIndex) {
        if(this.systemData.length==0){
           this.$message({ type: "error", message: "您当前没有可管理的教师"});
           return;
        }
        this.query.pageIndex = pageIndex;
        this.query.tsystemIds = this.query.tsystemId || this.teacherSystemids.join();
        teacherApi.page(this.query).then((res) => {
            if (res.status == 200) {
              const result = res.result;
              this.tableData = result.list;
              this.count = result.count;
              this.loading = false;
            }
          })
          .catch((err) => {
            this.$message({ type: "error", message: "查询数据错误：" + err });
          });
      },
      //账号启用和停用
      accountAction(row){
        if(this.loading){
          return
        }
        if(row.status==2){
          teacherApi.start(row.id).then(res=>{
            if(res.status==200){
              this.$nextTick(()=>{
                row.status=1;
                this.loading=false;
                this.$message.success("启用成功")
                this.updateStatus(row);
              })
            }
          })
        }else{
          this.$confirm('您确定要停用该教师吗？', '删除提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            teacherApi.end(row.id).then(res=>{
              if(res.status==200){
                this.$nextTick(()=>{
                  row.status=2;
                  this.loading=false;
                  this.$message.success("停用成功")
                  this.updateStatus(row);
                })
              }
            })
          });
        }
      },
      updateStatus(row) {
        let status = null;
        if(row.status == 2){
          status = 1;
        } else {
          status = 2;
        }
        let param = {
          teacher_id: row.id,
          status:status,// 状态；0：临时；1：正式；2：停用
        }

        teacherBoeApi.updateStatus(param).then(res=>{
          console.log(res,'res');
        })
      },
      exportsExcel(){
        let ids = [];
        if(this.selectList.length > 0) {
          this.selectList.forEach((item,index)=>{
            ids.push(item.id);
          })
          ids = ids.join();
        }
        //post请求
        var eleForm=document.createElement('form');
        eleForm.style="display:none;";
        eleForm.method='post';
        eleForm.action=`${process.env.VUE_APP_BASE_API}/xboe/teacher/export`;
        //添加ids条件
        var hdnFilePath = document.createElement('input');
        hdnFilePath.type = 'hidden';
        hdnFilePath.name = 'ids';
        hdnFilePath.value = ids;
        eleForm.appendChild(hdnFilePath);
        //添加查询姓名
        var hdnName = document.createElement('input');
        hdnName.type = 'hidden';
        hdnName.name = 'name';
        hdnName.value = this.query.name;
        eleForm.appendChild(hdnName);
        //组织体系
        var hdnSystemIds = document.createElement('input');
        hdnSystemIds.type = 'hidden';
        hdnSystemIds.name = 'tsystemIds';
        hdnSystemIds.value = this.query.tsystemIds;
        eleForm.appendChild(hdnSystemIds);
        
        var hdnLevelId = document.createElement('input');
        hdnLevelId.type = 'hidden';
        hdnLevelId.name = 'tlevelId';
        hdnLevelId.value = this.query.tlevelId;
        eleForm.appendChild(hdnLevelId);

        document.body.appendChild(eleForm);
        eleForm.submit();
        document.body.removeChild(eleForm);
      },
      exportCourse(row){
        if(!row.sysId){
           this.$message({message:'无原系统教师关联，只导出新系统的教师课程',type:'warning'});
        }
        var eleLink = document.createElement('a');
        eleLink.download = '教师授课信息';
        eleLink.style.display = 'none';
        eleLink.setAttribute('target', '_blank');
        eleLink.href = `${process.env.VUE_APP_BASE_API}/xboe/teacher/compose/export/courses?tid=${row.id}&sysId=${row.sysId}&courseType=0,1,2`;
        document.body.appendChild(eleLink);
        eleLink.click();
        document.body.removeChild(eleLink);
      },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.query.pageIndex = 1
      this.loadData(this.query.pageIndex)
    },
    handleCurrentChange(val) {
      this.query.pageIndex = val
      this.loadData(this.query.pageIndex)
    },
    }
  }
</script>

<style lang="scss" scoped>
  .el-form{
    .avator{
      height: 200px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 5px 20px;
      border: 1px solid rgb(219, 219, 219);
      .avatorText{
        // width: 500px;
        p{
          line-height: 1;
          margin: 30px auto 30px 20px;
        }
      }
    }
  }
  .article-status1{
    padding: 3px;
    border: 1px dotted #1EA0FA;
    color:#1EA0FA;
  }
  .article-status2{
    padding: 3px;
    border: 1px dotted #00aa00;
    color:#00aa00;
  }
  .article-status3{
    padding: 3px;
    border: 1px dotted #ff0000;
    color:#ff0000;
  }
  .article-list {
    margin: 5px 0;
    border: 1px solid #dddddd;
    padding: 10px;
  }

  .article-info {
    .article-info-title {
      font-size: 16px;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      .article-info-date {
        width: 150px;
        height: 40px;
        line-height: 40px;
        float: right;
        font-weight: 200;
        color: #999999;
        i {
          margin-right: 5px;
        }
      }
    }
    .article-info-summary {
      height: 65px;
      color: #999999;
    }
    .article-info-tools {
      height: 30px;
      .article-info-tools-auth {
        float: left;
        font-size: 13px;
        color: #999999;
        img {
          margin-right: 10px;
          width: 30px;
          border: 1px solid #eee;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
      .article-info-tools-btns {
        float: right;
        .article-info-tools-btn {
          margin: 0 0 0 15px;
        }
      }
    }
  }
.case-row-btn{
  line-height: 25px;

  button{
    height: 20px;
    padding: 3px 20px;
  }
}
</style>
