<style lang="less" scoped>
  @import './ClassroomSetting.less';
</style>
<style>
  .class-search-input .ivu-input {
    height: 30px;
    background: none;
    line-height: 30px;
    border: none;
    color:white;
    font-size:15px;
  }

  .hiteach-code-wrap-header .ivu-input {
    width: calc(100% - 30px);
    -webkit-width: calc(100% - 30px);
    -moz-width: calc(100% - 30px);
    background: none;
    border: none;
    border-radius: 0px;
    color:white;
    font-size:15px;
  }

  .class-attr-wrap .ivu-input {
    width: calc(100% - 30px);
    -webkit-width: calc(100% - 30px);
    -moz-width: calc(100% - 30px);
    background: none;
    border: none;
    border-radius: 0px;
    font-size: 16px;
    color: white;
    border-bottom: 2px solid #424242;
  }

  .class-attr-wrap .ivu-select {
    width: calc(100% - 30px);
    -webkit-width: calc(100% - 30px);
    -moz-width: calc(100% - 30px);
    color: white;
  }

  .class-attr-wrap .ivu-select-selected-value {
    font-size: 16px !important;
  }

  .class-attr-wrap .ivu-select-selection {
    background: none;
    border-color: #424242;
  }

  .class-attr-wrap .ivu-divider {
    background-color: #424242;
  }

  .school-plan-wrap .ivu-upload {
    position: absolute;
    top: 0px;
    right: 0px;
    color: white;
    cursor: pointer;
  }

  .school-plan-wrap .ivu-btn {
    background: none;
    border: none;
    color: white;
    padding: 8px 35px 6px 20px;
    border-bottom: 1px solid #424242;
    border-radius: 0px;
    font-size: 14px;
  }

  .school-plan-wrap .ivu-upload-list {
    display: none;
  }
