<template>
  <el-drawer
    :title="'会员详情 · ' + (detail.memberCode || '')"
    :visible.sync="localVisible"
    direction="rtl"
    size="68%"
    append-to-body
    custom-class="detail-drawer"
  >
    <div v-loading="loading" class="drawer-content">
      <h4 class="section-header">基本信息</h4>
      <el-descriptions :column="2" border size="small" class="mb16">
        <el-descriptions-item label="会员名称">{{ detail.memberCode || '—' }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{ detail.nickName || '—' }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ detail.mobile || '—' }}</el-descriptions-item>
        <!-- <el-descriptions-item label="会员等级">{{ detail.memberLevelLabel || (detail.memberLevel != null ? detail.memberLevel : '—') }}</el-descriptions-item> -->
        <el-descriptions-item label="是否启用">
          <el-tag size="small" :type="detail.status === '0' ? 'success' : 'danger'">{{ detail.status === '0' ? '启用' : '禁用' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ parseTime(detail.registerTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item label="累计消费次数">{{ detail.orderCount != null ? detail.orderCount : '—' }}</el-descriptions-item>
        <el-descriptions-item label="累计消费金额">{{ detail.totalAmount != null ? detail.totalAmount : '—' }}</el-descriptions-item>
      </el-descriptions>

      <h4 class="section-header">收货地址</h4>
      <el-table v-if="detail.addressList && detail.addressList.length" border size="small" :data="detail.addressList" class="mb16">
        <el-table-column label="收货人" prop="consigneeName" width="100" />
        <el-table-column label="联系电话" prop="mobile" width="120" />
        <el-table-column label="收货地址" min-width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.fullAddress || formatAddress(scope.row) }}</span>
            <el-tag v-if="scope.row.isDefault === '1'" size="mini" type="success" class="default-tag">默认</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div v-else class="empty-tip mb16">暂无收货地址</div>

      <div class="action-bar">
        <el-button type="primary" plain icon="el-icon-s-order" @click="handleViewOrders" v-hasPermi="['agri:member:query']">查看订单</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { getMember } from "@/api/agri/member"

export default {
  name: "MemberDetail",
  props: {
    visible: { type: Boolean, default: false },
    memberId: { type: [Number, String], default: null }
  },
  data() {
    return {
      localVisible: false,
      loading: false,
      detail: {}
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val
      if (val && this.memberId) {
        this.loadDetail()
      }
    },
    localVisible(val) {
      this.$emit("update:visible", val)
    }
  },
  methods: {
    loadDetail() {
      this.loading = true
      getMember(this.memberId).then(response => {
        this.detail = response.data || {}
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    formatAddress(row) {
      return [row.province, row.city, row.district, row.detailAddress].filter(Boolean).join("")
    },
    handleViewOrders() {
      this.$emit("view-orders", this.detail)
    }
  }
}
</script>

<style scoped>
.drawer-content {
  padding: 0 20px 20px;
}
.section-header {
  margin: 16px 0 10px;
  font-size: 15px;
  color: #303133;
  border-left: 3px solid #409EFF;
  padding-left: 8px;
}
.mb16 {
  margin-bottom: 16px;
}
.empty-tip {
  color: #909399;
  font-size: 13px;
}
.default-tag {
  margin-left: 6px;
}
.action-bar {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #EBEEF5;
}
</style>
