<template>
  <header class="z-40" :class="{ dark: store.state.semidark && store.state.menu === 'horizontal' }">
    <div class="shadow-sm">
      <div class="relative bg-white flex w-full items-center px-5 py-1.5 dark:bg-[#0e1726]">
        <div class="horizontal-logo flex lg:hidden justify-between items-center ltr:mr-2 rtl:ml-2">
          <router-link to="/dashboard" class="main-logo flex items-center shrink-0">
            <img class="w-full h-10 ltr:-ml-1 rtl:-mr-1 inline" src="../../assets/images/logo.png" alt="" />
            <!-- <span class="text-2xl ltr:ml-1.5 rtl:mr-1.5 font-semibold align-middle hidden md:inline dark:text-white-light transition-all duration-300"
              >V3studio App</span https://www.raycos.com.cn/theme/m049/images/logo.png
            > -->
          </router-link>
          <!-- 原导航 -->
          <a
            href="javascript:;"
            class="collapse-icon flex-none dark:text-[#d0d2d6] hover:text-primary dark:hover:text-primary flex lg:hidden ltr:ml-2 rtl:mr-2 p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
            @click="toggleSidebars"
          >
            <icon-menu class="w-5 h-5" />
          </a>
        </div>

        <!-- 头部中间功能--待开发 -->
        <div class="ltr:mr-2 rtl:ml-2 hidden sm:block">
          <!-- <ul class="flex items-center space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
            <li>
              <router-link
                to=""
                class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
              >
                <icon-calendar />
              </router-link>
            </li>
            <li>
              <router-link
                to=""
                class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
              >
                <icon-edit />
              </router-link>
            </li>
            <li>
              <router-link
                to=""
                class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
              >
                <icon-chat-notification />
              </router-link>
            </li>
          </ul> -->
        </div>
        <!-- items-center -->
        <div class="sm:flex-1 ltr:sm:ml-0 ltr:ml-auto sm:rtl:mr-0 rtl:mr-auto flex space-x-1.5 lg:space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
          <div class="sm:ltr:mr-auto sm:rtl:ml-auto">
            <form
              class="sm:relative absolute inset-x-0 sm:top-0 top-1/2 sm:translate-y-0 -translate-y-1/2 sm:mx-0 mx-4 z-10 sm:block hidden"
              :class="{ '!block': search }"
              @submit.prevent="search = false"
            ></form>

            <button
              type="button"
              class="search_btn sm:hidden p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
              @click="search = !search"
            >
              <icon-search class="w-4.5 h-4.5 mx-auto dark:text-[#d0d2d6]" />
            </button>
          </div>
          <a href="javascript:;" v-if="superMenu == 'compan' && founder == '1'" @click="getBranch('super')"> 返回</a>
          <!-- <div>
            <a
              href="javascript:;"
              v-show="store.state.theme === 'light'"
              class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
              @click="toggleTheme('dark')"
            >
              <icon-sun />
            </a>
            <a
              href="javascript:;"
              v-show="store.state.theme === 'dark'"
              class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
              @click="toggleTheme('system')"
            >
              <icon-moon />
            </a>
            <a
              href="javascript:;"
              v-show="store.state.theme === 'system'"
              class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
              @click="toggleTheme('dark')"
            >
              <icon-sun />
            </a>
          </div> -->

          <div class="dropdown shrink-0">
            <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8">
              <button
                type="button"
                class="pt-2 block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
              >
                <img :src="currentFlag" alt="flag" class="w-5 h-5 object-cover rounded-full" />
              </button>
              <template #content="{ close }">
                <ul class="!px-2 text-dark dark:text-white-dark grid grid-cols-2 gap-2 font-semibold dark:text-white-light/90 w-[280px]">
                  <template v-for="item in store.state.languageList" :key="item.code">
                    <li>
                      <button
                        type="button"
                        class="w-full hover:text-primary"
                        :class="{ 'bg-primary/10 text-primary': i18n.locale === item.code }"
                        @click="changeLanguage(item), close()"
                      >
                        <img class="w-5 h-5 object-cover rounded-full" :src="`/assets/images/flags/${item.code.toUpperCase()}.svg`" alt="" />
                        <span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
                      </button>
                    </li>
                  </template>
                </ul>
              </template>
            </Popper>
          </div>

          <div class="dropdown shrink-0 mr-2">
            <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="0">
              <el-badge :value="countNot" :hidden="countNot == 0" class="item">
                <button
                  type="button"
                  class="pt-2 block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
                  @click="goNotify"
                >
                  <icon-mail-dot />
                </button>
              </el-badge>
              <!-- <template #content="{ close }">
                <ul class="top-11 !py-0 text-dark dark:text-white-dark w-[300px] sm:w-[375px] text-xs">
                  <li class="mb-5">
                    <div class="overflow-hidden relative rounded-t-md !p-5 text-white">
                      <div class="absolute h-full w-full bg-[url('/assets/images/menu-heade.jpg')] bg-no-repeat bg-center bg-cover inset-0"></div>
                      <h4 class="font-semibold relative z-10 text-lg">Messages</h4>
                    </div>
                  </li>
                  <template v-for="msg in messages" :key="msg.id">
                    <li>
                      <div class="flex items-center py-3 px-5">
                        <div v-html="msg.image"></div>
                        <span class="px-3 dark:text-gray-500">
                          <div class="font-semibold text-sm dark:text-white-light/90" v-text="msg.title"></div>
                          <div v-text="msg.message"></div>
                        </span>
                        <span
                          class="font-semibold bg-white-dark/20 rounded text-dark/60 px-1 ltr:ml-auto rtl:mr-auto whitespace-pre dark:text-white-dark ltr:mr-2 rtl:ml-2"
                          v-text="msg.time"
                        ></span>
                        <button type="button" class="text-neutral-300 hover:text-danger" @click="removeMessage(msg.id)">
                          <icon-x-circle />
                        </button>
                      </div>
                    </li>
                  </template>
                  <template v-if="messages.length">
                    <li class="border-t border-white-light text-center dark:border-white/10 mt-5">
                      <div
                        class="flex items-center py-4 px-5 text-primary font-semibold group dark:text-gray-400 justify-center cursor-pointer"
                        @click="close()"
                      >
                        <span class="group-hover:underline ltr:mr-1 rtl:ml-1">VIEW ALL ACTIVITIES</span>

                        <icon-arrow-left class="group-hover:translate-x-1 transition duration-300 ltr:ml-1 rtl:mr-1" />
                      </div>
                    </li>
                  </template>
                  <template v-if="!messages.length">
                    <li class="mb-5">
                      <div class="!grid place-content-center hover:!bg-transparent text-lg min-h-[200px]">
                        <div class="mx-auto ring-4 ring-primary/30 rounded-full mb-4 text-primary">
                          <icon-info-circle :fill="true" class="w-10 h-10" />
                        </div>
                        No data available.
                      </div>
                    </li>
                  </template>
                </ul>
              </template> -->
            </Popper>
          </div>

          <div class="dropdown shrink-0">
            <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8" class="!block">
              <button type="button" class="relative group block">
                <img
                  class="w-9 h-9 rounded-full object-cover saturate-50 group-hover:saturate-100"
                  v-if="store.state.user.user.face !== undefined"
                  :src="store.state.user.user.face"
                  alt=""
                />
                <img class="w-9 h-9 rounded-full object-cover saturate-50 group-hover:saturate-100" v-else src="../../assets/images/logos.png" alt="" />
              </button>
              <template #content="{ close }">
                <ul class="text-dark dark:text-white-dark !py-0 w-[230px] font-semibold dark:text-white-light/90">
                  <li>
                    <div class="flex items-center px-4 py-4">
                      <div class="flex-none">
                        <img
                          class="rounded-md w-10 h-10 object-cover"
                          v-if="store.state.user.user.face !== undefined"
                          :src="store.state.user.user.face"
                          alt=""
                        />
                        <img class="rounded-md w-10 h-10 object-cover" v-else src="../../assets/images/logos.png" alt="" />
                      </div>
                      <div class="ltr:pl-4 rtl:pr-4 truncate">
                        <h4 class="text-base">
                          {{ store.state.user.user.username }}<span class="text-xs bg-success-light rounded text-success px-1 ltr:ml-2 rtl:ml-2">Pro</span>
                        </h4>
                        <a class="text-black/60 hover:text-primary dark:text-dark-light/60 dark:hover:text-white" href="javascript:;">{{
                          store.state.user.user?.company_vo?.name || '未知公司'
                        }}</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <a href="javascript:;" class="dark:hover:text-white" @click="goInfo">
                      <icon-user class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 shrink-0" />
                      {{ $t('info') }}
                    </a>
                  </li>
                  <li v-if="store.state.user.user.uid !== '8' || store.state.user.user.username == 'admin'">
                    <a href="javascript:;" class="dark:hover:text-white" @click="setPayment">
                      <img src="@/assets/images/payment.svg" class="mr-2" alt="" />
                      <!--  <icon-user class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 shrink-0" /> -->
                      {{ $t('setPayment') }}
                    </a>
                  </li>
                  <li>
                    <a href="javascript:;" class="dark:hover:text-white" @click="editPassword">
                      <icon-lock-dots class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 shrink-0" />
                      {{ $t('edit_password') }}
                    </a>
                  </li>
                  <li class="border-t border-white-light dark:border-white-light/10">
                    <a class="text-danger !py-3 dark:hover:text-white" @click="handleLogoutClick">
                      <icon-logout class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 rotate-90 shrink-0" />
                      {{ $t('logout') }}
                    </a>
                  </li>
                </ul>
              </template>
            </Popper>
          </div>
        </div>
      </div>
      <ul
        v-if="superMenu == 'compan'"
        style="box-shadow: 0 0px 0px #ccc"
        class="horizontal-menu hidden py-1.5 font-semibold px-6 lg:space-x-1.5 xl:space-x-8 rtl:space-x-reverse bg-white border-t border-[#ebedf2] dark:border-[#191e3a] dark:bg-[#0e1726] text-black dark:text-white-dark"
      >
        <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <icon-menu-dashboard class="shrink-0" />
              <router-link to="/dashboard" class="px-2">{{ $t('home') }}</router-link>
            </div>
            <!-- <div class="right_arrow">
              <icon-caret-down />
            </div> -->
          </a>
        </li>
        <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <!--  <icon-menu-dashboard class="shrink-0" /> -->
              <img src="../../assets/images/warehouse.png" width="20px" alt="" />
              <span class="px-2">{{ $t('warehouse') }}</span>
            </div>
            <div class="right_arrow">
              <!--  <icon-caret-down /> -->
            </div>
          </a>
          <ul class="sub-menu">
            <li>
              <router-link to="/stock/warehouseList">{{ $t('warehouseList') }}</router-link>
            </li>
            <li>
              <router-link to="/stock/warehouseLocation">{{ $t('warehouseLocation') }}</router-link>
            </li>
            <li>
              <router-link to="/stock/goodsLend">{{ $t('goodsLend') }}</router-link>
            </li>
            <li>
              <router-link to="/stock/goodsTransfer">{{ $t('goodsTransfer') }}</router-link>
            </li>
            <li>
              <router-link to="/stock/goodsExchange">{{ $t('goodsExchange') }}</router-link>
            </li>
            <li>
              <router-link to="/stock/goodsOutBound">{{ $t('goodsOutBound') }}</router-link>
            </li>
            <li>
              <router-link to="/stock/goodsInventory">{{ $t('goodsInventory') }}</router-link>
            </li>
            <li>
              <router-link to="/stock/goodsInventoryLoss">{{ $t('goodsInventoryLoss') }}</router-link>
            </li>
            <li>
              <router-link to="/stock/goodsUnderstock">{{ $t('goodsUnderstock') }}</router-link>
            </li>
          </ul>
        </li>
        <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <icon-menu-apps class="shrink-0" />

              <span class="px-2">{{ $t('goods') }}</span>
            </div>
            <div class="right_arrow">
              <!-- <icon-caret-down /> -->
            </div>
          </a>
          <ul class="sub-menu">
            <li>
              <router-link to="/goods/SKUlist">{{ $t('SKUList') }}</router-link>
            </li>
            <li>
              <router-link to="/goods/category">{{ $t('category') }}</router-link>
            </li>
          </ul>
        </li>
        <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <img src="../../assets/images/order.png" width="20px" alt="" />
              <!-- <icon-menu-components class="shrink-0" /> -->
              <span class="px-2">{{ $t('order') }}</span>
            </div>
            <div class="right_arrow">
              <!-- <icon-caret-down /> -->
            </div>
          </a>
          <ul class="sub-menu">
            <li>
              <router-link to="/order/orderList">{{ $t('order') }}</router-link>
            </li>
          </ul>
        </li>
        <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <!-- <img src="../../assets/images/order.png" width="20px" alt="" /> -->
              <!-- <icon-menu-components class="shrink-0" /> -->
              <span class="px-2">{{ $t('procure') }}</span>
            </div>
            <div class="right_arrow">
              <!-- <icon-caret-down /> -->
            </div>
          </a>
          <ul class="sub-menu">
            <li>
              <router-link to="/procure/purchaseOrder">{{ $t('purchaseOrder') }}</router-link>
            </li>
          </ul>
        </li>
        <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <icon-menu-components class="shrink-0" />
              <span class="px-2">{{ $t('companyMent') }}</span>
            </div>
            <div class="right_arrow">
              <!-- <icon-caret-down /> -->
            </div>
          </a>
          <ul class="sub-menu">
            <li>
              <router-link to="/companyMent/administratorManage">{{ $t('administratorManage') }}</router-link>
            </li>
            <li>
              <router-link to="/setting/roleManage">{{ $t('roleManage') }}</router-link>
            </li>
            <li>
              <router-link to="/companyMent/branch">{{ $t('branch') }}</router-link>
            </li>
            <li>
              <router-link to="/companyMent/configMsg">{{ $t('configMsg') }}</router-link>
            </li>
            <li>
              <router-link to="/setting/systemLog">{{ $t('systemLog') }}</router-link>
            </li>
          </ul>
        </li>
      </ul>
      <ul
        v-if="superMenu == 'super'"
        style="box-shadow: 0 0px 0px #ccc"
        class="horizontal-menu hidden py-1.5 font-semibold px-6 lg:space-x-1.5 xl:space-x-8 rtl:space-x-reverse bg-white border-t border-[#ebedf2] dark:border-[#191e3a] dark:bg-[#0e1726] text-black dark:text-white-dark"
      >
        <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <icon-menu-dashboard class="shrink-0" />
              <router-link to="/dashboard" class="px-2">{{ $t('home') }}</router-link>
            </div>
          </a>
        </li>
        <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <!--  <icon-menu-dashboard class="shrink-0" /> -->
              <!-- <img src="../../assets/images/warehouse.png" width="20px" alt="" /> -->
              <icon-menu-apps class="shrink-0" />
              <span class="px-2">{{ $t('package') }}</span>
            </div>
            <div class="right_arrow">
              <!--  <icon-caret-down /> -->
            </div>
          </a>
          <ul class="sub-menu">
            <li>
              <router-link to="/package/packageList">{{ $t('packageList') }}</router-link>
            </li>
            <li>
              <router-link to="/package/packagePermissions">{{ $t('packagePermissions') }}</router-link>
            </li>
          </ul>
        </li>
        <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <img src="../../assets/images/模版管理.png" width="20px" alt="" />
              <!-- <icon-menu-apps class="shrink-0" /> -->
              <span class="px-2">{{ $t('templateManage') }}</span>
            </div>
            <div class="right_arrow">
              <!-- <icon-caret-down /> -->
            </div>
          </a>
          <ul class="sub-menu">
            <li>
              <router-link to="/templateManage/smsTemplate">{{ $t('smsTemplate') }}</router-link>
            </li>
            <li>
              <router-link to="/templateManage/emailtemplate">{{ $t('emailtemplate') }}</router-link>
            </li>
            <li>
              <router-link to="/templateManage/accountTemplate">{{ $t('accountTemplate') }}</router-link>
            </li>
            <li>
              <router-link to="/templateManage/systemMessage">{{ $t('systemMessage') }}</router-link>
            </li>
          </ul>
        </li>
        <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <img src="../../assets/images/setting.png" width="20px" alt="" />
              <!-- <icon-menu-components class="shrink-0" /> -->
              <span class="px-2">{{ $t('setting') }}</span>
            </div>
            <div class="right_arrow">
              <!-- <icon-caret-down /> -->
            </div>
          </a>
          <ul class="sub-menu">
            <li>
              <router-link to="/setting/companyList">{{ $t('companyList') }}</router-link>
            </li>
            <li>
              <router-link to="/setting/dicData">{{ $t('dicData') }}</router-link>
            </li>
            <li>
              <router-link to="/setting/menuManage">{{ $t('menuManage') }}</router-link>
            </li>
            <li>
              <router-link to="/setting/express">{{ $t('express') }}</router-link>
            </li>
          </ul>
        </li>
        <!-- <li class="menu nav-item relative">
          <a href="javascript:;" class="nav-link">
            <div class="flex items-center">
              <icon-menu-components class="shrink-0" />
              <span class="px-2">{{ $t('companyMent') }}</span>
            </div>
            <div class="right_arrow">
            </div>
          </a>
          <ul class="sub-menu">
            <li>
              <router-link to="/companyMent/administratorManage">{{ $t('administratorManage') }}</router-link>
            </li>
            <li>
              <router-link to="/setting/roleManage">{{ $t('roleManage') }}</router-link>
            </li>
            <li>
              <router-link to="/companyMent/branch">{{ $t('branch') }}</router-link>
            </li>
            <li>
              <router-link to="/companyMent/configMsg">{{ $t('configMsg') }}</router-link>
            </li>
            <li>
              <router-link to="/setting/systemLog">{{ $t('systemLog') }}</router-link>
            </li>
          </ul>
        </li> -->
      </ul>
    </div>
  </header>
  <el-dialog
    :title="$t('setPayment')"
    v-model="dialogVisible"
    @open="handleDialogOpen"
    width="40%"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="!rounded-lg"
  >
    <div style="font-size: 12px; text-align: center" v-if="PaymentForm.type == 'WX'">
      <span>tips:</span><span class="center">{{ $t('payinfo') }}</span>
    </div>
    <el-form :model="PaymentForm" :rules="PaymentRules" ref="PaymentFormRef" label-width="160px">
      <el-form-item :label="$t('payment_type') + ':'" prop="sn">
        <el-select v-model="PaymentForm.type">
          <el-option label="微信" value="WX" />
          <el-option label="支付宝" value="Ali" />
        </el-select>
      </el-form-item>
      <el-form-item label="AppId" prop="ali_app_id" v-if="PaymentForm.type == 'Ali'">
        <el-input v-model="PaymentForm.ali_app_id" :minlength="2" :maxlength="20" clearable placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item :label="$t('ali_private_key') + ':'" prop="ali_app_private_key" v-if="PaymentForm.type == 'Ali'">
        <el-input
          v-model="PaymentForm.ali_app_private_key"
          :minlength="2"
          :maxlength="20"
          clearable
          type="textarea"
          :placeholder="$t('place') + $t('ali_private_key')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('ali_public_key') + ':'" prop="ali_alipay_public_key" v-if="PaymentForm.type == 'Ali'">
        <el-input
          v-model="PaymentForm.ali_alipay_public_key"
          type="textarea"
          :minlength="2"
          :maxlength="20"
          clearable
          :placeholder="$t('place') + $t('ali_public_key')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('wx_sub_mch_id') + ':'" prop="wx_sub_mch_id" v-if="PaymentForm.type == 'WX'">
        <el-input v-model="PaymentForm.wx_sub_mch_id" :placeholder="$t('place') + $t('wx_sub_mch_id')"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="submitPaymentForm">{{ $t('submit') }}</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    :title="$t('edit_password')"
    v-model="passwordVisible"
    width="400px"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @open="handlePassOpen"
    class="!rounded-lg"
  >
    <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="90px">
      <el-form-item :label="$t('operator_name') + ':'">
        <el-input v-model="store.state.user.user.username" disabled :placeholder="$t('place')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('new_password') + ':'" prop="password">
        <el-input v-model="passwordForm.password" type="password" show-password :placeholder="$t('place')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('confirm') + $t('admin_password') + ':'" prop="conpassword">
        <el-input v-model="passwordForm.conpassword" type="password" show-password :placeholder="$t('place')"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="passwordVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="submitPasswordForm">{{ $t('submit') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, reactive, watch } from 'vue';
