<template>
  <view class="merchant-root">
    <view class="store-timer" :class="{ 'store-active': switchOpenTime != '' }">
      <text class="text">{{ switchOpenTime }}</text>
    </view>
    <view class="info-root">
      <view class="user-infor-root">
        <image
          @longtap=""
          :src="storeInfo.avatar"
          mode="scaleToFill"
          @tap="previewImage(storeInfo.avatar)"
        />
        <view class="storeName-style-timer">
          <view class="name">{{ storeInfo.storeName }}</view>

          <view class="state">
            <view class="tip" @tap="jumpBusinessStatus">
              <view class="title">营业状态：</view>
              <view
                class="do-business-root business-active"
                >
                  <text class="text">{{store.getters['storeInfo/storeStatus'] === 1?'营业中':store.getters['storeInfo/storeStatus'] === 0?'临时休息':store.getters['storeInfo/storeStatus'] === -1?'休息':store.getters['storeInfo/storeStatus'] === -2?'禁用':'未知'}}</text>
                  <jx-icon icon="shuxie"  color="#fff"/>
                </view>
              </view>
          </view>

          <!-- 营业时间段 -->
          <view
            class="timer-root"
            v-if="
              businessHours.timer != '00:00' && businessHours.timer2 != '00:00'
            "
            @tap="setTime"
          >
            <view class="timer">
              营业时间段{{ businessHours.timer1 }}至{{ businessHours.timer2 }}
              <jx-icon icon="shuxie" color="#fff" />
            </view>

            <view
              class="timer"
              v-if="
                businessHours.timer3 != '00:00' &&
                businessHours.timer4 != '00:00'
              "
            >
              营业时间段{{ businessHours.timer3 }}至{{ businessHours.timer4 }}
              <jx-icon icon="shuxie" color="#fff" />
            </view>
          </view>
        </view>
      </view>

      <view class="esc-switchSoter">
        <button class="esc-btn" @tap="goLogin">退出登录</button>
        <button class="swithcStore-btn" @tap="switchStore">切换门店</button>
      </view>
    </view>
  </view>
</template>
  
  <script lang="ts" setup>
import jxIcon from '@/components/jx-icon/jx-icon.vue'
import userInfo from './userInfo'
import useGlobalFunc from '@/composables/useGlobalFunc'
const { previewImage } = useGlobalFunc()
const {
  storeInfo,            // 用户信息
  businessHours,        // 营业时间段
  goLogin,              // 退出登录
  switchStore,          // 切换门店
  switchOpenTime,       // 门店休息到哪天
  setTime,              // 去修改营业时间
  jumpBusinessStatus,   // 跳转到营业状态页面  
  store
} = userInfo()
</script>
  
  <style lang="scss" scoped>
@import './userInfo.scss';
</style>