<style lang="less" scoped>
  @import './Index.less';
</style>
<style lang="less">
  @import './IndexIview.less';
</style>

<template>
  <div class="sc-container">
    <div class="sc-menu">
      <div class="sc-menu-left">
        <Input v-model="searchText" clearable :placeholder="$t('stuAccount.searchHolder')" style="width: 28%;margin-left:20px;" :search="true"  @on-enter="searchData" @on-search="searchData" @on-clear="searchData">
        </Input>
        <Select v-model="searchPeriod" style="width:20%;margin-left:5%;" :placeholder="$t('stuAccount.periodHolder')" clearable >
          <Option v-for="(item,index) in schoolData.period" :value="item.code" :key="item.value" @click.native="getGradeList(index)">{{ item.name }}</Option>
        </Select>
        <Select v-model="searchGrade" style="width:20%;margin-left:1%;" :placeholder="$t('stuAccount.gradeHolder')" clearable>
          <Option v-for="(item,index) in gradeList" :value="item.code" :key="item.code" @click.native="getClassroomList(index)">{{ item.name }}</Option>
        </Select>
        <Select v-model="searchClassroom" ref="classroom" style="width:20%;margin-left:1%;" :placeholder="$t('stuAccount.classroomHolder')" clearable>
          <Option v-for="(item,index) in classroomShowList" :value="item.classroomCode" :key="item.classroomCode" >{{ item.name }}</Option> 
        </Select>
      </div>
      <div class="sc-menu-right sc-text-no-select">
        <ul>

          <li @click="delStudent(-1)" :class=" selections.length > 0 ? '':'sc-disable-cursor' ">
            <Icon type="md-trash" :color="selections.length > 0 ? 'white':'#606060'" size="18" />
            <span>{{ $t('stuAccount.delStu') }}</span>
          </li>
          <li @click="editStudent()" :class=" selections.length > 0 ? '':'sc-disable-cursor' ">
            <Icon type="md-create" :color="selections.length > 0 ? 'white':'#606060'" size="18" />
            <span>{{ $t('stuAccount.editInfo') }}</span>
          </li>
          <li @click="addStudent()">
            <Icon type="md-person-add" color="white" size="18" />
            <span>{{ $t('stuAccount.addStu') }}</span>
          </li>
          <li @click="importStudent()">
            <Icon type="md-arrow-round-up" color="white" size="18" />
            <span>{{ $t('stuAccount.importStu') }}</span>
          </li>
          <li @click="showAuthorization()">
            <Icon type="ios-cog-outline" color="white" size="18" />
            <span>{{$t('stuAccount.menuAuth') }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="sc-content" style="position:relative">
      <Table ref="selection" :columns="tableColumns" :data="tablePageData" height="750" :loading="tableLoading" @on-select="getSelectInfo" @on-select-cancel="getSelectInfo" @on-select-all="getSelectInfo" @on-select-all-cancel="cancelAll">
        <template slot-scope="{ row,index }" slot="status">
          <Icon v-if="index%3 == 1" type="md-checkmark-circle-outline" size="18" color="#1CD0A1" />
          <!--<Icon v-else type="md-close" size="18" color="red" />-->
          <span v-else>—</span>
        </template>
        <template slot-scope="{ row,index }" slot="action">
          <div class="item-tools">
            <Icon type="md-create" size="18" color="white" @click="editStudent(index)" />
            <Icon type="md-trash" size="18" color="white" @click="delStudent(index)" />
          </div>
        </template>
      </Table>
      <Page :total="tableShowData.length" size="small" :page-size="pageSize" show-total style="margin-top:15px;" :current.sync="currentPage" @on-change="getPageData"/>
      <authorization :isShow="authorizationStatus" @closeAuth="closeAuth"></authorization>
    </div>
    <add-student :schoolCode="demoLoginInfo.schoolCode" :isShow="addStudentStatus" :editStudentInfo="editStudentInfo" @saveStudentInfo="closeAddStudent" :bizType="bizType"></add-student>
    <import-student :schoolCode="demoLoginInfo.schoolCode" :isShow="importStudentStatus" @importStudentInfo="closeImportStudent"></import-student>
    
  </div>
</template>

<script>
  import AddStudent from "./add-student/AddStudent"
  import ImportStudent from "./add-student/ImportStudent"
  import Authorization from "./add-student/Authorization"
  export default {
    components: {
      AddStudent,
      ImportStudent,
      Authorization
    },
    data() {
      return {
        classroomList:[],
        classroomShowList:[],
        gradeList:[],
        searchPeriod: "",
        searchGrade: "",
        searchClassroom:"",
        schoolData: {},
        tableLoading: false,
        searchText:'',
        currentPage:1,
        pageSize:30,
        bizType:0,
        editStudentInfo:[],
        selections: [],
        selectRow: {},
        addStudentStatus:false,
        importStudentStatus: false,
        authorizationStatus: false,
        demoLoginInfo: {
          user: "admin",
          teamModelId: "habook#0001",
          school: "醍摩豆书院",
          schoolCode:"HBCN"
        },
        model: "",
        list: [],
        tableData: [],
        tableShowData: [],
        tablePageData:[],
        tableColumns:[]
      }
    },
    methods: {
      getGradeList(index) {
        this.gradeList = this.schoolData.period[index].grade;
        this.classroomShowList = this.classroomList.filter((item) => { return item.period == this.schoolData.period[index].code });
        if (this.classroomShowList.length == 0) {
          this.$refs.classroom.clearSingleSelect();
        }
      },
      getClassroomList(index) {
        console.log(this.gradeList[index].code);
        this.classroomShowList = this.classroomList.filter((item) => { return item.grade == this.gradeList[index].code });
        if (this.classroomShowList.length == 0) {
          this.$refs.classroom.clearSingleSelect();
        }
      },
      getPageData() {
        let start = ((this.currentPage - 1) * this.pageSize);
        let end = 0;
        if (this.tableShowData.length < this.currentPage * this.pageSize) {
          end = this.tableShowData.length;
        } else {
          end = this.currentPage * this.pageSize;
        }
        this.tablePageData = this.tableShowData.slice(start, end);
      },
      searchData() {
        this.tableLoading = true;
        this.tableShowData = this.tableData.filter(item => item.account.indexOf(this.searchText) != -1);
        this.currentPage = 1;
        this.getPageData();
        this.tableLoading = false;
      },
      cancelAll() {
        this.selections = [];
      },
      getIndex(_arr, _obj) {
        var len = _arr.length;
        for (let i = 0; i < len; i++) {
          if (this.isObjEqual(_arr[i],_obj)) {
            return parseInt(i);
          }
        }
        return -1;
      },
      isObjEqual(o1, o2) {
        var props1 = Object.keys(o1);
        var props2 = Object.keys(o2);
        console.log(props1);
        if (props1.length != props2.length) {
          return false;
        }
        for (var i = 0, max = props1.length; i < max; i++) {
          var propName = props1[i];
          if (o1[propName] !== o2[propName]) {
            return false;
          }
        }
        return true;
      },
      getSelectInfo(selction, row) {
        console.log(this.tableData);
        this.selections = selction;
        this.selectRow = row;
      },
      closeAddStudent(data) {
        if (data.action == 1) {
          let infoString = JSON.stringify(data.studentInfo);
          let info = JSON.parse(infoString); 
          info.account = this.demoLoginInfo.schoolCode + "#" + info.account;
          this.tableData.unshift(info);
          [...this.tableShowData] = this.tableData;
          this.getPageData();
        }
        this.addStudentStatus = false;
      },
      closeImportStudent(data) {
        this.importStudentStatus = false;
        console.log(data);
        this.tableData.push(...(data.data));
        [...this.tableShowData] = this.tableData;
        this.getPageData();
        console.log(this.tableData);
      },
      closeAuth() {
        this.authorizationStatus = false;
      },
      addStudent() {
        this.bizType = 1;
        this.$refs.selection.clearCurrentRow();
        this.addStudentStatus = true;
        
      },
      importStudent() {
        this.importStudentStatus = true;
      },
      showAuthorization() {
        this.authorizationStatus = true;
      },
      editStudent(index) {
        this.bizType = 2;
        if (index != undefined) {
          this.editStudentInfo = [];
          let objStr = JSON.stringify(this.tableData[index]);
          this.editStudentInfo.push(JSON.parse(objStr));
          this.tableShowData[index]._checked = true;
          this.tablePageData[index]._checked = true;
          this.$forceUpdate();
          this.addStudentStatus = true;
        } else {
          if (this.selections.length > 0) {
            
            this.editStudentInfo = [];
            [...this.editStudentInfo] = this.selections;
            this.addStudentStatus = true;
          } else {
            this.$Message.error(this.$t('stuAccount.tips1'));
          }
        }
        
      },
      delStudent(index, row) {
        if (index >= 0) {
          let showIndex = index + (this.currentPage - 1) * this.pageSize;
          let originIndex = this.getIndex(this.tableData, this.tablePageData[index]);
          this.$Modal.confirm({
            title: this.$t('stuAccount.tips2Title'),
            content: '<p>' + this.$t('stuAccount.tips2Content1') + this.tableShowData[showIndex].name + this.$t('stuAccount.tips2Content1') + '</p>',
            onOk: () => {
              this.tableData.splice(originIndex, 1);
              this.tablePageData.splice(index, 1);
              this.tableShowData.splice(showIndex, 1);
            },
            onCancel: () => {
            }
          });
         
          
        } else {
          let i = this.getIndex(this.tableData, row);
          if (i >= 0) {
            this.tableData.splice(i, 1);
          } else {
             this.$Message.error(this.$t('stuAccount.tips3'));
          }
          
        }
      },
      getSchoolData() {
        this.$api.schoolSetting.findSchoolSystem({
          Code: this.demoLoginInfo.schoolCode
        }).then(res => {
          if (res.error == null) {
            if (res.result.data.length > 0) {
              this.schoolData = res.result.data[0];
            } 
          }
        }
        );
      },
      getClassroom() {
        this.$api.schoolSetting.findClassInfo({
          SchoolCode: this.demoLoginInfo.schoolCode
        }).then(res => {
          if (res.error == null) {
            if (res.result.data.length > 0) {
              this.classroomList = res.result.data;
              [...this.classroomShowList] = this.classroomList;
            }
          }
        });
      },
      initData() {
        this.tableColumns = [
          {
            type: 'selection',
            width: 80,
            align: 'center'
          },
          {
            key: "seatNo",
            title:this.$t('stuAccount.seatNo'),
            align: 'center',
            width: 80
          },
          {
            key: "account",
            title:this.$t('stuAccount.account'),
            align: 'center'
          },
          {
            key: "name",
            title:this.$t('stuAccount.stuName'),
            align: 'center'
          },
          {
            key: "classroomName",
            title:this.$t('stuAccount.classroomName'),
            align: 'center'
          },
          {
            key: "classroomCode",
            title:this.$t('stuAccount.classroomCode'),
            align: 'center'
          },
          {
            key: "period",  
            title:this.$t('stuAccount.period'),
            align: 'center'
          },
          {
            key: "grade",
            title:this.$t('stuAccount.grade'),
            align: 'center'
          },
          {
            slot: "status",
            title:this.$t('stuAccount.authStatus'),
            align: 'center'
          },
          {
            slot: "action",
            title: " ",
            width:100,
            align: 'center'
          }
        ]
      }
    },
    created() {
      this.initData();
      this.getSchoolData();
      this.getClassroom();
    },
    computed: {
    },
    mounted() {
    }
  }
</script>