import { useI18n } from 'vue-i18n';

import appSetting from '@/app-setting';

import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';

import IconMenu from '@/components/icon/icon-menu.vue';
import IconCalendar from '@/components/icon/icon-calendar.vue';
import IconEdit from '@/components/icon/icon-edit.vue';
import IconChatNotification from '@/components/icon/icon-chat-notification.vue';
import IconSearch from '@/components/icon/icon-search.vue';
import IconXCircle from '@/components/icon/icon-x-circle.vue';
import IconSun from '@/components/icon/icon-sun.vue';
import IconMoon from '@/components/icon/icon-moon.vue';
import IconLaptop from '@/components/icon/icon-laptop.vue';
import IconMailDot from '@/components/icon/icon-mail-dot.vue';
import IconArrowLeft from '@/components/icon/icon-arrow-left.vue';
/* import IconInfoCircle from '@/components/icon/icon-info-circle.vue'; */
import IconBellBing from '@/components/icon/icon-bell-bing.vue';
import IconUser from '@/components/icon/icon-user.vue';
/* import IconMail from '@/components/icon/icon-mail.vue'; */
import IconLockDots from '@/components/icon/icon-lock-dots.vue';
import IconLogout from '@/components/icon/icon-logout.vue'; /* */
import IconMenuDashboard from '@/components/icon/menu/icon-menu-dashboard.vue';
import IconCaretDown from '@/components/icon/icon-caret-down.vue';
import IconMenuApps from '@/components/icon/menu/icon-menu-apps.vue';
import IconMenuComponents from '@/components/icon/menu/icon-menu-components.vue';
import IconMenuElements from '@/components/icon/menu/icon-menu-elements.vue';
import IconMenuDatatables from '@/components/icon/menu/icon-menu-datatables.vue';
import IconMenuForms from '@/components/icon/menu/icon-menu-forms.vue';
import IconMenuPages from '@/components/icon/menu/icon-menu-pages.vue';
import IconMenuMore from '@/components/icon/menu/icon-menu-more.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import * as API_Company from '@/api/company';
import * as API_Auth from '@/api/auth';

