<template>
    <div class="contents" v-if="item!=null">
        <div class="customer-title"  >
            <div class="customer-name">
                {{item.customerName}}
            </div>
        </div>
        <el-descriptions title="" :column="3" border>
            <el-descriptions-item label="会员姓名"  >
                <span v-if="item!=null">{{   item.nickname}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="注册时间" >
                <span v-if="item!=null">{{item.createTime}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="累计消费金额(元)" >
                <span v-if="item!=null">{{item.totalAmount}}</span>
            </el-descriptions-item>

            <el-descriptions-item label="上次消费时间"  >
                <span v-if="item!=null">{{item.lastBuyTime}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="上次消费金额(元)" >
                <span v-if="item!=null">{{item.number}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="剩余积分" >
                <span v-if="item!=null">{{item.integral}}</span>
            </el-descriptions-item>

        </el-descriptions>

          <el-tabs style="margin-top:20px;"  z-index = "99" type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="会员订单" name="storeOrder">
                <store-order ref="storeOrder"></store-order>
            </el-tab-pane>
            <el-tab-pane label="签到记录" name="storeSign">
                <store-sign ref="storeSign"></store-sign>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
  
<script>


    import storeOrder from '../components/storeOrder.vue';
    import storeSign from '../components/storeSign.vue';
    import {  queryUserVo } from "@/api/store/user";
    
    export default {
        name: "storeUserDtl",
        components: { storeOrder,storeSign },
        data() {
            return {
                customerExts:[],
                exts:[],
                activeName:"",
                statusOptions:[],
                typeOptions:[],
                sourceOptions:[],
                sexOptions:[],
                item:null,
                company:null,
                 
            };
        },
        created() {
            this.getDicts("crm_customer_source").then((response) => {
                this.sourceOptions = response.data;
            });
            this.getDicts("common_sex").then((response) => {
                this.sexOptions = response.data;
            });
            this.getDicts("crm_customer_status").then((response) => {
                this.statusOptions = response.data;
            });
            this.getDicts("crm_customer_type").then((response) => {
                this.typeOptions = response.data;
            });

            // var data={status:1}
            // listCustomerExt(data).then(response => {
            //     this.customerExts = response.data;
            // });
            
        },
        mounted(){
        },
        methods: {
            handleClick(tab, event) {
                if(tab.name=="storeOrder"){
                    this.$refs.storeOrder.getData(this.item.userId);
                }
                if(tab.name=="storeSign"){
                    this.$refs.storeSign.getData(this.item.userId);
                }
            },
            getDetails(userId) {
                queryUserVo(userId).then(response => {
                    this.item = response.data;
                    this.activeName="storeOrder";
                    var that=this;
                    setTimeout(() => {
                        that.$refs.storeOrder.getData(this.item.userId);
                    }, 100);
                });
            },
        }
    };
</script>
<style lang="scss" scoped>
.contents{
    height: 100%;
    background-color: #fff;
    padding: 0px 20px;
}
.customer-title{
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .customer-name{
        font-size: 28px;
    }
}
</style>

<style>
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  
</style>