</style>
<template>
  <div class="container-box">
    <div class="container-left">
      <div class="container-left-title">
        <span class="first-title">{{$t('schoolBaseInfo.classroomList')}}</span>
        <span class="label-style" @click="saveClassroom" v-if="updated"><Icon class="label-icon" color="white" type="ios-albums-outline" />{{$t('schoolBaseInfo.saveInfo')}}</span>
        <span class="label-style" @click="addClassroom()"><Icon class="label-icon" color="white" type="md-add" />{{$t('schoolBaseInfo.addClassroom')}}</span>
      </div>
      <div class="container-left-wrap">
        <div class="container-left-box">
          <div class="class-search-input">
            <Input clearable v-model="serchClassName" :placeholder="$t('schoolBaseInfo.codeSearchHolder')" style="width: 100%;height:30px;" @on-change="filterClassname">
            <Icon style="margin-top:0px;" type="ios-search" slot="suffix" />
            </Input>
          </div>
          <p class="list-order">
            <Icon class="label-icon" color="white" type="md-funnel" />
            {{$t('schoolBaseInfo.listOrder')}}
          </p>
          <div class="class-list">
            <div class="class-list-item" v-for="(item,index) in classroomListShow" @click="chooseClassroom(index)" :class="currentClassroomIndex == index ? 'active-item-bg':''">
              <div class="class-list-item-left">
                <p class="class-name">{{item.name}}</p>
                <p class="class-hiteach-code second-text-color">{{item.hiTeach}}</p>
                <p class="class-type">
                  <Icon type="md-arrow-dropright" size="18" />{{item.classroomType}}
                </p>
                <p class="second-text-color">
                  <!--<span>学生人数：</span>
                <span class="primary-text-color">{{item.stuNum}}</span>
                <span>|</span>-->
                  <span>{{$t('schoolBaseInfo.headmaster')+"："}}</span>
                  <span class="primary-text-color">{{item.headMaster}}</span>
                </p>
              </div>
              <div class="class-list-item-tool">
                <!--<Icon type="ios-copy" title="复制" />-->
                <Icon type="md-trash" :title="$t('schoolBaseInfo.delete')" @click.stop="delClassroom(index)" />
              </div>
            </div>
          </div>
        </div>

        <div class="container-right-box">
          <div class="container-right-title">
            <span class="first-title">{{$t('schoolBaseInfo.classroomAttr')}}</span>
          </div>
          <div class="class-attr-wrap">
            <span class="class-attr-wrap-label">{{$t('schoolBaseInfo.classroomCode')}}</span>
            <Input v-model="classroomList[currentClassroomIndex].classroomCode" clearable :placeholder="$t('schoolBaseInfo.classroomCodeHolder')" />
            <span class="class-attr-wrap-label">{{$t('schoolBaseInfo.classroomName')}}</span>
            <Input v-model="classroomList[currentClassroomIndex].name" clearable :placeholder="$t('schoolBaseInfo.classroomNameHolder')" />
            <span class="class-attr-wrap-label">{{$t('schoolBaseInfo.headmaster')}}</span>
            <Input v-model="classroomList[currentClassroomIndex].headMaster" clearable :placeholder="$t('schoolBaseInfo.headmasterHolder')" />
            <span class="class-attr-wrap-label">{{$t('schoolBaseInfo.setPeriod')}}</span>
            <Select v-model="classroomList[currentClassroomIndex].period" clearable>
              <Option v-for="(item,index) in periodList" :value="item.code" :key="index" @click.native="currentPIndex = index">{{ item.name }}</Option>
            </Select>
            <span class="class-attr-wrap-label">{{$t('schoolBaseInfo.setGrade')}}</span>
            <Select v-model="classroomList[currentClassroomIndex].grade" clearable>
              <Option v-for="(item,index) in periodList[currentPIndex].grade" :value="item.code" :key="index">{{ item.name }}</Option>
            </Select>
            <span class="class-attr-wrap-label">{{$t('schoolBaseInfo.setHiteachCode')}}</span>
            <Input v-model="classroomList[currentClassroomIndex].hiTeach" disabled :placeholder="$t('schoolBaseInfo.hiTeachHolder')" clearable />
            <Divider style="margin-top:60px;color:#424242;" />
          </div>
          <div class="hiteach-code-wrap">
            <div class="hiteach-code-wrap-header">
              <p>
                {{$t('schoolBaseInfo.hiteachList')}}
                <Icon style="float:right;margin-right:12px;margin-top:2px;cursor:pointer;" class="label-icon" color="white" type="md-add" @click="addHiTeachCode" />
              </p>
              <Input v-model="serchCode" :placeholder="$t('schoolBaseInfo.codeHolder')" style="width: 100%;height:30px;" @on-change="filterCode">
              <Icon style="margin-top:0px;" type="ios-search" slot="suffix" />
              </Input>
            </div>
            <div class="hiteach-code-wrap-list">
              <h1 v-if="!hiTeachs.length">{{$t('schoolBaseInfo.noHiTeachTips')}}</h1>
              <ul v-else>
                <li v-for="(item,index) in hiTeachsShow" :key="index" @click="chooseHiTeach(index)" :class="item.using > 0 ? 'fourth-text-color':''" :title="item.code">
                  <span>{{item.code}}</span>
                  <Tag color="#6BDFC3" v-if="item.single == 1">{{item.using+'/'+5}}</Tag>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="container-right">
      <div class="container-right-title">
        <span class="first-title">{{$t('schoolBaseInfo.schoolPlan')}}</span>
      </div>
      <div class="school-plan-wrap">
        <Upload action="//jsonplaceholder.typicode.com/posts/" :on-success="uploadSchoolPlan" :before-upload="getFileData">
          <Button icon="ios-cloud-upload-outline">{{$t('schoolBaseInfo.uploadPlan')}}</Button>
        </Upload>
        <div class="school-plan-zoom">
          <span @click="defaultSize()">1:1</span>
          <Icon type="ios-add-circle-outline" color="white" size="24" @click="bigger()" />
          <Icon type="ios-remove-circle-outline" color="white" size="24" @click="smaller()" />
        </div>
        <!--<h1>未上传平面图</h1>-->
        <div class="school-plan-box" id="school-plan-box">
          <canvas id="school-plan" style="" @mousedown="canvasMouseDown" @mousemove="canvasMouseMove" @mouseup="canvasMouseUp" @mouseout="canvasMouseOut">
            {{$t('schoolBaseInfo.suportCanvas')}}
          </canvas>
        </div>
      </div>
    </div>
    <Modal v-model="addCode"
           :title="$t('schoolBaseInfo.addCodeTitle')"
           @on-ok="confirmAdd"
           @on-cancel="cancelAdd">
      <Form :model="hiTeachItem" :label-width="80" label-position="left">
        <FormItem :label="$t('schoolBaseInfo.hiTeach')">
          <Input v-model="hiTeachItem.code" :placeholder="$t('schoolBaseInfo.codeHolder')"></Input>
        </FormItem>
        <FormItem :label="$t('schoolBaseInfo.moreAuth')">
          <Select v-model="hiTeachItem.single">
            <Option value="1">{{$t('schoolBaseInfo.yes')}}</Option>
            <Option value="0">{{$t('schoolBaseInfo.no')}}</Option>
          </Select>
        </FormItem>
      </Form>
</Modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPIndex:0,
        demoLoginInfo: {
          user: "admin",
          teamModelId: "habook#0001",
          school: "醍摩豆书院",
          schoolCode:"HBCN"
        },
        hiTeachItem: {
          code: '',
          single: undefined,
          using:0
        },
        addCode:false,
        isInit: true,
        updated: false,
        model1: '',
        headMaster: '',
        className: '',
        hiTeachsShow:[],
        hiTeachs: [
          {
            code: "C7A3804A-4DF7-436B-8D29-B5B88A644937",
            single: 0,
            using:0
          },
          {
            code: "512ADF7A-91D0-4E70-8BA7-EC4D4441394E",
            single: 0,
            using:0
          },
          {
            code: "F9BF4C21-FFD6-41AD-A459-237030F42C28",
            single: 1,
            using:0
          },
          {
            code: "F42DBB41-88C6-42FA-8EBD-1467BDCB897F",
            single: 0,
            using:0
          },
          {
            code: "C7A37895-4DF7-436B-8D29-B5B88A644937",
            single: 0,
            using:0
          },
          {
            code: "9825322A-91D0-4E70-8BA7-EC4D4441394E",
            single: 0,
            using:0
          },
          {
            code: "54612931-FFD6-41AD-A459-237030F42C28",
            single: 0
          },
          {
            code: "F42DBB41-8666-42FA-8EBD-1467B564897F",
            single: 0,
            using:0
          },
          {
            code: "C845854A-4DF7-436B-8D29-B5B88A644999",
            single: 1,
            using:0
          },
          {
            code: "512ADF7A-91D0-4E70-8BA7-EC4D25813963",
            single: 0,
            using:0
          },
          {
            code: "ASDFTF41-88C6-42FA-8EBD-1467BDCB897F",
            single: 0,
            using:0
          },
          {
            code: "CTREYUIA-4DF7-436B-8D29-B5B88A644789",
            single: 0,
            using:0
          },
          {
            code: "51200000-91D0-4E70-8BA7-EC4D44413178",
            single: 0,
            using:0
          }
        ],
        classroomList: [{
          name: '预设教室',
          hiTeach: '',
          headMaster: '未指定班主任',
          period: '', 
          grade: '',
          stuNum: 0,
          classroomType: 'TEAM MODEL智慧教室',
          classroomCode: '教室编码',
          point: {
            x: 5,
            y: 5
          }
        }],
        classroomListShow: [],
        periodList: [
          {
            name: '暂无学段信息',
            code: "",
            grade: [
              {
                name: '暂无年级信息',
                code: ""
              }
            ]
          }
        ],
        gradeList: [],
        currentClassroomIndex: 0,
        schoolPlan: '',
        file: '',
        imgUrl: '',
        point: {},
        clickPoint: {},
        isMouseDown: false,
        isFirstDraw: 0,
        schoolImageData: [],
        pinImageData: {},
        whiteImageData: {},
        greenImageData: {},
        activeIcon: -1,
        textStatus: true,
        serchClassName: '',
        serchCode:'',
        serchHiteach: '',
        scaleDefault: 1,
        maxScale: 3,
        minScale: 0.4,
        scaleStep: 0.1,
        stopScale:false
      }
    },
    methods: {
      addHiTeachCode() {
        this.addCode = true;
      },
      confirmAdd() {
        this.hiTeachs.push(this.hiTeachItem);
        this.filterCode();
        this.hiTeachItem = {
          code: '',
          single: undefined,
          using:0
        }
      },
      cancelAdd() {

      },
      bundleScoll() {
        let schoolPlanBox = document.getElementById('school-plan-box');
        let _this = this;
        schoolPlanBox.addEventListener('mousewheel', function (e) {
          if (e.preventDefault) {
            e.preventDefault();
          } else {
            window.event.returnValue == false;
          }
          _this.scrollFunc(e);
        }, false) || schoolPlanBox.addEventListener('DOMMouseScroll', function (e) {
          if (e.preventDefault) {
            e.preventDefault();
          } else {
            window.event.returnValue == false;
          }
          _this.scrollFunc(e);
        }, false);
      },
      scrollFunc(e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
          if (e.wheelDelta > 0) { //当滑轮向上滚动时
            this.bigger();
          }
          if (e.wheelDelta < 0) { //当滑轮向下滚动时
            this.smaller();
          }
        } else if (e.detail) {  //Firefox滑轮事件
          if (e.detail > 0) { //当滑轮向上滚动时
            this.bigger();
          }
          if (e.detail < 0) { //当滑轮向下滚动时
             this.smaller();
          }
        }
      },
      defaultSize() {
        this.scaleDefault = 1;
        this.repaint(this.scaleDefault);
      },
      bigger() {
        if (this.scaleDefault + this.scaleStep > this.maxScale) {
          if (!this.stopScale) {
            this.$Message.warning(this.$t('schoolBaseInfo.csTips1'));
            this.stopScale = true;
          }
        } else {
          this.stopScale = false;
          this.scaleDefault += this.scaleStep;
          this.repaint(this.scaleDefault);
        }
      },
      smaller() {
        if (this.scaleDefault - this.scaleStep < this.minScale) {
          if (!this.stopScale) {
            this.$Message.warning(this.$t('schoolBaseInfo.csTips2'));
            this.stopScale = true;
          }
        } else {
          this.stopScale = false;
          this.scaleDefault -= this.scaleStep;
          this.repaint(this.scaleDefault);
        }
      },
      repaint(scale) {
        this.schoolPlan = document.getElementById('school-plan');
        this.schoolPlan.height =  this.schoolImageData.height * this.scaleDefault;
        this.schoolPlan.width = this.schoolImageData.width * this.scaleDefault;
        let ctx = this.schoolPlan.getContext('2d');
        this.drawSchoolPlan("imgUrl");
        this.initIcon();
      },
      filterCode() {
        let _this = this;
        if (this.serchCode == '') {
          this.hiTeachsShow = [...this.hiTeachs];
        } else {
          this.hiTeachsShow = this.hiTeachs.filter(item => item.code.indexOf(_this.serchCode) != -1);
        }
        
      },
      filterClassname() {
        let _this = this;
        if (this.serchClassname == '') {
          this.classroomListShow = [...this.classroomList];
        } else {
          this.classroomListShow = this.classroomList.filter(item => item.name.indexOf(_this.serchClassName) != -1);
        }
      },
      drawText(text, x, y) {
          this.schoolPlan = document.getElementById('school-plan');
          let ctx = this.schoolPlan.getContext('2d');
          ctx.font = "16px Arial";
          ctx.fillStyle = "yellow";
          ctx.fillText(text, x, y);
      },
      drawIcon(x, y) {
        this.schoolPlan = document.getElementById('school-plan');
        let ctx = this.schoolPlan.getContext('2d');
        ctx.beginPath();
        ctx.drawImage(this.whiteImageData, x * this.scaleDefault, y * this.scaleDefault, 20 * this.scaleDefault, 20 * this.scaleDefault);
      },
      moveIcon(x, y) {
        this.schoolPlan = document.getElementById('school-plan');
        let ctx = this.schoolPlan.getContext('2d');
        let _this = this;
        for (let i = 0; i < _this.classroomList.length; i++) {
          if (this.activeIcon == i) {
            ctx.drawImage(this.greenImageData, x * _this.scaleDefault, y * _this.scaleDefault,  20 * _this.scaleDefault, 20 * _this.scaleDefault);
          } else {
            ctx.drawImage(this.whiteImageData, _this.classroomList[i].point.x * _this.scaleDefault, _this.classroomList[i].point.y * _this.scaleDefault, 20 * _this.scaleDefault, 20 * _this.scaleDefault);
          }
        }
      },
      initIcon() {
        this.schoolPlan = document.getElementById('school-plan');
        let ctx = this.schoolPlan.getContext('2d');
        for (let i = 0; i < this.classroomList.length; i++) {
          ctx.drawImage(this.whiteImageData,
            this.classroomList[i].point.x * this.scaleDefault, this.classroomList[i].point.y * this.scaleDefault,
            20 * this.scaleDefault, 20 * this.scaleDefault);
        }
      },
      checkActivieIcon(point) {
        for (let item in this.classroomList) {
          if (point.x > this.classroomList[item].point.x * this.scaleDefault && point.x < (this.classroomList[item].point.x + 15)* this.scaleDefault && point.y > this.classroomList[item].point.y * this.scaleDefault && point.y < (this.classroomList[item].point.y + 15) * this.scaleDefault) {
            return item;
          }
        }
        return -1;
      },
      getCanvasPoint(x, y) {
        this.schoolPlan = document.getElementById('school-plan');
        let canvasRect = this.schoolPlan.getBoundingClientRect();
        let ctx = this.schoolPlan.getContext('2d');
        return {
          x: x - canvasRect.left,
          y: y - canvasRect.top
        }
      },
      canvasMouseDown(e) {
        this.isMouseDown = true;
        this.point = this.getCanvasPoint(e.clientX, e.clientY);
        this.clickPoint = this.getCanvasPoint(e.clientX, e.clientY);
        this.activeIcon = this.checkActivieIcon(this.point);
      },
      moveCanvas(start,current) {
        let container = document.getElementById("school-plan-box");
        container.scrollLeft = container.scrollLeft + (start.x - current.x);
        container.scrollTop = container.scrollTop + (start.y - current.y);
      },
      canvasMouseMove(e) {
        this.point = this.getCanvasPoint(e.clientX, e.clientY);
        if (this.isMouseDown == true && this.activeIcon != -1) {
          this.drawSchoolPlan("");
          this.moveIcon(this.point.x / this.scaleDefault, this.point.y / this.scaleDefault);
        } else if (this.isMouseDown == true && this.activeIcon == -1) {
          this.moveCanvas(this.clickPoint, this.point);
        }else {
          let index = this.checkActivieIcon(this.point);
          if (index != -1) {
            if (this.textStatus == true) {
              this.drawText(this.classroomList[index].name, (this.classroomList[index].point.x + 25)* this.scaleDefault, (this.classroomList[index].point.y + 20) * this.scaleDefault);
              this.textStatus = false;
            }
          } else {
            this.drawSchoolPlan("");
            this.moveIcon(this.point.x, this.point.y);
            this.textStatus = true;
          }
        }
      },
      canvasMouseUp(e) {
        this.isMouseDown = false;
        if (this.activeIcon != -1) {
          this.classroomList[this.activeIcon].point.x = this.point.x / this.scaleDefault;
          this.classroomList[this.activeIcon].point.y = this.point.y / this.scaleDefault;
        }
        this.activeIcon = -1;
      },
      canvasMouseOut(e) {
        this.isMouseDown = false;
        if (this.activeIcon != -1) {
          this.classroomList[this.activeIcon].point = this.point;
        }
        this.activeIcon = -1;
      },
      drawSchoolPlan(imgUrl) {
        this.schoolPlan = document.getElementById('school-plan');
        let context = this.schoolPlan.getContext('2d');
        context.clearRect(0, 0, this.schoolPlan.width, this.schoolPlan.height);
        let _this = this;
        if (_this.isFirstDraw <= 0) {
          let image = new Image();
          //image.src = require('../../../assets/image/school_plan.jpg');
          image.src = 'https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelos/test/school_plan.jpg';
          //image.src = imgUrl;
          image.crossOrigin = 'anonymous';
          image.onload = function () {
            _this.schoolPlan.width = image.width;
            _this.schoolPlan.height = image.height;
            context.drawImage(image, 0, 0);
            let imgData = context.getImageData(0, 0, _this.schoolPlan.width, _this.schoolPlan.height);
            for (let i = 0; i < imgData.data.length; i += 4) {
              let r = imgData.data[i];
              let g = imgData.data[i + 1];
              let b = imgData.data[i + 2];
              let a = imgData.data[i + 3];
              if (r > 200 && g > 200 && b > 200) {
                imgData.data[i + 3] = 0;
              } else {
                imgData.data[i] = 255;
                imgData.data[i + 1] = 255;
                imgData.data[i + 2] = 255;
                imgData.data[i + 3] = 255;
              }
              //if (r == 255 && g == 255 && b == 255) {
              //  imgData.data[i + 3] = 0;
              //  imgData.data[i + 1] = 0;
              //  imgData.data[i + 2] = 0;
              //} else {
              //  imgData.data[i] = 255 - r;
              //  imgData.data[i + 1] = 255 - g;
              //  imgData.data[i + 2] = 255 - b;
              //  imgData.data[i + 3] = 255;
              //}
            }
            context.putImageData(imgData, 0, 0);
            let PNGImg = new Image();
            PNGImg.src = _this.schoolPlan.toDataURL("image/png");
            PNGImg.onload = function () {
              _this.schoolImageData = PNGImg;
            }
            _this.isFirstDraw++;
          }
        } else {
          context.drawImage(this.schoolImageData, 0, 0, this.schoolImageData.width, this.schoolImageData.height, 0, 0, this.schoolImageData.width * this.scaleDefault, this.schoolImageData.height * this.scaleDefault);
        }
      },
      getFileData(file) {
        let _this = this;
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          const _base64 = reader.result
          this.imgUrl = _base64 //将_base64赋值给图片的src，实现图片预览
          _this.drawSchoolPlan(this.imgUrl);
        }
        return false;
      },
      saveClassroom() {
        this.classroomList[this.currentClassroomIndex]["schoolCode"] = this.demoLoginInfo.schoolCode;
        this.$api.schoolSetting.classroomSettingSaveOrUpdate(this.classroomList[this.currentClassroomIndex]).then(res => {
          if (res.error == null) {
            this.$Message.success(this.$t('schoolBaseInfo.csTips3'));
            this.updated = false;
          }
        });
      },
      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.filterClassname();
            }
          }
        });

      },
      delClassroom(index) {
        if (this.currentClassroomIndex >= index && index > 0) {
          this.currentClassroomIndex = 0;
        }
        if (this.classroomList.length > 1) {
          this.classroomList.splice(index, 1);
          this.classroomListShow.splice(index, 1);
        } else {
          this.$Message.warning(this.$t('schoolBaseInfo.csTips4'));
        }

      },
      uploadSchoolPlan(res, file) {
        this.$Message.success(this.$t('schoolBaseInfo.csTips5'));
      },
      chooseClassroom(index) {
        this.currentClassroomIndex = index;
      },
      isEmpty(obj){
          if(typeof obj == "undefined" || obj == null || obj == ""){
              return true;
          }else{
              return false;
          }
      },
      chooseHiTeach(index) {
        
        
        let i = this.hiTeachs.indexOf(this.hiTeachsShow[index]);
        //if (this.hiTeachsShow[index].single == 0) {
        //  this.hiTeachsShow[index].using = 1;
        //} else {
        //  this.hiTeachsShow[index].using++;
        //}
        //console.log(this.hiTeachsShow[index]);
        //console.log(this.hiTeachs[i]);
        if (this.hiTeachs[i].single == 0) {
          if (this.hiTeachs[i].using > 0) {
            this.$Message.warning(this.$t('schoolBaseInfo.csTips6'));
          } else {
            if (!this.isEmpty(this.classroomList[this.currentClassroomIndex].hiTeach)) {
              let showIndex = -1;
              let allIndex = -1;
              this.hiTeachsShow.forEach((v, i) => {
                if (v.code == this.classroomList[this.currentClassroomIndex].hiTeach) {
                  showIndex = i;
                }
              });
              this.hiTeachs.forEach((v, i) => {
                if (v.code == this.classroomList[this.currentClassroomIndex].hiTeach) {
                  allIndex = i;
                }
              });
              if (showIndex != -1 && allIndex != -1) {
                //this.hiTeachsShow[showIndex].using--; 
                this.hiTeachs[allIndex].using--;
              }
            }
            this.hiTeachs[i].using = 1;
            this.classroomList[this.currentClassroomIndex].hiTeach = this.hiTeachsShow[index].code;
          }
        } else {
          if (!this.isEmpty(this.classroomList[this.currentClassroomIndex].hiTeach)) {
            let showIndex = -1;
            let allIndex = -1;
            this.hiTeachsShow.forEach((v, i) => {
              if (v.code == this.classroomList[this.currentClassroomIndex].hiTeach) {
                showIndex = i;
              }
            });
            this.hiTeachs.forEach((v, i) => {
              if (v.code == this.classroomList[this.currentClassroomIndex].hiTeach) {
                allIndex = i;
              }
            });
            if (showIndex != -1 && allIndex != -1) {
              //this.hiTeachsShow[showIndex].using--; 
              this.hiTeachs[allIndex].using--;
            }
          }
          this.hiTeachs[i].using++;
          this.classroomList[this.currentClassroomIndex].hiTeach = this.hiTeachsShow[index].code;
        }
        this.filterCode();
      },
      guid() {
        function S4() {
          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
      },
      initData() {
        let white = new Image();
        let pink = new Image();
        let green = new Image();
        white.crossOrigin = 'anonymous';
        pink.crossOrigin = 'anonymous';
        green.crossOrigin = 'anonymous';
        white.src = require('../../../assets/pin.svg');
        pink.src = require('../../../assets/redpin.svg');
        green.src = require('../../../assets/greenpin.svg');
        let _this = this;
        white.onload = function () {
          _this.whiteImageData = white;
        }
        pink.onload = function () {
          _this.pinImageData = pink;
        }
        green.onload = function () {
          _this.greenImageData = green;
        }
        this.$api.schoolSetting.findSchoolSystem({
          Code: this.demoLoginInfo.schoolCode
        }).then(res => {
          if (res.error == null) {
            if (res.result.data.length > 0) {
              this.periodList = res.result.data[0].period;
            }
          }
        });
      },
      addClassroom() {
        this.serchClassName = '';
        this.classroomList.push({
          name: this.$t('schoolBaseInfo.presetClassroomName') + (this.classroomList.length + 1),
          hiTeach: '',
          headMaster: this.$t('schoolBaseInfo.presetHeadmaster'),
          period: '小学',
          grade: '一年级',
          stuNum: 0,
          classroomType: '一般教室',
          classroomCode: '教室编码',
          point: {
            x: 5,
            y: 5
          }
        });
        this.classroomListShow = [...this.classroomList];
        this.drawIcon(5, 6);
      }
    },
    mounted() {
      
      let _this = this;
      setTimeout(function () {
        _this.drawSchoolPlan();
        _this.bundleScoll();
        _this.initIcon();
      }, 1000);
      this.filterClassname();
      this.filterCode();
      
      
    },
    beforeRouteLeave(to, from, next) {
      if (this.updated) {
        let config = {
          render: (h) => {
            return h("h3", {
              style: {
                  textAlign:"center"
              },
              domProps: {
                innerText: "您修改信息后还未保存，如果离开数据将会丢失！"
               }
            } );
          },
          onOk: () => {
            next();
          },
          onCancel: () => {
            next(false)
          }
        }
        this.$Modal.confirm(config);
      } else {
         next();
      }
    },
    watch: {
      classroomList: {
        handler(newValue, oldValue) {
          if (this.isInit) {
            this.isInit = false;
          } else {
            this.updated = true;
          }
        },
        deep: true
      }
    },
    created() {
      this.getClassroom();
      this.initData();
    }
  }
</script>
