<template>
  <el-dialog append-to-body :title="title" :visible.sync="innerVisible" width="40%">
    <el-row class="transfer">
      <el-col :span="12">
        <header>
          <el-input
            v-model="queryForm.keyWords"
            clearable
            placeholder="请输入关键字"
            suffix-icon="el-icon-search"
            @change="search" />
        </header>
        <el-dropdown>
          <span class="el-dropdown-link">
            按字母顺序查看
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>按创建顺序查看</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <ul v-infinite-scroll="fetchData" class="options" :infinite-scroll-disabled="disabled">
          <li v-for="(item, index) in options" :key="index" @click="transfer(index)">
            <span>{{ item.userName }}</span>
            <i class="el-icon-arrow-right"></i>
          </li>
        </ul>
      </el-col>
      <el-col :span="12">
        <header>
          <span>已选： {{ selected.length }}个员工</span>
          <el-button :disabled="selected.length == 0" type="text" @click="clear">清空</el-button>
        </header>
        <ul class="options">
          <li v-for="(item, index) in selected" :key="index" @click="goBack(index)">
            <span>{{ item.userName }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <span slot="footer">
      <el-button size="mini" type="primary" @click="save">保存</el-button>
      <el-button size="mini" @click="innerVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import userApi from '@/api/system/user'

  export default {
    name: 'SelectUser',
    props: {
      title: {
        type: String,
        default: '选择',
      },
      multiple: Boolean,
      queryParams: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        innerVisible: false,
        queryForm: {
          keyWords: '',
          pageNum: 1,
          pageSize: 50,
        },
        disabled: false,
        total: 0,
        list: [],
        options: [],
        selected: [],
      }
    },
    mounted() {
      // this.fetchData()
    },
    methods: {
      open() {
        this.innerVisible = true
      },
      save() {
        this.innerVisible = false
        this.$emit('save', this.selected)
      },
      search() {
        this.queryForm.pageNum = 1
        this.fetchData('new')
      },
      async fetchData(type) {
        let query = Object.assign(this.queryForm, this.queryParams)
        const {
          data: { list, total },
        } = await userApi.getList(query)
        this.total = total
        if (list && list.length > 0) {
          for (let index in list) {
            list[index].sort = (this.queryForm.pageNum - 1) * this.queryForm.pageSize + index
          }
          if (type === 'new') {
            this.list = list
            this.options = list
          } else {
            this.list = this.list.concat(list)
            this.options = this.options.concat(list)
          }
          this.queryForm.pageNum++
        }
        // 禁用加载请求
        this.disabled = false
        if (this.list.length >= this.total) {
          this.disabled = true
        }
      },

      transfer(index) {
        if (!this.multiple && this.selected.length === 1) {
          this.$message({
            type: 'warning',
            message: '只能选择一个员工，请勿多选！',
          })
          return
        }
        const arr = this.options.splice(index, 1)
        if (arr[0]) this.selected.push(arr[0])
        this.selected.sort(function (a, b) {
          return a.sort - b.sort
        })
      },
      goBack(index) {
        const arr = this.selected.splice(index, 1)
        if (arr[0]) this.options.push(arr[0])
        this.options.sort(function (a, b) {
          return a.sort - b.sort
        })
      },
      clear() {
        this.selected = []
        this.options = this.list
      },
    },
  }
</script>

<style lang="scss" scoped>
  .transfer {
    height: 500px;
    border: 1px solid #ebeef5;

    .el-col {
      height: 100%;

      &:first-child {
        border-right: 1px solid #ebeef5;
      }

      .el-dropdown {
        height: 50px;
        line-height: 50px;
        margin: 0 8px;
        width: calc(100% - 16px);
        border-bottom: 1px solid #ebeef5;

        span {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }

      .options {
        margin: 0;
        padding: 0 10px;
        list-style: none;
        height: 400px;
        overflow-y: auto;

        li {
          height: 50px;
          line-height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #ebeef5;

          & i {
            transition: all 0.3s;
            cursor: pointer;

            &:hover {
              color: #1d66dc;
              font-weight: bold;
            }
          }
        }
      }
    }

    header {
      height: 50px;
      padding: 9px 8px;
      border-bottom: 1px solid #ebeef5;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>
