<template>
  <BasePage>
    <div class="merchant">
      <div class="shopinfo">
        <img class="tx" :src="$file(data.MerchantAvatar)">
        <div class="info">
          <b>{{ data.MerchantName }}</b>
          <p>账号：{{ data.MerchantPhone }}</p>
        </div>

        <div class="service-box" @click="$showManagerPopup()">
          管理中心
          <van-icon name="arrow"></van-icon>
        </div>
      </div>

      <div class="wallet">
        <div class="tit">
          <span @click="$navigate('MerchantIncome')"> 营业收入(元) <van-icon name="arrow"></van-icon>
          </span>
          <div class="line">
            <b @click="$navigate('MerchantIncome')">
              1020.00
            </b>
            <div>
              <span>提现中金额
              </span>
              <p>￥1000.00</p>
            </div>
          </div>
        </div>
        <div class="cc">
          <div class="ll" @click="$navigate('Balance')">
            <span>
              可用余额<van-icon name="arrow"></van-icon>
            </span>
            <b>{{ data.Income?.toFixed(2) }}</b>
          </div>
          <div class="ll" @click="$navigate('CV')">
            <span>
              会员卡额度<van-icon name="arrow"></van-icon>
            </span>
            <b>{{ data.Point?.toFixed(2) }}</b>
          </div>
        </div>
      </div>

      <!-- <div class="block">
        <div class="d1" @click="$navigate('MerchantTrade')">
          <b>订单记录</b>
          <p>查看订单记录</p>
          <van-badge :content="expiring ? expiring : ''" :offset="[60, -40]">
            <button>立即查看</button>
          </van-badge>
          <img src="/img/bbb1.png">
        </div>
        <div class="_r">
          <div class="d2" @click="$navigate('MerchantTrade')">
            <b>订单记录</b>
            <p>查看订单记录</p>
            <button>立即查看</button>
            <img src="/img/bbb2.png">
          </div>
          <div class="d3" @click="$navigate('MerchantProduct')">
            <b>产品列表</b>
            <p>查看我的产品</p>
            <button>立即查看</button>
            <img src="/img/bbb3.png">
          </div>
        </div>

      </div> -->

      <div class="fastTo">
        <div class="ft1" @click="showBottom = true">
          <span>收款码</span>
          <img src="/img/ft_i1.png" alt="">
        </div>

        <div class="ft2" @click="$navigate('MerchantTrade')">
          <span>订单记录</span>
          <img src="/img/ft_i2.png" alt="">
        </div>

        <div class="ft3">
          <span>商家资料</span>
          <img src="/img/ft_i3.png" alt="">
        </div>
      </div>

      <div class="countbox">
        <div class="title">
          <b>经营数据</b>
        </div>
        <div class="box line">
          <span>截止{{ data.endTimes }}</span>
          <p class="refresh" @click="init">刷新</p>
          <p class="cou r" @click="$navigate('Statistics')">统计<van-icon name="arrow"></van-icon></p>
        </div>

        <div class="list">
          <div class="item">
            <span>
              今日营业额（元）
            </span>
            <b>{{ data.TodayAmount?.toFixed(2) }}</b>
            <p>昨日<span>{{ data.YesterdayAmount?.toFixed(2) }}</span></p>
          </div>

          <div class="item">
            <span>
              今日应收（元）
            </span>
            <b>{{ data.TodayDeduct?.toFixed(2) }}</b>
            <p>昨日<span>{{ data.YesterdayDeduct?.toFixed(2) }}</span></p>
          </div>

          <div class="item">
            <span>
              今日订单数
            </span>
            <b>{{ data.TodayQty }}</b>
            <p>昨日<span>{{ data.YesterdayQty }}</span></p>
          </div>

          <div class="item">
            <span>
              今日惠利金额（元）
            </span>
            <b>{{ data.MonthIncome?.toFixed(2) }}</b>
            <p>昨日<span>{{ data.PrevMonthIncome?.toFixed(2) }}</span></p>
          </div>
        </div>
      </div>


    </div>

    <van-action-sheet v-model:show="showBottom" title="收款码" @click-overlay="onCloseBottom" @opened="onOpenBottom">
      <div class="paycode-wrap">
        <div class="paycode-original" ref="paycodeOriginal" v-show="!paycodeImg">
          <img src="/img/paycode.jpg" alt="" style="width: 100%; display: block;">
          <div class="info">
            <img :src="$file(data.MerchantAvatar)" alt="" style="border-radius: 50%;">
          </div>
          <div class="name">
            <span>{{ data.MerchantName }}</span>
          </div>
          <div class="code">
            <vue-qr v-if="!loading" :margin="0" :text="link" backgroundColor="rgb(255,255,255)"
              colorLight="rgb(255,255,255)"></vue-qr>
          </div>
        </div>
        <div class="paycode-result" v-if="paycodeImg">
          <img :src="paycodeImg" style="width: 100%;" alt="收款码">
        </div>
      </div>
    </van-action-sheet>
  </BasePage>

