<template>
   <div>
      <Button type="primary" @click="modal6=true">{{btnText}}</Button>
    <Modal
        v-model="modal6"
        :title="title"
        :loading="loading"
        @on-ok="asyncOK"
        @on-visible-change='visibleChange'
        :closable='false'
        :mask-closable='false'
        >
        <div slot="header">
        {{title}}
        <span style="float:right;cursor: pointer;" @click="modal6=false">x</span>
        </div>
         <Transfer
        ref="refTransfer"
        :data="data"
        :target-keys="targetKeys"
        :titles="tranfertitles"
        filterable
        :filter-method="filterMethod"
        @on-change="handleChange2">
        </Transfer>
    </Modal>
   </div>
</template>
<script>
export default {
  name: 'HModalTransfer',
  props: {
    title: {
      type: String,
      default: 'Display TransferDialog'
    },
    btnText: {
      type: String,
      default: 'click me'
    },
    data: {
      type: Array
    },
    targetKeys: {
      type: Array
    },
    tranfertitles: {
      type: Array,
      default: () => {
        return ['未选', '已选']
      }
    }
  },
  data () {
    return {
      loading: true,
      modal6: false
    }
  },
  methods: {
    asyncOK () {
      setTimeout(() => {
        this.modal6 = false
      }, 2000)
    },
    handleChange2 (newTargetKeys) {
      this.$emit('targetChange', newTargetKeys)
    },
    filterMethod (data, query) {
      return data.label.indexOf(query) > -1
    },
    visibleChange(val) {
      // 清空穿梭框搜索条件
      this.$refs.refTransfer.$children[0].query = ''
      this.$refs.refTransfer.$children[2].query = ''
      // 清空穿梭框复选框
      this.$refs.refTransfer.$children[0].toggleSelectAll()
      this.$refs.refTransfer.$children[2].toggleSelectAll()
      this.$emit('modalVisibleChange', val)
    }
  }
}
</script>

<style>
</style>
