<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2018-10-10 14:44:45
 -->
<template>
  <div class="login-wrap">
    <header>
      <div class="login-wrap-header">
        <img class="login-wrap-inline" src="../../assets/logo.png" alt="logo" />
        <span class="login-wrap-inline">好办管理后台</span>
      </div>
    </header>
    <section>
      <!-- <ul class="list-content">
        <draggable :list="gicData" class="compenent" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
          <li v-for="(item, index) in gicData" :key="index + 'gic'">
            <div class="li-cell">{{ item.label }}</div>
            <org-tree v-if="item.children.length" :itemData="item.children"></org-tree>
          </li>
        </draggable>
      </ul> -->
      <org-tree :itemData="gicData"></org-tree>

      <!-- <ul class="list-content">
        <draggable :options="{ group: { name: 'people', pull: true, put: true }, sort: true }" v-model="wxData" class="drag-wrap">
          <li v-for="(item, index) in wxData" :key="index + 'wx'">
            <div class="li-cell">{{ item.label }}</div>
            <wx-tree v-if="item.children.length" :itemData="item.children"></wx-tree>
          </li>
        </draggable>
      </ul> -->
      <wx-tree :itemData="wxData" v-model="wxData"></wx-tree>
      <el-button type="primary" @click="getData">获取数据</el-button>
    </section>
    <footer class="p-t-35">
      <vue-gic-footer></vue-gic-footer>
    </footer>
  </div>
</template>
<script>
import orgTree from './org-tree.vue';
import wxTree from './wx-tree.vue';
// import { _debounce } from '@/common/js/public';
// import errMsg from '@/common/js/error';
// import { postRequest } from '@/api/api';