const { t } = useI18n();
//ElMessageBox
const store = useStore();
const route = useRoute();
const router = useRouter();
const search = ref(false);
// multi language
const i18n = reactive(useI18n());
const changeLanguage = (item: any) => {
  i18n.locale = item.code;
  appSetting.toggleLanguage(item);
};
const superMenu = computed(() => store.state.superMenu);
const founder = computed(() => store.state.user.user.founder);
const currentFlag = computed(() => {
  return `/assets/images/flags/${i18n.locale.toUpperCase()}.svg`;
});
const countNot = ref(0);
/* 获取账号未读消息 */
const GET_countNot = () => {
  API_Company.countNotReadSys().then((res) => {
    countNot.value = res;
  });
};
const notifications = ref([
  {
    id: 1,
    profile: 'user-profile.jpeg',
    message: '<strong class="text-sm mr-1">John Doe</strong>invite you to <strong>Prototyping</strong>',
    time: '45 min ago',
  },
  {
    id: 2,
    profile: 'profile-34.jpeg',
    message: '<strong class="text-sm mr-1">Adam Nolan</strong>mentioned you to <strong>UX Basics</strong>',
    time: '9h Ago',
  },
  {
    id: 3,
    profile: 'profile-16.jpeg',
    message: '<strong class="text-sm mr-1">Anna Morgan</strong>Upload a file',
    time: '9h Ago',
  },
]);

