<template>
  <view class="my-container">
    <status-bar
      :backgroundColor="'#fff'"
      :background="'linear-gradient(to left, #ff3000, #a70300)'"
      v-if="true"
    ></status-bar>

    <view class="hander" @click="skipu()">
      <view class="hander-left">
        <view class="user-img">
          <u--image
            :src="
              dashboardInfo.store_info.store_logo || '../../static/user-img.png'
            "
            shape="circle"
            width="64"
            height="64"
          ></u--image>
        </view>
        <view class="user-info">
          <view class="user-name-block">
            <view class="user-name">
              {{ dashboardInfo.store_info.store_name }}
            </view>
          </view>
          <view class="user-store-name">
            {{ dashboardInfo.store_info.store_grade_name }}
          </view>
        </view>
      </view>
      <view class="hander-right">
        <view class="right-item kf_item" @click.stop="toServices">
          <u-icon
            class="icon-shezhi"
            custom-prefix="custom-icon-kefu custom-icon"
            size="20"
            color="#fff"
          ></u-icon>
          <view class="icon-label">官方客服</view>
        </view>
        <view class="right-item">
          <u-icon name="arrow-right" size="18" color="#fff"></u-icon>
        </view>
      </view>
    </view>

    <view
      class="shop_status"
      :style="{
        background:
          shopStatus == 1 ? '#D8F1EC' : shopStatus == 2 ? '#ffecf2' : '#eee',
      }"
    >
      <u-cell-group :border="false" handleShowTime="">
        <u-cell
          @click=""
          iconStyle="marginRight:6px; color: #279B8B;"
          :border="false"
          url="/pages/my/storeBusinessStatus/businessStatus"
          isLink
          icon="hourglass-half-fill"
          title="营业中"
          v-if="shopStatus == 1"
        ></u-cell>
        <u-cell
          iconStyle="marginRight:6px; color: #fe411b"
          :border="false"
          isLink
          url="/pages/my/storeBusinessStatus/businessStatus"
          icon="hourglass-half-fill"
          title="已停业"
          v-if="shopStatus == 2"
        ></u-cell>
        <u-cell
          iconStyle="marginRight:6px; color: #666"
          :border="false"
          isLink
          url="/pages/my/storeBusinessStatus/businessStatus"
          icon="hourglass-half-fill"
          title="已打烊"
          v-if="shopStatus == 3"
        ></u-cell>
      </u-cell-group>
    </view>

    <view class="myui_card 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"
        ></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"
        ></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"
          separator=","
        ></u-count-to>
        <view class="item-label">成交总金额</view>
      </view>
    </view>

    <view class="myui_card tool">
      <u-cell-group :border="false">
        <u-cell
          iconStyle="marginRight:6px; color: #62BBAE"
          :border="false"
          isLink
          url="/pages/my/shopQRcode/shopQRcode"
          icon="scan"
          title="店铺二维码"
        ></u-cell>
        <u-cell
          iconStyle="marginRight:6px; color: #62BBAE"
          :border="false"
          isLink
          url="/pages/my/userInfo"
          icon="man-add-fill"
          title="账号设置"
        ></u-cell>
        <u-cell
          iconStyle="marginRight:6px; color: #62BBAE"
          :border="false"
          isLink
          url="/pages/my/printer/printerList"
          icon="bookmark-fill"
          title="打印设置"
        ></u-cell>
        <u-cell
          iconStyle="marginRight:6px; color: #62BBAE"
          :border="false"
          isLink
          url="/pages/my/printer/printerList"
          icon="bell-fill"
          title="铃声设置"
        ></u-cell>
        <u-cell
          iconStyle="marginRight:6px; color: #026bff"
          :border="false"
          isLink
          url="/pages/my/versions"
          icon="error-circle-fill"
          title="版本信息"
        ></u-cell>
        <u-cell
          iconStyle="marginRight:6px; color: #ff695b"
          :border="false"
          isLink
          url="/pages/my/protocol/protocol"
          icon="file-text-fill"
          title="隐私协议"
        ></u-cell>
        <u-cell
          iconStyle="marginRight:6px; color: #fd4d40"
          :border="false"
          isLink
          url="/pages/my/aboutUs/aboutUs"
          icon="account-fill"
          title="关于小发"
        ></u-cell>
      </u-cell-group>
    </view>

    <view class="btn_logout" @click="outLogin">退出登录</view>

    <tpfTimeRange
      ref="time"
      :startDefaultTime="form.info.store_opening_hours"
      :endDefaultTime="form.info.store_close_hours"
      @timeRange="handleTimeRange"
    ></tpfTimeRange>

    <tabbar tabbarName="my"></tabbar>
  </view>
