<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div class="contentx" v-if="item!=null" >
      <div class="desct">
        基本信息
      </div>
      <el-descriptions title="" :column="3" border>

        <el-descriptions-item label="会员id" >
          <span v-if="item!=null">{{item.userId}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="用户昵称" >
          <span v-if="item!=null">{{item.nickName}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="用户头像" >
          <el-image v-if="item.avatar!=null"
                    style="width: 50px;"
                    :src="item.avatar">
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="手机号码" >
          <span v-if="item!=null">{{item.phone}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="用户积分" >
          <span v-if="item!=null">{{item.integral}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="状态" >
                 <span v-if="item!=null">
                       <dict-tag :options="userOptions" :value="item.status"/>
                 </span>
        </el-descriptions-item>

        <el-descriptions-item label="上级昵称" >
          <span v-if="item!=null">{{item.tuiName}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="上级手机号码" >
          <span v-if="item!=null">{{item.tuiPhone}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="推广员关联时间" >
          <span v-if="item!=null">{{item.tuiTime}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="下级人数" >
          <span v-if="item!=null">{{item.tuiUserCount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="最后一次登录ip" >
          <span v-if="item!=null">{{item.lastIp}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="余额" >
          <span v-if="item!=null">{{item.balance}}</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.updateTime}}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>


    <div class="contentx" v-if="item!=null">
      <div class="desct">
              <span v-if="patientInfo">
                {{ patientInfo }}
              </span>
        <span v-else>
                患者信息
              </span>
      </div>
      <userPatietDetails  ref="userPatietDetail" />

    </div>

    <div class="contentx" v-if="item!=null" >
      <div class="desct">
        用户药品订单
      </div>
      <userStorerDetails  ref="userDetails" />
    </div>

  </div>
</template>

<script>
import {getPatientByUserId,getUser,getUserAddr,getListUserCoupon} from "@/api/userDetail";
import userStorerDetails from "./userStorerDetails.vue";
import userPatietDetails from "./userPatietDetails.vue";

export default {
  name: "storedet",
  props:["data"],
  components: {
    userStorerDetails,
    userPatietDetails,
  },
  data() {
    return {
      refreshKey: 0, // 每次点击刷新用
      patientInfo: process.env.VUE_APP_PATIENT_INFO,
      addr:[],
      patient:[],
      userOptions: [],
      statusOptions: [],
      sexOptions: [],
      pOptions: [],
      item:null,
      total: 0,
      loading: true,
      // 积分购相关
      integralPurchaseVisible: false,
      currentUserId: null,
      // 会员优惠券表格数据
      userCouponList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        couponId: null,
      },
      actName:"10",
      businessTypeOptions:[],
      couponStatusOptions:[],
    }
  },
  created() {
    this.getDicts("sys_user_status").then(response => {
      this.userOptions = response.data;
    });
    this.getDicts("sys_company_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("sys_patient_status").then(response => {
      this.pOptions = response.data;
    });
    this.getDicts("sys_patient_sex").then(response => {
      this.sexOptions = response.data;
    });
    this.getDicts("sys_coupon_business_type").then(response => {
      this.businessTypeOptions = response.data;
    });

    this.getDicts("sys_coupon_status").then(response => {
      this.couponStatusOptions = response.data;
    });
  },
  methods: {
    getList() {
      this.loading = true;
      getListUserCoupon(this.queryParams).then(response => {
        this.userCouponList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    getDetails(orderId) {
      this.item=null;
      getUser(orderId).then(response => {
        this.item = response.data;
        setTimeout(() => {
          this.$refs.userDetails.getUserDetails(orderId);
        }, 1);
        setTimeout(() => {
          this.$refs.InquiryDetails.getInquiryDetails(orderId,1);
        }, 1);
        setTimeout(() => {
          this.$refs.userPatietDetail.getPatList(orderId);
        }, 1);
        setTimeout(() => {
          this.$refs.userAddDetail.getAddList(orderId);
        }, 1);
        setTimeout(() => {
          this.$refs.userIntegralDetail.getIntegralLogs(orderId);
        }, 1);
      });

      this.patient=null;
      getPatientByUserId(orderId).then(response => {
        this.patient = response.data;
      });

      getUserAddr(orderId).then(response => {
        this.addr = response.data;
      });

      this.queryParams.userId=orderId;
      this.getList();
    },
  }
}
</script>

<style>
.contentx{
  height: 100%;
  background-color: #fff;
  padding: 0px 20px 20px;
  margin: 20px;
}
.el-descriptions-item__label.is-bordered-label{
  font-weight: normal;
}
.el-descriptions-item__content {
  max-width: 150px;
  min-width: 100px;
}
.desct{
  padding-top: 20px;
  padding-bottom: 20px;
  color: #524b4a;
  font-weight: bold;
}
</style>
