<template>
  <view class="my-container">
    <status-bar
      :backgroundColor="'#fff'"
      :background="'linear-gradient(-90deg, #e4effe, #fff)'"
      v-if="true"
    ></status-bar>
    <view class="hander">
      <view class="hander-left">
        <view class="user-img">
          <u--image
            :src="
              accountInfo.store_info.store_logo || '../../static/user-img.png'
            "
            shape="circle"
            width="60"
            height="60"
          ></u--image>
        </view>
        <view class="user-info">
          <view class="user-name-block" @click="skipu()">
            <view class="user-name">
              {{ accountInfo.store_info.store_name }}</view
            >
            <u-icon
              style="display: inline-block; margin-left: 8rpx"
              name="arrow-right"
              size="12"
              color="#aaaaaa"
            ></u-icon
          ></view>
          <view class="user-store-name">{{
            accountInfo.store_info.store_grade_name
          }}</view>
        </view>
      </view>
      <view class="hander-right">
        <view class="right-item">
          <u-icon
            class="icon-shezhi"
            custom-prefix="custom-icon-kefu custom-icon"
            size="25"
            color="#000"
          ></u-icon>
          <view class="icon-label">平台客服</view>
        </view>
        <view class="right-item" @click="shipuSetting()">
          <u-icon
            class="icon-shezhi"
            custom-prefix="custom-icon-shezhi custom-icon"
            size="22"
            color="#000"
          ></u-icon>
          <view class="icon-label">设置</view>
        </view>
      </view>
    </view>
    <view class="shop-info">
      <view class="shop-info-item">
        <u-count-to
          class="item-value turnover-item turnover-item-num"
          :start-val="0"
          :end-val="accountInfo.order.yestoday_num"
        ></u-count-to>
        <view class="item-label">昨日订单数</view>
      </view>
      <view class="shop-info-item">
        <u-count-to
          class="item-value turnover-item turnover-item-num"
          :start-val="0"
          :end-val="accountInfo.order.month_num"
        ></u-count-to>
        <view class="item-label">当月订单数</view>
      </view>
      <view class="shop-info-item">
        <u-count-to
          class="item-value turnover-item turnover-item-num"
          :start-val="0"
          :end-val="accountInfo.order.pay_amount"
          :decimals="2"
          separator=","
        ></u-count-to>
        <view class="item-label">成交总金额</view>
      </view>
    </view>
    <view class="business-contetn">
      <view class="title">营业状态</view>
      <view class="business-box">
        <view class="business-status">
          <view class="status-name">店铺正常营业中</view>
          <view class="business-time"> 营业时间：07：00 - 22：30 </view>
        </view>
        <u-switch
          v-model="isBusiness"
          activeColor="#5ac725"
          inactiveColor="#f56c6c"
        ></u-switch>
      </view>
    </view>
    <view class="fm-content">
      <view class="title">常用功能</view>
      <view class="fm-list">
        <view class="fm-item" @click="skipuPrinter">
          <u-icon
            class="fm-icon"
            custom-prefix="custom-icon-dayinji custom-icon"
            size="25"
            color="#000"
          ></u-icon>
          打印机
        </view>
        <view class="fm-item" @click="shipuQrCode">
          <u-icon
            class="fm-icon"
            custom-prefix="custom-icon-erweima custom-icon"
            size="25"
            color="#000"
          ></u-icon>
          店铺二维码
        </view>
        <view class="fm-item">
          <u-icon
            class="fm-icon"
            custom-prefix="custom-icon-yunfei custom-icon"
            size="30"
            color="#000"
          ></u-icon>
          运费设置
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { GetAccountDashboard } from "../../api/user";
import statusBar from "../../components/status-bar.vue";
export default {
  components: {
    statusBar,
  },
  data() {
    return {
      isBusiness: true,
      accountInfo: {
        data: {},
        notice: {},
        order: {
          yestoday_num: 0,
        },
        product: {
          illegal_num: 0,
          normal_num: 0,
          off_num: 0,
          total_num: 0,
          verify_passed_off_num: 0,
          verify_refused_num: 0,
          verify_waiting_num: 0,
        },
        return: {
          fin_num: 0,
          review_num: 0,
          total_num: 0,
          un_fin_num: 0,
        },
        store_info: {
          store_id: 1,
          store_name: "",
        },
      },
    };
  },
  onShow() {
    this.getAccountDashboard();
  },
  methods: {
    async getAccountDashboard() {
      let res = await GetAccountDashboard();
      if (res && res.status == 200) {
        uni.setStorageSync("accountDashboard", res.data);
        this.accountInfo = res.data;
      }
    },
    skipu() {
      uni.navigateTo({
        url: "/pages/my/shopInfo",
      });
    },
    shipuSetting() {
      uni.navigateTo({
        url: "/pages/my/setting",
      });
    },
    skipuPrinter() {
      uni.navigateTo({
        url: "/pages/my/printer/printerList",
      });
    },
    shipuQrCode() {
      uni.navigateTo({
        url: "/pages/my/shopQRcode/shopQRcode",
      });
    },
  },
};
</script>

