<template>
	<view class="business">
    <!--商户 || 酒道馆列表-->
    <view class="existed">
      <view class="existed-content" v-if="Object.values(loginHistory).length > 0">
        <!--顶部提示-->
        <view class="top-tips" :style="'background-image:url('+ list_bg +')'">
          请选择管理的{{ pageTitle }}
        </view>
        <!--商户列表-->
        <view class="mer-list">
          <view class="block" v-for="(item,index) in Object.values(loginHistory)" :key="index">
            <view class="left">
              <view class="img">
                <image class="block-image" :src="item.mer_avatar || '/static/images/f.png'"></image>
              </view>
              <view class="name">{{ item.mer_name || '' }}</view>
            </view>
            <view v-if="item.exp > current_timestamp" class="right" @click="autoLogin(item)">
              登录 <text class="iconfont icon-xiangyou"></text>
            </view>
            <view v-else class="right not-btn">已过期</view>
          </view>
        </view>
        <!--新账号登录-->
        <view class="login-btn" @click="loginPopupShow">新账号登录</view>
      </view>
    </view>
    <!-- 登录弹框 -->
    <uni-popup ref="loginPopup" type="center">
      <view class="login-content" :style="'background-image:url('+ login_bg +')'">
        <view class="login-form">
          <view class="login-logo">
            <image class="block-image" :src="'/static/images/f.png'"></image>
          </view>
          <view class="title">立即登录！</view>
          <view class="login-item">
            <text class="item-icon iconfont icon-shouji"></text>
            <input class="item-input" v-model="loginInfo.account" placeholder="请输入登录账号" type="text" />
          </view>
          <view class="login-item">
            <text class="item-icon iconfont icon-mimatubiao"></text>
            <input class="item-input" v-model="loginInfo.password" placeholder="请输入登录密码" type="password" />
          </view>
          <view class="login-buttons">
            <view class="login-btn" @click="clickLogin">登录</view>
            <view class="login-btn not-btn" @click="loginPopupClose">取消</view>
          </view>
        </view>
      </view>
    </uni-popup>


	</view>
</template>

<script>
import {mapGetters} from "vuex";
import {storeLogin} from "@/api/store";
import { HTTP_REQUEST_URL } from '@/config/app.js';

