<!--
 * @Author: xiejiang
 * @Date: 2024-12-10 15:36:04
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 21:54:27
 * @Description: 更新版本弹窗
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <Dialog
    :dialog-visible="visible"
    width="640px"
    class="upadte-dialog"
    :close-on-overlay-click="false"
    @close="visible = false"
  >
    <template #body>
      <main class="updata-main px-[32px] py-[16px]">
        <div class="flex items-center mb-[16px]">
          <span class="min-w-[80px]">业务分支：</span>
          <span class="text-[var(--td-font-gray-1)]">{{ state?.platformType == 1 ? '平台端' : '机构端' }}</span>
        </div>
        <div class="flex items-center mb-[16px]">
          <span class="min-w-[80px]">版本号：</span>
          <span class="text-[var(--td-font-gray-1)]">{{ state?.version }}</span>
        </div>
        <div class="flex">
          <span class="min-w-[80px]">更新说明：</span>
          <div class="content-div text-[var(--td-font-gray-1)]" v-html="state?.description"></div>
        </div>
        <div class="flex justify-center">
          <t-button class="!mt-[60px] !w-[200px]" @click="handleConfirm">更新至最新版本</t-button>
        </div>
      </main>
    </template>
  </Dialog>
</template>

<script setup lang="ts" name="upadta-version">
import { ResVersion } from '@/api/interface/version/index'
import { postSaveUserClient } from '@/api/modules/menu/index'

const props = withDefaults(defineProps<{ dialogVisible: boolean; state: ResVersion | null }>(), {
  dialogVisible: false,
  state: null
})

const visible = ref(false)

watch(
  () => props.dialogVisible,
  val => {
    visible.value = val
  },
  { immediate: true }
)

const handleConfirm = () => {
  postSaveUserClient({ versionId: props.state?.versionId as string })
    .then(() => {
      window.location.reload()
    })
    .finally(() => {
      visible.value = false
    })
}
</script>

<style lang="less">
.content-div {
  max-height: 400px;
  overflow: auto;

  * {
    padding: 0;
    margin: 0;
  }
}

.upadte-dialog {
  .t-dialog {
    border: none;
  }

  .t-dialog--default {
    padding: 0 !important;
  }

  .t-dialog__header {
    height: 187px;
    background: url('@/assets/images/update.png');
    background-size: 100% 100%;
    position: relative;

    .t-dialog__close {
      color: var(--td-white);
      position: absolute;
      right: 24px;
      top: 24px;
    }

    .t-dialog__close:hover {
      background: none;
    }
  }
}
</style>