export default {
  name: 'login',
  data() {
    return {
      // 企业列表
      gicData: [
        {
          id: 1,
          expand: false,
          label: '总部1',
          children: [
            {
              id: 11,
              expand: false,
              label: '总部11',
              children: [
                {
                  id: 111,
                  expand: false,
                  label: '总部111',
                  children: []
                }
              ]
            },
            {
              id: 12,
              expand: false,
              label: '总部12',
              children: [
                {
                  id: 121,
                  expand: false,
                  label: '总部121',
                  children: []
                }
              ]
            }
          ]
        }
      ],

      wxData: [
        {
          id: 2,
          expand: false,
          label: '总部2',
          children: [
            {
              id: 21,
              expand: false,
              label: '总部21',
              children: [
                {
                  id: 211,
                  expand: true,
                  label: '总部211',
                  children: []
                }
              ]
            },
            {
              id: 22,
              expand: false,
              label: '总部22',
              children: [
                {
                  id: 221,
                  expand: true,
                  label: '总部221',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    };
  },
  computed: {},
  methods: {
    getData() {
      const that = this;
      console.log(that.gicData, that.wxData);
    },
    /**
     * 处理路由跳转
     */
    toRouterView(val) {
      const that = this;
      // 模拟检查数据,有两个参数
      that.$router.push({
        path: val.path
      });
    }
  },
  mounted() {
    // const that = this;
    if (!!localStorage.getItem('userInfo')) {
      localStorage.removeItem('userInfo');
    }
  },
  components: {
    orgTree,
    wxTree
  }
};
</script>
<style lang="less" scoped>
.list-content {
  position: relative;
  width: 500px;
  height: 200px;
}
.li-cell {
  line-height: 26px;
}

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-column {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.flex-row {
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}

.flex-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-pack-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.p-lr-5 {
  padding: 0 5px;
}

.color-676767 {
  color: #676767;
}

.color-808080 {
  color: #808080;
  &.color-303133 {
    color: #303133;
  }
}

.login-wrap {
  position: relative;
  header {
    width: 100%;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 1);
  }
  &-header {
    width: 1400px;
    height: 64px;
    line-height: 64px;
    padding: 0 0 0 60px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*-webkit-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
      -moz-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
      box-shadow: 0px 0px 10px rgba(147,165,184,0.13);*/
  }
  &-inline {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: #1f2f3d;
  }
  &-body {
    width: 100%;
    background: url('../../assets/login/banner.png') no-repeat center center;
    background-size: auto 640px;
  }
  &-out {
    position: relative;
    width: 1400px;
    height: 640px;
    margin: 0 auto;
    /*background: rgba(0,0,0,1);*/
  }
  &-inner {
    position: absolute;
    top: 140px;
    right: 170px;
    width: 303px;
    height: 340px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(235, 238, 245, 1);
    border-radius: 4px;
    -webkit-box-shadow: 2px 0px 12px rgba(6, 19, 33, 0.1);
    -moz-box-shadow: 2px 0px 12px rgba(6, 19, 33, 0.1);
    box-shadow: 2px 0px 12px rgba(6, 19, 33, 0.1);
    &__block {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
    }
    &__head {
      position: relative;
      width: 100%;
      height: 56px;
      line-height: 56px;
      border-bottom: 1px solid rgba(235, 238, 245, 1);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 18px;
      color: #303133;
      ul {
        position: relative;
      }
      #line-active {
        position: absolute;
        bottom: 0;
        left: 123px;
        width: 56px;
        height: 2px;
        background: #1890ff;
        z-index: 2;
        transition: all 0.3s ease-in;
      }
    }
    &__body {
      position: relative;
      width: 100%;
      height: 317px;
      text-align: center;
      padding: 34px 0 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      .loginForm {
        width: 100%;
        padding: 0 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        .w-139 {
          width: 139px;
        }
        .code-item {
          text-align: left;
        }
        .el-button {
          width: 100%;
          padding: 0;
          height: 40px;
          line-height: 40px;
        }
        .el-input {
          /deep/ .el-input__inner {
            height: 40px;
            line-height: 40px;
          }
        }
      }
      #qrcode {
        width: 156px;
        height: 156px;
        margin: 0 auto;
      }
    }
    &__title {
      width: 100%;
      margin-top: 20px;
      font-size: 12px;
      color: #606266;
      &.m-t-5 {
        margin-top: 5px;
      }
      .el-button {
        font-size: 12px;
      }
    }
    &__expired {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      top: 34px;
      left: 73px;
      width: 157px;
      height: 156px;
      background: rgba(255, 255, 255, 1);
      opacity: 0.9;
    }
    &__selectBody {
      position: relative;
      width: 100%;
      height: 317px;
      text-align: center;
      padding: 32px 21px 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      .el-button--primary {
        width: 100%;
        margin-top: 27px;
      }
    }
    &__swiper {
      margin-top: 30px;
      .swiper-cell {
        cursor: pointer;
        .swiper-slide-log_img {
          padding: 6px;
          border-radius: 8px;
          text-align: center;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          &.defalut-bg {
            padding: 25px;
            background: #82c5ff;
            -webkit-transform: scale(0.8);
            -moz-transform: scale(0.8);
            transform: scale(0.8);
            i {
              font-size: 35px;
              color: #e5f3ff;
            }
          }
        }
        .img-bg {
          background: #ededee;
          -webkit-transform: scale(0.8);
          -moz-transform: scale(0.8);
          transform: scale(0.8);
        }
        &.current-item {
          .swiper-slide-log_img {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
            &.defalut-bg {
              /*padding: 25px;*/
              -webkit-transform: scale(1);
              -moz-transform: scale(1);
              transform: scale(1);
            }
          }
        }
      }
      .swiper-slide {
        &__img {
          width: 72px;
          height: 72px;
          border-radius: 8px;
        }
        &__p {
          margin-top: 14px;
          font-size: 14px;
          color: #6b6d71;
        }
      }
      .swiper-button-prev {
        height: 97px;
        margin-top: -66px;
        left: 0;
        padding-top: 55px;
        background: #fff;
        background-image: none;
        i {
          color: #303133;
        }
      }
      .swiper-button-next {
        height: 97px;
        margin-top: -66px;
        right: 0;
        padding-top: 55px;
        background: #fff;
        background-image: none;
        i {
          color: #303133;
        }
      }
    }
  }
  &-expired__title {
    font-size: 12px;
    color: #f56c6c;
  }
  .el-icon-refresh {
    color: #1890ff;
    cursor: pointer;
  }
  .el-button {
    &.h-48 {
      height: 48px;
    }
  }
}
</style>
