<template>
  <div class="personal-page">
    <!-- ===== AURORA BACKGROUND ===== -->
    <div class="personal-aurora-bg" aria-hidden="true">
      <div class="personal-orb personal-orb-1"></div>
      <div class="personal-orb personal-orb-2"></div>
      <div class="personal-orb personal-orb-3"></div>
      <div class="personal-grid-overlay"></div>
      <div class="personal-noise-texture"></div>
    </div>

    <!-- ===== MAIN CONTENT ===== -->
    <div class="personal-content">
      <!-- Breadcrumb -->
      <div class="personal-breadcrumb-wrapper">
        <Breadcrumb />
      </div>
    <!-- User Profile Card -->
    <div class="personal-profile-card">
      <div class="personal-profile-inner">
        <div class="personal-profile-header">
          <el-avatar :size="100" :src="appStore?.userInfo?.userAvatar ? appStore.userInfo.userAvatar : appStore.avatarDefault" class="personal-avatar" />
          <div class="personal-user-info">
            <div class="personal-username">
              <div class="personal-name">{{ appStore?.userInfo?.nickName }}</div>
              <img v-if="['0', '1', '2'].includes(appStore?.userInfo?.memberType)" :src="`${ getImgUrl(`vip${appStore?.userInfo?.memberType}@2x.png`) }`" alt="" class="personal-vip-badge">
            </div>
            <div class="personal-user-phone">{{ $t('personalCenter.phoneNumber') }}：{{ appStore?.userInfo?.userPhone }}</div>
            <div class="personal-vip-expire" v-if="['1', '2'].includes(appStore?.userInfo?.memberType)">{{ $t('personalCenter.vipEndTime') }}: {{ appStore?.userInfo?.memberExpire }}</div>
            <div class="personal-skill-tags" v-if="appStore?.userInfo?.skillTags">
              <el-tag v-for="(item, index) in appStore.userInfo.skillTags.split(',')" :key="index" class="personal-skill-tag">
                {{ item }}
              </el-tag>
            </div>
          </div>
        </div>
        
        <div class="personal-profile-actions">
          <div @click="changeSHow" class="personal-action-btn secondary">
            <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
            <span>{{ $t('personalCenter.editProfile') }}</span>
          </div>
          <div @click="router.push({ path: '/member' })" class="personal-action-btn secondary">
            <img src="/src/assets/imgs/my/huiyuan@2x.png" alt="">
            <span>{{ $t('personalCenter.openMembership') }}</span>
          </div>
          <div @click="signIn" class="personal-action-btn primary">
            <img src="/src/assets/imgs/my/qiandao@2x.png" alt="">
            <span>{{ $t('personalCenter.checkIn') }}</span>
          </div>
        </div>
        
        <div class="personal-profile-stats">
          <div class="personal-stat-item">
            <div class="personal-stat-value">{{ appStore?.userInfo?.pointsBalance || 0 }}</div>
            <div class="personal-stat-label">{{ $t('common.mibi') }}</div>
          </div>
          <div class="personal-stat-divider"></div>
          <div class="personal-stat-item">
            <div class="personal-stat-value">{{ appStore?.userInfo?.baoMiBalance || 0 }}</div>
            <div class="personal-stat-label">{{ $t('common.baomibi') }}</div>
          </div>
          <div class="personal-stat-divider"></div>
          <div class="personal-stat-item">
            <div class="personal-stat-value">{{ collectCount }}</div>
            <div class="personal-stat-label">{{ $t('common.collect') }}</div>
          </div>
          <div class="personal-recharge-btn">
            <el-button type="primary" class="gradient" @click="router.push({ path: `/order-confirm` })">{{ $t('route.recharge') }}</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- Main Layout -->
    <div class="personal-layout">
      <!-- Left Sidebar - Navigation -->
      <aside class="personal-sidebar">
        <div class="personal-sidebar-inner">
          <!-- <div class="personal-sidebar-header">
            <div class="personal-section-line"></div>
            <h3 class="personal-section-title">{{ $t('personalCenter.menu') }}</h3>
          </div> -->
          <div class="personal-nav-list">
            <template v-for="(item, index) in navList" :key="index">
              <div v-if="item.show" @click="toPath(item, index)" :class="{ active: index == navIndex }" class="personal-nav-item" :style="{ animationDelay: `${index * 50}ms` }">
                <img v-if="index == navIndex" :src="item.iconActive" alt="" class="personal-nav-icon">
                <img v-else :src="item.icon" alt="" class="personal-nav-icon">
                <span class="personal-nav-text">{{ $t(item.name) }}</span>
                <div class="personal-nav-indicator"></div>
              </div>
            </template>
          </div>
        </div>
      </aside>

      <!-- Right Content -->
      <main class="personal-main">
        <div class="personal-main-inner">
          <router-view />
        </div>
      </main>
    </div>

    <!-- Work Order Button -->
    <div class="personal-work-order-btn" @click="show = true">
      <img src="/src/assets/imgs/my/icon9a@2x.png" alt="">
      <span>{{ $t('personalCenter.gongdan') }}</span>
    </div>

    <!-- Work Order Dialog -->
    <el-dialog v-model="show" :title="`${$t('personalCenter.gongdan')}`" width="784" custom-class="work-order-dialog">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="`${$t(tab.label)}`" :name="tab.name">
          <template v-if="activeName == 0">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
              <el-form-item :label="`${$t('personalCenter.gongdanleixing')}`" prop="issueCategory">
                <el-select v-model="ruleForm.issueCategory"
                  :placeholder="`${$t('personalCenter.gongdanleixing_placeholder')}`" class="work-input-style" style="width: 100%">
                  <el-option v-for="item in workTypeList" :key="item.value" :label="`${$t(item.label)}`"
                    :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item :label="`${$t('personalCenter.gongdanbiaoti')}`" prop="issueTitle">
                <el-input v-model="ruleForm.issueTitle"
                  :placeholder="`${$t('personalCenter.gongdanbiaoti_placeholder')}`" class="work-input-style" />
              </el-form-item>
              <el-form-item :label="`${$t('personalCenter.gongdanneirong')}`" prop="issueContent">
                <el-input v-model="ruleForm.issueContent"
                  :placeholder="`${$t('personalCenter.gongdanneirong_placeholder')}`" class="work-input-style" :rows="10" type="textarea" />
              </el-form-item>
            </el-form>
          </template>
          <template v-else>
            <el-collapse v-model="workName" accordion>
              <el-collapse-item :title="item.issueTitle || `${index + 1}、${item.question}`" :name="item.id"
                v-for="(item, index) in workList" :key="index">
                <template #title>
                  <div class="work-head">
                    <div class="work-head-left">
                      <img v-if="activeName == 2" src="/src/assets/imgs/my/Q@2x.png" alt="">
                      <div class="">{{ `${activeName == 2 ? (index + 1) + '、' : ''}` }}{{ item.issueTitle ||
                        item.question }}</div>
                    </div>
                    <el-tag v-if="activeName == 1" :type="item.issueStatus == 2 ? 'success' : 'primary'">{{ item.issueStatus == 0 ?
                        $t('personalCenter.daijiejue') : item.issueStatus == 2 ? $t('personalCenter.yijiejue') : ''
                        }}</el-tag>
                  </div>
                </template>
                <div class="work-content">
                  <template v-if="activeName == 2">
                    <img src="/src/assets/imgs/my/A@2x.png" alt="">
                    <div class="">{{ item.issueContent || item.answer }}</div>
                  </template>
                  <el-descriptions style="width: 100%;" class="margin-top" :column="2" border v-else :label-width="langStore.currentLang == 'en' ? 180 : 80">
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">{{ $t('personalCenter.gongdanbianhao') }}</div>
                      </template>
                      {{ item.issueNo }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">{{ $t('personalCenter.gongdanzhuangtai') }}</div>
                      </template>

                      <el-tag :type="item.issueStatus == 2 ? 'success' : 'primary'">{{ item.issueStatus == 0 ?
                        $t('personalCenter.daijiejue') : item.issueStatus == 2 ? $t('personalCenter.yijiejue') : ''
                        }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">{{ $t('personalCenter.gongdanleixing') }}</div>
                      </template>
                      {{ $t(getName(item.issueCategory)) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">{{ $t('personalCenter.gongdanbiaoti') }}</div>
                      </template>
                      {{ item.issueTitle }}

                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                      <template #label>
                        <div class="cell-item">{{ $t('personalCenter.gongdanneirong') }}</div>
                      </template>
                      {{ item.issueContent }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" v-if="item.issueStatus == 2">
                      <template #label>
                        <div class="cell-item">{{ $t('personalCenter.gongdanhuifu') }}</div>
                      </template>
                      {{ item.remark }}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </el-collapse-item>
            </el-collapse>
            <template v-if="workList && workList.length">
              <Pagination :total="workForm.total" :page-size="workForm.pageSize" :current-page="workForm.pageNum"
                @page-change="handlePageChange" />
            </template>
            <el-empty v-else :description="$t('common.empty')" />
          </template>

        </el-tab-pane>
      </el-tabs>
      <template #footer v-if="activeName == 0">
        <div class="dialog-footer flex-center">
          <el-button @click="resetForm">{{ $t('common.cancel') }}</el-button>
          <el-button class="gradient" type="primary" @click="submitForm(ruleFormRef)">{{ $t('common.confirm')
          }}</el-button>
        </div>
      </template>
    </el-dialog>



    <!-- Edit Profile Dialog -->
    <el-dialog v-model="dialogVisible" :title="$t('personalCenter.editProfile')" width="784" :destroy-on-close="true" custom-class="personal-dialog">
      <el-form ref="userFormRef" :model="userInfo" label-width="auto" label-position="top" :rules="rules">
        <el-row :gutter="16">
          <el-col :span="24">
            <div class="flex-center">

              <el-form-item label="">
                <!-- $t('personalCenter.uploadAvatar') -->
                <!-- 图片类型 -->
                <FileUploader ref="fileUploader" accept="image/*" :multiple="false" :limit="1" :auto-upload="true"
                  :isUploadAvatar="true"
                  list-type="picture-card" :data="{ directory: 'workflow' }" buttonText="" v-model="coverImage" tip="" />
              </el-form-item>
            </div>
          </el-col>
          
           <el-col :span="12">
            <el-form-item :label="$t('personalCenter.nickName')" prop="nickName">
              <el-input v-model="userInfo.nickName" :placeholder="$t('personalCenter.pinickName')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }" maxlength="15" />
            </el-form-item>
          </el-col>
         
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.loginPhone')">
              <el-input :disabled="appStore?.userInfo?.userPhone ? true : false" v-model="userInfo.userPhone"
                :placeholder="$t('workflowTradeAdd.placeholderPhoneNumber')" class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!appStore?.userInfo?.userPhone">
            <el-form-item :label="$t('personalCenter.phoneCode')" prop="verifyCode">
              <el-input v-model="userInfo.verifyCode" maxlength="6" :placeholder="$t('login.placeholderCaptcha')"
                class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append>
                  <el-button :disabled="smsCountdown > 0" @click="sendSmsCode" style="width:120px"
                    :class="{ 'countdown-btn': smsCountdown > 0 }" size="small">
                    {{ smsCountdown > 0 ? `${smsCountdown}s` : $t('login.sendCaptcha') }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.loginEmail')">
              <el-input v-model="userInfo.email" :placeholder="$t('workflowTradeAdd.placeholderEmail')"
                class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }" :disabled="appStore?.userInfo?.email ? true : false" />
            </el-form-item>

          </el-col>
          <el-col :span="12" v-if="!appStore?.userInfo?.email">
            <el-form-item :label="$t('personalCenter.emailCode')" prop="verifyCode">
              <el-input v-model="userInfo.verifyCode" maxlength="6" :placeholder="$t('login.placeholderCaptcha')"
                class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append>
                  <el-button :disabled="smsCountdown > 0" @click="sendSmsCode" style="width:120px"
                    :class="{ 'countdown-btn': smsCountdown > 0 }" size="small">
                    {{ smsCountdown > 0 ? `${smsCountdown}s` : $t('login.sendCaptcha') }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.n8nAccout')">
              <el-input disabled v-model="userInfo.n8nAccount" :placeholder="$t(!appStore?.userInfo?.email ? 'personalCenter.bdyxjcjzh' : 'personalCenter.createN8n')"
                class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append v-if="appStore?.userInfo?.email && !appStore?.userInfo?.n8nAccount">
                  <el-tooltip class="box-item" effect="dark" :content="$t('personalCenter.ceraten8n')" placement="top">
                    <el-button @click="createAi('0')" :icon="Refresh" />
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.n8nPassword')">
              <el-input v-model="userInfo.n8nPassword" :placeholder="$t('personalCenter.createN8n')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }" readonly type="password" show-password />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.cozeAccout')">
              <el-input disabled v-model="userInfo.cozeAccount" :placeholder="$t(!appStore?.userInfo?.email ? 'personalCenter.bdyxjcjzh' :'personalCenter.createCoze')"
                class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append v-if="appStore?.userInfo?.email && !appStore?.userInfo?.cozeAccount">
                  <el-tooltip class="box-item" effect="dark" :content="$t('personalCenter.ceratenCoze')"
                    placement="top">
                    <el-button @click="createAi('1')" :icon="Refresh" />
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.cozePassword')">
              <el-input v-model="userInfo.cozePassword" :placeholder="$t('personalCenter.createCoze')"
                class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }" readonly type="password" show-password />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.difyAccout')">
              <el-input disabled v-model="userInfo.difyAccount" :placeholder="$t(!appStore?.userInfo?.email ? 'personalCenter.bdyxjcjzh' :'personalCenter.createDify')"
                class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append v-if="appStore?.userInfo?.email && !appStore?.userInfo?.difyAccount">
                  <el-tooltip class="box-item" effect="dark" :content="$t('personalCenter.ceratenDify')"
                    placement="top">
                    <el-button @click="createAi('2')" :icon="Refresh" />
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.difyPassword')">
              <el-input v-model="userInfo.difyPassword" :placeholder="$t('personalCenter.createDify')"
                class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }" readonly type="password" show-password />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.fastGptAccout')">
              <el-input disabled v-model="userInfo.fastGptAccount" :placeholder="$t(!appStore?.userInfo?.email ? 'personalCenter.bdyxjcjzh' :'personalCenter.createFastGpt')"
                class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append v-if="appStore?.userInfo?.email && !appStore?.userInfo?.fastGptAccount">
                  <el-tooltip class="box-item" effect="dark" :content="$t('personalCenter.ceratenFastGpt')"
                    placement="top">
                    <el-button @click="createAi('3')" :icon="Refresh" />
                  </el-tooltip>

                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.fastGptPassword')">
              <el-input v-model="userInfo.fastGptPassword" :placeholder="$t('personalCenter.createFastGpt')"
                class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }" readonly type="password" show-password />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item :label="`${$t('personalCenter.skillTag')}(${ $t('personalCenter.zdtjwg') })`">
              <div class="flex tags flex_1">
                <el-tag v-for="tag in dynamicTags" :key="tag" closable @close="handleClose(tag)">
                  {{ tag }}
                </el-tag>
                <template v-if="dynamicTags.length < 5">
                  <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
                  @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" maxlength="5" show-word-limit :placeholder="
                    $t('personalCenter.psrjnbq')
                  ">
                  <template #append>
                    <el-button :icon="Plus" />
                  </template></el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">
                  + {{ $t('common.addTags') }}
                </el-button>
                </template>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button @click="userInfo = {}, dialogVisible = false">{{ $t('common.cancel') }}</el-button>
          <el-button class="gradient" type="primary" @click="handleConfirm(userFormRef)">
            {{ $t('common.confirm') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">

import { Plus, Refresh } from '@element-plus/icons-vue'

import { useAppStore } from '@/pinia/appStore'

import { ref, onMounted, computed, nextTick } from 'vue';


import type { InputInstance } from 'element-plus'

import { useRoute, useRouter } from 'vue-router'

import { getUserInfo, updateUserInfo, getSmsCode, getEmailCode,sendBindCode } from '@/api/auth.js'

import { checkIn, queryCollectCount, issue, issueList, faqList, getfaq, createAiAccount } from '@/api/my.js'

import DGTMessage from '@/utils/message'

import { useI18n } from 'vue-i18n'

import FileUploader from '@/components/FileUploader.vue'

import Pagination from '@/components/Pagination.vue'


import type { FormInstance, FormRules } from 'element-plus'
import { useLangStore } from '@/pinia/langStore'
const langStore = useLangStore();
interface RuleForm {
  issueCategory: string
  issueTitle: string
  issueContent: string
}

const ruleFormRef = ref(null);

const userFormRef = ref();

const { t } = useI18n()

const appStore = useAppStore();

const route = useRoute()

const router = useRouter()

const getImgUrl = (path) => {
  return new URL(`/src/assets/imgs/my/${path}`, import.meta.url).href
}

const navList = ref([
  {
    name: 'personalCenter.myWallet',
    path: '/personal-center/wallet',
    icon: getImgUrl('icon1@2x.png'),
    iconActive: getImgUrl('icon1a@2x.png'),
    show: true
  },
  {
    name: 'personalCenter.membershipInfo',
    path: '/personal-center/member-details',
    icon: getImgUrl('icon2@2x.png'),
    iconActive: getImgUrl('icon2a@2x.png'),
    show: true
  },
  {
    name: 'personalCenter.myCollection',
    path: '/personal-center/collection',
    icon: getImgUrl('icon3@2x.png'),
    iconActive: getImgUrl('icon3a@2x.png'),
    show: true
  },
  {
    name: 'personalCenter.myDemand',
    path: '/personal-center/demand',
    icon: getImgUrl('icon4@2x.png'),
    iconActive: getImgUrl('icon4a@2x.png'),
    show: true
  },
  {
    name: 'personalCenter.myOrders',
    path: '/personal-center/orders',
    icon: getImgUrl('icon5@2x.png'),
    iconActive: getImgUrl('icon5a@2x.png'),
    show: true
  },
  {
    name: 'personalCenter.myInvoice',
    path: '/personal-center/invoice',
    icon: getImgUrl('icon6@2x.png'),
    iconActive: getImgUrl('icon6a@2x.png'),
    show: true
  },
  {
    name: 'personalCenter.myWorkflow',
    path: '/personal-center/workflow',
    icon: getImgUrl('icon7@2x.png'),
    iconActive: getImgUrl('icon7a@2x.png'),
    show: true
  },
  {
    name: 'personalCenter.businessManagement',
    path: '/personal-center/business-management',
    icon: getImgUrl('icon8@2x.png'),
    iconActive: getImgUrl('icon8a@2x.png'),
    show: false
  },
  // {
  //   name: 'personalCenter.serviceManagement',
  //   path: '/personal-center/business-management',
  //   icon: '/src/assets/imgs/my/icon9@2x.png',
  //   iconActive: '/src/assets/imgs/my/icon9a@2x.png'
  // }
])

const dialogVisible = ref(false)

const show = ref(false)

const tabs = ref([
  { label: 'personalCenter.tijiaogongdan', name: 0 },
  { label: 'personalCenter.lishigongdan', name: 1 },
  { label: 'personalCenter.changjianwenti', name: 2 }
])

const workList = ref([])

const workForm = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

const activeName = ref(0)

const workName = ref(null)

const workTypeList = ref([
  {
    value: 'account',
    label: 'personalCenter.zhanghaowenti'
  },
  {
    value: 'payment',
    label: 'personalCenter.zhifuwenti'
  },
  {
    value: 'course',
    label: 'personalCenter.kechengwenti'
  },
  {
    value: 'workflow',
    label: 'personalCenter.gongzuoliuwenti'
  },
  {
    value: 'other',
    label: 'personalCenter.qitawenti'
  }
])
// 获取工单分类
const getName = (value) => {
  let txt = ''
  workTypeList.value.forEach(item => {
    if (item.value == value) {
      txt = item.label
    }
  })
  return txt
}

const ruleForm = ref<RuleForm>({
  issueCategory: '',
  issueTitle: '',
  issueContent: ''
})

const rules = ref<FormRules<RuleForm>>({
  issueCategory: [
    {
      required: true,
      message: t('personalCenter.gongdanleixing_placeholder'),
      trigger: 'change',
    },
  ],
  issueTitle: [
    { required: true, message: t('personalCenter.gongdanbiaoti_placeholder'), trigger: 'blur' },
  ],
  issueContent: [
    { required: true, message: t('personalCenter.gongdanneirong_placeholder'), trigger: 'blur' },
  ],
  nickName: [
    {
      required: true, message: t('personalCenter.pinickName'), trigger: 'blur'
    }
  ]
})

const navIndex = computed(() => {
  switch (route.name) {
    case 'Wallet':
      return 0
      break;
    case 'MemberDetails':
      return 1
      break;
    case 'Wallet':
      return 0
      break;
    case 'Collection':
      return 2
      break;
    case 'Demand':
      return 3
      break;
    case 'Orders':
      return 4
      break;
    case 'Invoice':
      return 5
      break;
    case 'Workflow':
      return 6
      break;
    case 'BusinessManagement':
      return 7
      break;
    default:
      break;
  }
  return null;
})

const userInfo = ref({})//用户信息

const coverImage = ref([]);

// 验证码倒计时
const smsCountdown = ref(0)
const passwordresetCountdown = ref(0)
const emailCountdown = ref(0)

// 正则表达式
const PHONE_REGEX = /^1[3-9]\d{9}$/;
// 优化后的邮箱正则（兼顾准确性和实用性）
const EMAIL_REGEX = /^[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/;
const isPasswordPhone = computed(() => {
  return PHONE_REGEX.test(passwordForm.account);
});

const isPasswordEmail = computed(() => {
  return EMAIL_REGEX.test(passwordForm.account);
});

// 创建ai相关账号
const createAi = async (creatFlag) => {
  let res = await createAiAccount({ creatFlag });
  if (res.code === 200) {
    if (creatFlag == '0') {
      userInfo.value.n8nAccount = res.data.n8nAccount;
      userInfo.value.n8nPassword = res.data.n8nPassword;
    } else if (creatFlag == '1') {
      userInfo.value.cozeAccount = res.data.cozeAccount;
      userInfo.value.cozePassword = res.data.cozePassword;
    } else if (creatFlag == '2') {
      userInfo.value.difyAccount = res.data.difyAccount;
      userInfo.value.difyPassword = res.data.difyPassword;
    } else if (creatFlag == '3') {
      userInfo.value.fastGptAccount = res.data.fastGptAccount;
      userInfo.value.fastGptPassword = res.data.fastGptPassword;
    }
    appStore.USERINFO();
    DGTMessage.success(`${t('common.success')}`)
  }
}

// 发送短信验证码
const sendSmsCode = async () => {
  let account = appStore?.userInfo?.userPhone ? userInfo.value.email : userInfo.value.userPhone
  if (!account) {
    DGTMessage.warning(appStore?.userInfo?.userPhone ? t('workflowTradeAdd.placeholderEmail') : t('workflowTradeAdd.placeholderPhoneNumber'))
    return
  }

  // 验证手机号格式 
  if ((!PHONE_REGEX.test(account) && appStore?.userInfo?.email) || (!EMAIL_REGEX.test(account) && appStore?.userInfo?.userPhone)) {
    DGTMessage.warning(appStore?.userInfo?.userPhone ? t('common.pleaseInputRightEmail') : t('common.pleaseInputRightPhoneNumber'))
    return
  }

  let res = await sendBindCode({
    account: account,
    type: appStore?.userInfo?.userPhone ? 'email' : 'phone'
  });

  if (res.code !== 200) {
    return
  }

  // 模拟发送验证码
  DGTMessage.success(t('login.captchaSendSuccess'))

  // 开始倒计时
  smsCountdown.value = 60
  const timer = setInterval(() => {
    smsCountdown.value--
    if (smsCountdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}


const handlePageChange = (page, pageSize) => {
  workForm.value.pageNum = page;
  if(pageSize)workForm.value.pageSize = pageSize;
  getList()
}

const handleClick = async (tab) => {
  activeName.value = tab.props.name
  workForm.value.pageNum = 1;
  getList()
}

const getList = async () => {
  if (activeName.value == 0) return;
  let api = activeName.value == 1 ? issueList(workForm.value) : faqList(workForm.value);
  let res = await api;
  workList.value = res.rows;
  workForm.value.total = res.total;
}


const resetForm = () => {
  show.value = false;
  for (const key in ruleForm.value) {
    ruleForm.value[key] = ''
  }
}

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl[0].validate(async (valid, fields) => {
    if (valid) {
      let res = await issue(ruleForm.value);
      if (res.code === 200) {
        resetForm();
        DGTMessage.success(`${t('common.submitSuccess')}`)
      }
    }
  })
}

// 更新用户信息
const handleConfirm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (!appStore.userInfo.userPhone || !appStore.userInfo.email) {
        userInfo.value.bindType = appStore.userInfo.userPhone ? 'email' : 'phone'
      }
      let obj = !appStore.userInfo.userPhone && userInfo.value.userPhone || !appStore.userInfo.email && userInfo.value.email ? { email: userInfo.value.email, bindType: userInfo.value.bindType, userPhone: userInfo.value.userPhone, verifyCode: userInfo.value.verifyCode } : {}
      let res = await updateUserInfo({
        nickName: userInfo.value.nickName,
        userAvatar: coverImage.value.map(item => item.url).join(';'),
        skillTags: dynamicTags.value.join(','),
        ...obj
      })
      if (res.code === 200) {
        appStore.USERINFO();
        DGTMessage.success(`${t('common.modify')}${t('common.success')}`)
        dialogVisible.value = false;
      }
    }
  })
}

const toPath = (item: any, index: number) => {
  if (item.path) {
    router.push(item.path);
  }
};
// 签到
const signIn = async () => {
  let res = await checkIn({ actionType: 1 });
  if (res.code === 200) {
    appStore.USERINFO();
    DGTMessage.success(`${t('personalCenter.checkIn')}${t('common.success')}`)
  }
}
// 获取用户信息
const getInfo = async () => {
  let res = await getUserInfo();
  if (res?.user?.userAvatar) {
    coverImage.value = [{ url: res.user.userAvatar }]
  }
  if (res?.user?.skillTags) {
    dynamicTags.value = res.user.skillTags.split(',')
  } else {
    dynamicTags.value = []
  }
  userInfo.value = res.user;
  navList.value.forEach(item => {
    if (item.name === 'personalCenter.businessManagement' && res?.user?.isCompanyAuth == 1) {
      item.show = true;
    }
  })
}

const collectCount = ref(0)

const inputValue = ref('')

const dynamicTags = ref([])

const inputVisible = ref(false)

const InputRef = ref<InputInstance>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

const getCount = async () => {
  let res = await queryCollectCount();
  collectCount.value = res?.data?.collectCount;
}


const changeSHow = async () => {
  await getInfo()
  dialogVisible.value = true;
}
onMounted(() => {
  getInfo()
  getCount()
})
</script>
<style lang="scss" scoped>
/* ===== PAGE CONTAINER ===== */
.personal-page {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(160deg, #eef2ff 0%, #ede9fe 28%, #e8e4ff 52%, #f3e8ff 72%, #fce7f3 100%);
  overflow-x: hidden;
}

/* ===== AURORA BACKGROUND ===== */
.personal-aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.personal-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: float 20s ease-in-out infinite;
}

.personal-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.15), transparent 70%);
  top: -200px;
  right: -100px;
  animation-delay: 0s;
}

.personal-orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 70%);
  bottom: -150px;
  left: -100px;
  animation-delay: -7s;
}

