<template>
  <PageLayout hideHeader>
    <div class="safe-padding-top"></div>
    <div class="q-px-md q-pt-md">
      <q-card class="text-white bg-gradient shop-card">
        <router-link to="/shop/info">
          <div class="row no-wrap items-start q-pa-md">
            <user-avatar :src="store.user.avatar_url" color="accent" class="q-mt-xs q-ml-xs bg-white"></user-avatar>
            <div class="q-pl-sm col">
              <div class="ellipsis text-weight-medium text-subtitle1">
                {{ store.shop.name }}
                <span class="text-caption text-teal-2">(编号{{ store.shop.shop_sn }})</span>
              </div>
              <div class="text-caption text-teal-2">
                {{ AUTH_STATE[store.shop.shop_extra?.state??0] }}
              </div>
              <!-- <div class="text-caption text-teal-2">店铺支持：</div> -->
            </div>
            <q-btn to="/shop/share" @click.stop rounded size="sm" class="q-px-sm q-py-xs q-mt-xs" dense color="white" text-color="primary" label="推广店铺" unelevated/>
          </div>
        </router-link>
        <div class="row q-px-md q-pb-md text-center">
          <router-link to="/shop/wallet" class="col column">
            <div class="text-h6">{{ formatMoney(store.shop.balance) }}</div>
            <div class="text-caption text-teal-2">店铺余额
              <q-icon name="keyboard_arrow_right" size="18px"/>
            </div>
          </router-link>
          <router-link :to="{path:'/shop/customer/balance',query:{t:Date.now()}}" class="col column">
            <div class="text-h6">{{ formatMoney(store.customers.balance) }}</div>
            <div class="text-caption text-teal-2">托管余额
              <q-icon name="keyboard_arrow_right" size="18px"/>
            </div>
          </router-link>
        </div>
      </q-card>
    </div>
    <div class="user-btns row justify-between shadow-up-20 q-pa-md bg-white">
      <div class="col text-center">
        <q-btn dense stack flat color="dark" icon="confirmation_number" :to="{path:'/',query:{tab:1,t:Date.now()}}">
          <div class="text-caption q-pt-xs">等待出票</div>
          <q-badge v-if="store.orders.draft_num" color="red" rounded floating>{{ store.orders.draft_num }}</q-badge>
        </q-btn>
      </div>
      <div class="col text-center">
        <q-btn dense stack flat color="dark" icon="account_balance_wallet" :to="{path:'/customer/wallet/draw',query:{t:Date.now()}}" >
          <div class="text-caption q-pt-xs">用户提现</div>
          <q-badge v-if="store.orders.withdraw_num" color="red" rounded floating>{{ store.orders.withdraw_num }}</q-badge>
        </q-btn>
      </div>
      <div class="col text-center">
        <q-btn dense stack flat color="dark" icon="content_paste_search" :to="{path:'/order/search',query:{t:Date.now()}}">
          <div class="text-caption q-pt-xs">订单查询</div>
        </q-btn>
      </div>
      <div class="col text-center">
        <q-btn dense stack flat color="dark" icon="diamond" :to="{path:'/order/win',query:{t:Date.now()}}">
          <div class="text-caption q-pt-xs">派奖管理</div>
          <q-badge v-if="store.orders.win_num" color="red" rounded floating>{{ store.orders.win_num }}</q-badge>
        </q-btn>
      </div>
    </div>

    <q-card square flat class="user-btns q-pa-md q-mt-sm">
      <div class="text-title">店铺管理</div>
      <div class="row q-py-md">
        <q-btn to="/wallet/fund" flat stack :ripple="false" dense icon="list_alt" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">账户明细</div>
        </q-btn>
        <q-btn
        to="/shop/payment/setting"
        flat stack :ripple="false" dense icon="wallet"
        class="col-3 text-center q-py-sm">
        <!-- credit_score -->
          <div class="text-caption q-pt-xs">收款管理</div>
        </q-btn>
        <!-- <q-btn flat stack :ripple="false" dense icon="img:~assets/a.png" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">我的消息</div>
        </q-btn> -->
        <q-btn to="/shop/lottery/setting" flat stack :ripple="false" dense icon="o_widgets" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">彩种管理</div>
        </q-btn>
        <q-btn v-if="store.setting?.release?.notice_wechat" flat stack :ripple="false" dense icon="o_circle_notifications" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">消息推送</div>
          <q-popup-proxy>
            <q-card style="width:100vw;">
              <q-card-section class="text-center q-py-lg">
                <q-btn icon="close" flat round  v-close-popup class="absulute absolute-top-right q-ma-xs" />
                <q-img src="/statics/wxsearch.png" no-spinner width="190px"/>
                <q-img src="/statics/wxqrcode.jpeg" width="215px"/>
                <div class="text-center"><span class="q-mr-sm">长按或截图</span>微信扫码关注公众号配置推送</div>
              </q-card-section>
              <q-separator />
              <q-list separator>
                  <q-item>
                    <q-item-section>
                      <q-item-label>订单接单提醒</q-item-label>
                    </q-item-section>
                    <q-item-section side>
                      <q-item-label caption>
                        <q-toggle
                          :model-value="store.user.notice_order_pay_success"
                          :true-value="1"
                          :false-value="0"
                          @update:model-value="(val) => updateMyInfo({ notice_order_pay_success: val })"
                        ></q-toggle>
                      </q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
            </q-card>
          </q-popup-proxy>
        </q-btn>
        <q-btn to="/cooperate/manage" flat stack :ripple="false" dense icon="storefront" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs relative-position">
            合作店铺
          </div>
          <q-badge v-if="store.cooperate.shop_auditing_num || store.cooperate.lottery_auditing_num" color="red" rounded floating style="right:50%; top:0px; transform:translateX(20px);"></q-badge>
        </q-btn>
        <q-btn to="/shop/worker" flat stack :ripple="false" dense icon="o_supervised_user_circle" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">员工管理</div>
        </q-btn>
        <q-btn to="/statistics/agent" flat stack :ripple="false" dense icon="o_bar_chart" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">销售统计</div>
        </q-btn>
        <q-btn v-if="store.user?.platform_agent" to="/agent/shops" flat stack :ripple="false" dense icon="o_folder_shared" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">代理店铺</div>
        </q-btn>
        <!-- DELAY 暂时隐藏 -->
        <!-- <q-btn flat stack :ripple="false" dense icon="img:~assets/a.png" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">发红包</div>
        </q-btn>
        <q-btn flat stack :ripple="false" dense icon="img:~assets/a.png" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">在线签约</div>
        </q-btn> -->
        <!-- <q-btn flat stack :ripple="false" dense icon="img:~assets/a.png" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">邀请店主</div>
        </q-btn> -->
        <!-- <q-btn flat stack :ripple="false" dense icon="img:~assets/a.png" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">红料推单</div>
        </q-btn> -->
        <q-btn to="/app/complain/add" flat stack :ripple="false" dense icon="o_feedback" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">投诉建议</div>
        </q-btn>
        <q-btn to="/app/setting" flat stack :ripple="false" dense icon="o_settings" class="col-3 text-center q-py-sm">
          <div class="text-caption q-pt-xs">设置中心</div>
        </q-btn>
      </div>
    </q-card>
    <template #footer>
      <MainPageFooter />
    </template>
  </PageLayout>
</template>
<script setup>
import MainPageFooter from "components/MainPageFooter.vue";
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { openURL } from "quasar";
import { formatMoney } from 'src/utils/tools'
import { AUTH_STATE } from 'src/utils/const'
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
store.refresh();

function updateMyInfo(data, successMsg) {
  return api
    .updateMyInfo(data)
    .then((res) => {
      successMsg &&
        $q.notify({ type: "positive", message: res.message || successMsg });
      store.refresh();
    })
    .catch((e) => {
      $q.notify({ type: "negative", message: e.message });
    });
}
</script>
<style lang="scss" scoped>
.shop-card{
  border-radius: 25px 25px 0 0;
}
</style>
