<template>
  <div class="info-layout">
    <div class="info">
      <div class="s-tx">
        <div class="card-img avatar" :class="info.incrementNum ? 'vip' : 'pub'" :style="{backgroundImage: info.head? `url(${info.head})`:`#e6e6e6`}"></div>
        <div class="member-icon" v-if="info.incrementNum"></div>
      </div>
      <div class="top-right-card">
        <p class="nickname"><span>{{info.nickName||'--'}}</span></p>
        <div class="contact-info">
          <p><h-icon type="phone" class="info-icon" />{{info.userName||'--'}}</p>
          <p><h-icon type="mail"  class="info-icon" />{{info.email||'--'}}</p>
        </div>
        <div class="ctrls-w">
          <a href="javascript:;" @click="changeShowStatus('informationEdit')">编辑资料></a>
          <a href="javascript:;" @click="changeShowStatus('editAddress')">编辑地址></a>
          <a href="javascript:;" @click="changeShowStatus('changePassword')">修改密码></a>
        </div>
        <div class="pay-btn">
          <span class="member-tag"></span>
          去充值
        </div>
      </div>
    </div>
    
    <div class="bottom-info">
      <div class="bottom-info-right">
        <div class="card info-right-card">
          <div class="card-header">账户概览</div>
          <div class="account-info">
            <div class="info-item">
              <div class="value">
                <p>{{ info.incrementNum || 0 }}</p><span></span>
              </div>
              <p class="label">权益数量(个)</p>
            </div>
            <div class="info-item">
              <div class="value">
                <p>{{ info.downloadNumTotal - info.downloadNum }}</p><span></span>
              </div>
              <p class="label">剩余下载(次)</p>
            </div>
            <div class="info-item">
              <div class="value">
                <p>{{ totalScene }}</p><span></span>
              </div>
              <p class="label">拍摄场景(个)</p>
            </div>
            <div class="info-item">
              <div class="value">
                <p>{{ info.cameraCount }}</p><span></span>
              </div>
              <p class="label">相机数量(台)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 会员表格 -->
    <MemberTable
      :list="list"
      :total="total"
      :pageNum="pageNum"
      :loading="loading"
      :snCode="snCode"
      @search="onSearch"
      @page-change="onPageChange"
    />
  </div>
</template>

<script setup>
defineOptions({ name: 'PcInformationIndex' })
import { ref, onMounted, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { findSceneNumber, findIncrementList } from '@/api/information/index'
import MemberTable from '@/views/pc/information/components/MemberTable.vue'

const userStore = useUserStore()

// 模拟数据结构
const info = computed(() => userStore.info)


const showStatus = ref('')
const totalScene = ref(0)

const changeShowStatus = (component) => {
  showStatus.value = component
}

const getTotalScene = async () => {
  const res = await findSceneNumber({})
  const {SS, kJ, kk, SG, sx} = res
  totalScene.value = SS.sceneNum + kJ.sceneNum + kk.sceneNum + SG.sceneNum + sx.sceneNum
}

const list = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const snCode = ref('')
const loading = ref(false)

const fetchList = async () => {
  loading.value = true
  try {
    const res = await findIncrementList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      snCode: snCode.value?.trim() || ''
    })
    // 兼容返回结构：res 或 res.data
    const data = res?.data || res
    list.value = data?.list || []
    pageNum.value = data?.pageNum || pageNum.value
    pageSize.value = data?.pageSize || pageSize.value
    total.value = data?.total || 0
  } finally {
    loading.value = false
  }
}

const onSearch = (kw) => {
  snCode.value = kw || ''
  pageNum.value = 1
  fetchList()
}

const onPageChange = (newPage) => {
  pageNum.value = newPage || 1
  fetchList()
}

onMounted(() => {
  // 页面初始化逻辑
  info.value = userStore.info
  getTotalScene()
  fetchList()
})
</script>

<style lang="less" scoped>
.info-layout {
  background: #f4f4f6!important;
  min-height: 100vh;
  padding-top: 0!important;
}

.card {
  background: #fff;
  padding: 30px;
  border-radius: 4px;
  
  .card-header {
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #333;
  }
}

.info {
  display: flex;
  background: #fff;
  padding: 30px;
  font-size: 14px;
  position: relative;
  border-radius: 4px;
  
  & > div {
    display: inline-block;
    vertical-align: middle;
  }
  
  .s-tx, .top-right-card {
    position: relative;
  }
  
  .top-right-card {
    flex: 1;
    position: relative;
  }
  
  .avatar {
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
    margin-right: 20px;
    border: 2px solid;

    &.vip {
      border-color: #D8AF7C;
    }

    &.pub {
      border-color: rgb(222,228,228);
    }
  }
  
  .member-icon {
    width: 32px;
    height: 32px;
    background: url('@/assets/images/information/avatar_vip.png') no-repeat center center;
    background-size: cover;
    position: absolute;
    right: 20px;
    bottom: 0;
  }
  
  .nickname {
    width: calc(100% - 40px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
  }
  
  .contact-info {
    margin: 13px 0;
    display: flex;
    
    & > p {
      width: 150px;
      display: flex;
      align-items: center;
      
      .info-icon {
        font-size: 16px;
        margin-right: 6px;
      }
    }
  }
  
  .ctrls-w {
    a {
      display: inline-block;
      width: 150px;
      color: #15bec8;
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.bottom-info {
  margin: 30px 0;
  display: flex;
  
  .bottom-info-right {
    flex: 1;
    background: #fff;
    border-radius: 4px;
    // box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    .strong {
      font-size: 24px;
      margin: 0 5px;
      font-weight: bold;
    }
    
    .account-info {
      display: flex;
    }
    
    .info-item {
      padding-top: 40px;
      flex: 1;
      position: relative;
      
      &::after {
        content: '';
        display: block;
        width: 1px;
        height: 45px;
        background: #ebebeb;
        position: absolute;
        top: 48px;
        right: 0;
      }
      
      &:last-child {
        &::after {
          display: none;
        }
      }
      
      .value {
        font-size: 30px;
        line-height: 36px;
        text-align: center;
        
        p {
          display: inline-block;
        }
        
        span {
          font-size: 14px;
          line-height: 20px;
          display: inline-block;
          margin-left: 2px;
        }
      }
      
      .label {
        font-size: 14px;
        color: #909090;
        line-height: 20px;
        margin-top: 20px;
        text-align: center;
      }
    }
  }
}

.pay-btn {
  position: absolute;
  width: 140px;
  line-height: 40px;
  background: linear-gradient(90deg, #FEE2B0 0%, #C89756 100%);
  margin: 0 auto;
  cursor: pointer;
  font-weight: 400;
  right: 30px;
  color: #572D06;
  text-align: center;
  border-radius: 4px;
  font-size: 16px;
  top: 50%;
  transform: translateY(-50%);
  .member-tag {
    display: block;
    width: 16px;
    height: 16px;
    background: url(@/assets/images/information/member-tag.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    right: 16px;
    top: 0;
  }
}
</style>
