<!--
 * @Author: wanglj 471442253@qq.com
 * @Date: 2022-12-26 15:00:19
 * @LastEditors: wanglj
 * @LastEditTime: 2022-12-26 17:23:50
 * @Description: file content
 * @FilePath: \opms_frontend\src\views\customer\components\Transfer.vue
-->
<template>
  <el-dialog width="40%"
             title="选择销售工程师"
             :visible.sync="innerVisible"
             append-to-body>
    <el-row class="transfer">
      <el-col :span="12">
        <header>
          <el-input v-model="keyword"
                    placeholder="请输入关键字"
                    suffix-icon="el-icon-search"
                    clearable></el-input>
        </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 class="options">
          <li v-for="(item,index) in options"
              :key="index">
            <span>{{item.name}}</span>
            <i class="el-icon-arrow-right"
               @click="transfer(index)"></i>
          </li>
        </ul>
      </el-col>
      <el-col :span="12">
        <header>
          <span>已选： {{selected.length}}个员工</span>
          <el-button type="text"
                     :disabled="selected.length == 0"
                     @click="clear">清空</el-button>
        </header>
        <ul class="options">
          <li v-for="(item,index) in selected"
              :key="index">
            <span>{{item.name}}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <span slot="footer">
      <el-button type="primary"
                 size="mini">保存</el-button>
      <el-button size="mini"
                 @click="innerVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      innerVisible: false,
      keyword: '',
      options: [],
      selected: []
    }
  },
  mounted () {
    this.options = [
      {
        name: 'wlj'
      }
    ]
  },
  methods: {
    transfer (index) {
      const arr = this.options.splice(index, 1)
      if (arr[0]) this.selected.push(arr[0])
    },
    clear () {
      this.selected = []
      this.options = [
        {
          name: 'wlj'
        }
      ]
    }
  }
}
</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;
        & 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>