<template>
    <el-dialog
        v-model="dialogVisible"
        title="程序激活"
        width="450px"
        draggable
        :close-on-click-modal="false"
        :before-close="beforeClose"
        :destroy-on-close="true"
    >
        <el-form :label-width="100" label-position="left">
            <el-form-item label="程序版本号">
                <el-text style="margin-left: 82%">{{ 'v' + versionNumber }}</el-text>
            </el-form-item>
        </el-form>
        <el-descriptions
            class="mode-descriptions"
            v-if="!hadActivationCode"
            title="模块激活状态"
            size="small"
        ></el-descriptions>
        <el-form
            ref="applicationFormRef"
            v-if="!hadActivationCode"
            :model="applicationForm"
            label-position="left"
            :label-width="100"
        >
            <el-form-item
                class="mode-item"
                v-if="activateInfo.simulate.apply !== 1 || activateInfo.simulate.permanently !== 1"
                label="模拟式模块"
                prop="simulate.apply"
            >
                <el-tag disable-transitions type="danger">未激活</el-tag>
                <el-checkbox
                    :false-value="0"
                    :true-value="1"
                    class="apply-checkbox"
                    v-model="applicationForm.simulate.apply"
                    label="激活"
                />
            </el-form-item>
            <el-form-item
                class="mode-item"
                v-if="activateInfo.simulate.apply === 1 && activateInfo.simulate.permanently === 1"
                label="模拟式模块"
            >
                <el-tag class="activated-tag" disable-transitions type="success">已激活</el-tag>
            </el-form-item>
            <el-form-item
                class="mode-item"
                v-if="activateInfo.digital.apply !== 1 || activateInfo.digital.permanently !== 1"
                label="数字式模块"
                prop="digital.apply"
            >
                <el-tag disable-transitions type="danger">未激活</el-tag>
                <el-checkbox
                    :false-value="0"
                    :true-value="1"
                    class="apply-checkbox"
                    v-model="applicationForm.digital.apply"
                    label="激活"
                />
            </el-form-item>
            <el-form-item
                class="mode-item"
                v-if="activateInfo.digital.apply === 1 && activateInfo.digital.permanently === 1"
                label="数字式模块"
            >
                <el-tag class="activated-tag" disable-transitions type="success">已激活</el-tag>
            </el-form-item>
            <el-form-item
                class="mode-item"
                v-if="activateInfo.contrast.apply !== 1 || activateInfo.contrast.permanently !== 1"
                label="比对式模块"
                prop="contrast.apply"
            >
                <el-tag disable-transitions type="danger">未激活</el-tag>
                <el-checkbox
                    :false-value="0"
                    :true-value="1"
                    class="apply-checkbox"
                    v-model="applicationForm.contrast.apply"
                    label="激活"
                />
            </el-form-item>
            <el-form-item
                class="mode-item"
                v-if="activateInfo.contrast.apply === 1 && activateInfo.contrast.permanently === 1"
                label="比对式模块"
            >
                <el-tag class="activated-tag" disable-transitions type="success">已激活</el-tag>
            </el-form-item>
        </el-form>
        <el-row v-if="applicationCode">
            <el-descriptions class="mode-descriptions" title="设备申请码" size="small"></el-descriptions>
            <el-tooltip placement="top-end" effect="light">
                <el-input
                    v-model="applicationCode"
                    :rows="5"
                    type="textarea"
                    readonly
                    resize="none"
                    class="code-display"
                />
                <template #content>
                    <el-button size="small" @click="copyCode" icon="DocumentCopy">复制</el-button>
                </template>
            </el-tooltip>
        </el-row>
        <el-row v-if="applicationCode || hadActivationCode">
            <el-descriptions class="mode-descriptions" title="设备激活码" size="small"></el-descriptions>
            <el-input
                placeholder="请输入设备激活码"
                v-model="activationCode"
                :rows="5"
                resize="none"
                type="textarea"
                class="code-input"
            />
        </el-row>
        <template #footer v-if="!activatedAll">
            <div v-if="!applicationCode && !hadActivationCode">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="getApplicationCode">获取申请码</el-button>
                <el-button type="primary" @click="hadActivationCode = true">已有激活码</el-button>
            </div>
            <div v-if="applicationCode || hadActivationCode">
                <el-button @click="cancel">取消</el-button>
                <el-button :disabled="!activationCode" type="primary" @click="submitActivation">激活</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { version } from '../../../../package.json'
