<template>
  <view class="me-content_box app-content">
    <image
      :src="`${constant.imgUrl}/ghs/me/bg.png`"
      class="me-content_bg"
    ></image>
    <template v-if="!$util.isEmpty(infoData)">
      <view class="me-user_box">
        <view class="user-info_item">
          <view>
            <view class="name">
              {{ infoData.adminName }}
            </view>
            <view class="mobile">
              ID:{{ infoData.shopAdminId }}
            </view>
          </view>
          <!-- <i class="iconfont iconxiangyou"></i> -->
        </view>
      </view>
      <view class="me-shop_box">
        <view class="me-shop_content content_box">
          <view class="me-shop_top">
            <view class="shop-top_left">
              <app-avatar-module
                :src="infoData.shopImg"
                :width="100"
              />
              <view class="top-info_box">
                <view>
                  {{ infoData.shopName }}
                </view>
                <view>
                  <text>{{ infoData.sjName }}</text>
                </view>
              </view>
            </view>
            <button
              v-if="loginInfo.switchShop"
              @click="shopShow"
              class="admin-button-com default chang-shop_btn"
            >
              <i class="iconfont iconqiehuan1"></i>
              切换店铺
            </button>
          </view>
          <view
            @click="
              pageTo({
                url: '/pagesClient/official/renewal'
              })
            "
            class="image-box"
          >
            <view class="dec"> 店铺服务期至: {{ infoData.deadline }} </view>
            <image :src="`${constant.imgUrl}/ghs/me/upgrade.png`"></image>
          </view>
        </view>
        <view class="account-info_box content_box">
          <view class="info-lf_box">
            <view> 账户余额(元) </view>
            <view> <text>¥ </text> {{ infoData.balance }} </view>
            <view>
              可提现余额 ¥ {{ infoData.txBalance }}
              <text
                v-if="infoData.txBalance > 0"
                @click="checkToApplyCash"
                class="to-cash"
              >提现</text>
            </view>
          </view>
          <!-- <button @click="pageTo({ url: '/pagesStore/me/recharge' })" class="admin-button-com default">充值</button> -->
        </view>
        <view class="module-com content_box user-open_bx">
          <view class="input-line-wrap">
            <tui-list-cell
              @click="pageTo({ url: '/pagesStore/me/withdraw' })"
              class="line-cell"
              :hover="false"
              :arrow="true"
            >
              <div class="tui-title">提现记录</div>
            </tui-list-cell>
            <tui-list-cell
              @click="pageTo({ url: '/pagesStore/me/incomeExpenses' })"
              class="line-cell"
              :hover="false"
              :arrow="true"
            >
              <div class="tui-title">收支明细</div>
            </tui-list-cell>
            <tui-list-cell
              @click="pageTo({ url: '/pagesStore/me/rechargeList' })"
              class="line-cell"
              :hover="false"
              :arrow="true"
            >
              <div class="tui-title">充值记录</div>
            </tui-list-cell>
            <tui-list-cell
              @click="pageTo({ url: '/pagesStore/me/cashSet' })"
              class="line-cell"
              :hover="false"
              :arrow="true"
            >
              <div class="tui-title">提现帐号</div>
            </tui-list-cell>
            <tui-list-cell
              @click="pageTo({ url: '/pagesStore/me/expressSet' })"
              class="line-cell"
              :hover="false"
              :arrow="true"
            >
              <div class="tui-title">快递设置</div>
            </tui-list-cell>

          </view>
        </view>
        <none-hd :show="AUTHORITY_SHOW" :title="MODEL_TITLE" :btnText="MODEL_BTN_TEXT" @bthClick="toFreeApply_HOME" :authShow="true" experienceFun></none-hd>
      </view>
    </template>
    <DorpdownSelect
      ref="dorpdownSelect"
      :menuObj.sync="menuObj"
      top="0px"
      :isShowTit="false"
      :selectItemId.sync="shopId"
      @selectSussess="selectSussess"
    ></DorpdownSelect>
  </view>
</template>

<script>
import AppAvatarModule from "@/components/module/app-avatar";
import TuiListCell from "@/components/plugin/list-cell";
import { mainMy, applyCash } from "@/api/home";
import { toggleShop } from "@/api/common";
import DorpdownSelect from "@/components/module/dorpdownSelect";
import { selectShop } from "@/mixins";
import { getUser } from "@/utils/auth";
import { list } from "@/mixins";
import { mapGetters } from "vuex";

