<template>
    <Framework>
        <div class="bailout-query">
            <div class="bailout-query__fill">
                <h5>个人救助查询</h5>
                <div class="input-row">
                    <span>姓名：</span>
                    <input type="text" v-model="person_name" placeholder="请输入姓名">
                    <span>身份证号：</span>
                    <input  v-model="person_uid" placeholder="请输入身份证号">
                    <div class="btn-search" @click="queryPaymentAmount">查询</div>
                </div>
            </div>
            <div class="bailout-query__result">
                <div class="tip">
                    <h5>当前情况</h5>
                    <span> <i>*</i>温馨提示：为避免信息泄漏，请查询完本人信息后，点击“首页”！</span>
                </div>
                <div class="money" >
                    <div class="center" style="">
                        <div class="money-item" v-for="(item,index) in moneyDate.currtMx" :key="index" >
                            <span style="font-weight: 500">{{ item.archive_name }}：</span>
                            <span>{{ item.class_name }}</span>
                            <span style="color: #ff4f4f;margin-left: auto">{{item.amount}}</span>
                        </div>
                    </div>
                    <div v-if="moneyDate.currtMx.length === 0 && !empty " style="text-align: center;font-size: 16px;color: #999;margin-top: 30px">暂无数据</div>
                    <div class="money-empty"  v-if="empty">
                        <img src="../../assets/images/search.png">
                        <span>根据查询结果，你当前不享受民政救助政策！</span>
                    </div>
                </div>

                <div class="history">
                    <h5>历史发放情况</h5>
                    <div class="table">
                        <div class="table-center">
                            <el-table :span-method="mergeCells"  v-if="!empty && moneyDate.hisMx.length > 0" :show-header="false" empty-text="暂无数据"  border :data="moneyDate.hisMx" style="width: 100%">
                                <el-table-column prop="archive_name" label="Date"   width="200px" align="center"/>
                                <el-table-column prop="class_name" label="Name"  align="center"/>
                                <el-table-column prop="period_id" label="Date"   width="150px" align="center" >
                                    <template #default="scope">
                                        {{scope.row.period_id.slice(0,4)}}-{{scope.row.period_id.slice(4,6)}}
<!--                                        {{scope.row.period_id}}-->
                                    </template>
                                </el-table-column>
                                <el-table-column prop="amount" label="Address" width="200px" align="center">
                                    <template #default="scope">
                                        <i>{{scope.row.amount}}</i>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>

                        <div v-if="moneyDate.hisMx.length === 0 && !empty " style="text-align: center;font-size: 16px;color: #999;margin-top: 100px">暂无数据</div>
                        <div  class="table-empty" v-if="empty">
                            <img src="../../assets/images/empty.png">
                            <span>在本系统上线后，不存在你的历史发放记录！</span>
                        </div>
                    </div>

                </div>

            </div>

        </div>
        <div class="btn-back">
            <router-link to="/"><img src="../../assets/images/btn_toHome.png" alt=""></router-link>
        </div>
    </Framework>
</template>
<script>
import Framework from '@/components/framework.vue'
import { ElMessage } from 'element-plus'

export default {
  components: { Framework },
  data () {
    return {
      person_uid: '', // 510212196307160054 //512326196303104368
      person_name: '',
      idNumber: '',
      pageSize: 10,
      currentPage: 100,
      tableData: [],
      moneyDate: {
        currtMx: [],
        hisMx: []
      },
      empty: false

    }
  },
  methods: {
    // 合并单元格
    mergeCells ({ column, rowIndex }) {
      if (column.property === 'period_id') {
        const currentPeriod = this.moneyDate.hisMx[rowIndex].period_id
        const prevPeriod = rowIndex > 0 ? this.moneyDate.hisMx[rowIndex - 1].period_id : null

        if (prevPeriod === currentPeriod) {
          return [0, 0] // 不显示单元格
        } else {
          let rowspan = 1
          for (let i = rowIndex + 1; i < this.moneyDate.hisMx.length; i++) {
            if (this.moneyDate.hisMx[i].period_id === currentPeriod) {
              rowspan++
            } else {
              break
            }
          }
          return [rowspan, 1] // 合并单元格
        }
      }
    },
    async queryPaymentAmount () {
      if (this.person_uid === '') return ElMessage.error('请输入身份证号')
      const params = {
        person_uid: this.person_uid
      }
      const { data } = await this.$http.get('api/archive/queryPaymentAmount.do', { params })

      data.hisMx.sort((a, b) => {
        // 先按 period_id 降序排序
        if (b.period_id !== a.period_id) {
          return b.period_id - a.period_id
        }
        // 再按 archive_name 升序排序
        return a.archive_name.localeCompare(b.archive_name)
      })
      data.currtMx.sort((a, b) => {
        // archive_name 升序排序
        return a.archive_name.localeCompare(b.archive_name)
      })

      this.moneyDate = data
      if (data.currtMx.length === 0 && data.hisMx.length === 0) {
        this.empty = true
      } else {
        this.empty = false
      }
    }

  }
}
</script>
<style scoped lang="less">
.bailout-query {
    padding: 20px;
    min-height: 854px;
    background: #fff url("../../assets/images/bg2.png");
    background-size: 100% 100%;

    &__fill {
        height: 180px;
        background: url("../../assets/images/bg3.png");
        background-size: 100% 100%;

        h5 {
            font-size: 28px;
            color: #fff;
            text-align: center;
            padding: 32px 0;
        }

        .input-row {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;

            span {
                width: 120px;
                text-align: right;
                color: #fff;
            }

            input {
                width: 320px;
                height: 40px;
                border: 1px solid #fff;
                border-radius: 5px;
                padding-left: 10px;
                outline: none;
            }

            .btn-search {
                cursor: pointer;
                color: #fff;
                text-align: center;
                line-height: 40px;

                border-radius: 6px;
                width: 80px;
                height: 40px;
                background: linear-gradient(to right, #FFBA76, #FF8000);
                margin-left: 24px;
            }
        }

    }

    &__result {
        margin: 35px auto 0;

        .tip {
            display: flex;
            align-items: center;
            gap: 15px;

            h5 {
                font-size: 24px;
                color: #333;

            }

            span {
                i {
                    color: #FF0000;

                }

            }
        }

        .money {
            margin-top: 20px;
            min-height: 156px;
            border-radius: 8px;
            border: 1px solid #D7D7D7;
            padding: 20px 30px;
            font-size: 24px;
            color: #333;
            line-height: 40px;
            .center{
                width: 900px; margin: 0 auto
            }
            .money-item{
                display: flex;
                width: 800px;

            }

            .money-empty{
                display: flex;
                align-items: center;
                font-size: 18px;
                margin-left: 10px;
                img{
                    width: 240px;
                    height: 130px;
                }
            }

        }

        .history {
            margin-top: 25px;

            h5 {
                font-size: 24px;
            }
            .table{

                margin-top: 12px;
                min-height: 287px;
                padding: 24px 30px ;
                border: 1px solid #D7D7D7;
                border-radius: 8px;
                .table-center{
                    width: 900px;
                    margin: 0 auto;

                }
                :deep(.cell){
                    font-size: 18px;
                }

            }
            .table-empty{
                display: flex;
                align-items: center;
                height: 287px;
                font-size: 18px;
                margin-left: 48px;

                img{
                    width: 200px;
                    height: 137px;
                }
            }
        }

    }
}
.btn-back{
    display: flex;
    justify-content: center;
    margin-top: 35px;
    img{
        width: 172px;
        height: 78px

    }

}
</style>
