<template>
  <div class="app-container account-charge">
    <el-form :model="state.form" :rules="state.rules" ref="chargeFormRef" label-width="100">
      <el-card shadow="never">
        <el-divider content-position="center">账号充值</el-divider>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="手机号查询" prop="accountid">
              <el-select
                v-model="state.form.accountid"
                filterable
                remote
                placeholder="输入手机号查询"
                :remote-method="getAccountList"
                :loading="state.searchLoading"
                class="w-full"
                @change="userAccountChange"
                @visible-change="selectVisibleChange"
              >
                <el-option v-for="(item, index) in state.userOptions" :key="`account_${index}`" :label="item.label" :value="item.accountid" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="Object.keys(state.currentChosenAccountInfo).length">
            <el-form-item label="用户信息">
              <el-descriptions size="small" :column="3" border class="w-full">
                <el-descriptions-item label="用户账号">{{ state.currentChosenAccountInfo.accountname }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{ state.currentChosenAccountInfo.accountlxr }}</el-descriptions-item>
                <el-descriptions-item label="联系人手机号">{{ state.currentChosenAccountInfo.accountlxrphone }}</el-descriptions-item>
              </el-descriptions>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="充值金额" prop="accountprice">
              <el-input v-model="state.form.accountprice" placeholder="充值金额" class="w-full"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="current-agent-info flex justify-center mb-4">
          <p>当前可用余额：{{ state.currentAgentsInfo.accountprice }}</p>
        </div>
        <div class="submit-box flex justify-center">
          <el-button type="primary" @click="handleChargeConfirm" size="large" class="w-28">充值</el-button>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script setup>
import useAgentsManageManageStore from '@store/modules/agentsManage'
import useUserStore from '@store/modules/user'
import useAccountManageStore from '@store/modules/accountManage'

const agentsManageStore = useAgentsManageManageStore()
const userStore = useUserStore()
const accountManageStore = useAccountManageStore()
const {proxy} = getCurrentInstance()

const chargeFormRef = ref(null)
const state = reactive({
  searchLoading: false,
  currentAgentsInfo: {}, // 当前代理商信息
  userOptions: [],
  currentChosenAccountInfo: {}, // 当前选择的账号信息
  form: {
    accountid: '',
    accountprice: ''
  },
  rules: {
    accountid: [{required: true, message: '请搜索并选择用户', trigger: 'blur'}],
    accountprice: [{required: true, message: '请输入充值金额', trigger: 'blur'}]
  }
})

const getCurrentAgentInfo = async () => {
  try {
    const data = await accountManageStore.view({accountid: userStore.accountid})
    state.currentAgentsInfo = data
  } catch (error) {}
}

const getAccountList = async (phoneNum) => {
  try {
    state.searchLoading = true
    const params = {
      accountname: phoneNum,
      accountagentsid: userStore.agentsid == 'null' ? '' : userStore.agentsid,
      accounttype: '商户',
      ['accountstatus.Value']: 1,
      pageindex: 1,
      rows: 9999
    }
    const data = await accountManageStore.list(params)
    data.Data.forEach((item) => {
      item.label = `${item.accountname}_${item.accountlxr}`
    })
    state.userOptions = data.Data
    state.searchLoading = false
  } catch (error) {}
}

const userAccountChange = (item) => {
  const current = state.userOptions.find((i) => i.accountid === item)
  state.currentChosenAccountInfo = current
}

const handleChargeConfirm = async () => {
  //判断可用金额
  if (Number(state.form.accountprice) > Number(state.currentAgentsInfo.accountprice)) {
    proxy.$modal.alertError('充值金额不能大于可用余额！')
    return
  }

  chargeFormRef.value.validate(async (valid) => {
    if (valid) {
      await proxy.$modal.confirm(`确认充值${state.form.accountprice}？`)
      try {
        const params = {
          accountid: state.currentChosenAccountInfo.accountid,
          money: state.form.accountprice
        }

        if (userStore.accountlx === '管理员') {
          await accountManageStore.accountAdminCharge(params)
        } else {
          await accountManageStore.accountCharge(params)
        }

        proxy.$modal.alertSuccess('充值成功！')
        chargeFormRef.value.resetFields()
        state.currentChosenAccountInfo = {}
        await getCurrentAgentInfo()
      } catch (error) {
        proxy.$modal.alertError('充值失败！' + String(error))
      }
    }
  })
}

const selectVisibleChange = () => {
  console.log(state.userOptions)
}

onMounted(() => {
  // console.log(userStore.accountlx, 'userStore.accountlx')
  getCurrentAgentInfo()
})
</script>

<style lang="scss" scoped></style>