const messages = ref([
  {
    id: 1,
    image:
      '<span class="grid place-content-center w-9 h-9 rounded-full bg-success-light dark:bg-success text-success dark:text-success-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></span>',
    title: 'Congratulations!',
    message: 'Your OS has been updated.',
    time: '1hr',
  },
  {
    id: 2,
    image:
      '<span class="grid place-content-center w-9 h-9 rounded-full bg-info-light dark:bg-info text-info dark:text-info-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span>',
    title: 'Did you know?',
    message: 'You can switch between artboards.',
    time: '2hr',
  },
  {
    id: 3,
    image:
      '<span class="grid place-content-center w-9 h-9 rounded-full bg-danger-light dark:bg-danger text-danger dark:text-danger-light"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>',
    title: 'Something went wrong!',
    message: 'Send Reposrt',
    time: '2days',
  },
  {
    id: 4,
    image:
      '<span class="grid place-content-center w-9 h-9 rounded-full bg-warning-light dark:bg-warning text-warning dark:text-warning-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">    <circle cx="12" cy="12" r="10"></circle>    <line x1="12" y1="8" x2="12" y2="12"></line>    <line x1="12" y1="16" x2="12.01" y2="16"></line></svg></span>',
    title: 'Warning',
    message: 'Your password strength is low.',
    time: '5days',
  },
]);

