<template>
  <view class="pages-bg-1 pages-box">
    <uv-navbar autoBack title="店铺中心" placeholder :bgColor="NavBgColor" />
    <view class="shop-box">
      <view class="shop-content">
        <image class="shop-img" :src="ShopData.image + '?x-oss-process=style/w_150'" mode="aspectFill" />
        <view class="content-box">
          <view class="shop-name">{{ ShopData?.businessName || "" }}</view>
          <view class="shop-tel">
            <text class="iconfont tel-icon">&#xe817;</text>
            <text class="tel-num">{{
              ShopData?.customerServicePhone || ShopData?.contactPhone || ""
            }}</text>
          </view>
          <view class="shop-code">
            <text class="iconfont code-icon">&#xe68b;</text>
            <text class="code-label">店铺码：</text>
            <text class="code-num">{{ ShopData?.inviteCode || "" }}</text>
            <text
              class="iconfont copy-icno"
              v-if="ShopData?.inviteCode"
              @click.stop="copyCode"
              >&#xe64f;</text
            >
          </view>
        </view>
      </view>
      <view class="shop-time">
        <view class="time">
          <text class="iconfont time-icon">&#xe603;</text>
          <text class="time-num" v-if="ShopData?.expiresStatus"
            >到期时间：已到期</text
          >
          <text class="time-num" v-else
            >到期时间：{{ handleExpiresTime(ShopData?.expiresTime) }}</text
          >
        </view>
        <view
          v-if="ShopData?.expiresTime"
          class="renew-btn"
          @click.stop="
            openPages('ShopRenew', {
              date: handleExpiresTime(ShopData?.expiresTime),
            })
          "
        >
          <text class="iconfont renew-icon">&#xe639;</text>
          <text class="renew-text">去续费</text>
          <text class="iconfont renew-next">&#xe671;</text>
        </view>
      </view>
    </view>
    <view class="module-placeholder" />
    <view class="module-box business-status">
      <text>营业状态</text>
      <!-- 店铺已到期 -->
      <template v-if="ShopData?.expiresStatus">
        <uv-switch
          disabled
          :size="SwitchSize"
          activeColor="#43B436"
          inactiveColor="#B3B3B3"
        />
      </template>
      <!-- 已下线 -->
      <template v-else-if="ShopData?.closeStatus">
        <text class="close-shop">店铺已关闭下线</text>
      </template>
      <!-- 店铺正常 -->
      <template v-else>
        <uv-switch
          v-model="ShopData.businessStatus"
          :size="SwitchSize"
          asyncChange
          activeColor="#43B436"
          inactiveColor="#B3B3B3"
          :loading="ChangeBusinessStatusLoading"
          @change="ChangeBusinessStatus"
        />
      </template>
    </view>
    <view class="module-placeholder" />
    <view class="module-box">
      <view class="module-lable"> 订单管理 </view>
      <view class="module-content">
        <view class="content-item" @click.stop="openPages('MallOrder')">
          <!-- <text class="iconfont order-icon order-icon-1">&#xe672;</text> -->
          <image
            class="order-icon"
            :src="$handleImageUrl('/content/icon_1.png')"
          ></image>
          <text class="text">商城订单</text>
        </view>
        <view
          class="content-item"
          @click.stop="openPages('OnlineOrder', { pageType: 2 })"
        >
          <!-- <text class="iconfont order-icon order-icon-2">&#xe60b;</text> -->
          <image
            class="order-icon"
            :src="$handleImageUrl('/content/icon_2.png')"
          ></image>

          <text class="text">在线订单</text>
        </view>
        <view
          class="content-item"
          @click.stop="openPages('QueuingOrders', { pageType: 2 })"
        >
          <!-- <text class="iconfont order-icon order-icon-3">&#xe678;</text> -->
          <image
            class="order-icon"
            :src="$handleImageUrl('/content/icon_3.png')"
          ></image>

          <text class="text">排队订单</text>
        </view>
        <view class="content-item" @click.stop="openPages('OrderVerification')">
          <!-- <text class="iconfont order-icon order-icon-4">&#xe630;</text> -->
          <image
            class="order-icon"
            :src="$handleImageUrl('/content/icon_4.png')"
          ></image>
          <text class="text">订单核销</text>
        </view>
        <view class="content-item" @click.stop="openPages('PointsRedemption')">
          <!-- <text class="iconfont order-icon order-icon-5">&#xe6ab;</text> -->
          <image
            class="order-icon"
            :src="$handleImageUrl('/content/icon_5.png')"
          ></image>
          <text class="text">积分核销</text>
        </view>
      </view>
    </view>
    <view class="module-placeholder" />
    <view class="module-box">
      <view class="module-lable"> 店铺设置 </view>
      <view class="module-content">
        <view class="content-item" @click.stop="openPages('ShopRecord')">
          <text class="iconfont icon set-icon-1">&#xe765;</text>
          <text class="text">门店档案</text>
        </view>
        <view class="content-item" @click.stop="openPages('Pattern')">
          <text class="iconfont icon set-icon-2">&#xe62a;</text>
          <text class="text">模式管理</text>
        </view>
        <!-- <view class="content-item" @click.stop="openPages('')">
					<text class=" iconfont icon set-icon-3">&#xe677;</text>
					<text class="text">开通支付</text>
				</view> -->
        <view class="content-item" @click.stop="openPages('店铺码')">
          <text class="iconfont icon set-icon-4">&#xe604;</text>
          <text class="text">店铺码</text>
        </view>
        <view class="content-item" @click.stop="openPages('MultipleShop')">
          <text class="iconfont icon set-icon-5">&#xe67a;</text>
          <text class="text">连锁店</text>
        </view>
        <view
          class="content-item"
          @click.stop="openPages('Quota', { businessId: ShopData.businessId })"
        >
          <text class="iconfont icon set-icon-6">&#xe64a;</text>
          <text class="text">单笔限额</text>
        </view>
      </view>
    </view>
    <view class="module-placeholder" />
    <view class="module-box">
      <view class="module-lable"> 经营管理 </view>
      <view class="module-content">
        <view
          class="content-item"
          @click.stop="
            openPages('BusinessData', {
              businessType: ShopData.businessType,
              businessId: ShopData.businessId,
              businessName: ShopData.businessName,
            })
          "
        >
          <text class="iconfont icon manage-icon-1">&#xe65f;</text>
          <text class="text">经营数据</text>
        </view>
        <view class="content-item" @click.stop="openPages('BusinessDetails')">
          <text class="iconfont icon manage-icon-2">&#xe8e3;</text>
          <text class="text">经营明细</text>
        </view>
        <!-- <view class="content-item">
					<text class="iconfont icon  manage-icon-3">&#xe62e;</text>
					<text class="text">结算明细</text>
				</view> -->
        <!-- <view class="content-item" @click.stop="openPages('Settings')">
					<text class=" iconfont icon manage-icon-4">&#xe68f;</text>
					<text class="text">结算设置</text>
				</view> -->
        <view class="content-item" @click.stop="openPages('DebitCard')">
          <text class="iconfont icon manage-icon-5">&#xe602;</text>
          <text class="text">结算卡信息</text>
        </view>
      </view>
    </view>

    <!-- 店铺收款码 -->
    <membershipCode ref="membershipCodeRef" :type="2" />
  </view>
