<template>
  <div class="pageCainer">
    <keep-alive :include="cachedComponents">
      <router-view></router-view>
    </keep-alive>
    <!-- 高风险客户内转提醒 -->
    <div class="financeRisk" v-if="financeRisk.length">
      <div class="financeRisk_box" v-for="item in financeRisk" :key="item.id">
        <div style="margin-top: 5px">
          <span>
            {{ $t('Dashboard.item1') }}
          </span>
          <span>{{ ':' }}{{ item.name }}</span>
          <span></span>
          <span>{{ '(' }}{{ item.cId }}{{ ')' }}</span>
        </div>
        <div style="margin-top: 10px">
          <span>{{ item.withdrawLogin }}</span>
          <span>
            {{ $t('Dashboard.item2') }}
          </span>
          <span>${{ item.amount }}</span>
          <span>
            {{ $t('Dashboard.item3') }}
          </span>
          <span>{{ item.depositLogin }}</span>
        </div>
        <div class="dialog-footer">
          <el-button size="mini" type="primary" @click="toVerified(item.id, item)">
            {{ $t('Dashboard.item4') }}
          </el-button>
          <el-button size="mini" @click="cancel(item)">
            {{ $t('Dashboard.item5') }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, inject, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import Service from '@/service/login'
  import Config from '@/config/index'
  // 这个数据放到旁边文件了
  import { cachedComponents } from './cachedRoute'
  // 引用注入
  const Session = inject('session')
  const Pigeon = inject('pigeon')

  const { Code } = Config
  const router = useRouter()

  // 响应式数据
  const interval = ref(null)
  const financeRisk = ref([])
  const closeId = ref([])

  const display = computed(() => JSON.parse(Session.Get('display', true)))

  const getFinanceRiskList = async () => {
    try {
      const res = await Service.financeTransferRiskRemindList({})
      if (res.code == Code.StatusOK) {
        if (res.data && res.data.length) {
          let financeRiskData = financeRisk.value.concat(res.data)
          let map = new Map()
          for (let item of financeRiskData) {
            map.set(item.id, item)
          }
          financeRiskData = [...map.values()]
          financeRisk.value = financeRiskData.filter((item) => {
            return !closeId.value.some((ele) => ele.id === item.id)
          })
        }
      } else {
        Pigeon.MessageError(res.msg)
      }
    } catch (error) {
      console.error('获取财务风险列表失败:', error)
    }
  }

  // 处理
  const toVerified = async (id, data) => {
    try {
      const res = await Service.financeTransferRiskRemindConfirm({ id: id })
      if (res.code == Code.StatusOK) {
        Pigeon.MessageOK(res.msg)
        cancel(data, 1)
      } else {
        Pigeon.MessageError(res.msg)
      }
    } catch (error) {
      console.error('处理风险确认失败:', error)
    }
  }

  // 关闭
  const cancel = (data, type) => {
    let closeDate = { ...data }
    if (type) {
      closeDate.downTime = 1
    } else {
      closeDate.downTime = 30
    }

    let financeRiskData = closeId.value.concat(closeDate)
    let map = new Map()
    for (let item of financeRiskData) {
      map.set(item.id, item)
    }
    closeId.value = [...map.values()]
    financeRisk.value = financeRisk.value.filter((item) => {
      return !closeId.value.some((ele) => ele.id === item.id)
    })
  }

  // 生命周期
  onMounted(() => {})

  onUnmounted(() => {
    if (interval.value) {
      clearInterval(interval.value)
    }
  })
</script>

<style scoped lang="scss">
  .pageCainer {
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .financeRisk {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: auto;
    max-height: 100%;
    z-index: 1;
    .financeRisk_box {
      background: #fff;
      width: 100%;
      height: auto;
      padding: 10px;
      box-sizing: border-box;
      font-size: 14px;
      margin: 10px 0;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      .dialog-footer {
        margin-top: 20px;
        text-align: center;
        .el-button {
          min-width: 100px;
        }
      }
    }
  }
</style>