<style lang='scss'>
.my-container {
  background: #f8f8f8;
  height: calc(100vh - 100rpx);

  .hander {
    padding: 20rpx 30rpx 40rpx 40rpx;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(-45deg, #e4effe, #fff);

    .hander-left {
      display: flex;
      align-items: center;
      margin-top: 40rpx;

      .user-img {
        margin-right: 20rpx;
        // padding: 12rpx;
        // border-radius: 50%;
        // border: 2px solid #fff;
      }

      .user-info {
        .user-name-block {
          display: flex;
          align-items: center;
          font-size: 36rpx;
          font-weight: bold;

          .user-name {
            white-space: nowrap; /* 强制不换行 :ml-search[white-space] */
            overflow: hidden; /* 隐藏溢出内容 :ml-search[overflow] */
            text-overflow: ellipsis; /* 显示省略号 :ml-search[text-overflow] */
            max-width: 120px;
          }
        }

        .user-store-name {
          width: 100rpx;
          margin-top: 12rpx;
          padding: 4rpx 18rpx;
          height: 36rpx;
          line-height: 36rpx;
          border: 1px solid #fff;
          border-radius: 24rpx;
          font-size: 24rpx;
          color: #fff;
          background: #ccc;
        }
      }
    }

    .hander-right {
      display: flex;
      font-size: 24rpx;
      color: #000;
      text-align: center;

      .right-item {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: end;
        margin-left: 48rpx;
      }

      .icon-shezhi {
        flex-direction: column;
        margin-bottom: 6rpx;
        align-items: end;
      }
    }
  }

  .shop-info {
    display: flex;
    justify-content: space-around;
    margin: 40rpx 0;
    font-weight: bold;
    font-size: 28rpx;

    .shop-info-item {
      display: flex;
      flex-flow: column;
      align-items: center;
      text-align: center;

      .item-value {
        margin-bottom: 20rpx;
      }
    }
  }

  .business-contetn {
    margin: 20rpx;
    background: #fff;
    border-radius: 12rpx;

    .title {
      padding: 20rpx 32rpx;
      font-weight: bold;
    }

    .business-status {
      .status-name {
        position: relative;

        &::before {
          content: "";
          display: block;
          width: 6px;
          height: 6px;
          background-color: #5ac725;
          position: absolute;
          right: 68px;
          top: 36%;
          border-radius: 50%;
        }
      }
    }

    .business-box {
      padding: 20rpx 32rpx;
      display: flex;
      justify-content: space-between;
    }
  }

  .fm-content {
    margin: 20rpx;

    .title {
      padding: 20rpx 32rpx;
      font-weight: bold;
      margin-bottom: 40rpx;
    }

    .fm-list {
      padding: 20rpx 32rpx;
      display: flex;

      .fm-item {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: end;
        margin-right: 80rpx;
        text-align: center;
        height: 80rpx;
        font-size: 28rpx;

        .fm-icon {
          height: 60rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }
}
</style>