export default {
  name: 'business',
  components: {},
  data() {
    return {
      is_sys: '',
      pageTitle: '',
      // 已登录列表
      list_bg: '',
      loginHistory: {},
      // 酒道馆登录相关
      login_bg: '',
      loginInfo:{
        account: '',
        password: ''
      },
      // 当前时间戳
      intervalId: '',
      current_timestamp: 0,
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor', 'shopIsLogin', 'shopMerId'])
  },
  onLoad: function(options) {
    this.is_sys = options.is_sys;
    // 登录后操作
    let isChange = options.change || false;
    // if((this.is_sys == 1 || this.shopIsLogin) && !isChange){
    //   uni.navigateTo({
    //     url: '/pages/admin/business/index?is_sys=' + this.is_sys
    //   })
    // }
    // 设置页面标题
    this.pageTitle = '商家';
    if(this.is_sys == 2) this.pageTitle = '酒道馆';
    else if(this.is_sys == 3) this.pageTitle = '烟酒店';

    uni.setNavigationBarTitle({
      title: this.pageTitle + '登录'
    })
    // 未登录  初始化
    this.init();
  },
  onShow() {
    let _this = this;
    _this.intervalId = setInterval(function () {
      const now = new Date();
      _this.current_timestamp = Math.ceil(now.getTime() / 1000)
    }, 1000); // 每秒更新一次时间
  },
  onUnload() {
    // 页面销毁时清除定时器
    if (this.intervalId) clearInterval(this.intervalId);
  },
  onReady() {
    this.login_bg = `${HTTP_REQUEST_URL}/static/images/mer/mer_login_bg.png`;
    this.list_bg = `${HTTP_REQUEST_URL}/static/images/mer/mer_login_list.png`;
  },
  methods: {
    // 初始化
    init(){
      // 商户类别：0=普通商户，1=酒道馆，2=供应商，3=烟酒店
      // is_sys：0=商户管理，1=平台管理，2=酒道馆管理，3=烟酒店管理
      let merchantType = '0';
      if(this.is_sys == 2) merchantType = '1';
      else if(this.is_sys == 3) merchantType = '3';

      let loginHistory = this.$Cache.get('MER_LOGIN_HISTORY_' + merchantType) || {};
      if(typeof loginHistory === 'string') loginHistory = JSON.parse(loginHistory) || {};
      this.loginHistory = Object.assign({}, loginHistory);
      // 判断：存在已经登录账户  显示已登录账户信息列表；不存在则显示登录弹框
      if(Object.values(loginHistory).length <= 0) this.loginPopupShow();
    },
    // 商户登录 - 提交登录信息
    clickLogin(){
      let _this = this;
      let params = _this.loginInfo || {};
      uni.showLoading({title: '登录中...', mask: true})
      storeLogin(params).then(res => {
        if (res.status == 200) {
          let data = res.data || {};
          // 记录登录状态
          _this.$store.commit("SHOP_LOGIN", {
            'token': data.token,
            'time': data.exp,
            'shop_mer_id': data.mer_id,
          });
          // 记录登录历史
          let merchantType = data.merchant_type || 0;
          let loginHistory = this.$Cache.get('MER_LOGIN_HISTORY_' + merchantType) || {};
          if(typeof loginHistory === 'string') loginHistory = JSON.parse(loginHistory) || {};
          loginHistory[data.mer_id] = data;
          _this.$Cache.set('MER_LOGIN_HISTORY_' + merchantType, JSON.stringify(loginHistory))
          // 进入商户 || 酒道馆 管理端
          uni.navigateTo({
            url: '/pages/admin/business/index?is_sys=' + _this.is_sys
          })
        }
        uni.hideLoading();
      }).catch(err => {
        uni.hideLoading();
        this.$util.Tips({ title: err });
      });
    },
    // 选中已登录商户  自动登录
    autoLogin(item){
      // 记录登录状态
      this.$store.commit("SHOP_LOGIN", {
        'token': item.token,
        'time': item.exp,
        'shop_mer_id': item.mer_id,
      });
      // 进入商户 || 酒道馆 管理端
      uni.navigateTo({
        url: '/pages/admin/business/index?is_sys=' + this.is_sys
      })
    },
    // 登录弹框 - 显示
    loginPopupShow(){
      this.$refs.loginPopup.open('center');
    },
    // 登录弹框 - 关闭
    loginPopupClose(){
      this.$refs.loginPopup.close();
    },


  }
}
</script>

<style scoped lang="scss">
.not-btn{
  background-color: #909399!important;
  color: #fff!important;
}
.existed-content{
  width: 100vw !important;
  min-height: 100vh !important;
  background: #f6f6f6;
  .top-tips{
    width: 100%;
    font-size: 45rpx;
    font-weight: bold;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    height: 230rpx;
    padding: 0 30rpx 30rpx 30rpx;
  }
  .mer-list{
    padding: 30rpx;
    background: #f6f6f6;
    border-top-left-radius: 35rpx;
    border-top-right-radius: 35rpx;
    position: relative;
    top: -30rpx;

    .block{
      width: 100%;
      height: 130rpx;
      background: #FFFFFF;
      padding: 0 20rpx;
      border-radius: 15rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      .left{
        width: calc(100% - 130rpx);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        .img{
          width: 100rpx;
          height: 100rpx;
          .block-image{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .name{
          width: calc(100% - 130rpx);
          height: 120rpx;
          line-height: 120rpx;
          padding-left: 20rpx;
        }
      }
      .right{
        width: 120rpx;
        background: #b51613;
        color: #e6babe;
        border-radius: 150rpx;
        height: 40rpx;
        line-height: 40rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        padding: 0 20rpx;
        .iconfont{
          font-size: 24rpx;
          height: 40rpx;
          line-height: 42rpx;
        }
      }
    }
    .block:not(:last-child){
      margin-bottom: 30rpx;
    }
  }
  .login-btn{
    position: fixed;
    left: 10%;
    bottom: 100rpx;
    width: 80%;
    height: 80rpx;
    font-size: 35rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 100rpx;
    background: #8e1318;
    color: #f4dede;
  }
}
// 登录弹框
.login-content{
  background: #f6f6f6;
  height: 100vh;
  width: 100vw;
  background-size: 100% auto;
  background-repeat: no-repeat;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  .login-form{
    position: relative;
    background: #FFFFFF;
    width: 80%;
    padding: 100rpx 35rpx;
    border-radius: 20rpx;

    .login-logo{
      width: 120rpx;
      height: 120rpx;
      position: absolute;
      top: calc(0rpx - (120rpx / 2));
      left: calc((100% - 100rpx) / 2);
      .block-image{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2rpx solid #FFFFFF;
      }
    }
    .title{
      font-size: 36rpx;
      height: 80rpx;
      line-height: 60rpx;
      font-weight: bold;
    }
    .login-item{
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      height: 100rpx;
      border-top: 2rpx solid #f3f3f3;
      border-bottom: 2rpx solid #f3f3f3;
      .item-icon{
        font-size: 40rpx;
        width: 70rpx;
        height: 60rpx;
        line-height: 60rpx;
      }
      .item-input{
        width: calc(100% - 80rpx);
        height: 60rpx;
        line-height: 60rpx;
        padding-left: 15rpx;
      }
    }
    .login-buttons{
      margin-top: 130rpx;
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;

      .login-btn{
        width: calc((100% - 20rpx) / 2);
        background: #8e1318;
        color: #f4dede;
        height: 70rpx;
        font-size: 30rpx;
        line-height: 70rpx;
        text-align: center;
        border-radius: 100rpx;
      }
    }
  }
}

</style>
