<template>
  <data-view-layout
    title="卡卡数据可视化"
    identifier="KK- MANAGE"
    :icon="icon"
    @leave="handleLeave"
    @audioStatus="toggleMute"
    :isMute="isMute"
    ref="layout"
  >

    <template #charts>
      <data-view-echart :config="chart1"/>
      <data-view-echart :config="chart2"/>
      <data-view-echart :config="chart3"/>
      <data-view-echart :config="chart4"/>
    </template>

    <template #left-table>
      <data-view-table
        title="商户数据"
        :columnSizes="[20, 20, 20, 20, 20]"
        :columns="[
          {label: '商户名称', key: 'username'},
          {label: '余额', key: 'balance'},
          {label: '剩余额度', key: 'residueBalance'},
          {label: '成功金额', key: 'collectionSuccessPrice'},
          {label: '成功率', key: 'percentage'},
        ]"
        :data="data1"
        size="middle"
        ref="table1"
      />
    </template>

    <template #middle-table>
      <data-view-table
        title="在线卡商数据"
        :columnSizes="[25, 25, 25, 25]"
        :columns="[
            {label: '卡商名称', key: 'username'},
            {label: '剩余押金/固定押金', key: 'dayMargin'},
            {label: '冻结', key: 'frozenAmount'},
            {label: '日总跑量', key: 'toDayTotal'},
          ]"
        :data="data3"
        size="middle"
        ref="table3"
      >
        <template #dayMargin="{row}">
          <div class="day-margin-row">
            <span>{{ row.margin }}</span>
            <span>{{ row.dayMargin }}</span>
          </div>
        </template>
      </data-view-table>
    </template>

    <template #right-table>
      <data-view-table
        title="在线卡数据"
        :columnSizes="[14.2,14.2,14.2,14.2,14.2,14.2,14.2,]"
        :columns="[
            {label: '银行名称', key: 'bankName'},
            {label: '姓名', key: 'cardHolder'},
            {label: '卡商名称', key: 'username'},
            {label: '已收款', key: 'todayIncomeReceived'},
            {label: '剩余额度', key: 'todayRemainingAmount'},
            {label: '余额', key: 'remainingAmount'},
            {label: '通道', key: 'channels'},
          ]"
        :data="data2"
        size="large"
        ref="table2"
      >
        <template #channels="{row}">
          <horizontal-scroll-pane>
            <span v-for="channelName of row.channels" :key="channelName">
              {{ channelName }}
            </span>
          </horizontal-scroll-pane>
        </template>
      </data-view-table>
    </template>
  </data-view-layout>
</template>

<script>
import DataViewBG from '@/assets/images/data-view-bg.png'
import DataViewEchart from './components/data-view-echart.vue'
import DataViewLayout from './components/data-view-layout.vue'
import icon from '@/assets/logo/plain.png'
import DataViewTable from './components/data-view-table.vue'
import { amountFormat, amountFriendlyFormat, sortBy } from '@/utils/ruoyi'
import screenfull from 'screenfull'
import HorizontalScrollPane from './components/horizontal-scroll-pane.vue'

