<template>
  <el-dialog title="会员权益" :visible.sync="visible" :close-on-click-modal="false" width="1200px">
    <div v-loading="loading">
      <div class="member-info" v-if="memberData.MemberId">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="会员ID">
            <i class="el-icon-postcard"></i>
            {{ memberData.MemberId }}
          </el-descriptions-item>
          <el-descriptions-item label="会员姓名">
            <i class="el-icon-user"></i>
            {{ memberData.MemberName }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div class="rights-table">
        <el-table 
          :data="memberData.RemainingItems" 
          border 
          style="margin-top: 20px;"
          v-loading="loading"
          empty-text="暂无权益信息"
          show-summary
          :summary-method="getSummaries">
          <el-table-column prop="ItemName" label="项目名称" align="center" min-width="120">
            <template slot-scope="scope">
              <i class="el-icon-goods"></i>
              {{ scope.row.ItemName || '无' }}
            </template>
          </el-table-column>
          <el-table-column prop="ItemPrice" label="单价" align="center" min-width="100">
            <template slot-scope="scope">
              <span style="color: #409EFF;">{{ formatMoney(scope.row.ItemPrice) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SourceType" label="来源类型" align="center" min-width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.SourceType === '购买' ? 'success' : 'info'" size="small">
                {{ scope.row.SourceType }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="TotalPurchased" label="总购买" align="center" min-width="100">
            <template slot-scope="scope">
              <span>{{ formatNumber(scope.row.TotalPurchased) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ConsumedCount" label="已消费" align="center" min-width="100">
            <template slot-scope="scope">
              <span style="color: #67C23A;">{{ formatNumber(scope.row.ConsumedCount) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="RefundedCount" label="已退款" align="center" min-width="100">
            <template slot-scope="scope">
              <span style="color: #E6A23C;">{{ formatNumber(scope.row.RefundedCount) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="DeductCount" label="已扣除" align="center" min-width="100">
            <template slot-scope="scope">
              <span style="color: #909399;">{{ formatNumber(scope.row.DeductCount) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="RemainingCount" label="剩余" align="center" min-width="100">
            <template slot-scope="scope">
              <el-tag type="primary" size="small">{{ formatNumber(scope.row.RemainingCount) }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="visible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'MemberRightsDialog',
  data() {
    return {
      visible: false,
      loading: false,
      memberData: {
        MemberId: '',
        MemberName: '',
        RemainingItems: []
      }
    }
  },
  methods: {
    init(memberId) {
      this.visible = true
      this.loading = true
      this.memberData = {
        MemberId: '',
        MemberName: '',
        RemainingItems: []
      }
      
      request({
        url: `/api/Extend/lqkhxx/GetMemberRemainingItems`,
        method: 'GET',
        data: { memberId }
      }).then(res => {
        if (res.code === 200 && res.data) {
          this.memberData = res.data
        } else {
          this.$message.error(res.msg || '获取会员权益失败')
          this.memberData = { MemberId: '', MemberName: '', RemainingItems: [] }
        }
        this.loading = false
      }).catch(err => {
        console.error('获取会员权益失败:', err)
        this.$message.error('获取会员权益失败')
        this.loading = false
      })
    },
    formatMoney(amount) {
      if (!amount && amount !== 0) return '¥0.00'
      const num = parseFloat(amount)
      if (isNaN(num)) return '¥0.00'
      return '¥' + num.toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    },
    formatNumber(num) {
      if (!num && num !== 0) return '0'
      const number = parseFloat(num)
      if (isNaN(number)) return '0'
      return number.toString()
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          const prop = column.property
          if (prop === 'TotalPurchased' || prop === 'ConsumedCount' || 
              prop === 'RefundedCount' || prop === 'DeductCount' || 
              prop === 'RemainingCount') {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.formatNumber(sums[index])
          } else {
            sums[index] = ''
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    }
  }
}
</script>

<style lang="scss" scoped>
.member-info {
  margin-bottom: 20px;
  
  i {
    margin-right: 6px;
    color: #409EFF;
    font-size: 16px;
  }
}

::v-deep .el-descriptions {
  .el-descriptions__label {
    font-weight: 600;
    color: #606266;
  }
  
  .el-descriptions__content {
    color: #303133;
  }
}

.dialog-footer {
  text-align: right;
}

.rights-table {
  ::v-deep .el-table {
    font-size: 14px;
    
    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 600;
    }
    
    td {
      i {
        margin-right: 4px;
        color: #409EFF;
      }
    }
    
    .el-table__footer-wrapper {
      .el-table__footer {
        th {
          background-color: #f0f9ff;
          color: #303133;
          font-weight: 700;
        }
      }
    }
  }
  
  ::v-deep .el-tag {
    font-weight: 600;
  }
}

::v-deep .el-dialog__body {
  padding: 20px;
}
</style>