</template>

<script lang="ts" setup>
import { ref, unref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { usePages } from "@/hooks/usePages.ts";
import { businessUserInfo_Api } from "@/api/userInfo.js";
import { updateBusinessStatusApi } from "@/api/ShopContent.ts";
import { pathList } from "./ContentData.ts";
const { NavBgColor } = usePages();
const membershipCodeRef = ref(null);
//
const ShopData = ref({});
const ChangeBusinessStatusLoading = ref(false); // 修改店铺状态
const SwitchSize = ref(uni.upx2px(46));
const isShopSwitch = ref(true);

const businessId = ref(null); // 门店ID

const openPages = (key, parmas) => {
  
  const { path, fn } = pathList[key] || {};

  if (path) {
    let Valid = fn ? fn(ShopData.value) : true;
    if (!Valid) return false;
    let str = "";
    if (parmas) {
      const keys = Object.keys(parmas);
      str = keys
        .map((el) => {
          return `${el}=${parmas[el]}`;
        })
        .join("&");
    }
    uni.navigateTo({
      url: path + (str ? `?${str}` : ""),
    });
  } else {
    if (key == "店铺码") {
      let Valid = fn ? fn(ShopData.value) : true;
      if (!Valid) return false;
      membershipCodeRef.value.open(ShopData.value);
      return;
    }
    uni.showToast({
      title: "暂未开放",
      icon: "none",
    });
  }
};

// 修改店铺状态
const ChangeBusinessStatus = (e) => {
  console.log("e", e);
  const text = e ? "开启门店上线" : "门店关闭下线";
  uni.showModal({
    content: `确定${text}吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          ChangeBusinessStatusLoading.value = true;
          await updateBusinessStatusApi({
            businessId: unref(businessId),
            businessStatus: e,
          });
          ShopData.value.businessStatus = e;
        } catch (error) {
          //TODO handle the exception
        } finally {
          ChangeBusinessStatusLoading.value = false;
        }
      }
    },
  });
};

const handleExpiresTime = (date) => {
  if (!date) return "";
  return uni.$uv.date(date, "yyyy-mm-dd");
};

const businessUserInfo = async () => {
  try {
    const { data } = await businessUserInfo_Api();
    businessId.value = data.businessId;
    ShopData.value = data;
    uni.setStorageSync(
      "writeOffShow",
      !data.expiresStatus && !data.closeStatus ? true : false
    );
  } catch (error) {
    //TODO handle the exception
  }
};
// 复制店铺码
const copyCode = () => {
  uni.setClipboardData({
    data: ShopData.value?.inviteCode,
    success: () => {
      uni.showToast({ title: "复制成功", icon: "success" });
    },
  });
};

onShow(() => {
  businessUserInfo();
});
</script>

<style lang="scss" scoped>
.pages-box {
  padding: 20rpx 30rpx;
  box-sizing: border-box;

  .module-placeholder {
    width: 100%;
    height: 30rpx;
  }

  .shop-box {
    box-sizing: border-box;
    width: 100%;
    padding: 25rpx 25rpx 0;
    background: #ffffff;
    border-radius: 24rpx;

    .shop-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .shop-img {
        flex-shrink: 0;
        width: 135rpx;
        height: 135rpx;
        border-radius: 10rpx;
      }

      .content-box {
        flex-shrink: 0;
        width: calc(100% - 135rpx);
        padding-left: 27rpx;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #f0f0f0;
        .shop-name {
          font-size: 32rpx;
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
          color: #1a1a1a;
        }

        .shop-tel {
          width: 100%;
          display: flex;
          align-items: center;
          padding: 4rpx 0 7rpx;

          .tel-icon {
            width: 36rpx;
            height: 36rpx;
            background: #f3dfdf;
            border-radius: 50%;
            color: #1a1a1a;
            text-align: center;
            line-height: 36rpx;
            font-size: 24rpx;
          }

          .tel-num {
            padding-left: 8rpx;
            font-size: 26rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            color: #1a1a1a;
            line-height: 30rpx;
          }
        }

        .shop-code {
          display: inline-flex;
          align-items: center;
          // width: 236rpx;
          height: 43rpx;
          background: #fff8f2;
          border: 1rpx solid #ffe8d4;
          border-radius: 10rpx;
          padding: 5rpx 12rpx;

          .code-icon {
            color: #da9e73;
            font-size: 30rpx;
            margin-right: 4rpx;
          }

          .code-label {
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            color: #666666;
          }

          .code-num {
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            color: #da9e73;
          }

          .copy-icno {
            color: #fb2914;
            margin-left: 8rpx;
          }
        }
      }
    }

    .shop-time {
      width: 100%;
      padding: 30rpx 0 36rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .time {
        color: #da9e73;
        display: flex;
        align-items: center;

        .time-icon {
          flex-shrink: 0;
          font-size: 30rpx;
        }

        .time-num {
          padding-left: 7rpx;
          font-size: 26rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
        }
      }

      .renew-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 182rpx;
        height: 62rpx;
        border: 1rpx solid #eb5153;
        border-radius: 32rpx;
        color: #eb5153;

        .renew-icon {
          font-size: 28rpx;
        }

        .renew-text {
          padding: 0 2rpx;
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
        }
      }
    }
  }

  .business-status {
    display: flex;
    justify-content: space-between;
    align-items: center;

    text {
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #1a1a1a;
    }

    .close-shop {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #ff0000;
    }
  }

  .module-box {
    width: 100%;
    padding: 33rpx 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 24rpx;
    box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(201, 186, 180, 0.1);

    .module-lable {
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 42rpx;
    }

    .module-content {
      display: flex;
      justify-content: row;
      align-items: center;
      flex-wrap: wrap;

      .content-item {
        padding-top: 20rpx;
        width: 20%;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        &:nth-child(n + 6) {
          padding-top: 27rpx;
        }

        .icon {
          font-size: 45rpx;
        }

        .text {
          padding-top: 10rpx;
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: right;
          color: #1a1a1a;
          line-height: 30rpx;
        }
      }
    }

    .order-icon {
      // font-size: 43rpx;
      width: 43rpx;
      height: 43rpx;
    }

    .set-icon-1 {
      background: linear-gradient(180deg, #f3884b, #f27338);
    }

    .set-icon-2 {
      background: linear-gradient(180deg, #6497f2, #457cf3);
    }

    .set-icon-3 {
      background: linear-gradient(180deg, #e3696a, #e45b56);
    }

    .set-icon-4 {
      background: linear-gradient(180deg, #79d69b, #57bc72);
    }

    .set-icon-5 {
      background: linear-gradient(180deg, #ecac48, #f29b3a);
    }

    .set-icon-6 {
      background: linear-gradient(180deg, #df6b6e, #e45d57);
    }

    .manage-icon-1 {
      background: linear-gradient(180deg, #ed6764, #eb5c56);
    }

    .manage-icon-2 {
      background: linear-gradient(180deg, #76d595, #59bb73);
    }

    .manage-icon-3 {
      background: linear-gradient(180deg, #7399ec, #397af8);
    }

    .manage-icon-4 {
      background: linear-gradient(180deg, #e36b6c, #e65b56);
    }

    .manage-icon-5 {
      background: linear-gradient(180deg, #f18254, #f57627);
    }

    .icon {
      -webkit-background-clip: text;
      /* 对于webkit内核的浏览器 */
      background-clip: text;
      -webkit-text-fill-color: transparent;
      /* 使文本颜色透明，显示背景渐变 */
      color: transparent;
      /* 兼容非webkit浏览器 */
    }
  }
}
</style>