export default {
  components: { HorizontalScrollPane, DataViewTable, DataViewLayout, DataViewEchart },
  data() {
    return {
      DataViewBG,
      icon,
      // 商户数据
      data1: [],
      // 在线卡数据
      data2: [],
      // 在线卡商数据
      data3: [],
      // 图表-代收成功单数/代收总单数
      chart1: {
        value: 0,
        total: 0,
        unit: '单',
        // 进度条主色(渐变色), 由左到右
        progressBar: ['#4494FF', '#B04BFF'],
        // 进度条背景色
        progressBarBG: '#091560',
        // 两边透明的圆边颜色, 第一个浅色, 第二个深色
        circle2Color: ['#168FFF00', '#168FFF'],
        // 内圆的渐变, 由内到外
        innerCircle: ['#082863', '#082863', '#8000FF68'],
        // 透明边框的颜色, 数组第一个为浅色, 第二个为深色
        opacityBorder: ['rgba(0, 0, 0, 0)', 'rgba(45, 103, 252, 1)'],
        // 投影颜色
        shadowColor: '#2d68ffc4',
        // 刻度颜色
        scaleColor: '#6DCBFF',
        // 数值文字
        valueLabel: '代收成功单数',
        // 总数值文字
        totalLabel: '总订单：0'
      },
      chart2: {
        value: 0,
        total: 0,
        unit: '元',
        progressBar: ['#4494FF', '#B04BFF'],
        progressBarBG: '#091560',
        circle2Color: ['#168FFF00', '#168FFF'],
        innerCircle: ['#082863', '#082863', '#8000FF68'],
        opacityBorder: ['rgba(0, 0, 0, 0)', 'rgba(45, 103, 252, 1)'],
        shadowColor: '#2d68ffc4',
        scaleColor: '#6DCBFF',
        valueLabel: '代收成功金额',
        totalLabel: '总金额：0'
      },
      chart3: {
        value: 0,
        total: 0,
        unit: '单',
        progressBar: ['#42EA9A', '#EFA83E'],
        progressBarBG: '#0A2F28',
        circle2Color: ['#30BE7900', '#30BE79'],
        innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
        opacityBorder: ['rgba(0, 0, 0, 0)', '#30C17B'],
        shadowColor: '#30C17Bc4',
        scaleColor: '#6DCBFF',
        valueLabel: '代付成功单数',
        totalLabel: '总金额：0'
      },
      chart4: {
        value: 0,
        total: 0,
        unit: '元',
        progressBar: ['#42EA9A', '#EFA83E'],
        progressBarBG: '#0A2F28',
        circle2Color: ['#30BE7900', '#30BE79'],
        innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
        opacityBorder: ['rgba(0, 0, 0, 0)', '#30C17B'],
        shadowColor: '#30C17Bc4',
        scaleColor: '#6DCBFF',
        valueLabel: '代付成功金额',
        totalLabel: '总金额：0'
      },
      ws: null,
      isScreenFull: false,
      // 是否静音
      isMute: localStorage.getItem('isMute') === 'true'
    }
  },
  mounted() {
    if (this.$route.query.fullscreen) {
      this.isScreenFull = true
      setTimeout(() => {
        this.$nextTick(() => {
          screenfull.request()
        })
      })
    }
    this.connectWS()
  },
  methods: {
    // 切换静音状态
    toggleMute() {
      this.isMute = !this.isMute
      localStorage.setItem('isMute', this.isMute)
    },
    connectWS() {
      this.ws = new WebSocket(`ws://kaka-qws.weirui0755.com/websocket`)
      this.ws.onopen = () => {
        this.ws.send(JSON.stringify({ 'type': 'add_push' }))
      }
      this.ws.onmessage = (event) => {
        if (!event.data) {
          return
        }
        let data
        try {
          data = JSON.parse(event.data)
        } catch (e) {
          return
        }
        if (!data || data.type !== 'push') {
          return
        }
        const card = JSON.parse(data.value.card)
        const carddealer = JSON.parse(data.value.carddealer)
        const statisticsPush = JSON.parse(data.value.statisticsPush)

        // payTotalQty	代收总订单数
        // paySuccessQty	代收成功订单数
        // paySuccessAmount	代收成功金额
        // payTotalAmount	代收总金额
        // transferTotalQty	代付总订单数
        // transferSuccessQty	代付成功订单数
        // transferSuccessAmount	代付成功金额
        // transferTotalAmount	代付总金额

        const chart1Total = amountFriendlyFormat(statisticsPush.payTotalQty)
        const chart1Value = amountFriendlyFormat(statisticsPush.paySuccessQty, chart1Total.unit)
        this.chart1.value = chart1Value.amount
        this.chart1.unit = chart1Value.unit + '单'
        this.chart1.total = chart1Total.amount
        this.chart1.totalLabel = '总订单：' + chart1Total.display

        const payTotalAmount = this.NumberDiv(statisticsPush.payTotalAmount, 100)
        const paySuccessAmount = this.NumberDiv(statisticsPush.paySuccessAmount, 100)
        const chart2Total = amountFriendlyFormat(payTotalAmount)
        const chart2Value = amountFriendlyFormat(paySuccessAmount, chart2Total.unit)
        this.chart2.value = chart2Value.amount
        this.chart2.unit = chart2Value.unit + '元'
        this.chart2.total = chart2Total.amount
        this.chart2.totalLabel = '总金额：' + chart2Total.display

        const chart3Total = amountFriendlyFormat(statisticsPush.transferTotalQty)
        const chart3Value = amountFriendlyFormat(statisticsPush.transferSuccessQty, chart3Total.unit)
        this.chart3.value = chart3Value.amount
        this.chart3.unit = chart3Value.unit + '单'
        this.chart3.total = chart3Total.amount
        this.chart3.totalLabel = '总订单：' + chart3Total.display

        const transferSuccessAmount = statisticsPush.transferSuccessAmount
        const transferTotalAmount = statisticsPush.transferTotalAmount
        const chart4Total = amountFriendlyFormat(transferTotalAmount)
        const chart4Value = amountFriendlyFormat(transferSuccessAmount, chart4Total.unit)

        this.chart4.value = chart4Value.amount
        this.chart4.unit = chart4Value.unit + '元'
        this.chart4.total = chart4Total.amount
        this.chart4.totalLabel = '总金额：' + chart4Total.display

        const pushMerchant = JSON.parse(data.value.pushMerchant)
        const f = (v) => amountFormat({ amount: v, decimal: false, decimalLength: 0 })

        // 商户数据
        this.data1 = pushMerchant.map(i => {
          return {
            username: i.username,
            balance: f(i.balance) || '0',
            residueBalance: f(i.residueBalance) || '0',
            collectionSuccessPrice: f(i.collectionSuccessPrice) || '0',
            percentage: Number.parseInt(i.percentage * 100) + '%',
            balanceWarning: i.balanceWarning
          }
        })
        this.data1 = sortBy(this.data1, 'balanceWarning')
        // this.data1 = this.data1.slice(0, 10)

        // 在线卡数据
        this.data2 = card.map(i => {
          return {
            bankName: i.bankName,
            cardHolder: i.cardHolder,
            username: i.username,
            todayIncomeReceived: f(i.todayIncomeReceived) || '0',
            todayRemainingAmount: f(i.todayRemainingAmount) || '0',
            todayOutNumber: i.todayOutNumber + '/' + f(i.todayOutReceived) || '0',
            remainingAmount: f(i.remainingAmount) || '0',
            balanceWarning: 0,
            channels: i.channelNames
          }
        })
        this.data2 = sortBy(this.data2, 'balanceWarning')
        this.data2 = this.data2.slice(0, 10)

        // 在线卡商数据
        this.data3 = carddealer.map(i => {
          return {
            username: i.username,
            dayMargin: f(i.dayMargin) || '0',
            margin: f(i.margin) || '0',
            toDayTotal: f(i.toDayTotal) || '0',
            turnoverRate: (i.turnoverRate * 100).toFixed(2) + '%',
            balanceWarning: i.marginWarning,
            frozenAmount: f(i.frozenAmount) || '0',
          }
        })
        this.data3 = sortBy(this.data3, 'balanceWarning')
        this.data3 = this.data3.slice(0, 10)

        this.$refs.table1.scrollReset()
        this.$refs.table2.scrollReset()
        this.$refs.table3.scrollReset()

        if (this.isMute) {
          const audio = new Audio('/alarm.mp3')
          const hasBalanceWarning = this.data1.some(i => i.balanceWarning) || this.data2.some(i => i.balanceWarning) || this.data3.some(i => i.balanceWarning)
          if (hasBalanceWarning) {
            audio.play()
          }
        }
      }
    },
    /**
     * 退出全屏
     */
    handleLeave() {
      if (this.isScreenFull) {
        screenfull.exit()
      } else {
        screenfull.request(this.$refs.layout.$el)
      }
      this.isScreenFull = !this.isScreenFull
    },
    disconnect() {
      this.ws?.send({ 'type': 'del_push' })
    }
  },
  beforeDestroy() {
    this.disconnect()
  }
}
</script>
<style lang="scss">
@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url('../../assets/fonts/YouSheBiaoTiHei.ttf');
  font-weight: normal;
  font-style: normal;
}

.YouSheBiaoTiHei {
  font-family: "YouSheBiaoTiHei", serif;
  font-style: normal;
  font-weight: 400;
}

.day-margin-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;

  span {
   // white-space: normal;
    width: 100%;
  }
}

</style>
