<template>
  <view class="options-root">
    <uni-grid :column="4" :highlight="true" :showBorder="false">
      <!-- grid -->
      <uni-grid-item
        v-for="(item, i) in newGrindListData"
        :key="i"
        @tap="grindData(item.id)"
      >
        <view class="grid-item-box">
          <image :src="item.icon" mode="scaleToFill" class="image" />
          <text class="text">{{ item.title }}</text>

          <!-- ***** 角标内容 ****** -->
          <!-- 我的账单 -->
          <text class="bill-new" v-if="item.id == 4 && newBillShow">new</text>
          <!-- 信息通知 -->
          <text class="msg-count" v-if="item.id == 6 && msgCount > 0">{{
            msgCount
          }}</text>
          <!-- 差评管理 -->
          <text
            class="evaluate-number"
            v-if="item.id == 5 && +badCommentCount > 0"
          >
            {{ +badCommentCount < 99 ? badCommentCount : '99+' }}
          </text>
          <!-- 发票数量 -->
          <text
            class="evaluate-number"
            v-if="item.id == 22 && +invoiceCount > 0"
          >
            {{ +invoiceCount < 99 ? invoiceCount : '99+' }}
          </text>
          <!-- 发现新版本 -->
          <text v-if="item.id == 17 && isVarsion" class="newVarsion">新</text>
        </view>
      </uni-grid-item>
      <template v-if="isInstallWx">
        <jx-ios-android isShow="ios">
          <uni-grid-item>
            <view class="grid-item-box" @tap="moveToWM">
              <image
                src="/static/merchant-icon/7.png"
                mode="scaleToFill"
                class="image"
              />
              <text class="text">物料申请</text>
            </view>
          </uni-grid-item>
        </jx-ios-android>
      </template>
    </uni-grid>

    <!-- 版本 -->
    <text class="v">𝑽 {{ oldVersion }}</text>
  </view>
</template>

<script lang="ts" setup>
import options from './options'
import { computed, ref } from 'vue'
const {
  getGroupChat, // 跳转加入群聊
  getSelfInfo, // 获取门店来京西的时间
  moveToWM, // 物料申请
  newBillShow, // 是否有新订单
  msgCount, // 是否有信息
  billList, // 账单列表
  badCommentCount, // 差评数量
  invoiceCount, // 发票数量数量
  openAppOrApplet, // app or 小程序
  isVarsion, // 是否现实新版本
  isUpdate, // 版本更新
  isInstallWx, // 是否安装微信
} = options()

const oldVersion = ref<string>(uni.getSystemInfoSync().appVersion) // 版本号

// 不用展示信息的图标
// 未下载微信不展示
const grindListData = ref([
  {
    id: 1,
    icon: '/static/merchant-icon/1.png',
    title: '加入群聊',
    isIos: true,
  },
  {
    id: 2,
    icon: '/static/merchant-icon/2.png',
    title: '营业资质',
    isIos: false,
  },
  // {
  //   id: 3,
  //   icon: '/static/merchant-icon/3.png',
  //   title: '我的店铺',
  //   isIos: false,
  // },
  {
    id: 4,
    icon: '/static/merchant-icon/4.png',
    title: '我的账单',
    isIos: false,
  },
  {
    id: 5,
    icon: '/static/merchant-icon/5.png',
    title: '差评管理',
    isIos: false,
  },
  {
    id: 6,
    icon: '/static/merchant-icon/6.png',
    title: '消息通知',
    isIos: false,
  },
  {
    id: 7,
    icon: '/static/merchant-icon/7.png',
    title: '物料申请',
    isIos: true,
  },
  {
    id: 16,
    icon: '/static/merchant-icon/8.png',
    title: '扫码进店',
    isIos: false,
  },
  {
    id: 8,
    icon: '/static/merchant-icon/9.png',
    title: '待配商品',
    isIos: false,
  },
  {
    id: 9,
    icon: '/static/merchant-icon/10.png',
    title: '门店评分',
    isIos: false,
  },
  {
    id: 10,
    icon: '/static/merchant-icon/11.png',
    title: '帮助中心',
    isIos: false,
  },
  {
    id: 11,
    icon: '/static/merchant-icon/12.png',
    title: '官方客服',
    isIos: false,
  },
  {
    id: 12,
    icon: '/static/merchant-icon/13.png',
    title: '设置',
    isIos: false,
  },
  {
    id: 13,
    icon: '/static/merchant-icon/14.png',
    title: '活动信息',
    isIos: false,
  },
  {
    id: 14,
    icon: '/static/merchant-icon/15.png',
    title: '注册时间',
    isIos: false,
  },
  {
    id: 15,
    icon: '/static/merchant-icon/17.png',
    title: '打开小程序',
    isIos: true,
  },
  {
    id: 18,
    icon: '/static/merchant-icon/19.png',
    title: '个人信息',
    isIos: false,
  },
  {
    id: 22,
    icon: '/static/merchant-icon/22.png',
    title: '发票管理',
    isIos: false,
  },
  {
    id: 20,
    icon: '/static/merchant-icon/21.png',
    title: '收款信息',
  },
  {
    id: 19,
    icon: '/static/merchant-icon/20.png',
    title: '配送余额',
    isIos: false,
  },
  {
    id: 17,
    icon: '/static/merchant-icon/18.png',
    title: '检查更新',
    isIos: false,
  },
])

