<template>
  <view class="my-container">
    <status-bar
      :backgroundColor="'#fff'"
      :background="'linear-gradient(to left, #ff3000, #a70300)'"
      v-if="true"
    ></status-bar>
    <view class="hander">
      <view class="hander-left">
        <view class="user-img">
          <u--image
            :src="
              dashboardInfo.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">
              {{ dashboardInfo.store_info.store_name }}
            </view>
            <u-icon
              style="display: inline-block; margin-left: 8rpx"
              name="arrow-right"
              size="12"
              color="#fff"
            ></u-icon>
          </view>
          <view class="user-store-name">
            {{ dashboardInfo.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="#fff"
          ></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="#fff"
          ></u-icon>
          <view class="icon-label">设置</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="dashboardInfo.order.yestoday_num"
            color="#fff"
          ></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="dashboardInfo.order.month_num"
            color="#fff"
          ></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="dashboardInfo.order.pay_amount"
            :decimals="2"
            color="#fff"
            separator=","
          ></u-count-to>
          <view class="item-label">成交总金额</view>
        </view>
      </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="#e62300"
          ></u-icon>
          打印机
        </view>
        <view class="fm-item" @click="skipuOrCode">
          <u-icon
            class="fm-icon"
            custom-prefix="custom-icon-erweima custom-icon"
            size="25"
            color="#e62300"
          ></u-icon>
          店铺二维码
        </view>
        <view class="fm-item" @click="skipuBusinessStatus">
          <u-icon
            class="fm-icon"
            custom-prefix="custom-icon-erweima custom-icon"
            size="25"
            color="#e62300"
          ></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>
    <tabbar tabbarName="my"></tabbar>
  </view>
</template>

<script>
import { GetAccountDashboard } from "../../api/user";
import statusBar from "../../components/status-bar.vue";
import tabbar from "@/components/tabbar/tabbar.vue";
export default {
  components: {
    statusBar,
    tabbar,
  },
  data() {
    return {
      isBusiness: true,
      dashboardInfo: {
        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.dashboardInfo = res.data;
      }
    },
    skipu() {
      uni.navigateTo({
        url: "/pages/my/shopInfo",
      });
    },
    shipuSetting() {
      uni.navigateTo({
        url: "/pages/my/setting",
      });
    },
    skipuPrinter() {
      uni.navigateTo({
        url: "/pages/my/printer/printerList",
      });
    },
    skipuOrCode() {
      uni.navigateTo({
        url: "/pages/my/shopQRcode/shopQRcode",
      });
    },
    skipuBusinessStatus() {
      uni.navigateTo({
        url: "/pages/my/storeBusinessStatus/businessStatus",
      });
    },
  },
};
</script>

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

  .hander {
    position: relative;
    padding: 20rpx 30rpx 40rpx 40rpx;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 200rpx;
    background: linear-gradient(to left, #ff3000 0%, #a70300 100%);

    &::after {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -200rpx;
      z-index: 1;
      content: " ";
      height: 200rpx;
      width: 100%;
      border-radius: 0 0 50% 50%;
      background: linear-gradient(to left, #ff3000 0%, #a70300 100%);
    }

    .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 {
        color: #fff;

        .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: red;
        }
      }
    }

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

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

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

    .shop-info {
      position: absolute;
      left: 0;
      bottom: -156rpx;
      width: 100%;
      z-index: 2;
      display: flex;
      justify-content: space-around;
      margin: 40rpx 0;
      font-weight: bold;
      font-size: 28rpx;
      color: #fff;

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

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

  .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: 25%;
          top: 36%;
          border-radius: 50%;
        }
      }
    }

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

  .fm-content {
    margin: 20rpx;
    margin-top: 240rpx;

    .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;
        font-weight: bold;

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