<template>
  <div class="QdmTransfer">
    <QdmDialog
    :show="show"
    width="600px"
    @handleClose="handleClose"
    :title="title"
    @submit="submit">
      <div class="left">
        <div class="haed">
          {{ leftText }}
          <span>{{ newleftValue }}</span>
        </div>
        <div class="search" v-if="search">
          <el-input
            placeholder="搜索"
            v-model="searchValue"
            @keyup.enter="searchReturn">
            <template v-slot:suffix>
              <i class="el-icon-search" @click="searchReturn"></i>
            </template>
          </el-input>
        </div>
        <div class="Transfermain" id="QdmTransfer" v-infinite-scroll="load">
          <el-checkbox-group v-model="leftcheckList">
            <el-checkbox v-for="(item, index) in newleftList" :key="index" :label="item.value" v-show="item.show">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="con">
        <i class="el-icon-d-arrow-right" @click="rightFn"></i>
        <br />
        <!-- <i class="el-icon-d-arrow-left" @click="leftFn"></i> -->
      </div>
      <div class="right">
        <div class="haed">
          {{ rightText }}
          <span>{{ newrightValue }}</span>
        </div>
        <div class="Transfermain">
          <div v-for="(item, index) in newrightList" :key="index" @click="deleteItem(item)">
            <p>{{ item.label }}</p>
            <i class="el-icon-delete"></i>
          </div>
        </div>
      </div>
    </QdmDialog>
  </div>
</template>
<script>
import QdmDialog from '@/components/QdmDialog'
export default {
  name: "QdmTransfer",
  components: {
    QdmDialog
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    leftText: {
      type: String,
      default: '可选'
    },
    rightText: {
      type: String,
      default: '已选'
    },
    search: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
//  	leftData: [
//  		{ label: 'a', value: '1201354733532363244', show: true },
//  		{ label: 'b', value: '1201354791532363236', show: true },
//  		{ label: 'c', value: '1201354791532363244', show: true }
//  	],
//  	rightData: [
//  		{ label: 'c', value: '1201354791532363244' }
//  	],
      searchValue: '',
      newleftList: [],
      leftcheckList: [],
      newleftValue: 0,
      newrightValue: 0,
      newrightList: [],
      searchStatus: false
    }
  },
	created() {
		this.searchStatus = false
	},
  methods: {
  	getData(leftList, rightList, type) {
			this.newleftList = []
			leftList.forEach(item => {
				this.newleftList.push(item)
			})
			if(!this.searchStatus || type === 'init') {
				this.newrightList = []
				rightList.forEach(item => {
					this.newrightList.push(item)
				})
			}
			this.$nextTick(() => {
      	let num = 0
	  		this.newrightList.forEach(item => {
	        this.newleftList.forEach(items => {
	          if(items.value === item.value) {
	            items.show = false
	            num += 1
	          }
	        })
	      })
	  		this.newleftValue = this.newleftList.length - num
	  		this.newrightValue = rightList.length  
    	})
  	},
    handleClose() {
      this.searchValue = ''
      this.leftcheckList = []
      this.searchStatus = false
      this.$emit('handleClose')
    },
    searchReturn() {
    	this.searchStatus = true
    	this.$nextTick(() => {
    		this.$emit('searchReturn', this.searchValue)
    	})
    },
    submit() {
      this.$emit('submit', this.newrightList)
    },
    rightFn() {
      let list = []
      this.leftcheckList.forEach(item => {
        this.newleftList.forEach(items => {
          if(items.value === item) {
            list.push(items)
          }
        })
      })
      let obj = {}
      let deposit = this.newrightList.concat(list)
      this.newrightList = deposit.reduce((cur, next) => {
        obj[next.value] ? "" : obj[next.value] = true && cur.push(next)
          return cur
      }, [])
      this.newrightList.forEach(item => {
        this.newleftList.forEach(items => {
          if(items.value === item.value) {
            items.show = false
          }
        })
      })
      let num = 0
      this.$nextTick(() => {
      	this.newleftList.forEach(item => {
	        if(item.show) {
	        	num += 1
	        }
	      })
      	this.newrightValue = this.newrightList.length
      	this.newleftValue = num
      	this.leftcheckList = []
      })
    },
    deleteItem(data) {
      this.newleftList.forEach(item => {
        if(item.value === data.value) {
          item.show = true
        }
      })
      this.newrightList.forEach((item, index) => {
        if(item.value === data.value) {
          this.newrightList.splice(index, 1)
        }
      })
      let num = 0
      this.$nextTick(() => {
      	this.newleftList.forEach(item => {
	        if(item.show) {
	        	num += 1
	        }
	      })
      	this.newrightValue = this.newrightList.length
      	this.newleftValue = num
      })
    },
    load() {
    	this.searchStatus = true
    	this.$emit('loadReturn')
    }
  }
}
</script>
<style lang="less">
.QdmTransfer {
  .left {
    width: calc(45% - 2px);
    float: left;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    height: 350px;
    .haed {
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      background: rgb(244, 244, 245);
      border-bottom: 1px solid #D9D9D9;
      padding: 0 10px;
      >span {
        float: right;
        color: #409EFF;
        font-weight: bold;
      }
    }
    .search {
      .el-input__inner {
        line-height: 32px;
        height: 32px;
        border-radius: 0px;
        border: 0px solid #DCDFE6;
        border-bottom: 1px solid #D9D9D9;
        font-size: 12px;
      }
      .el-icon-search {
        line-height: 32px;
        cursor: pointer;
      }
    }
    .Transfermain {
      padding: 0px 5px;
      height: 275px;
      overflow: hidden;
      overflow-y: auto;
      .el-checkbox {
        width: 100%;
        line-height: 28px;
        height: 28px;
        .el-checkbox__label {
          width: 90%;
          line-height: 28px;
          height: 28px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          float: right;
        }
      }
    }
  }
  .con {
    width: 10%;
    float: left;
    text-align: center;
    padding-top: 100px;
    >i {
      font-size: 18px;
      cursor: pointer;
      color: #333;
      margin-top: 30px;
    }
  }
  .right {
    width: calc(45% - 2px);
    float: left;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    height: 350px;
    overflow: hidden;
    overflow-y: auto;
    .haed {
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      background: rgb(244, 244, 245);
      border-bottom: 1px solid #D9D9D9;
      padding: 0 10px;
      >span {
        float: right;
        color: rgb(255, 73, 73);
        font-weight: bold;
      }
    }
    >.Transfermain {
      padding: 0px 5px;
      >div {
        width: 100%;
        line-height: 28px;
        height: 28px;
        >p {
          width: 90%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          float: left;
        }
        >i {
          float: right;
          line-height: 28px;
          cursor: pointer;
          color: rgb(255, 73, 73);
        }
      }
    }
  }
}
</style>