</template>

<script>
import { GetAccountDashboard } from "@/api/user";
import { GetShopBaseInfo } from "@/api/shop";
import statusBar from "@/components/status-bar.vue";
import tabbar from "@/components/tabbar/tabbar.vue";
import tpfTimeRange from "@/components/tpf-time-range/tpf-time-range.vue";

export default {
  components: {
    statusBar,
    tabbar,
    tpfTimeRange,
  },
  data() {
    return {
      shopStatus: 1,
      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: "",
        },
      },
      form: {
        info: {
          store_opening_hours: "00:00",
          store_close_hours: "00:00",
        },
      },
    };
  },

  onShow() {
    this.getAccountDashboard();
    this.getShopBaseInfo();
  },
  methods: {
    async getShopBaseInfo() {
      let res = await GetShopBaseInfo();
      if (res && res.status == 200) {
        this.form = res.data;
        this.form.businessTime =
          res.data.info.store_opening_hours +
          "-" +
          res.data.info.store_close_hours;
      }
    },

    handleTimeRange(e) {
      this.form.businessTime = e[0] + e[1];
      this.form.store_opening_hours = e[0];
      this.form.store_close_hours = e[1];
    },

    handleShowTime() {
      this.$refs["time"].open();
    },

    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",
      });
    },
    toServices() {
      let item = {
        user_friend_id: 36,
        user_id: 10001,
        friend_id: 10001,
        friend_note: "",
        user_friend_addtime: "2025-05-09 10:03:33",
        friend_state: 2,
        friend_invite: 2,
        username: "系统客服",
        avatar:
          "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/20250307/c4cab676e06a49b282c2cbbe481f0fa1.png",
        sign: "",
        level_name: "v1",
        user_nickname: "系统客服",
        user_avatar:
          "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/20250307/c4cab676e06a49b282c2cbbe481f0fa1.png",
        user_sign: "",
        user_level_name: "v1",
        rid: 2,
        id: 776395489,
      };

      uni.navigateTo({
        url: `/pages/IM/IMmsgContent?item=${JSON.stringify(item)}`,
      });
    },
    outLogin() {
      this.$store.dispatch("user/LoginOut");
    },
  },
};
</script>

<style lang="scss">
.my-container {
  padding-bottom: 178rpx;

  .hander {
    position: relative;
    padding: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 186rpx;
    // background: #FE411B;
    background: linear-gradient(to bottom, #ff695b, #fd4d40);

    .hander-left {
      display: flex;
      align-items: center;

      .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 {
          margin-top: 12rpx;
          padding: 4rpx 20rpx;
          font-size: 24rpx;
          color: #ffecf2;
          border-radius: 100rpx;
          border: 2rpx solid #ffecf2;
          display: inline-block;
        }
      }
    }

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

      .kf_item {
        position: absolute;
        right: 48rpx;
        top: 24rpx;
      }

      .right-item {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10rpx;
      }
    }
  }

  .shop-info {
    display: flex;
    justify-content: space-around;
    font-size: 28rpx;
    margin: 32rpx 24rpx;

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

      .item-value {
        color: #222 !important;
        margin-bottom: 20rpx;
      }

      .item-label {
        color: #999;
      }
    }
  }

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

  .shop_status {
    font-size: 28rpx;
  }

  .tool {
    margin: 32rpx 24rpx;
    padding-left: 0;
    padding-right: 0;
    ::v-deep .u-cell__body {
      padding: 30rpx 16rpx 30rpx 24rpx;
    }
  }

  .btn_logout {
    margin: 0 24rpx;
    border-radius: 60rpx;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #fe411b;
    border: 2rpx solid #fe411b;
    // background: #FE411B;
    // background: linear-gradient(to right, #fd826f, #FE411B);
  }

  .fm-content {
    margin: 0 24rpx;

    .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>
