<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="40%">
    <el-descriptions class="margin-top" title="User Info" :column="2" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            ID
          </div>
        </template>
        <span>{{ memberUser.id }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            会员编号
          </div>
        </template>
        <span>{{ memberUser.username }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            姓名
          </div>
        </template>
        <span>{{ memberUser.nickname }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            手机号码
          </div>
        </template>
        <span>{{ memberUser.mobile }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 分割线 -->
    <el-divider />
    <el-form :model="formData" :rules="formRules" ref="formRef">
      <el-form-item label="当前余额" prop="balance">
        <el-input v-model="formData.balance" :disabled="true" />
      </el-form-item>
      <el-form-item label="冻结金额" prop="freezeBalance">
        <el-input v-model="formData.freezeBalance" :disabled="true" />
      </el-form-item>
      <el-form-item label="变更类型" prop="type" size="large">
        <el-radio-group v-model="formData.type">
          <el-radio label="1">增加</el-radio>
          <el-radio label="2">减少</el-radio>
          <el-radio label="3">锁定余额</el-radio>
          <el-radio label="4">解锁余额</el-radio>
          <el-radio label="5">赠送余额</el-radio>
          <el-radio label="6">提现</el-radio>
          <el-radio label="7">签到奖励</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="数量" prop="amount">
        <el-input-number v-model="formData.amount" style="width: 240px" />
      </el-form-item>
      <el-form-item label="是否发送站内信" pros="isSendPms">
        <el-switch
          v-model="formData.isSendPms"
          active-color="#13ce66"
          inactive-text="否"
          active-text="是"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          type="textarea"
          v-model="formData.remark"
          :rows="3"
          :autosize="{ minRows: 2, maxRows: 4 }"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit" :disabled="submitDisable">确定</el-button>
      <el-button type="default" @click="dialogVisible = false">取消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { getBalanceAccountByUseId, updateBalanceAccountByUser } from '@/api/member/balanceAccount'
import { getUser } from '@/api/member/user'
defineOptions({ name: 'BalanceAccountTable' })
const { t } = useI18n() // 国际化
const submitDisable = ref(false) // 提交按钮是否禁用

const formRef = ref()
const formData = ref({
  id: undefined,
  userId: undefined,
  balance: undefined,
  freezeBalance: undefined,
  type: '1',
  amount: undefined,
  isSendPms: false,
  remark: ''
}) // 表单数据

// 重置表单
const resetForm = () => {
  formData.value = {
    id: undefined,
    userId: undefined,
    balance: undefined,
    freezeBalance: undefined,
    type: '1',
    amount: undefined,
    isSendPms: false,
    remark: ''
  }
}

const formRules = reactive({
  amount: [
    { required: true, message: '金额填写错误', trigger: 'blur' },
    { type: 'number', message: '金额只能是数字', trigger: 'blur' }
  ],
  type: [{ required: true, message: '必须选择一个变更类型', trigger: 'blur' }]
})
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  resetForm()
  formData.value.userId = id as any
  await init()
  dialogVisible.value = true
  dialogTitle.value = '余额变更'
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const emit = defineEmits(['success'])

// 用户信息
const memberUser = ref()
const initMemberUser = async () => {
  memberUser.value = await getUser(formData.value.userId as unknown as number)
}

const balanceAccount = ref() // 余额信息
const initBalanceAccount = async () => {
  let params = {
    userId: formData.value.userId
  }
  try {
    balanceAccount.value = await getBalanceAccountByUseId(params)
    formData.value.id = balanceAccount.value.id
    formData.value.balance = balanceAccount.value.balance
    formData.value.freezeBalance = balanceAccount.value.freezeBalance
  } catch (error) {
    console.log(error)
  }
}

const init = async () => {
  await initBalanceAccount()
  await initMemberUser()
}
const message = useMessage()
const submit = async () => {
  const valid = await formRef.value.validate()
  if (!valid) {
    return
  }
  // 一段标红的确认提示html
  const content = `是否确认为用户 ${memberUser.value.username} 变更余额？`
  const confirm = await message.confirm(content)
  if (!confirm) {
    return
  }
  submitDisable.value = true
  try {
    await updateBalanceAccountByUser(formData.value)
    message.success(t('common.success'))
    dialogVisible.value = false
    emit('success')
  } finally {
    submitDisable.value = false
  }
}
</script>

<style scoped lang="scss">
.margin-top {
  margin-top: 20px;
}
</style>