onMounted(() => {
  setActiveDropdown();
  GET_countNot();
});

watch(route, (to, from) => {
  setActiveDropdown();
});

/* 支付信息表单 */
const dialogVisible = ref(false);
const PaymentForm = ref<any>({
  type: 'Ali',
  ali_app_id: '',
  ali_app_private_key: '',
  ali_alipay_public_key: '',
  wx_sub_mch_id: '',
});

const PaymentRules = ref<any>({
  ali_app_id: [{ required: true, message: t('submit') + 'Appid', trigger: 'blur' }],
  ali_app_private_key: [{ required: true, message: t('submit') + t('ali_private_key'), trigger: 'blur' }],
  ali_alipay_public_key: [{ required: true, message: t('submit') + t('ali_public_key'), trigger: 'blur' }],
  wx_sub_mch_id: [{ required: true, message: t('submit') + t('wx_sub_mch_id'), trigger: 'blur' }],
});

const setActiveDropdown = () => {
  const selector = document.querySelector('ul.horizontal-menu a[href="' + window.location.pathname + '"]');
  if (selector) {
    selector.classList.add('active');
    const all: any = document.querySelectorAll('ul.horizontal-menu .nav-link.active');
    for (let i = 0; i < all.length; i++) {
      all[0]?.classList.remove('active');
    }
    const ul: any = selector.closest('ul.sub-menu');
    if (ul) {
      let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link');
      if (ele) {
        ele = ele[0];
        setTimeout(() => {
          ele?.classList.add('active');
        });
      }
    }
  }
};
/* 前往消息页面 */
const goNotify = () => {
  router.push({
    name: 'Notify',
  });
};
/* 前往个人信息页面 */
const goInfo = () => {
  router.push({
    name: 'companyInfo',
  });
};
const removeNotification = (value: number) => {
  notifications.value = notifications.value.filter((d) => d.id !== value);
};

