<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2023年7月27日 17:08:28
 */
import {useCollapsed, useRouterActive, useStore} from "~/store";
import {getInfo} from "~/tool/info";
import {
  UploadImageAction,
  AdminUpdateSelfAction,
  AdminAccountChangePasswordAction,
  $base64,
  $image, $response, ImageCaptchaCreateAction
} from '~/api'
import $router from '~/router'

const $store = useStore()
const $collapsed = useCollapsed()
onMounted(() => {
  checkUserInfo()
})
const checkUserInfo = () => {
  if (!$store.info) {
    getInfo((info) => {
      if (info.initial_password === 1) {
        changePasswordClick()
      }
    })
  } else {
    if ($store.info.initial_password === 1) {
      changePasswordClick()
    }
  }
}

const quitClick = () => {
  window.$box.confirm(
    '确定要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
    $router.push('/login')
  }).catch(() => {
  })
}

const $router_active = useRouterActive()
const breadcrumb_show = computed(() => {
  return $router_active.value.map((item) => {
    return item
  })
})

const AdminAccountChangePassword = async () => {
  if (change_password_data.value.password !== change_password_data.value.check_password) {
    return window.$message().error('两次密码不一致')
  }
  const response = await AdminAccountChangePasswordAction({
    old_password: change_password_data.value.old_password,
    password: change_password_data.value.password,
    code: change_password_data.value.code,
    hash: change_password_data.value.hash,
    time: change_password_data.value.time,
    uuid: change_password_data.value.uuid,
  })
  $response(response, () => {
    window.$message().success('修改成功')
    changePasswordShowClose()
  })
}
const change_password_show = ref(false)
const change_password_data = ref({
  old_password: '',
  password: '',
  check_password: '',
  image: '',
  code: '',
  hash: '',
  time: '',
  uuid: '',
})
const changePasswordClick = () => {
  change_password_data.value = {
    old_password: '',
    password: '',
    check_password: '',
    image: '',
    code: '',
    hash: '',
    time: '',
    uuid: '',
  }
  change_password_show.value = true
  ImageCaptchaCreate()
}
const captcha_loading = ref(false)
const ImageCaptchaCreate = async () => {
  if (captcha_loading.value) return
  captcha_loading.value = true
  const response = await ImageCaptchaCreateAction()
  captcha_loading.value = false
  $response(response, () => {
    response.data.old_password = response.data.password
    response.data.password = change_password_data.value.password
    change_password_data.value = {
      ...change_password_data.value,
      ...response.data
    }
  })
}
const changePasswordShowClose = () => {
  change_password_show.value = false
  window.location.reload()
}

