<template>
  <div
    class="UserInfo-Card-Wrap"
    ref="CardWrap"
    @mouseleave="offEditBar"
  >
    <div :class="['UserInfo-Card-EditBar',{'editBarVisible':editBarVisible},{'layoutRight':layoutType}]">
      <div
        class="EditBar-item"
        @click="showDetail"
      >
        <div class="EditBar-item-inner">
          <img src="../../assets/images/user/detail_icon.png" />
        </div>
        <span class="EditBar-item-inner-text">详情</span>
      </div>
      <div
        class="EditBar-item"
        @click="showEdit"
      >
        <div class="EditBar-item-inner">
          <img src="../../assets/images/user/edit_icon.png" />
        </div>
        <span class="EditBar-item-inner-text">编辑</span>
      </div>
      <div
        class="EditBar-item"
        @click="showAccount"
      >
        <div class="EditBar-item-inner">
          <img src="../../assets/images/user/account_icon.png" />
        </div>
        <span class="EditBar-item-inner-text">账户</span>
      </div>
      <div
        class="EditBar-item"
        @click="toggleLock"
      >
        <div class="EditBar-item-inner">
          <img
            v-if="state === '1'"
            src="../../assets/images/user/lock_icon.png"
          />
          <img
            v-else-if="state === '2'"
            src="../../assets/images/user/unlock_icon.png"
          />
        </div>
        <span class="EditBar-item-inner-text">{{state === '1'?'锁定':'解锁'}}</span>
      </div>
      <div class="EditBar-trans"></div>
    </div>
    <div :class="['UserInfo-Box', 'UserInfo-Card',{'hover':cardZIndex}]">
      <div class="UserInfo-Title-Wrap">
        <div class="UserInfo-Title">
          <div class="UserInfo-IdTitle">ID:{{id}}</div>
          <div
            ref="HeaderImg"
            @mouseenter="showEditBar"
          >
            <header-img-box
              :class="['UserInfo-HeaderImg', {'hover':editBarVisible}]"
              :imgUrl="customerHead"
            ></header-img-box>
          </div>
          <div class="UserInfo-Name-Box">
            <div class="UserInfo-Name-Col">
              <span>{{customerName}}</span>
              <span>{{getTypeLabel(customerType)}}</span>
            </div>
            <div class="UserInfo-Name-Col">
              <span>{{$formatePhone(customerPhone)}}</span>
              <span>{{customerSex}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="UserInfo-Content">
        <div class="UserInfo-Content-Col UserInfo-State-Box">
          <div
            v-if="state === '1'"
            class="UserInfo-State"
          >
            <div class="UserInfo-State-Icon">
              <img src="@/assets/images/user/normal_icon.png" />
            </div>
            正常使用
          </div>
          <div
            v-else
            class="UserInfo-State"
          >
            <div class="UserInfo-State-Icon">
              <img src="@/assets/images/user/locked_icon.png" />
            </div>
            已锁定
          </div>
          <div
            v-if="isFirstRecharge"
            class="UserInfo-State"
          >
            <div class="UserInfo-State-Icon">
              <img src="@/assets/images/user/normal_icon.png" />
            </div>
            已充值
          </div>
          <div
            v-else
            class="UserInfo-State"
          >
            <div class="UserInfo-State-Icon">
              <img src="@/assets/images/user/locked_icon.png" />
            </div>
            未充值
          </div>
        </div>
        <div class="UserInfo-Content-Col">注册时间：{{$formatDate(new Date(createAt),'yyyy-MM-dd')}}</div>
        <div class="UserInfo-Content-Col UserInfo-CampusName">{{areaName}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import getUserInfoLabelMixin from '@/mixins/user/getUserInfoLabel.js';

export default {
  props: {
    areaName: String,
    createAt: String,
    customerHead: String,
    customerName: String,
    customerPhone: String,
    customerSex: String,
    customerType: String,
    id: Number,
    isFirstRecharge: Number,
    state: String,
    showDetail: { type: Function, default: () => {} },
    showEdit: { type: Function, default: () => {} },
    showAccount: { type: Function, default: () => {} },
    toggleLock: { type: Function, default: () => {} },
  },
  mixins: [getUserInfoLabelMixin],
  data() {
    return {
      editBarVisible: false,
      cardZIndex: false,
      layoutType: 0, // 0 为默认左边弹出 1 为右边弹出
      wrapOffsetLeft: 0,
    };
  },
  mounted() {
    let sideBarDom = document.querySelector('.scroll-container'); // 导航部分
    let sideBarWidth = sideBarDom ? sideBarDom.offsetWidth : 0;
    let el = this.$refs.CardWrap;
    let wrapOffsetLeft = el.offsetLeft;
    while ((el = el.offsetParent)) {
      wrapOffsetLeft += el.offsetLeft;
    }
    console.log(wrapOffsetLeft, sideBarWidth + 60);

    this.wrapOffsetLeft = wrapOffsetLeft;
    if (this.wrapOffsetLeft < sideBarWidth + 60) {
      this.layoutType = 1;
    }
    //   this.offsetLeft = this.wrapOffsetLeft + 60;
  },
  methods: {
    showEditBar() {
      this.editBarVisible = true;
    },
    offEditBar() {
      this.editBarVisible = false;
    },
  },
};
</script>

<style lang="scss">
@import '../../assets/styles/variables.scss';

.UserInfo-Card-Wrap {
  width: 170px;
  height: 174px;
  display: flex;
  align-items: flex-end;
  margin-right: 14px;
  margin-bottom: 14px;
  position: relative;
  .UserInfo-Card-EditBar {
    position: absolute;
    left: 0;
    z-index: 2001;
    width: 0px;
    height: 158px;
    background-color: #00c2ff;
    box-shadow: 2px 2px 10px #333;
    border-radius: 8px 0 0 8px;
    transition: all 0.28s;
    &.editBarVisible {
      left: -36px;
      width: 36px;
      .EditBar-trans {
        opacity: 1;
      }
    }
    .EditBar-item {
      height: 39px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      &:first-child {
        border-radius: 8px 0 0 0;
      }
      &:hover {
        background-color: #11a6e8;
      }
      .EditBar-item-inner {
        width: 14px;
        height: 14px;
        position: absolute;
        top: 6px;
        left: 10px;
      }
      .EditBar-item-inner-text {
        position: absolute;
        font-size: 12px;
        color: #fff;
        width: 36px;
        height: 14px;
        bottom: 0;
        text-align: center;
        overflow: hidden;
      }
    }
    .EditBar-trans {
      opacity: 0;
      position: absolute;
      right: -13px;
      top: 26px;
      border-left: 13px solid #00c2ff;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      transition: all 0.28s;
    }
  }
  .UserInfo-Card-EditBar.layoutRight {
    left: 66px;
    border-radius: 0 8px 8px 0;
    &.editBarVisible {
      .EditBar-trans {
        right: 36px;
      }
    }
    .EditBar-item {
      &:first-child {
        border-radius: 0 8px 0 0;
      }
    }
    .EditBar-trans {
      right: 0px;
      transform: rotate(180deg);
    }
  }
  .UserInfo-Card {
    height: 158px;
    border-radius: 0 8px 8px 8px;
    box-shadow: 2px 2px 5px #bbbec2;
    z-index: 2000;
    &:hover {
      box-shadow: 2px 2px 5px #999;
    }
    // &.hover {
    //   z-index: 2002;
    // }
    // .UserInfo-Title-Wrap {
    //   height: 150px;
    //   padding-top: 30px;
    // }
    .UserInfo-Title {
      // margin-top: 30px;
      border-radius: 0 8px 0 0;
    }
    .UserInfo-IdTitle {
      position: absolute;
      left: 0;
      top: -16px;
      width: 88px;
      height: 16px;
      line-height: 16px;
      background-color: #4e82fb;
      color: #fff;
      text-indent: 10px;
      border-radius: 20px 20px 0 0 / 40px 40px 0 0;
    }
    .UserInfo-Content {
      height: 90px;
      border-radius: 0 0 8px 8px;
    }
    .UserInfo-HeaderImg {
      transition: all 0.28s;
    }
    .UserInfo-HeaderImg.hover {
      border-color: #00c2ff;
    }
  }
}
@media screen and (min-width: $bigScreenWidth) {
  .UserInfo-Card-Wrap {
    width: 300px;
    height: 310px;
    margin-right: 20px;
    margin-bottom: 20px;
    .UserInfo-Card-EditBar {
      height: 280px;
      &.editBarVisible {
        left: -60px;
        width: 60px;
      }
      .EditBar-item {
        height: 60px;
        .EditBar-item-inner {
          width: 26px;
          height: 26px;
          top: 12px;
          left: 17px;
        }
        .EditBar-item-inner-text {
          width: 60px;
          bottom: 3px;
        }
      }
      .EditBar-trans {
        right: -25px;
        top: 44px;
        border-left: 25px solid #00c2ff;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
      }
    }
    .UserInfo-Card-EditBar.layoutRight {
      left: 120px;
      &.editBarVisible {
        .EditBar-trans {
          right: 60px;
        }
      }
      .EditBar-trans {
        right: 0px;
      }
    }
    .UserInfo-Card {
      height: 280px;
      .UserInfo-IdTitle {
        top: -30px;
        width: 155px;
        height: 30px;
        line-height: 30px;
        text-indent: 24px;
        border-radius: 20px 20px 0 0 / 40px 40px 0 0;
      }
      .UserInfo-Content {
        height: 160px;
      }
    }
  }
}
</style>