<template>
  <div class="user">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="昵称">
            <el-input v-model="searchFrom.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="教师类型">
            <el-select v-model="searchFrom.type" placeholder="请选择" @change="getUser" clearable>
              <el-option
                v-for="item in teacherTypeOption"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" plain @click="getUser">搜索</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="8" v-if="!$store.state.readonly">
          <el-form-item>
            <el-button type="success" plain @click="add">新增教师</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="userList"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="alias"
        label="微信号">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          {{scope.row.status === 0 ? '正常' : '禁用'}}
        </template>
      </el-table-column>
      <el-table-column
        label="二维码">
        <template slot-scope="scope">
          <a :href="scope.row.qr">
            <img class="shortcut" :src="scope.row.qr"/>
          </a>
        </template>
      </el-table-column>
      <el-table-column
        label="类别">
        <template slot-scope="scope">
          {{scope.row.type | teacherType}}
        </template>
      </el-table-column>
      <el-table-column
        width="280"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="goToTeacherDetail(scope.row)">
            查看详情
          </el-button>
          <el-button size="mini" plain type="warning" @click="edit(scope.row)" v-if="!$store.state.readonly">
            编辑
          </el-button>
          <el-button size="mini" plain type="danger" @click="delTeacher(scope.row)" v-if="$store.state.deletePermission && !$store.state.readonly">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <dialog-com :dialogObj="dialogObj"  @changeShow="changeShow" @reflash="getUser"/>
  </div>
</template>

<script>
  import {getTeacherListApi,delTeacherApi} from "../../service/api";
  import {TEACHERTYPE} from "../../util/wordbook";
  import page from '../framework/page'
  import dialogCom from './dialog'
  export default {
    name: "index",
    data(){
      return {
        searchFrom:{
          name:'',
        },
        userList:[],
        total:0,
        nowPage:1,
        limit: 10,
        dialogObj:{
          type:0,
          show:false,
          id:''
        },
        dialogDetailObj:{
          show:false,
          title:'班级列表',
          id: ''
        },
        teacherTypeOption: [
          {
            id: 0,
            label: '老师'
          },
          {
            id: 1,
            label: '新星妈妈'
          },
          {
            id: 2,
            label: '推广人'
          },
          {
            id: 3,
            label: '市场'
          }
        ]
      }
    },
    components:{
      page,
      dialogCom
    },
    filters:{
      teacherType(value){
        return TEACHERTYPE[value]
      }
    },
    mounted(){
      this.getUser()
    },
    methods:{
      onPageChange(val){
        this.nowPage = val
        this.getUser()
      },
      onSizeChange(val){
        this.limit = val
        this.nowPage = 1;
        this.getUser()
      },
      getUser(){
        let json = {
            limit: this.limit,
            page: this.nowPage
        }
        if (this.searchFrom.type || this.searchFrom.type === 0) {
            json.type = this.searchFrom.type
        }
        if (this.searchFrom.name) {
          json.name = this.searchFrom.name
        }
        getTeacherListApi(json).then(res=>{
          this.userList = res.list;
          this.total = res.total
        })
      },
      edit(data){
        this.dialogObj.id = data.id;
        this.dialogObj.type = 2;
        this.dialogObj.show = true
      },
      add(){
        this.dialogObj.type = 0;
        this.dialogObj.show = true
      },
      detail(data){
        this.dialogObj.id = data.id;
        this.dialogObj.type = 1;
        this.dialogObj.show = true
      },
      delTeacher(data){
        this.$confirm('此操作将删除该账号?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delTeacherApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getUser()
          });
        });
      },
      changeShow(data){
        this.dialogObj.show=data
      },
      classDetail(row){
        this.dialogDetailObj = {
          show:true,
          title:row.name + '班级详情',
          id: row.id
        }
      },
      goToTeacherDetail(row){
        this.$router.push('/teacher/'+ row.id);
      }

    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .user{
    height: 100%;
    overflow: auto;
    padding: 20px 0;
    .btn-content{
      text-align: center;
    }
  }
  .shortcut {
    width: 50px;
  }
</style>