export default {
  // 我的
  name: "Me",
  components: {
    AppAvatarModule,
    TuiListCell,
    DorpdownSelect,
  },
  mixins: [selectShop, list],
  computed: {
    ...mapGetters(["getLoginInfo"]),
  },
  data () {
    return {
      constant: this.$constant,
      infoData: {},
    };
  },
  onPullDownRefresh () {
    this.init()
  },
  onShow () {
    // this.init()
    if(uni.getStorageSync('switchTabQuery').refresh == '1') {
      this.init()
      uni.removeStorageSync('switchTabQuery')
    }
  },
  methods: {
    shopShow () {
      this.shopId = this.getLoginInfo.shopId;
      this.$refs.dorpdownSelect.dropdownShow = true;
    },
    async init () {
      if(!this.AUTHORITY_SHOW) {
        try {
          const { data } = await mainMy();
          this.infoData = data;
          //不要删除此输出，方法查看 shish 20210512
          console.log('商家ID',data.sjId,'门店ID',data.shopId)
          uni.stopPullDownRefresh();
        } finally {
        }
      }
    },
    async selectSussess () {
      uni.showLoading({
        title: "加载中",
      });
      try {
        let { data } = await toggleShop({ shopId: this.shopId });
        this.$store.commit("setLoginInfo", {
          ...this.getLoginInfo,
          shopId: data.shopId, // 门店id
          shopAdminId: data.id, //员工id
        });
        getUser(true);
        this.init();
      } finally {
        uni.hideLoading();
      }
    },
    checkToApplyCash () {
      let self = this;
      //没有设置提现帐号则提示
      if (self.infoData.cashAccount == "") {
        uni.showModal({
          title: "提示",
          content: "您还没有设置提现帐号",
          confirmText: "去设置",
          success: function (res) {
            if (res.confirm) {
              self.$util.pageTo({ url: "/pagesStore/me/cashSet" });
            }
          },
        });
      } else {
        self.applyCash();
      }
    },
    async applyCash () {
      const { data } = await applyCash({});
    },
    _list () { },
  },
};
</script>

<style lang="scss" scoped>
.me-content_box {
  position: relative;
  overflow-x: hidden;
  .content_box {
    background-color: #ffffff;
    box-shadow: 0px 1px 0px 0px #eeeeee;
    border-radius: 10px;
  }
  & .me-content_bg {
    position: absolute;
    top: 0;
    width: 102%;
    height: 410upx;
  }
  & .me-user_box {
    position: relative;
    padding: 150upx 30upx 0;
    z-index: 10;
    & > .user-info_item {
      display: flex;
      align-items: center;
      & > view:nth-child(1) {
        flex: 1;
        & > view {
          color: #ffffff;
          font-weight: 600;
          &.name {
            font-size: 36upx;
            margin-bottom: 20px;
          }
          &.mobile {
            font-size: 26upx;
          }
        }
      }
      & .iconxiangyou {
        font-size: 20upx;
        color: #ffffff;
      }
    }
  }
  & .me-shop_box {
    padding: 50upx 20px 0;
    & .me-shop_content {
      position: relative;
      z-index: 10;
      & .me-shop_top {
        position: relative;
        & .shop-top_left {
          display: flex;
          padding: 40upx 30upx;
          align-items: center;
          & .top-info_box {
            padding-left: 30upx;
            & > view:nth-child(1) {
              color: #333333;
              font-size: 32upx;
              font-weight: 600;
            }
            & > view:nth-child(2) {
              color: #666666;
              font-size: 26upx;
              font-weight: 400;
              margin-top: 22upx;
            }
          }
        }
        & .chang-shop_btn {
          // padding: 20upx 13upx;
          // width: 176upx;
          // height: 50upx;
          // border: 1px solid #DDDDDD;
          border-radius: 25px;
          color: #666666;
          position: absolute;
          right: 20upx;
          top: 40upx;
          // text-align: center;
          & .iconqiehuan1 {
            margin-right: 10upx;
          }
        }
      }
      & > .image-box {
        width: 100%;
        height: 70upx;
        position: relative;
        z-index: 1;
        & > .dec {
          color: #ffffff;
          font-size: 24upx;
          font-weight: 500;
          position: absolute;
          top: 50%;
          left: 20upx;
          transform: translate(0, -50%);
        }
        & > image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  & .account-info_box {
    margin-top: 20upx;
    padding: 30upx 20upx;
    display: flex;
    & .info-lf_box {
      flex: 1;
      & > view:nth-child(1),
      & > view:nth-child(3) {
        font-weight: 400;
        font-size: 24upx;
      }
      & > view:nth-child(1) {
        color: #999999;
      }
      & > view:nth-child(2) {
        color: #333333;
        font-size: 60upx;
        font-weight: bold;
        margin: 30upx 0;
        & > text {
          font-size: 24px;
        }
      }
      & > view:nth-child(3) {
        color: #666666;
      }
    }
    & > .admin-button-com {
      width: 120upx;
      height: 50upx;
      border-radius: 25upx;
    }
    & .to-cash {
      margin-left: 20upx;
      border: 1upx solid rgba(0, 0, 0, 0.2);
      border-radius: 25upx;
      font-size: 22upx;
      padding: 0 15upx 0 15upx;
    }
  }
  & .user-open_bx {
    margin-top: 20px;
    border-radius: 10px;
  }
}
</style>