import type { Activate } from '@/api/activate/interface'
import { generateApplicationCode, verifyActivationCode } from '@/api/activate'
import { useAuthStore } from '@/stores/modules/auth'

const authStore = useAuthStore()
const activateInfo = authStore.activateInfo
const versionNumber = ref(version)
const applicationForm = reactive<Activate.ApplicationCodePlaintext>({
    simulate: { apply: 0 },
    digital: { apply: 0 },
    contrast: { apply: 0 }
})
const activatedAll = computed(() => {
    return (
        activateInfo.simulate.apply === 1 &&
        activateInfo.simulate.permanently === 1 &&
        activateInfo.digital.apply === 1 &&
        activateInfo.digital.permanently === 1 &&
        activateInfo.contrast.apply === 1 &&
        activateInfo.contrast.permanently === 1
    )
})
const applicationFormRef = ref()
const hadActivationCode = ref(false)
const applicationCode = ref('')
const activationCode = ref('')
const dialogVisible = ref(false)
// 获取申请码
const getApplicationCode = async () => {
    if (
        applicationForm.simulate.apply == 0 &&
        applicationForm.digital.apply == 0 &&
        applicationForm.contrast.apply == 0
    ) {
        ElMessage.warning('请选择需要激活的模块')
        return
    }
    if (activateInfo.simulate.apply === 1) {
        applicationForm.simulate.apply = 1
    }
    if (activateInfo.digital.apply === 1) {
        applicationForm.digital.apply = 1
    }
    if (activateInfo.contrast.apply === 1) {
        applicationForm.contrast.apply = 1
    }

    const res = await generateApplicationCode(applicationForm)
    if (res.code == 'A0000') {
        applicationCode.value = res.data as string
    }
}
// 复制申请码
const copyCode = async () => {
    try {
        await navigator.clipboard.writeText(applicationCode.value)
        ElMessage.success('已复制到剪贴板')
    } catch {
        ElMessage.error('复制失败，请手动选择内容')
    }
}
const openDialog = () => {
    hadActivationCode.value = false
    activationCode.value = ''
    applicationCode.value = ''
    applicationForm.simulate.apply = 0
    applicationForm.digital.apply = 0
    applicationForm.contrast.apply = 0
    dialogVisible.value = true
}
const beforeClose = (done: Function) => {
    applicationFormRef.value?.resetFields()
    done()
}
const cancel = () => {
    applicationFormRef.value?.resetFields()
    dialogVisible.value = false
}
const submitActivation = async () => {
    const res = await verifyActivationCode(activationCode.value)
    if (res.code == 'A0000') {
        ElMessage.success('激活成功')
        await authStore.setActivateInfo()
        window.location.reload()
    } else {
        ElMessage.error(res.message)
    }
}
defineExpose({ openDialog })
</script>
<style scoped>
.apply-checkbox {
    margin-left: 62%;
}
.activated-tag {
    margin-left: 80%;
}
.code-display,
.code-input {
    font-family: consolas;
}
:deep(.el-tag) {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
:deep(.el-divider__text) {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.mode-descriptions {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin-top: 15px;
}
:deep(.el-form-item) {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0 10px !important;
    margin-bottom: 10px !important;
    margin-right: 0 !important;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
:deep(.el-divider--horizontal) {
    margin: 10px 0 !important;
    margin-top: 20px !important;
}
.mode-item {
    transition: background-color 0.2s ease;
}
.mode-item:hover {
    background-color: #f9fafb;
}
</style>