<template>
  <ElDialog v-model="visible" title="批量修改实名顺序" width="520px" @closed="resetPolicy">
    <ElForm label-width="110px">
      <ElFormItem label="已选数量">
        <span class="selected-count">{{ selectedCount }} {{ assetUnit }}</span>
      </ElFormItem>
      <ElFormItem label="实名认证策略">
        <ElRadioGroup v-model="policy" :disabled="loading">
          <ElRadio value="none">无需实名</ElRadio>
          <ElRadio value="before_order">先实名后购买</ElRadio>
          <ElRadio value="after_order">先购买后实名</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElAlert
        v-if="devicePolicyHint"
        title="实际H5流程由设备策略决定"
        type="info"
        :closable="false"
        show-icon
      />
      <ElAlert
        v-if="errorMessage"
        :title="errorMessage"
        type="error"
        :closable="false"
        show-icon
        class="error-alert"
      />
    </ElForm>

    <template #footer>
      <ElButton :disabled="loading" @click="visible = false">取消</ElButton>
      <ElButton type="primary" :loading="loading" @click="emit('confirm', policy)">
        确认修改
      </ElButton>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import {
    ElAlert,
    ElButton,
    ElDialog,
    ElForm,
    ElFormItem,
    ElRadio,
    ElRadioGroup
  } from 'element-plus'
  import type { AssetRealnamePolicy } from '@/types/api'

  interface Props {
    modelValue: boolean
    selectedCount: number
    assetUnit: string
    loading?: boolean
    errorMessage?: string
    devicePolicyHint?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    loading: false,
    errorMessage: '',
    devicePolicyHint: false
  })

  const emit = defineEmits<{
    'update:modelValue': [value: boolean]
    confirm: [policy: AssetRealnamePolicy]
  }>()

  const policy = ref<AssetRealnamePolicy>('none')
  const visible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
  })

  const resetPolicy = () => {
    policy.value = 'none'
  }
</script>

<style scoped lang="scss">
  .selected-count {
    font-weight: 600;
    color: var(--el-color-primary);
  }

  .error-alert {
    margin-top: 12px;
  }
</style>
