<script setup>
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  loading: { type: Boolean, default: false },
  type: { type: String, default: 'account' },
  platform: { type: String, default: 'local' },
  remark: { type: String, default: '' },
  replenish: { type: Boolean, default: false },
  platformMap: { type: Object, default: () => ({}) },
});

const emit = defineEmits([
  'update:modelValue',
  'update:platform',
  'update:remark',
  'update:replenish',
  'confirm',
]);

function typeText(type) {
  if (type === 'account') return '账号密码';
  if (type === 'account_tk') return '账号密码+Token';
  return 'Token';
}
</script>

<template>
  <el-dialog
    class="pool-extract-dialog"
    :model-value="modelValue"
    title="提取账号"
    width="90%"
    @update:model-value="(v) => emit('update:modelValue', v)"
  >
    <el-form label-width="84px">
      <el-form-item label="提取类型">
        <el-input :model-value="typeText(type)" disabled />
      </el-form-item>
      <el-form-item label="是否补号">
        <el-switch
          :model-value="replenish"
          active-text="是"
          inactive-text="否"
          @update:model-value="(v) => emit('update:replenish', v)"
        />
      </el-form-item>
      <el-form-item label="提取平台">
        <el-select
          :model-value="platform"
          style="width: 100%"
          @update:model-value="(v) => emit('update:platform', v)"
        >
          <el-option v-for="(v, k) in platformMap" :key="k" :value="k" :label="v.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          :model-value="remark"
          type="textarea"
          :rows="3"
          placeholder="提取备注（可选）"
          @update:model-value="(v) => emit('update:remark', v)"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="emit('update:modelValue', false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="emit('confirm')">确认提取</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
:deep(.pool-extract-dialog) {
  max-width: 420px;
}

@media (max-width: 768px) {
  :deep(.pool-extract-dialog) {
    width: calc(100vw - 24px) !important;
    margin: 0 auto;
  }

  :deep(.pool-extract-dialog .el-dialog__body) {
    padding: 12px;
  }

  :deep(.pool-extract-dialog .el-form-item__label) {
    width: 74px !important;
  }

  :deep(.pool-extract-dialog .el-dialog__footer .el-button) {
    width: calc(50% - 6px);
    margin: 0;
  }

  :deep(.pool-extract-dialog .el-dialog__footer) {
    display: flex;
    gap: 12px;
    padding: 8px 12px 12px;
  }
}
</style>