/*************************************************
 * 格式化数据IOS不展示
 */
const newGrindListData: AnyObject = computed(() => {
  if (uni.getSystemInfoSync().platform == 'ios') {
    return grindListData.value.filter((res: any) => res.isIos == false)
  } else {
    let brand = uni.getSystemInfoSync().brand
    if (brand == 'huawei' || brand == 'honor') {
      return grindListData.value.filter((res: any) => res.id != 17)
    } else {
      return grindListData.value
    }
  }
})

function grindData(title: number) {
  switch (title) {
    case 1:
      getGroupChat() // 加入群聊
      break
    case 2:
      uni.navigateTo({
        url: '/subPages/merchantChild/businessLicense/businessLicense',
      }) // 营业资质
      break
    // case 3:
    //   uni.navigateTo({ url: '/subPages/merchantChild/platformM/platformM' }) // 我的店铺
    //   break
    case 4:
      uni.navigateTo({
        url: `/subPages/merchantChild/bill/bill?billList=${JSON.stringify(
          billList.value
        )}`,
      }) // 我的账单
      break
    case 5:
      uni.navigateTo({
        url: `/subPages/merchantChild/evaluateM/evaluateM?number=${badCommentCount.value}`,
      }) // 差评管理
      break
    case 6:
      uni.navigateTo({
        url: '/subPages/merchantChild/message/message',
      }) // 消息通知
      break
    case 7:
      moveToWM()
      break
    case 8:
      uni.navigateTo({
        url: '/subPages/merchantChild/waitGoods/waitGoods',
      }) // 待配商品
      break
    case 9:
      uni.navigateTo({
        url: '/subPages/merchantChild/storeScore/storeScore',
      }) // 门店评分
      break
    case 10:
      uni.navigateTo({ url: '/subPages/merchantChild/helpCenter/helpCenter' }) // 帮助中心
      break
    case 11:
      uni.navigateTo({ url: '/subPages/orderChild/getPhone/getPhone' }) // 联系客服
      break
    case 12:
      uni.navigateTo({ url: '/subPages/merchantChild/setUp/setUp' }) // 设置
      break
    case 13:
      uni.navigateTo({ url: '/subPages/merchantChild/activity/activity' }) // 活动信息
      break
    case 14:
      getSelfInfo() // 注册时间
      break
    case 15:
      openAppOrApplet() // 打开 app or 小程序
      break
    case 16:
      uni.navigateTo({ url: '/subPages/merchantChild/shareStore/shareStore' }) // 扫码进店
      break
    case 17:
      isUpdate(1) // 检查更新
      break
    case 18:
      uni.navigateTo({ url: '/subPages/merchantChild/useInfo/useInfo' }) // 个人信息
      break
    case 19:
      uni.navigateTo({
        url: '/subPages/merchantChild/accountBalance/accountBalance',
      }) // 配送余额
      break
    case 20:
      uni.navigateTo({ url: '/subPages/merchantChild/payeeInfo/payeeInfo' }) // 收款信息
      break
    case 22:
      uni.navigateTo({ 
        url: '/subPages/merchantChild/invoice/invoice' 
      }) // 发票信息
      break
  }
}
</script>

<style lang="scss" scoped>
@import './options.scss';
</style>