.personal-orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.1), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -14s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

.personal-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(79, 70, 229, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.5;
}

.personal-noise-texture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: overlay;
}

/* ===== MAIN CONTENT ===== */
.personal-content {
  position: relative;
  z-index: 1;
  padding: 0 24px 40px;
  max-width: 1428px;
  margin: 0 auto;
}

/* ===== BREADCRUMB ===== */
.personal-breadcrumb-wrapper {
  padding: 20px 0;
  animation: fadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== PROFILE CARD ===== */
.personal-profile-card {
  margin-bottom: 32px;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.personal-profile-inner {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 
    0 8px 32px rgba(79, 70, 229, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.personal-profile-header {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.personal-avatar {
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.9);
}

.personal-user-info {
  flex: 1;
}

.personal-username {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.personal-name {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.02em;
}

.personal-vip-badge {
  width: 68px;
  height: 21px;
}

.personal-user-phone {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.personal-vip-expire {
  font-size: 14px;
  color: #4f46e5;
  margin-bottom: 12px;
}

.personal-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.personal-skill-tag {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
  border: none;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

.personal-profile-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

.personal-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  img {
    width: 16px;
    height: 16px;
  }

  &.secondary {
    background: rgba(243, 244, 246, 0.8);
    color: #4b5563;
    border: 1px solid rgba(229, 231, 235, 0.8);

    &:hover {
      background: rgba(249, 250, 251, 0.9);
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
    }
  }

  &.primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    box-shadow: 
      0 4px 12px rgba(79, 70, 229, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 
        0 6px 16px rgba(79, 70, 229, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
  }
}

.personal-profile-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}

.personal-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.personal-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.02em;
}

.personal-stat-label {
  font-size: 14px;
  color: #6b7280;
}

.personal-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(229, 231, 235, 0.8);
}

.personal-recharge-btn {
  margin-left: auto;
}

/* ===== MAIN LAYOUT ===== */
.personal-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ===== SIDEBAR ===== */
.personal-sidebar {
  position: relative;
}

.personal-sidebar-inner {
  position: sticky;
  top: 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 
    0 8px 32px rgba(79, 70, 229, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(79, 70, 229, 0.15);
    border-radius: 3px;
    
    &:hover {
      background: rgba(79, 70, 229, 0.25);
    }
  }
}

.personal-sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

.personal-section-line {
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, #4f46e5, #7c3aed);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.personal-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  letter-spacing: -0.02em;
  flex: 1;
}

/* ===== NAVIGATION LIST ===== */
.personal-nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.personal-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.03), rgba(124, 58, 237, 0.03));
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:hover {
    background: rgba(249, 250, 251, 0.9);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
    
    &::before {
      opacity: 1;
    }
  }
  
  &.active {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.08));
    border-color: rgba(79, 70, 229, 0.25);
    box-shadow: 
      0 4px 12px rgba(79, 70, 229, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    
    .personal-nav-text {
      color: #4f46e5;
      font-weight: 600;
    }
    
    .personal-nav-indicator {
      opacity: 1;
      transform: translateY(-50%) scaleY(1);
    }
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.personal-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.personal-nav-text {
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.personal-nav-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, #4f46e5, #7c3aed);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(79, 70, 229, 0.5);
}

/* ===== MAIN CONTENT ===== */
.personal-main {
  position: relative;
  min-width: 0;
}

.personal-main-inner {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 
    0 8px 32px rgba(79, 70, 229, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  min-height: calc(100vh - 400px);
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

/* ===== WORK ORDER BUTTON ===== */
.personal-work-order-btn {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  right: 80px;
  bottom: 70px;
  width: 84px;
  height: 84px;
  position: fixed;
  color: #4f46e5;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 8px 24px rgba(79, 70, 229, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;

  img {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
  }

  &:hover {
    transform: translateY(-4px);
    box-shadow: 
      0 12px 32px rgba(79, 70, 229, 0.2),
      0 4px 12px rgba(0, 0, 0, 0.08);
  }
}

/* ===== DIALOGS ===== */
.personal-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  .el-dialog__header {
    padding: 24px 24px 0;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
  }
  .el-dialog__title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
  }
  .el-dialog__body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .el-dialog__footer {
    padding: 16px 24px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
  }
}

/* ===== WORK ORDER DIALOG ===== */
.work-order-dialog {
  border-radius: 16px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(17, 24, 39, 0.95);
  border: 1px solid rgba(79, 70, 229, 0.2);
  
  .el-dialog__header {
    padding: 24px;
    border-bottom: 1px solid rgba(79, 70, 229, 0.15);
    background: rgba(17, 24, 39, 0.5);
  }

  .el-dialog__title {
    font-size: 20px;
    font-weight: 600;
    color: #F9FAFB;
    letter-spacing: -0.02em;
  }

  .el-dialog__body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(79, 70, 229, 0.3);
      border-radius: 3px;
      
      &:hover {
        background: rgba(79, 70, 229, 0.5);
      }
    }
  }

  .el-dialog__footer {
    padding: 20px 24px;
    background: rgba(17, 24, 39, 0.5);
    border-top: 1px solid rgba(79, 70, 229, 0.15);
  }
  
  // 工单弹窗表单样式
  .el-form {
    :deep(.el-form-item) {
      margin-bottom: 24px;
    }
    
    :deep(.el-form-item__label) {
      font-size: 14px;
      font-weight: 500;
      color: #ffffff !important;
      margin-bottom: 8px;
      line-height: 1.5;
    }
  }
  
  .el-input,
  .el-textarea {
    :deep(.el-input__wrapper),
    :deep(.el-textarea__inner) {
      background: rgba(255, 255, 255, 0.08);
      box-shadow: 
        0 0 0 1px rgba(79, 70, 229, 0.2) inset,
        0 2px 8px rgba(0, 0, 0, 0.1);
      padding: 10px 16px;
      border-radius: 8px;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      backdrop-filter: blur(10px);
      
      &:hover {
        box-shadow: 
          0 0 0 1px rgba(79, 70, 229, 0.3) inset,
          0 4px 12px rgba(79, 70, 229, 0.15);
        background: rgba(255, 255, 255, 0.12);
      }
      
      &.is-focus {
        box-shadow: 
          0 0 0 2px rgba(79, 70, 229, 0.3),
          0 0 0 4px rgba(79, 70, 229, 0.1) inset,
          0 4px 16px rgba(79, 70, 229, 0.2);
        background: rgba(255, 255, 255, 0.15);
      }
    }

    :deep(.el-input__inner),
    :deep(.el-textarea__inner) {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff !important;
      
      &::placeholder {
        color: #9CA3AF !important;
      }
    }
  }
  
  .el-select {
    :deep(.el-select__wrapper) {
      background: rgba(255, 255, 255, 0.08);
      box-shadow: 
        0 0 0 1px rgba(79, 70, 229, 0.2) inset,
        0 2px 8px rgba(0, 0, 0, 0.1);
      padding: 10px 16px;
      border-radius: 8px;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      backdrop-filter: blur(10px);
      
      &:hover {
        box-shadow: 
          0 0 0 1px rgba(79, 70, 229, 0.3) inset,
          0 4px 12px rgba(79, 70, 229, 0.15);
        background: rgba(255, 255, 255, 0.12);
      }
      
      &.is-focus {
        box-shadow: 
          0 0 0 2px rgba(79, 70, 229, 0.3),
          0 0 0 4px rgba(79, 70, 229, 0.1) inset,
          0 4px 16px rgba(79, 70, 229, 0.2);
        background: rgba(255, 255, 255, 0.15);
      }
    }
    
    :deep(.el-select__placeholder) {
      color: #9CA3AF !important;
    }
    
    :deep(.el-select__selected-item) {
      color: #ffffff !important;
    }
  }
  
  .el-collapse {
    border: none;
    
    :deep(.el-collapse-item__header) {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(79, 70, 229, 0.15);
      border-radius: 8px;
      padding: 16px 20px;
      color: #ffffff !important;
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 12px;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      
      &:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(79, 70, 229, 0.25);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
      }
      
      &.is-active {
        background: rgba(79, 70, 229, 0.08);
        border-color: rgba(79, 70, 229, 0.3);
      }
    }
    
    :deep(.el-collapse-item__wrap) {
      background: rgba(255, 255, 255, 0.02);
      border: none;
      border-radius: 0 0 8px 8px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    
    :deep(.el-collapse-item__content) {
      padding: 20px;
      color: #ffffff !important;
      font-size: 14px;
      line-height: 1.6;
    }
  }
  
  .el-descriptions {
    :deep(.el-descriptions__header) {
      margin-bottom: 16px;
    }
    
    :deep(.el-descriptions__label) {
      background: rgba(79, 70, 229, 0.08);
      color: #ffffff !important;
      font-weight: 500;
      font-size: 14px;
    }
    
    :deep(.el-descriptions__content) {
      background: rgba(255, 255, 255, 0.02);
      color: #ffffff !important;
      font-size: 14px;
    }
    
    :deep(.el-descriptions__cell) {
      border-color: rgba(79, 70, 229, 0.15);
    }
  }
  
  .cell-item {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 14px;
  }
  
  .el-tag {
    background: rgba(79, 70, 229, 0.15);
    border: 1px solid rgba(79, 70, 229, 0.3);
    color: #818CF8;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    
    &.el-tag--success {
      background: rgba(16, 185, 129, 0.15);
      border-color: rgba(16, 185, 129, 0.3);
      color: #34D399;
    }
    
    &.el-tag--primary {
      background: rgba(79, 70, 229, 0.15);
      border-color: rgba(79, 70, 229, 0.3);
      color: #818CF8;
    }
  }
  
  .el-tabs {
    :deep(.el-tabs__header) {
      margin: 0 0 24px;
      border-bottom: 1px solid rgba(79, 70, 229, 0.15);
    }
    
    :deep(.el-tabs__nav-wrap::after) {
      display: none;
    }
    
    :deep(.el-tabs__item) {
      color: #9CA3AF;
      font-size: 15px;
      font-weight: 500;
      padding: 0 20px;
      height: 44px;
      line-height: 44px;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      
      &:hover {
        color: #F9FAFB;
      }
      
      &.is-active {
        color: #4F46E5;
        font-weight: 600;
      }
    }
    
    :deep(.el-tabs__active-bar) {
      background: linear-gradient(90deg, #4F46E5, #7C3AED);
      height: 3px;
      border-radius: 2px;
    }
  }
  
  .dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    
    .el-button {
      padding: 10px 24px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      backdrop-filter: blur(10px);
      
      &:not(.gradient) {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(79, 70, 229, 0.3);
        color: #F9FAFB;
        
        &:hover {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(79, 70, 229, 0.5);
          box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
        }
      }
    }
    
    .gradient {
      background: linear-gradient(135deg, #4F46E5, #7C3AED);
      border: none;
      color: white;
      box-shadow: 
        0 4px 12px rgba(79, 70, 229, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.1);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 
          0 6px 16px rgba(79, 70, 229, 0.5),
          0 4px 8px rgba(0, 0, 0, 0.15);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
  }
}

.personal-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.personal-dialog-btn {
  padding: 10px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  
  &.secondary {
    background: rgba(243, 244, 246, 0.8);
    color: #4b5563;
    border: 1px solid rgba(229, 231, 235, 0.8);
    
    &:hover {
      background: rgba(249, 250, 251, 0.9);
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
    }
  }
  
  &.primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    box-shadow: 
      0 4px 12px rgba(79, 70, 229, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 
        0 6px 16px rgba(79, 70, 229, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
  }
}

/* ===== FORM STYLES ===== */
.personal-form-input,
.personal-form-select,
.personal-form-textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(229, 231, 235, 0.8);
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  
  &:hover {
    border-color: rgba(79, 70, 229, 0.3);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1);
  }
  
  &:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  }
}