const update_self_show = ref(false)
const update_self_data = ref({
  nickname: '',
  avatar: '',
})
const updateSelfClick = () => {
  update_self_data.value = JSON.parse(JSON.stringify({
    nickname: $store.info.nickname,
    avatar: $store.info.avatar,
  }))
  update_self_show.value = true
}
const AdminUpdateSelf = async () => {
  const response = await AdminUpdateSelfAction(update_self_data.value)
  $response(response, () => {
    update_self_show.value = false
    window.$message().success('修改成功')
    $store.info.nickname = update_self_data.value.nickname
    $store.info.avatar = update_self_data.value.avatar
  })
}
const fileChange = async (e) => {
  if (e.size > 1024 * 1024 * 2) return window.$message().error('图片大小不能超过2M')
  await UploadImage(await $base64(e.raw))
}
const UploadImage = async (base64) => {
  const response = await UploadImageAction({
    base64
  })
  $response(response, () => {
    update_self_data.value.avatar = response.data.url
  })
}
const updateSelfShowClose = () => {
  update_self_show.value = false
  update_self_data.value = {
    nickname: '',
    avatar: '',
  }
}
</script>
<template>
  <div>
    <el-dialog v-model="update_self_show" title="编辑信息" width="350px"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :show-close="false">
      <div>
        <div class="input_line_wrapper">
          <div class="input_line_tag_wrapper">
            <el-tag disable-transitions w-full type="info">头像</el-tag>
          </div>
          <div ml-2>
            <el-upload :auto-upload="false" :show-file-list="false" @change="fileChange">
              <el-avatar :size="200" shape="square"
                         :src="$image(!!update_self_data.avatar ? update_self_data.avatar : '/storage/assets/default/avatar.png')"></el-avatar>
            </el-upload>

          </div>
        </div>
        <div mt-2 class="input_line_wrapper">
          <div class="input_line_tag_wrapper">
            <el-tag disable-transitions w-full type="info">昵称</el-tag>
          </div>
          <div ml-2>
            <el-input class="input_line_input_wrapper" v-model="update_self_data.nickname"
                      placeholder="请输入昵称"></el-input>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="updateSelfShowClose()">关闭</el-button>
          <el-button @click="AdminUpdateSelf()" type="primary">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="change_password_show" title="修改密码" width="350px"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :show-close="false">
      <div>
        <div v-if="$store.info.initial_password === 1">
          <el-alert :closable="false" center title="首次登录和重置密码后需要修改密码" type="error" effect="dark"/>
        </div>
        <div class="input_line_wrapper"
             :class="[$store.info.initial_password === 1 ? 'mt-2' : '']">
          <div class="input_line_tag_wrapper">
            <el-tag disable-transitions w-full type="info">旧密码</el-tag>
          </div>
          <div ml-2>
            <el-input class="input_line_input_wrapper" v-model="change_password_data.old_password"
                      placeholder="请输入原密码" type="password"></el-input>
          </div>
        </div>
        <div mt-2 class="input_line_wrapper">
          <div class="input_line_tag_wrapper">
            <el-tag disable-transitions w-full type="info">新密码</el-tag>
          </div>
          <div ml-2>
            <el-input class="input_line_input_wrapper" v-model="change_password_data.password"
                      placeholder="请输入新密码" type="password"></el-input>
          </div>
        </div>
        <div mt-2 class="input_line_wrapper">
          <div class="input_line_tag_wrapper">
            <el-tag disable-transitions w-full type="info">确认密码</el-tag>
          </div>
          <div ml-2>
            <el-input class="input_line_input_wrapper" v-model="change_password_data.check_password"
                      placeholder="请确认密码" type="password"></el-input>
          </div>
        </div>
        <div mt-2 class="input_line_wrapper">
          <div class="input_line_tag_wrapper">
            <el-tag disable-transitions w-full type="info">验证码</el-tag>
          </div>
          <div ml-2>
            <el-input class="input_line_input_wrapper" v-model="change_password_data.code"
                      placeholder="请输入验证码"></el-input>
          </div>
        </div>
        <div mt-2 class="input_line_wrapper">
          <div class="input_line_tag_wrapper"></div>
          <div ml-2>
            <div v-loading="captcha_loading && !change_password_data.image"
                 @click="ImageCaptchaCreate()"
                 class="change_password_code_image_wrapper">
              <div w-full h-full v-if="!!change_password_data.image" :style="{
                    backgroundImage: 'url(' + $image(change_password_data.image) + ')'
                  }"></div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="changePasswordShowClose()">关闭</el-button>
          <el-button @click="AdminAccountChangePassword()" type="primary">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <div class="header_wrapper" :style="{
    width : !$collapsed ? 'calc(100% - 200px)' : 'calc(100% - 64px)'
    }">
      <div class="header_left_wrapper">
        <el-button @click="$collapsed = !$collapsed" text ml-1>
          <el-icon mr-1>
            <Icon v-if="!$collapsed" type="menu-fold"></Icon>
            <Icon v-else type="menu-unfold"></Icon>
          </el-icon>
        </el-button>
        <div class="header_breadcrumb_wrapper" ml-2>
          <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">
              {{ $store.config['网站名称'] }}
            </el-breadcrumb-item>
            <template v-if="$router_active[0].key !== 'index'">
              <el-breadcrumb-item v-for="(i,k) in breadcrumb_show" :key="k">
                {{ i.title }}
              </el-breadcrumb-item>
            </template>
          </el-breadcrumb>
        </div>
      </div>
      <div class="header_right_wrapper">
        <div v-if="!!$store.info" class="header_user_wrapper" ml-1 mr-2>
          <el-dropdown popper-class="no-border">
            <div>
              <el-button text>
                <el-avatar shape="square" :size="26"
                           :src="$image(!!$store.info.avatar? $store.info.avatar : '/storage/assets/default/avatar.png')"/>
                <div ml-2>
                  <el-text>{{ $store.info.nickname }}</el-text>
                </div>
              </el-button>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="updateSelfClick()">
                  <el-text>
                    <el-icon>
                      <Icon type="edit-name"></Icon>
                    </el-icon>
                    编辑资料
                  </el-text>
                </el-dropdown-item>
                <el-dropdown-item @click="changePasswordClick()">
                  <el-text>
                    <el-icon>
                      <Icon type="unlock"></Icon>
                    </el-icon>
                    修改密码
                  </el-text>
                </el-dropdown-item>
                <el-dropdown-item divided @click="quitClick()">
                  <el-text>
                    <el-icon>
                      <Icon type="power"></Icon>
                    </el-icon>
                    退出登录
                  </el-text>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.el-tooltip__trigger {
  outline: none;
}

.el-dropdown-link:focus-visible {
  outline: unset;
}
</style>
<style scoped>
.change_password_code_image_wrapper {
  width: 130px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  overflow: hidden;
}

.header_right_wrapper,
.header_left_wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

.header_wrapper {
  position: fixed;
  top: 0;
  right: 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: width 0.3s ease;
}
</style>
