<template>
  <div>
    <!-- 统计卡片 -->
    <div :gutter="24" class="sum-box">
        <el-card class="box-card">
            <div class="my-span-checklist-title">
                总资产余额
            </div>
            <div class="my-span-checklist-main">
                <span>{{ formatYi(cardInfo.custAumBal) }}</span>
            </div>
        </el-card>
        <el-card class="box-card">
            <div class="my-span-checklist-title">
                总资产余额较上月变动
            </div>
            <div class="my-span-checklist-main">
                <span>{{ formatYi(cardInfo.aumBalCompLm) }}</span>
            </div>
        </el-card>
        <el-card class="box-card">
            <div class="my-span-checklist-title">
                总资产余额月日均
            </div>
            <div class="my-span-checklist-main">
                <span>{{ formatYi(cardInfo.custAumMonthAvg) }}</span>
            </div>
        </el-card>
        <el-card class="box-card">
            <div class="my-span-checklist-title">
                2星级及以上客户数量
            </div>
            <div class="my-span-checklist-main">
                <span>{{ cardInfo.custLevelCountSum }}</span>
                <el-tooltip 
                  placement="top" 
                  trigger="hover" 
                  v-if="cardInfo.custLevelCount"
                >
                  <span class="quesiton"><i class="el-icon-question"></i></span>
                  <template #content>
                    <ul v-for="item in cardInfo.custLevelCount">
                      <li :key="item.key" class="quesitonli"><span>{{ item.key }}：</span>{{ item.value }}</li>
                    </ul>
                  </template>  
                </el-tooltip>
            </div>
        </el-card>
        <el-card class="box-card">
            <div class="my-span-checklist-title">
                2星级及以上客户数量较上月变动
            </div>
            <div class="my-span-checklist-main">
                <span>{{ cardInfo.custLevelCompLmSum }}</span>
                <el-tooltip 
                  placement="top" 
                  trigger="hover" 
                  v-if="cardInfo.custLevelCompLm"
                >
                  <span class="quesiton"><i class="el-icon-question"></i></span>
                  <template #content>
                    <ul v-for="item in cardInfo.custLevelCompLm">
                      <li :key="item.key" class="quesitonli"><span>{{ item.key }}：</span>{{ item.value }}</li>
                    </ul>
                  </template>  
                </el-tooltip>
            </div>
        </el-card>
    </div>

    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
      <el-form-item label="客户星级" prop="custLevel">
        <el-select v-model="queryParams.custLevel" placeholder="请选择" clearable style="width: 150px">
          <el-option
            v-for="level in custLevelOptions"
            :key="level"
            :label="level"
            :value="level"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="星级状态" prop="statusType">
        <el-select v-model="queryParams.statusType" placeholder="请选择" clearable style="width: 150px">
          <el-option label="本月" value="current" />
          <el-option label="上月" value="last" />
          <el-option label="上升" value="rise" />
          <el-option label="下降" value="fall" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-card class="header-statics" style="display: none">
    <ul class="statics-cnt">
      <li>
        <span>{{ topData['branchNum'] || 0 }}</span>
        <span>星级较上月变动数</span>
      </li>
      <li>
        <span>{{ topData['outletNum'] || 0 }}</span>
        <span>2星客户数量</span>
      </li>
      <li>
        <span>{{ topData['topGridNum'] || 0 }}</span>
        <span>3星客户数量</span>
      </li>
      <li>
        <span>{{ topData['secGridNum'] || 0 }}</span>
        <span>4星客户数量</span>
      </li>
      <li>
        <span>{{ topData['businessNum'] || 0 }}</span>
        <span>5星客户数量</span>
      </li>
      <li>
        <span>{{ topData['merchantNum'] || 0 }}</span>
        <span>总资产月日均</span>
      </li>
    </ul>
    </el-card>
    <el-table v-loading="loading" :data="tableData">
      <el-table-column prop="custName" label="客户名称" align="center" />
      <el-table-column prop="custIdc" label="客户证件号" align="center" width="180px" />
      <el-table-column prop="custIsn" label="客户内码" align="center" />
      <el-table-column prop="custAge" label="年龄" align="center" />
      <el-table-column prop="custSex" label="性别" align="center" />
      <el-table-column prop="custPhone" label="联系电话" align="center" width="150px" />
      <el-table-column prop="custAdress" label="联系地址" align="center" width="150px" />
      <el-table-column prop="custAumBal" label="总资产余额" align="center" width="120px" />
      <el-table-column prop="aumBalCompLm" label="总资产余额较上月变动" align="center" width="150px" />
      <el-table-column prop="custAumMonthAvg" label="总资产余额月日均" align="center" width="150px" />
      <el-table-column prop="custLevel" label="客户星级" align="center" />
      <el-table-column prop="custLevelCompLm" label="星级较上月变动" align="center" width="150px" />
      <el-table-column prop="branchId" label="支行号" align="center" width="120px" />
      <el-table-column prop="branchName" label="支行名" align="center" width="180px" />
      <el-table-column prop="outletId" label="网点号" align="center" width="120px" />
      <el-table-column prop="outletName" label="网点名" align="center" width="180px" />
      <el-table-column prop="managerName" label="责任人" align="center" width="150px">
        <template #default="scope">
          <span>{{ scope.row.managerName }} {{ scope.row.managerId }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getData" />
  </div>
</template>

<script>
import { gridCmpmCustManagerList, gridCmpmCustManagerResult, getCustLevelList, exportCustManagerReport } from '@/api/gridSearch/accountManageReport/index'
  export default {
    data() {
      return {
        cardInfo: {
            custAumBal: '',
            aumBalCompLm: '',
            custAumMonthAvg: '',
            custLevelCount: '',
            custLevelCountSum: '',
            custLevelCompLm: '',
            custLevelCompLmSum: ''
        },
        tableData: [],
        loading: false,
        custLevelOptions: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          custLevel: null,
          statusType: null
        },
        total: 0,
        topData: []
      }
    },
    mounted() {
      // 从 URL 参数获取筛选条件
      const { custLevel, statusType } = this.$route.query
      if (custLevel) {
        this.queryParams.custLevel = custLevel
      }
      if (statusType) {
        this.queryParams.statusType = statusType
      }
      this.loadCustLevelOptions()
      this.getData()
      this.getSum()
    },
    methods: {
      /** 加载客户星级选项 */
      loadCustLevelOptions() {
        getCustLevelList().then(res => {
          this.custLevelOptions = res.data || []
        }).catch(() => {
          this.custLevelOptions = []
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getData()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.custLevel = null
        this.queryParams.statusType = null
        this.handleQuery()
      },
      handleExport() {
        exportCustManagerReport({
          custLevel: this.queryParams.custLevel,
          statusType: this.queryParams.statusType
        }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            window.dispatchEvent(new Event('download-center-refresh'))
          }
        }).catch(err => {
          this.$message.error(err?.msg || '导出失败')
        })
      },
      getData() {
        this.loading = true;
        gridCmpmCustManagerList(this.queryParams).then(res => {
          this.tableData = res.rows
          this.loading = false
          this.total = res.total
        })
      },
      getSum() {  
        gridCmpmCustManagerResult().then(res => {
          this.cardInfo = {
            custAumBal: res.custAumBal,
            aumBalCompLm: res.aumBalCompLm,
            custAumMonthAvg: res.custAumMonthAvg,
            custLevelCount: this.toArr(res.custLevelCount),
            custLevelCountSum: this.toSum(res.custLevelCount),
            custLevelCompLm: this.toArr(res.custLevelCompLm),
            custLevelCompLmSum: this.toSum(res.custLevelCompLm),
          }
        })
      },
      toArr(obj) {
        let arr = []
        Object.keys(obj).map(key => {
          arr.push({
            key,
            value: obj[key]
          })
        })
        return arr
      },
      toSum(obj) {
        let sum = 0
        Object.keys(obj).forEach(key => {
          // 只计算2星级及以上的：key中包含"2星"、"3星"、"4星"、"5星"
          if (key.includes('2星') || key.includes('3星') || key.includes('4星') || key.includes('5星')) {
            sum += obj[key]
          }
        })
        return sum
      },
      /** 格式化为亿元 */
      formatYi(value) {
        if (value === null || value === '' || value === undefined) return '-'
        const num = parseFloat(value)
        if (isNaN(num)) return '-'
        // 换算为亿元，保留2位小数
        return (num / 100000000).toFixed(2) + '亿元'
      }
    }
  }
