<template>
  <div class="user" v-loading="loading">

    <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline>
      <el-form-item label="设备名称">
        <el-select
          filterable placeholder="请选择" clearable
          v-model="searchFrom.teacher_id" @change="getData" :disabled="!teacherList.length">
          <el-option
            v-for="(data,index) in teacherList"
            :key="index"
            :label="data.name"
            :value="data.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="顾问名称">
        <el-select
          filterable placeholder="请选择" clearable
          v-model="searchFrom.staff_id" @change="getData" :disabled="!staffList.length">
          <el-option
            v-for="(data,index) in staffList"
            :key="index"
            :label="data.name"
            :value="data.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="入职日期">
        <el-date-picker
          v-model="startTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00','23:59:59']"
          @change="onSearch">
        </el-date-picker>
      </el-form-item>-->
      <el-form-item>
        <el-button @click="getData" type="primary" plain>搜索</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="searchFrom.type" type="card" style="background: white;padding-top: 10px" @tab-click="getData">
      <el-tab-pane label="全部使用记录" name="-1"></el-tab-pane>
      <el-tab-pane label="当前使用记录" name="1"></el-tab-pane>
      <el-tab-pane label="历史使用记录" name="2"></el-tab-pane>
    </el-tabs>

    <el-table :data="tableData">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column label="设备名称">
        <template slot-scope="scope">
          <span @click="onSearch('teacher', scope.row.teacher_id)" class="cell-link">{{scope.row.teacher_name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="staff_name" label="当前顾问">
        <template slot-scope="scope">
          <span @click="onSearch('staff', scope.row.staff_id)" class="cell-link">{{scope.row.staff_name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="start_at" label="设备开始使用时间"></el-table-column>
      <el-table-column label="设备使用结束时间">
        <template slot-scope="scope">
          {{scope.row.over_at == '0000-00-00 00:00:00' ? '-' : scope.row.over_at}}
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间"></el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>

  </div>
</template>

<script>
  import {getStaffRecordApi,getTeacherListApi,getStaffListApi} from "../../service/api";
  import page from '../framework/page'

  export default {
    name: "index",
    data() {
      return {
        searchFrom: {
          type: '1',
          teacher_id: '',
          staff_id: ''
        },
        teacherList: [],
        staffList: [],
        tableData: [],
        total: 0,
        nowPage: 1,
        limit: 10,
        loading: false
      }
    },
    components: { page },
    mounted() {
      this.getTeacherList();
      this.getStaffList();
      this.getData()
    },
    methods: {
      getTeacherList() {
        let json = { page: 1, limit: 1000 };
        getTeacherListApi(json).then(res => {
          this.teacherList = res.list;
        });
      },
      getStaffList() {
        let json = { page: 1, limit: 1000 };
        getStaffListApi(json).then(res => {
          this.staffList = res.list;
        });
      },

      getData() {
        let json = {
          limit: this.limit,
          page: this.nowPage,
        };
        this.searchFrom.teacher_id ? json.teacher_id = this.searchFrom.teacher_id : '';
        this.searchFrom.staff_id ? json.staff_id = this.searchFrom.staff_id : '';
        this.searchFrom.type!=-1 ? json.type = this.searchFrom.type : '';
        getStaffRecordApi(json).then(res => {
          this.tableData = res.list;
          this.total = res.total
        });
      },

      onSearch(type, id){
        if (type) {
          this.searchFrom[`${type}_id`] = id;
        }
        this.getData();
      },

      onPageChange(val) {
        this.nowPage = val
        this.getData()
      },
      onSizeChange(val) {
        this.limit = val;
        this.nowPage = 1;
        this.getData()
      },
    }
  }
</script>

<style lang="less" scoped>
  .user {
    /*height: 100%;*/
    overflow: auto;
    padding: 20px 0;

    .btn-content {
      text-align: center;
    }

    .page-div {
      padding-top: 20px;
    }
  }
</style>