<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="12">
      <!-- 左侧个人信息 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" class="mb-12">
        <el-card class="user-info-card card-box" shadow="hover">
          <div slot="header" class="card-header">
            <span>个人信息</span>
          </div>
          <div class="avatar-box">
            <avatar :src="detail.avatar" :size="64" :name="detail.nickName" :char-index="-1"/>
            <div class="name">{{ detail.nickName | dv }}</div>
          </div>
          <div class="section-box">
            <el-row :gutter="18">
              <!-- 基础信息列 -->
              <el-col :span="24" class="info-column">
                <el-divider content-position="center">基础信息</el-divider>
                <line-field label="姓名">
                  <span>{{ detail.nickName || '-' }}</span>
                </line-field>
                <line-field label="性别">
                  <span>
          <dict-tag :options="dict.type.sys_user_sex" :value="detail.sex"></dict-tag>
                  </span>
                </line-field>
                <line-field label="电话">
                  <span>{{ detail.phonenumber || '-' }}</span>
                </line-field>
                <line-field label="邮箱">
                  <span>{{ detail.email || '-' }}</span>
                </line-field>
                <line-field label="个性签名" class="custom-signature">
                  <div class="signature-content">
                    {{ detail.declaration || '暂无签名' }}
                  </div>
                </line-field>
                <el-divider content-position="center">系统信息</el-divider>
                <line-field label="角色">
                  {{ detail.roles.map(role => role.roleName).join(',') }}
                </line-field>
                <line-field label="登录账号" :value="detail.userName" />
                <line-field label="实名认证">
                  <boolean-tag :value="detail.isReal" size="small"/>
                </line-field>
                <line-field label="账号状态" :value="detail.status" >
                  <dict-tag :options="dict.type.user_status" :value="detail.status"></dict-tag>
                </line-field>
                <line-field label="最后登录IP" :value="detail.loginIp" />
                <line-field label="最后登录时间" :value="detail.loginDate" />
              </el-col>
            </el-row>

            <!-- 跨列显示的内容 -->
          </div>
        </el-card>
      </el-col>
      <!-- 右侧统计信息 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="14">
        <!-- 统计数据 -->
        <user-statistics  class="mb-12" v-if="detail.userId" :mch-id="detail.userId" :user-id="detail.userId" />
        <!-- 数据曲线图 -->
      </el-col>
    </el-row>

    <el-card class="card-box" style="margin-top: 12px;" shadow="hover" v-if="detail.userId">
      <el-tabs>
        <el-tab-pane label="店铺列表" lazy v-if="checkPermi(['bst:store:list'])">
          <store :query="{userId: detail.userId}" />
        </el-tab-pane>
        <el-tab-pane label="设备列表" lazy v-if="checkPermi(['bst:device:list'])">
          <device :query="{userId: detail.userId}" />
        </el-tab-pane>
        <el-tab-pane label="订单列表" lazy v-if="checkPermi(['bst:order:list'])">
          <order :query="{userId: detail.userId}" />
        </el-tab-pane>
        <el-tab-pane label="个人爆灯余额" lazy v-if="checkPermi(['bst:lightingNum:list'])">
          <lighting-num :query="{userId: detail.userId}" />
        </el-tab-pane>
        <el-tab-pane label="会员管理" lazy v-if="checkPermi(['bst:lightingNum:list'])">
          <lighting-num :query="{mchId: detail.userId}" />
        </el-tab-pane>
        <el-tab-pane label="爆灯次数变化记录" lazy v-if="checkPermi(['bst:changeRecord:list'])">
          <change-record :query="{userId: detail.userId}" />
        </el-tab-pane>
        <el-tab-pane label="绑定记录" lazy v-if="checkPermi(['bst:bindRecord:list'])">
          <bind-record :query="{userId: detail.userId}" />
        </el-tab-pane>
        <el-tab-pane label="用户APP" lazy v-if="checkPermi(['bst:userApp:list'])">
          <user-app :query="{userId: detail.userId}" />
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <edit-user-info
      :visible.sync="editDialogVisible"
      :user-data="detail"
      @success="getDetail"
    />
  </div>
</template>

<script>
import { getUser } from '@/api/system/user'
import LineField from '@/components/LineField'
import Avatar from '@/components/Avatar'
import { checkPermi } from '@/utils/permission'
import UserStatistics from '@/views/system/user/view/components/UserStatistics'
import CollapsePanel from '@/components/CollapsePanel'
import BooleanTag from '@/components/BooleanTag'
import Bonus from '@/views/bst/bonus/index.vue'
import { BonusArrivalType } from '@/utils/enums'
import BalanceLog from '@/views/bst/balanceLog/index.vue'
import Store from "@/views/bst/store/index.vue";
import Device from "@/views/bst/device/index.vue";
import BindRecord from "@/views/bst/bindRecord/index.vue";
import LightingNum from "@/views/bst/lightingNum/index.vue";
import UserApp from "@/views/bst/userApp/index.vue";
import ChangeRecord from "@/views/bst/changeRecord/index.vue";
import Order from "@/views/bst/order/index.vue";
import EditUserInfo from "@/views/system/user/view/components/UserBasicInfoEdit.vue";

export default {
  name: 'UserView',
  dicts:['sys_user_sex','user_status'],
  components: {
    EditUserInfo,
    Order,
    ChangeRecord,
    UserApp,
    LightingNum,
    BindRecord,
    Device,
    Store,
    LineField,
    UserStatistics,
    CollapsePanel,
    Avatar,
    BooleanTag,
    Bonus,
    BalanceLog
  },
  data() {
    return {
      editDialogVisible: false,
      customData: {
        name: '',
        age: null,
        gender: '',
        field1: '',
        field2: ''
      },
      BonusArrivalType,
      detail: {
        roles: []
      },
      loading: false,
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    showEditDialog() {
      this.editDialogVisible = true
    },
    checkPermi,
    /**
     * 获取用户详细信息
     */
    getDetail() {
      this.loading = true
      getUser(this.$route.params.userId).then(res => {
        this.detail = res.data
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.signature-content {
  color: #666;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-line;
  padding-left: 0.2em;
  font-style: italic;
  text-align: left;

  &:empty::before {
    content: "暂无签名";
    color: #999;
  }
}

.custom-title {
  position: relative;
  padding-left: 8px;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 14px;
    background-color: #409EFF;
  }
}

.app-container {
  padding: 12px;

  .user-info-card {
    .card-header {
      display: flex;
      align-items: center;
    }
  }

  .mb-12 {
    margin-bottom: 12px;
  }

  .login-info {
    display: flex;
    flex-direction: column;
    font-size: 13px;

    span {
      line-height: 1.4;
    }
  }

  :deep(.el-descriptions-item__label) {
    color: #606266;
    width: auto;
    font-size: 13px;
  }

  :deep(.el-descriptions-item__content) {
    font-size: 13px;
  }

  :deep(.el-card__body) {
    padding: 10px;
  }

  :deep(.el-descriptions-item) {
    padding-bottom: 8px;
  }

  :deep(.el-tag--small) {
    height: 22px;
    line-height: 20px;
  }
}
.avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  .name {
    font-size: 16px;
    margin-top: 12px;
    margin-bottom: 12px;
    color: #303133;
  }
}

// 移动端适配
@media screen and (max-width: 767px) {
  .app-container {
    padding: 8px;

    .mb-12 {
      margin-bottom: 8px;
    }

    :deep(.el-card__body) {
      padding: 8px;
    }
  }
}
</style>