</script>

<style lang="scss" scoped>
.sum-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 -10px;
}
.box-card {
    flex: 1;
    height: 100px;
    border-radius: 8px;
    margin: 20px 10px;
    border: 3px solid #a8c2f5;
}

.my-span-checklist-title {
    font-size: 14px;
    color: #666;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.my-span-checklist-main {
    line-height: 40px;
    font-size: 30px;
    color: #222;
    font-weight: bold;
}
.quesiton {
  font-size: 20px;
  color: #2094ff;
  margin-left: 6px;
}

.quesitonli {
  font-size: 16px;
  line-height: 24px;
}

.statics-cnt {
  display: flex;
  justify-content: space-between;
  gap: 17px;
  padding: 0;
  margin: 0;

  li {
    list-style: none;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #eaf5ff;
    border-radius: 8px;
    padding: 24px 0;
    min-width: 100px;

    span {
      &:first-child {
        font-size: 28px;
        font-weight: 900;
        line-height: 40px;
        color: #222222;
      }

      &:last-child {
        font-size: 17px;
        font-weight: 400;
        line-height: 24px;
        color: #959da6;
      }
    }
  }
}
.header-statics {
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px;
  background-color: #ffffff;
  margin: 0 0 22px 0;
  padding: 24px 30px;
  overflow-x: hidden;

  >p {
    margin: 0 0 20px 0;
    line-height: 25px;
    font-weight: 600;
    color: #222222;
    font-size: 18px;
    letter-spacing: 0.5px;
  }
}
</style>
