<template>
  <div>
    <!-- 弹框: 内容是transfer -->
    <el-dialog title="请选择接收人员" :visible.sync="open" width="40%" @close="handleClose" append-to-body>
      <el-transfer
        v-if="open"
        class="centered-transfer"
        :titles="titles"
        :button-texts="['移除', '添加']"
        v-model="value"
        :data="data"
        filterable
        filter-placeholder="请输入搜索内容"
        @change="dataChange"
      ></el-transfer>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogPush',
  data() {
    return {
      value: [], // 已选中的人员
      // 弹出层标题
      titles: ['人员列表', '接收人'],
      open: false, // 是否打开弹框
      data: [
        {
          key: 0,
          label: '张小刚',
          disabled: false,
        },
        {
          key: 1,
          label: '李小明',
          disabled: false,
        },
        {
          key: 2,
          label: '王小红',
          disabled: false,
        },
        {
          key: 3,
          label: '赵小芳',
          disabled: false,
        },
      ],
      leftDefault: [], // 默认选中的人员
    }
  },
  methods: {
    openDialog() {
      this.open = true
      // 清空已选中的人员
      this.value = []
      this.getPersonnelList()
    },
    // 显隐列初始默认隐藏列
    handleClose() {
      this.open = false
      // 清空已选中的人员
      this.value = []
      this.$emit('getList')
    },
    // 获取人员列表
    getPersonnelList() {
      console.log('🚀 ~ getPersonnelList ~ getPersonnelList:', )
      // 接口().then(res => {
      //   this.data = {
      //     key: res.id,
      //     label: res.name,
      //     disabled: false,
      //  }
      // })
      
    },
    dataChange() {
      console.log('🚀 ~ dataChange ~ dataChange:', this.value)
    },
    clearQuery(left, right) {
      console.log('🚀 ~ clearQuery ~ 清空搜索:', )
      // 'left' / 'right'， 清空两边的搜索框
      
    },
    submit() {
      console.log('🚀 ~ submit ~ submit:', this.value)

    },
  },
}
</script>

<style lang="scss" scoped>
.centered-transfer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
