
<template>
  <div class="spe-group">
    <div class="spe-transfer-left spe-transfer">
      <div class="check-all check-all-left">
        <el-checkbox v-model="checkLeft">全选</el-checkbox>
        <span></span>
      </div>
      <div class="transfer-tree">
        <el-input prefix-icon="el-icon-search" style="width: 200px; margin: 10px 0px;" v-model="treeLeftval" placeholder="请输入规格值名称筛选"></el-input>
        <div class="tree-content">
          <el-tree
            :data="rightData"
            show-checkbox
            node-key="id"
            :default-expand-all="true"
            :props="defaultProps"
            @check="handleLeftCheck">
          </el-tree>
        </div>
      </div>
    </div>


    <div class="spe-transfer-button">
      <el-button
        type="primary"
        @click.native="addToLeft"
        :disabled="!leftChecked.length"
        class="el-transfer__button">
        <i class="el-icon-arrow-right"></i>
      </el-button>
      <el-button
        type="primary"
        @click.native="addToRight"
        :disabled="!rightChecked.length"
        class="el-transfer__button ">
        <i class="el-icon-arrow-left"></i>
      </el-button>
    </div>

    <div class="spe-transfer-right spe-transfer">
      <div class="check-all check-all-right">
        <el-checkbox v-model="checkRight">全选</el-checkbox>
        <span></span>
      </div>

      <div class="transfer-tree">
        <el-input prefix-icon="el-icon-search" style="width: 200px; margin: 10px 0px;"  v-model="treeRightval" placeholder="请输入规格值名称筛选"></el-input>
        <div class="tree-content">
          <el-tree
            :data="leftData"
            show-checkbox
            node-key="id"
            :default-expand-all="true"
            :props="defaultProps">
          </el-tree>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
// mack 数据 规格值组
const standardGroup = [
  { name: '规格值组一', id: 'asd1qwe12e21321dwsad', children: [{ name: '规格值1', id: '12qwdsad123123asadqwd' }, { name: '规格值2', id: '12qwdsad123123asadqwdsa' }], isGroup: true },
  { name: '规格值组二', id: 'asd1qwe12e213sds21dwsad', children: [{ name: '规格值2', id: '12qwdsad123123ssaasdqwd' }], isGroup: true },
  { name: '规格值组三', id: 'asd1qwe12ase21321dwsad', children: null, isGroup: false }
];

export default {
  name: 'spe-group',

  data() {
    return {
      leftData: [],
      rightData: [],
      leftChecked: [],
      rightChecked: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeRightval: '',
      treeLeftval: '',
      checkLeft: false,
      checkRight: false
    };
  },

  methods: {
    addToRight() {

    },

    addToLeft() {

    },
    handleLeftCheck(data, current) {
      // 左边选择的节点
      console.log(current);
      this.leftChecked = current.checkedKeys;
    }
  },

  beforeMount() {
    // 规格值数据
    this.rightData = standardGroup;
  }
};
</script>

<style lang="less" scoped>
.spe-group {
  position: relative;
  height: 285px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  font-size: 0px;
  .spe-transfer {
    display: inline-block;
    vertical-align: middle;
    width: 247px;
    height: 285px;
    box-sizing: border-box;
    .check-all {
      height: 20px;
      line-height: 20px;
      padding: 10px;
      background-color: #f5f7fa;
    }
    .check-all-left {
      border-top-left-radius: 5px;
    }
    .check-all-right {
      border-top-right-radius: 5px;
    }
    .transfer-tree {
      text-align: center;
      border-radius: 50%;
    }
    .tree-content {
      height: 190px;
      overflow: auto;
    }
  }
  .spe-transfer-left {
    border-right: 1px solid #dcdfe6;
  }
  .spe-transfer-right {
    border-left: 1px solid #dcdfe6;
  }
  .spe-transfer-button {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    padding: 0 20px;
  }
  .el-transfer__button {
    margin: 0 auto;
    margin-bottom: 10px;
  }
}
</style>