const removeMessage = (value: number) => {
  messages.value = messages.value.filter((d) => d.id !== value);
};
const toggleSidebars = () => {
  store.dispatch('toggleSidebar');
};

const toggleTheme = (theme) => {
  store.dispatch('toggleTheme', theme);
};
const closes = () => {};
const handleLogoutClick = () => {
  ElMessageBox.confirm(t('logout_commit') + '?', t('prompt'), {
    confirmButtonText: t('submit'),
    cancelButtonText: t('cancel'),
    type: 'warning',
  })
    .then(() => {
      store.dispatch('logoutAction').then(() => {
        const route = router.resolve('/login');
        location.replace(route.href); // 为了重新实例化vue-router对象 避免bug
      });
    })
    .catch(() => {
      /* Handle cancel action if needed */
    });
};
const getBranch = (value) => {
  store.dispatch('toggleSuperMenu', value);
  router.push({
    name: 'dashboard',
  });
};

/* 设置收款信息 */
const setPayment = () => {
  dialogVisible.value = true;
};

/* 提交收款信息 */
const PaymentFormRef = ref();
const submitPaymentForm = () => {
  PaymentFormRef.value.validate((valid: boolean) => {
    if (valid) {
      API_Auth.editAdministrator(store.state.user.user.company_vo.id, PaymentForm.value).then((res) => {
        PaymentForm.value = {};
        ElMessage.success(t('payment_success'));
      });
    } else {
      ElMessage.error(t('form_erroe'));
      /*    store.dispatch('showMessage', { message: '表单填写有误，请核对！', type: 'error' }); */
      return false;
    }
  });
};
const handleDialogOpen = () => {
  setTimeout(() => {
    PaymentFormRef.value.clearValidate();
  });
};
/* 修改密码部分 */
const passwordVisible = ref(false);
const passwordForm = ref({
  password: '',
  conpassword: '',
});
const passwordRules = ref({
  password: [{ required: true, message: t('place') + t('admin_password') + '!', trigger: 'blur' }],
  conpassword: [
    { required: true, message: t('place') + t('confirm') + t('admin_password') + '!', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const password = passwordForm.value.password; // 假设密码存储在 this.form.password 中
        if (value !== password) {
          callback(new Error(t('confirm_error')));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
});
const passwordFormRef = ref();

/* 修改密码 */
const editPassword = () => {
  passwordVisible.value = true;
};
/* 提交修改密码 */
const submitPasswordForm = () => {
  passwordFormRef.value.validate((valid: boolean) => {
    if (valid) {
      API_Auth.editAdministrator(store.state.user.user.uid, { password: passwordForm.value.password }).then((res) => {
        ElMessage.success(t('edit_success') + '！');
        store.dispatch('logoutAction').then(() => {
          const route = router.resolve('/login');
          location.replace(route.href); // 为了重新实例化vue-router对象 避免bug
        });
      });
    } else {
      ElMessage.error(t('form_erroe') + '!');
      return false;
    }
  });
};
const handlePassOpen = () => {
  passwordForm.value = {
    password: '',
    conpassword: '',
  };
};
</script>