.personal-avatar-upload {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.personal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.personal-tag {
  background: #ecf5ff;
  color: #409eff;
  border: 1px solid #d9ecff;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}

.personal-tag-input {
  width: 200px;
  border-radius: 12px;
  border: 1px dashed rgba(79, 70, 229, 0.3);
  background: rgba(79, 70, 229, 0.05);
  
  &:focus {
    border-style: solid;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  }
}

.personal-add-tag-btn {
  border: 1px dashed rgba(79, 70, 229, 0.3);
  border-radius: 12px;
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  
  &:hover {
    border-style: solid;
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.1);
  }
}

/* ===== WORK ORDER STYLES ===== */
.personal-work-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.personal-work-order-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.personal-work-order-icon {
  width: 24px;
  height: 24px;
}

.personal-work-order-status {
  font-size: 12px;
  border-radius: 10px;
  padding: 2px 10px;
}

.personal-work-order-content {
  padding: 16px;
  background: rgba(249, 250, 251, 0.8);
  border-radius: 16px;
  margin-top: 8px;
  display: flex;
  gap: 16px;
}

.personal-work-order-answer {
  flex: 1;
  color: #374151;
  line-height: 1.6;
  font-size: 14px;
}

.personal-work-order-details {
  margin-top: 8px;
  
  .personal-work-order-label {
    font-weight: 600;
    color: #4b5563;
  }
}

.personal-pagination {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.personal-empty-state {
  padding: 40px 20px;
  text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .personal-layout {
    grid-template-columns: 280px 1fr;
    gap: 20px;
  }
  
  .personal-profile-header {
    gap: 20px;
  }
  
  .personal-name {
    font-size: 20px;
  }
  
  .personal-stat-value {
    font-size: 20px;
  }
}

@media (max-width: 992px) {
  .personal-content {
    padding: 0 20px 32px;
  }
  
  .personal-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .personal-sidebar-inner {
    position: static;
    max-height: none;
  }
  
  .personal-profile-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .personal-profile-actions {
    justify-content: center;
  }
  
  .personal-profile-stats {
    justify-content: center;
  }
  
  .personal-recharge-btn {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .personal-content {
    padding: 0 16px 24px;
  }
  
  .personal-profile-inner {
    padding: 20px;
    border-radius: 20px;
  }
  
  .personal-main-inner {
    padding: 20px;
    border-radius: 20px;
  }
  
  .personal-sidebar-inner {
    padding: 20px;
    border-radius: 20px;
  }
  
  .personal-nav-item {
    padding: 12px 14px;
  }
  
  .personal-work-order-btn {
    right: 20px;
    bottom: 20px;
    width: 72px;
    height: 72px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .personal-content {
    padding: 0 12px 20px;
  }
  
  .personal-profile-inner {
    padding: 16px;
    border-radius: 16px;
  }
  
  .personal-main-inner {
    padding: 16px;
    border-radius: 16px;
  }
  
  .personal-sidebar-inner {
    padding: 16px;
    border-radius: 16px;
  }
  
  .personal-profile-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .personal-profile-stats {
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .personal-stat-divider {
    display: none;
  }
}
.inputStyle,
.work-input-style {
  :deep(.el-input__wrapper) {
    background-color: #fff;
    box-shadow: 0 0 0 1px #dcdfe6 inset !important;
    padding: 8px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc inset !important;
    }
    
    &.is-focus {
      box-shadow: 0 0 0 1px #409eff inset !important;
    }
  }

  :deep(.el-input__inner) {
    font-size: 14px;
    font-weight: 400;
    color: #606266;
  }
}
.el-form-item {
  margin-bottom: 20px;
  
  :deep(.el-form-item__label) {
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    margin-bottom: 8px;
    line-height: 1.5;
  }
}
.el-tag {
  background: #ecf5ff;
  color: #409eff;
  border: 1px solid #d9ecff;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}
.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  
  .el-button {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;
  }
  
  .gradient {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border: none;
    color: white;
    
    &:hover {
      opacity: 0.9;
    }
  }
}
.countdown-btn {
  background: #f5f7fa !important;
  color: #909399 !important;
  border-color: #dcdfe6 !important;
  cursor: not-allowed;
}
</style>