<template>
  <div class="flex auto">
    <section>
      <div class="flex-row">
        <div class="span-row over" :class="{'col-md-5':leftShow}" v-show="rightShow">
          <button class="btn btn-xs" @click="showLeft()" v-show="!leftShow" style="margin-left: 10px">
            <span class="glyphicon glyphicon-chevron-left" style="color: #000;"></span>
          </button>
          <call-in-plan v-ref:left></call-in-plan>
        </div>
        <div class="btn-group-vertical" style="margin-left: 5px;" v-show="rightShow && leftShow">
          <button class="btn btn-xs"  @click="hiddenLeft()">
            <span class="glyphicon glyphicon-chevron-right" style="color: #000;"></span>
          </button>
          <button type="button" class="btn btn-primary"  @click="addAllRight()"> 	&gt; 	&gt; </button>
          <button type="button" class="btn btn-primary" @click="addRight()"> 	&gt; </button>
          <button type="button" class="btn btn-primary" @click="addLeft()"> &lt; </button>
          <button type="button" class="btn btn-primary" @click="addAllLeft()"> &lt; &lt; </button>
          <button class="btn btn-xs"  @click="hiddenRight()">
            <span class="glyphicon glyphicon-chevron-left" style="color: #000;"></span>
          </button>
        </div>
        <div class="span-row over" :class="{'col-md-7':rightShow}" v-show="leftShow">
          <button class="btn btn-xs" @click="showRight()" v-show="!rightShow" style="margin-left: 10px">
            <span class="glyphicon glyphicon-chevron-right" style="color: #000;"></span>
          </button>
          <user-file-list v-ref:right></user-file-list>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import CallInPlan from './CallInPlan'
import UserFileList from './UserFileList'

export default {
  title: '预约计划生成',
  props: ['f'],
  data () {
    return {
      rightShow:true,
      leftShow:true,
      model: {}
    }
  },

  methods: {
    showRight(){
      this.rightShow = true
    },
    hiddenRight(){
      this.rightShow = false
    },
    showLeft(){
      this.leftShow = true
    },
    hiddenLeft(){
      this.leftShow = false
    },
    // 向右边调整
    addRight () {
      if (this.$refs.left.selected !== null) {
        // 压入数组中
        let ret = true
          for (let k = 0; k < this.$refs.right.model.rows.length; k++) {
            if (this.$refs.left.selected.f_userinfo_id == this.$refs.right.model.rows[k].f_userinfo_id) {
                ret = false
            }
          }
            if(ret == true){
              this.$refs.right.model.rows.push(this.$refs.left.selected)
            }
        this.$refs.left.model.rows.$remove(this.$refs.left.selected)
        }
    },
    // 向左边调整
    addLeft () {
      // 为调整的数据添加标记
      if (this.$refs.right.selected !== null) {
        // 压入数组中
        let res = true
        for (let h = 0; h <this.$refs.left.model.rows.length; h++) {
          if (this.$refs.right.selected.f_userinfo_id == this.$refs.left.model.rows[h].f_userinfo_id) {
              res = false
          }
        }
          if(res == true){
            this.$refs.left.model.rows.push(this.$refs.right.selected)
          }
        this.$refs.right.model.rows.$remove(this.$refs.right.selected)
        }
    },
    // 全部向右边调整
    addAllRight () {
      if (this.$refs.left.model.rows.length != 0) {
        // 压入数组中
        for(let i=0;i<this.$refs.left.model.rows.length;i++) {
          let ret = true
          for (let n = 0; n < this.$refs.right.model.rows.length; n++) {
            if (this.$refs.right.model.rows[n].f_userinfo_id == this.$refs.left.model.rows[i].f_userinfo_id) {
              ret = false
            }
          }
          if (ret == true) {
            this.$refs.right.model.rows.push(this.$refs.left.model.rows[i])
          }
        }
        this.$refs.left.model.rows = []
      }
    },
    // 全部向左边调整
    addAllLeft () {
      console.log(this.$refs.right)
      let condition = this.$refs.right.$refs.paged.$refs.criteria.condition
      this.$resetpost('api/af-safecheck/sql/FetchUserFileByOrgChecker?pageSize=9999999',{data:{condition:condition,groupitem: '', orderitem: 'f_districtname',f_usertype:this.$refs.right.model.model.f_usertype[0],
          f_checker_id: this.$refs.right.model.chosenOrg.id, f_filialeid: this.$refs.right.model.f_filialeid,month:this.$refs.right.model.month}},-1).then(
        (respanse)=> {
          // 为调整的数据添加标记
          if (this.$refs.right.model.rows.length != 0) {
            if (respanse.data.length >= 5000) {
              alert("数据量太大，请重新查询")
            } else {
              // 压入数组中
              for (let j = 0; j < respanse.data.length; j++) {
                let res = true
                for (let o = 0; o < this.$refs.left.model.rows.length - 1; o++) {
                  if (respanse.data[j].f_userinfo_id == this.$refs.left.model.rows[o].f_userinfo_id) {
                    res = false
                  }
                }
                if (res == true) {
                  this.$refs.left.model.rows.push(respanse.data[j])
                }
              }
            }
          }
            this.$refs.right.model.rows = []
          }
      )
    }
  },
  components: { CallInPlan, UserFileList }
}
</script>