</template>

<script>
import { htmlToDataURL } from '@/utils/html2image'

export default {
  name: 'Merchant',
  mounted() {
  },
  data() {
    return {
      showInfo: false,
      showBottom: false,
      paycodeImg: '',
      isCapturing: false,
      link: '',
      data: {
        id: 'merchant_001',
        MerchantAvatar: '',
        MerchantName: '泰古润直营店',
        MerchantPhone: '13800138000',
        Income: 12868.50,
        Point: 5680.00,
        TodayAmount: 5680.00,
        YesterdayAmount: 4200.00,
        TodayDeduct: 1280.00,
        YesterdayDeduct: 980.00,
        TodayQty: 45,
        YesterdayQty: 38,
        MonthIncome: 45600.00,
        PrevMonthIncome: 38500.00,
        endTimes: '2024-04-18 10:30'
      },
      States: 0,
      expiring: 3,
      loading: false,
    }
  },
  methods: {
    onOpenBottom() {
      this.paycodeImg = ''
      this.$nextTick(() => {
        const el = this.$refs.paycodeOriginal
        if (!el) return

        const scale = 2
        const rect = el.getBoundingClientRect()
        const w = rect.width * scale
        const h = rect.height * scale
        const elRect = el.getBoundingClientRect()

        const canvas = document.createElement('canvas')
        canvas.width = w
        canvas.height = h
        const ctx = canvas.getContext('2d')

        // 画背景
        const bg = new Image()
        bg.src = el.querySelector('img').src
        bg.onload = () => {
          ctx.drawImage(bg, 0, 0, w, h)

          const infoEl = el.querySelector('.info')
          const codeEl = el.querySelector('.code')

          // 截取头像
          const avatarEl = infoEl.querySelector('img')
          htmlToDataURL(avatarEl, { scale: 2, useCORS: true, backgroundColor: 'transparent' }).then(avaCanvas => {
            const avaImg = new Image()
            avaImg.src = avaCanvas
            avaImg.onload = () => {
              const infoRect = infoEl.getBoundingClientRect()
              const avaSize = infoRect.height * scale * 0.8
              const avaX = (infoRect.left - elRect.left) * scale + avaSize * 0.1
              const avaY = (infoRect.top - elRect.top) * scale + (infoRect.height * scale - avaSize) / 2

              // 画头像（圆形）
              ctx.save()
              ctx.beginPath()
              ctx.arc(avaX + avaSize / 2, avaY + avaSize / 2, avaSize / 2, 0, Math.PI * 2)
              ctx.clip()
              ctx.drawImage(avaImg, avaX, avaY, avaSize, avaSize)
              ctx.restore()

              // 画文字
              ctx.font = `${avaSize * 0.6}px 'PingFang SC'`
              ctx.fillStyle = '#333'
              ctx.textBaseline = 'middle'
              ctx.fillText(this.data.MerchantName, avaX + avaSize + avaSize * 0.3, avaY + avaSize / 2)

              // 截取二维码
              htmlToDataURL(codeEl, { scale: 2, useCORS: true, backgroundColor: '#ffffff' }).then(codeCanvas => {
                const qrImg = new Image()
                qrImg.src = codeCanvas
                qrImg.onload = () => {
                  const codeRect = codeEl.getBoundingClientRect()
                  ctx.drawImage(
                    qrImg,
                    (codeRect.left - elRect.left) * scale,
                    (codeRect.top - elRect.top) * scale,
                    codeRect.width * scale,
                    codeRect.height * scale
                  )
                  this.paycodeImg = canvas.toDataURL('image/png')
                }
              })
            }
          })
        }
      })
    },
    onCloseBottom() {
      this.showBottom = false
      this.paycodeImg = ''
    },
  },
}

</script>

<style lang="less">
.paycode-original {
  position: relative;
  width: 100%;
  font-family: 'PingFang SC';

  >img {
    width: 100%;
    display: block;
  }

  .info {
    display: flex;
    align-items: center;
    position: absolute;
    left: 30.67vw;
    top: 32.27vw;

    img {
      width: 6.4vw;
      height: 6.4vw;
      border-radius: 50%;
    }
  }

  .name {
    position: absolute;
    left: 39.33vw;
    top: 33.47vw;

    span {
      font-size: 4vw;
      color: #333;
    }
  }

  .code {
    position: absolute;
    top: 42.4vw;
    left: 23.33vw;

    canvas,
    img {
      width: 53.33vw;
      height: 53.33vw;
    }
  }
}
</style>