<template>

  <Dialog :title="dialogTitle" v-model="dialogVisible" width="70%">

    <ContentWrap v-loading="formLoading" style="max-height:650px;min-height:650px;overflow-y: auto;border:none ;">
      <div class="left">
        <SPuUploadImg v-model="avatar" :disabled="isDetail" />
        <el-tabs v-model="activeName" tab-position="left" class="child-tabs">
          <el-tab-pane label="基本信息" name="info" />
          <template v-if="isDetail">
            <el-tab-pane label="身价" name="level" />
            <el-tab-pane label="团队" name="team" />
            <el-tab-pane label="佣金" name="points" />
            <el-tab-pane label="消费分" name="consumption" />
            <el-tab-pane label="看点" name="highlights" />
            <el-tab-pane label="任务" name="task" />
            <el-tab-pane label="订单" name="order" />
            <el-tab-pane label="售后" name="aftersales" />
            <el-tab-pane label="收藏" name="collection" />
            <el-tab-pane label="点赞" name="like" />
            <el-tab-pane label="签到" name="signin" />
            <el-tab-pane label="实体收货地址" name="address" />
            <el-tab-pane label="虚拟收货地址" name="virtualaddress" />
            
          </template>
        </el-tabs>
      </div>
      <div class="right">
        <UserForm
:obj="userObj" ref="userFormRef" :isDetail="isDetail" :openType="openType" :avatar="avatar"
          v-if="activeName == 'info'" />
        <!-- openSource打开来源 以供AfterSale组件来判断和处理数据 -->
        <AfterSale v-if="activeName == 'aftersales'" :userId="userObj.id" openSource="MemberUser" />
        <Order v-if="activeName == 'order'" :id="userObj.id" openSource="MemberUser" />
        <Address v-if="activeName == 'address'" :userId="userObj.id" :addressType="1" openSource="MemberUser" />
        <Team v-if="activeName == 'team'" :userId="userObj.id" openSource="MemberUser" />
        <Points v-if="activeName == 'points'" :userId="userObj.id" openSource="MemberUser" />
        <Consumption v-if="activeName == 'consumption'" :userId="userObj.id" openSource="MemberUser" />
        <Favorite v-if="activeName == 'collection'" :userId="userObj.id" openSource="MemberUser" />
        <Level v-if="activeName == 'level'" :userId="userObj.id" openSource="MemberUser" />
        <SignUp v-if="activeName == 'signin'" :userId="userObj.id" openSource="MemberUser" />
        <Address v-if="activeName == 'virtualaddress'" :addressType="2" :userId="userObj.id" openSource="MemberUser" />
        
      </div>

      <div style="clear: both;"></div>

    </ContentWrap>
    <template #footer v-if="!isDetail">
      <div class="dialog-footer">
        <!-- 分配人员的保存 -->
        <el-button v-if="!isDetail" :loading="formLoading" type="primary" @click="userFormSubmit">保存</el-button>
      </div>
    </template>
  </Dialog>


</template>

<script lang="ts" setup>
import Dialog from '@/components/Dialog/src/Dialog.vue'
import UserForm from './UserForm.vue'
import AfterSale from '@/components/ZxTemplate/AfterSale/AfterSale.vue'
import Order from '@/components/ZxTemplate/Order/Order.vue'
import Address from '@/components/ZxTemplate/Address/Address.vue'
import Team from '@/components/ZxTemplate/Team/Team.vue'
import Points from '@/components/ZxTemplate/Points/Points.vue'
import Consumption from '@/components/ZxTemplate/Consumption/index.vue'

import Favorite from '@/components/ZxTemplate/Favorite/Favorite.vue'
import Level from '@/components/ZxTemplate/Level/Level.vue'
import SignUp from '@/components/ZxTemplate/SignUp/SignUp.vue'

import { CommonStatusEnum } from '@/utils/constants'
import * as UserApi from '@/api/system/user'
import { checkPermi } from '@/utils/permission'
import MemberUserMobileTab from './MemberUserMobileTab.vue'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const activeName = ref('info') // Tag 激活的窗口
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const isDetail = ref(false)
const openType = ref('view')
const userObj = ref({})
const avatar = ref('avatar') //头像
/** 打开弹窗 */
const open = async (type: string, obj: object) => {
  if (obj.avatar == '') {
    avatar.value = "默认图片"
  } else {
    avatar.value = obj.avatar
  }
  userObj.value = obj
  openType.value = type
  dialogTitle.value = t('action.' + type)
  if (type == "view") {
    dialogTitle.value = "查看"
  }
  // 判断打开状态，如果是view那就只能查看 否则可以编辑
  if ('view' == type) {
    isDetail.value = true
  } else {
    isDetail.value = false
    activeName.value = 'info'
  }
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const userFormRef = ref() // 表单 Ref
const userFormSubmit = async () => {
  if (await userFormRef.value?.submitForm()) {
    emit('success')
    dialogVisible.value = false
  }
}


</script>

<style lang="scss">
.el-dialog__body {
  padding: 0;
}

.left {
  width: 106px;
  float: left;
}

.child-tabs {
  border-top: 2px solid #e4e7ef;
  margin-top: -7px;
}

.child-tabs .el-tabs__item {
  width: 106px;
  justify-content: center;
}

.right {
  padding: 10px 0 0 10px;
  border-left: 2px solid #e4e7ee;
  margin-left: -2px;
  float: left;
  width: calc(100% - 120px);
}
</style>