<template>
  <div class="content">
    <a-card style="padding: 30px" class="agent-info">
      <div class="title">
        <b>服务商信息</b>
      </div>

      <div class="item">
        <span class="label">服务商名称</span>
        <span class="desc">{{ vdata.agentInfo.agentName }}</span>
      </div>
      <div class="item">
        <span class="label">服务商邀请码</span>
        <span class="desc">{{ inviteCode ? inviteCode : "" }} <copy-outlined  style="color: #2691ff;" @click="getCopy()"/></span>
      </div>
      <div class="item">
        <span class="label">拓展商户</span>
        <span class="desc">
           <QrcodeOutlined  style="color: #2691ff;"  @click="getVisibleAddQrc(0)"  />
            <copy-outlined  style="color: #2691ff;padding-left: 5px" @click="getCopyCode(0)"/>

        </span>
      </div>
      <div class="item">
        <span class="label">拓展代理</span>
        <span class="desc">
           <QrcodeOutlined  style="color: #2691ff;" @click="getVisibleAddQrc(1)"   />
            <copy-outlined  style="color: #2691ff;padding-left: 5px" @click="getCopyCode(1)"/>

        </span>
      </div>
      <div class="item">
        <span class="label">服务商简称</span>
        <span class="desc">{{ vdata.agentInfo.agentShortName }}</span>
      </div>
      <div class="item">
        <span class="label">登录名</span>
        <span class="desc">{{ vdata.agentInfo.loginUsername }}</span>
      </div>
      <div class="item">
        <span class="label">服务商号</span>
        <span class="desc">{{ vdata.agentInfo.agentNo }}</span>
      </div>
      <div class="item">
        <span class="label">渠道商号</span>
        <span class="desc">{{ vdata.agentInfo.isvNo }}</span>
      </div>
      <div class="item">
        <span class="label">上级服务商号</span>
        <span class="desc">{{ vdata.agentInfo.pid }}</span>
      </div>
      <div class="item">
        <span class="label">是否允许发展下级服务商</span>
        <span class="desc">{{
          vdata.agentInfo.addAgentFlag == 1 ? '是' : '否'
        }}</span>
      </div>
      <div class="item">
        <span class="label">注册时间</span>
        <span class="desc">{{ vdata.agentInfo.createdAt }}</span>
      </div>
    </a-card>

    <a-card class="statistics-box order-statistics order">
      <div class="box-flex">
        <div class="title">
          <b style="flex-grow: 1">订单/商户统计</b>
          <a-select
            v-model:value="vdata.orderStatic"
            placeholder="订单统计"
            style="width: 215px; margin-right: 10px"
            @change="staticChange"
          >
            <a-select-option value="1"> 仅统计自己 </a-select-option>
            <a-select-option value="2"> 全部服务商 </a-select-option>
            <a-select-option
              v-for="(item, index) in (vdata.agentList as any)"
              :key="index"
              :value="item.agentNo"
            >
              {{ item.agentName }}
            </a-select-option>
          </a-select>
          <JeepayDateRangePicker
            v-model:value="orderDate"
            class="date"
            customDateRangeType="date"
            :allTimeIsShow="false"
            @update:value="getStatisticsData('order')"
          />
        </div>

        <div class="other-item" style="margin: 30px 0">
          <div class="item">
            <p class="item-title">成交金额（元）</p>
            <p class="item-text" style="color: #1890ff !important">
              {{ (vdata.payAmount / 100).toFixed(2) }}
            </p>
          </div>
          <div class="item">
            <p class="item-title">交易笔数（笔）</p>
            <p class="item-text">{{ vdata.payCount }}</p>
          </div>
          <div class="item">
            <p class="item-title">退款金额（元）</p>
            <p class="item-text">{{ (vdata.refundAmount / 100).toFixed(2) }}</p>
          </div>
          <div class="item">
            <p class="item-title">退款笔数（笔）</p>
            <p class="item-text">{{ vdata.refundCount }}</p>
          </div>
          <!-- <div class="item">
          <p class="item-title">利润（元）</p>
          <p class="item-text">{{ vdata.profit }}</p>
        </div> -->
        </div>
        <div class="other-item">
          <div class="item">
            <p class="item-title">商户总数</p>
            <p class="item-text" style="color: #1890ff !important">
              {{ vdata.mchAllCount }}
            </p>
          </div>
          <div class="item">
            <p class="item-title">新增商户数</p>
            <p class="item-text">{{ vdata.mchTodayAddCount }}</p>
          </div>
          <div class="item">
            <p class="item-title">入网商户数</p>
            <p class="item-text">{{ vdata.mchOnNetCount }}</p>
          </div>
          <div class="item">
            <p class="item-title">新增入网商户</p>
            <p class="item-text">{{ vdata.mchOnNetNewCount }}</p>
          </div>
          <!-- <div class="item">
          <p class="item-title">入网失败商户</p>
          <p class="item-text">{{ vdata.mchOnNetFailCount }}</p>
        </div> -->
        </div>
      </div>
    </a-card>
    <!-- <a-card class="statistics-box order-statistics">
      <div class="title">
        <b>商户统计</b>
        <a-select v-model:value="vdata.mchStatic" placeholder="商户统计" style="width: 200px" @change="staticChange('mch')">
          <a-select-option value="1">
            仅统计自己
          </a-select-option>
          <a-select-option value="2">
            全部
          </a-select-option>
          <a-select-option v-for="(item, index) in (vdata.agentList as any)" :key="index" :value="item.agentNo">
            {{ item.agentName }}
          </a-select-option>
        </a-select>
        <JeepayDateRangePicker v-model:value="mchDate" class="date" customDateRangeType="date" :allTimeIsShow="false" @update:value="getStatisticsData('merchant')" />
      </div>
    </a-card> -->
    <a-card
      v-if="vdata.agentInfo.addAgentFlag == 1"
      class="statistics-box agent"
    >
      <div class="agent-statistics">
        <div class="title">
          <b>服务商统计</b>
          <!-- <JeepayDateRangePicker
            v-model:value="agentDate"
            class="date"
            customDateRangeType="date"
            :allTimeIsShow="false"
            @update:value="getStatisticsData('agent')"
          /> -->
        </div>
        <div class="main-item">
          <p class="item-title">服务商总数</p>
          <p class="item-text">{{ vdata.agentAllCount }}</p>
        </div>
        <div class="other-item">
          <div class="item">
            <p class="item-title">新增服务商数</p>
            <p class="item-text">{{ vdata.agentNewCount }}</p>
          </div>
          <div class="item">
            <p class="item-title">活动服务商数</p>
            <p class="item-text">{{ vdata.agentOnCount }}</p>
          </div>
        </div>
      </div>
    </a-card>
    <a-card class="statistics-box hardware-statistics hardware">
      <div class="title">
        <b>硬件统计</b>
      </div>
      <div class="other-item hardware-item">
        <div class="item">
          <p class="item-title">码牌总数</p>
          <p class="item-text item-text-top">{{ vdata.qrCodeCardAllCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">云喇叭总数</p>
          <p class="item-text item-text-top">{{ vdata.speakerAllCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">云打印总数</p>
          <p class="item-text item-text-top">{{ vdata.printerAllCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">POS机总数</p>
          <p class="item-text item-text-top">{{ vdata.posAllCount }}</p>
        </div>
      </div>
      <div class="other-item hardware-item">
        <div class="item">
          <p class="item-title">空码数量</p>
          <p class="item-text">{{ vdata.qrCodeCardUnCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">未绑定云喇叭数</p>
          <p class="item-text">{{ vdata.speakerUnCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">未绑定云打印数</p>
          <p class="item-text">{{ vdata.printerUnCount }}</p>
        </div>
        <div class="item">
          <p class="item-title">未绑定POS机数</p>
          <p class="item-text">{{ vdata.posUnCount }}</p>
        </div>
      </div>
    </a-card>
  </div>


  <a-modal
      v-model:visible="vdata.visibleAddQrc"
      :footer="null"
      @cancel="handleCancel"
      style="top: 30% !important;"
      wrap-class-name="full-modal"
      width="330px"
      :title="vdata.title"
      :maskClosable="false"
  >
    <div class="modal-body" style="height: 280px !important;">
      <div style="text-align: center">
        <img
            v-if="vdata.inviteUrl"
            :src='"https://api.pwmqr.com/qrcode/create/?url="+vdata.inviteUrl'
            alt=""
            style="width: 200px; height: 200px"
        >
        <div class="zfb-wx" style="margin: 10px 0">
          <!--          <img src="/src/assets/svg/alipay.svg" alt="">-->
          <!--          <img-->
          <!--              src="/src/assets/svg/wechatpay.svg"-->
          <!--              alt=""-->
          <!--              style="margin: 0 5px"-->
          <!--          >-->
          <span style="color: grey">支持浏览器、微信、支付宝扫码</span>
        </div>
        <a-button
            type="primary"
            size="large"
            block
            @click="vdata.visibleAddQrc = false"
        >
          取消扫码
        </a-button>
      </div>

    </div>

  </a-modal>
</template>

<script lang="ts" setup>
import {ref, reactive, onMounted, getCurrentInstance} from 'vue'
import {
  $getStatistics,
  API_URL_AGENT_LIST,
  req,
  $getMainUserInfo, $getUserInfo
} from '@/api/manage'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties;
const vdata: any = reactive({
  title:"",
  inviteUrl:"" as any,
  visibleAddQrc:false,
  payAmount: 0, //成交金额
  payCount: 0, //交易笔数
  refundAmount: 0, //退款金额
  refundCount: 0, //退款笔数
  profit: 0, //利润

  mchAllCount: 0, // 商户总数
  mchTodayAddCount: 0, // 新增商户数
  mchOnNetCount: 0, //入网商户数
  mchOnNetNewCount: 0, // 新增商户入网数量
  mchOnNetFailCount: 0, //入网失败商户数

  agentAllCount: 0, // 服务商总数
  agentNewCount: 0, //新增服务商数
  agentOnCount: 0, //活动服务商数

  orderTodayCount: 0, // 今日订单数量
  orderTodaySum: 0, // 今日订单金额

  qrCodeCardAllCount: 0, // 码牌总数
  speakerAllCount: 0, //云喇叭总数
  printerAllCount: 0, //云打印总数
  posAllCount: 0, //POS机总数
  qrCodeCardUnCount: 0, //空码数量
  speakerUnCount: 0, //未绑定云喇叭数
  printerUnCount: 0, //未绑定云打印数
  posUnCount: 0, //未绑定POS机数

  qrCodeCardBindCount: 0, // 已绑定码牌
  qrCodeCardUnBindCount: 0, // 剩余未绑定码牌

  // 用于下拉框筛选
  orderStatic: '2', // 订单统计(商户统计)
  countType: '2', // 自己全部或者子代理
  agentNo: '', // 服务商编号
  agentList: [], // 服务商列表

  // 服务商信息
  agentInfo: {} as any
})
let statisticsDate = ref('today') // 公共日期
let agentDate = ref('today') // 服务商日期
let mchDate = ref('today') // 商户日期
let orderDate = ref('today') // 订单日期

const inviteCode = ref(); //服务商邀请码
const inviteCodeUrl = ref(); //服务商二维码
const agtInviteCodeUrl = ref(); //服务商二维码
// 获取服务商列表
const getAgentList = () => {
  req.list(API_URL_AGENT_LIST, vdata.searchData).then((bizData) => {
    vdata.agentList = bizData.records
  })
}
onMounted(() => {
  getAgentList()

  $getUserInfo().then((res) => {
    inviteCode.value = res.inviteCode;
    inviteCodeUrl.value = res.inviteCodeUrl;
    agtInviteCodeUrl.value = res.agtInviteCodeUrl;
  });
})

// 获取服务商信息
$getMainUserInfo().then((res) => {
  vdata.agentInfo = res
})

// 订单统计切换服务商
const staticChange = (e) => {
  // countType 统计数据类型 1-服务商本身数据 2-全部 3-服务商号搜索 agentNo 3类型时必传
  let no = e ? e : ''
  if (['1', '2'].includes(no)) {
    vdata.countType = no
    vdata.agentNo = ''
  } else {
    vdata.countType = 3
    vdata.agentNo = no
  }

  $getStatistics(statisticsDate.value, vdata.countType, vdata.agentNo).then(
    (bizData) => {
      const { payAmount, payCount, refundAmount, refundCount } =
        bizData.orderCount
      vdata.payAmount = payAmount
      vdata.payCount = payCount
      vdata.refundAmount = refundAmount
      vdata.refundCount = refundCount

      const {
        mchAllCount,
        mchTodayAddCount,
        mchOnNetCount,
        mchOnNetNewCount,
        mchOnNetFailCount
      } = bizData.mchCount
      vdata.mchAllCount = mchAllCount
      vdata.mchTodayAddCount = mchTodayAddCount
      vdata.mchOnNetCount = mchOnNetCount
      vdata.mchOnNetNewCount = mchOnNetNewCount
      vdata.mchOnNetFailCount = mchOnNetFailCount

      const {
        agentAllCount,
        agentNewCount,
        agentOnCount
      } = bizData.agentCount
      vdata.agentAllCount = agentAllCount
      vdata.agentNewCount = agentNewCount
      vdata.agentOnCount = agentOnCount
    }
  )
}
function handleCancel(e) {
  vdata.visibleAddQrc = false;
}
// 获取统计数据
function getStatisticsData(sign) {
  if (sign === 'order') {
    // statisticsDate.value = mchDate.value

    statisticsDate.value = orderDate.value
  }
  $getStatistics(statisticsDate.value, vdata.countType, vdata.agentNo)
    .then((res) => {
      if (sign === 'order') {
        vdata.agentAllCount = res.agentCount.agentAllCount
        vdata.agentNewCount = res.agentCount.agentNewCount
        vdata.agentOnCount = res.agentCount.agentOnCount

        vdata.mchAllCount = res.mchCount.mchAllCount
        vdata.mchOnNetNewCount = res.mchCount.mchOnNetNewCount
        vdata.mchTodayAddCount = res.mchCount.mchTodayAddCount
        vdata.mchOnNetCount = res.mchCount.mchOnNetCount
        vdata.mchOnNetFailCount = res.mchCount.mchOnNetFailCount

        vdata.payAmount = res.orderCount.payAmount
        vdata.payCount = res.orderCount.payCount
        vdata.refundAmount = res.orderCount.refundAmount
        vdata.refundCount = res.orderCount.refundCount
        vdata.profit = res.payProfit
      } else {
        // 服务商
        vdata.agentAllCount = res.agentCount.agentAllCount
        vdata.agentNewCount = res.agentCount.agentNewCount
        vdata.agentOnCount = res.agentCount.agentOnCount
        // 商户
        vdata.mchAllCount = res.mchCount.mchAllCount
        vdata.mchOnNetCount = res.mchCount.mchOnNetCount
        vdata.mchTodayAddCount = res.mchCount.mchTodayAddCount
        vdata.mchOnNetNewCount = res.mchCount.mchOnNetNewCount
        vdata.mchOnNetFailCount = res.mchCount.mchOnNetFailCount
        // 订单
        vdata.payAmount = res.orderCount.payAmount
        vdata.payCount = res.orderCount.payCount
        vdata.refundAmount = res.orderCount.refundAmount
        vdata.refundCount = res.orderCount.refundCount
        vdata.profit = res.payProfit

        // 码牌
        vdata.qrCodeCardAllCount = res.qrCodeCardAllCount
        vdata.speakerAllCount = res.speakerAllCount
        vdata.printerAllCount = res.printerAllCount
        vdata.posAllCount = res.posAllCount
        vdata.qrCodeCardUnCount = res.qrCodeCardUnBindCount
        vdata.speakerUnCount = res.speakerUnCount
        vdata.printerUnCount = res.printerUnCount
        vdata.posUnCount = res.posUnCount
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

function getCopyCode(type = 0){

  const textarea = document.createElement('textarea');
  let  text = "拓展商户链接复制成功";
  if(type == 1){
    text = '拓展服务商链接复制成功'
    textarea.value = agtInviteCodeUrl.value;
  }else{
    textarea.value = inviteCodeUrl.value;
  }
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
  $infoBox.message.success(text)
}

async function getCopy(){
  console.log(inviteCode.value)
  // var textarea= document.createElement("textarea"); // 创建textarea对象
  // document.body.appendChild(inviteCode.value); // 添加临时实例
  // textarea.select(); // 选择实例内容
  // document.execCommand("Copy"); // 执行复制
  // document.body.removeChild(textarea); // 删除临时实例

  const textarea = document.createElement('textarea');
  textarea.value = inviteCode.value;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
  $infoBox.message.success('复制成功')
}
function getVisibleAddQrc(type = 0){
  if(type == 1){
    vdata.title="拓展代理"
    vdata.inviteUrl = agtInviteCodeUrl.value
  }else{
    vdata.title="拓展商户"
    vdata.inviteUrl = inviteCodeUrl.value
  }
  console.log(vdata.inviteUrl,'vdata.inviteUrl')
  vdata.visibleAddQrc = true
}
Promise.all([
  $getStatistics(statisticsDate.value, vdata.countType, vdata.agentNo)
])
  .then((res) => {
    getStatisticsData('')
  })
  .catch((error) => {})
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.statistics-box {
  box-sizing: border-box;
  padding: 30px;
  margin-bottom: 30px;

  .main-item,
  .other-item {
    width: 100%;
    .item {
      width: 25%;
    }
    p {
      margin: 0 !important;
    }
    .item-title {
      white-space: nowrap;
      font-weight: 400;
      font-size: 13px;
      letter-spacing: 0.05em;
      color: rgba(0, 0, 0, 0.6);
    }
    .item-text {
      font-weight: 400;
      font-size: 50px;
      letter-spacing: 0.05em;
      color: var(--ant-primary-color);
    }
  }
  .other-item {
    display: flex;
    .item-text {
      font-weight: 400;
      font-size: 25px;
      letter-spacing: 0.05em;
      color: #000 !important;
    }
  }
}

.hardware-statistics {
  .hardware-item {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 25%;
    }
    .item-text-top {
      margin-bottom: 30px !important;
      font-weight: 400;
      font-size: 37px;
    }
  }
}
/deep/ .ant-card-body {
  height: 100%;
}
.box-flex {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  align-content: space-between;
  & > div {
    width: 100%;
  }
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  b {
    font-size: 14px;
    font-weight: 600;
    margin-right: 10px;
  }
  .date {
    width: 215px;
  }
}
.agent-info {
  margin-bottom: 30px;
  .desc {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: #262626;
  }
  .label {
    font-weight: 500;
    font-size: 14px;
    color: #999;
    margin-right: 10px;
  }
  .item {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    &:nth-last-child(1) {
      padding: 0;
    }
  }
}
.agent-statistics {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  align-content: space-between;
  & > div {
    width: 100%;
  }
}

// 响应式部分
.agent-info,
.order,
.agent,
.hardware {
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .agent-info {
    order: 1;
    width: 280px;
    flex-grow: 1;
  }
  .agent {
    order: 0;
    width: 260px;
    flex-grow: 1;
    margin-right: 30px;
  }
  .order,
  .hardware {
    order: 3;
    width: 100%;
  }
}

@media screen and (min-width: 1430px) {
  .agent,
  .agent-info {
    width: 350px;
    margin-right: 30px;
  }
  .order,
  .hardware {
    width: 65%;
    flex-grow: 1;
  }

  .agent-info {
    order: 0;
  }
  .order {
    order: 1;
  }
  .agent {
    order: 2;
  }
  .hardware {
    order: 3;
  }
}
</style>
