<script setup lang="tsx">
import { ref, watch, PropType, useTemplateRef } from 'vue'
import {
  ElDrawer,
  ElCol,
  ElRow,
  ElAvatar,
  ElMessage,
  ElButton,
  ElOption,
  ElSelect,
  ElDialog,
  ElRadioGroup,
  ElRadio,
  ElInput,
  ElFormItem,
  ElForm
} from 'element-plus'
import {
  getUserDetail,
  putUserData,
  // getBalanceLog,
  // getSpreadList,
  // getBrokerageLog,
  // getBillLog,
  putGiveLevel,
  updateAccount
} from '@/api/user'
import { userData } from '@/api/user/types'
import DetailFrom from './DetailFrom.vue'

const modelValue = defineModel({ type: Boolean, default: false })
const props = defineProps({
  uid: {
    type: Number,
    default: () => 0
  },
  levelList: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  groupList: {
    type: Array as PropType<any[]>,
    default: () => []
  }
})
const loading = ref(true)
const userDetail = ref<userData>()
watch(
  () => modelValue,
  async ({ value }) => {
    if (props.uid == 0 || !value) return
    const { data } = await getUserDetail(props.uid)
    userDetail.value = data
    loading.value = false
  },
  {
    deep: true,
    immediate: true
  }
)
const detailFromRef = useTemplateRef('detailFromRef')
const saveLoading = ref(false)
const showDetail = ref(false)
const saveDetail = async () => {
  const formData = detailFromRef?.value?.getFormData()
  if (formData) {
    saveLoading.value = true
    const res = await putUserData(formData)
    if (res) {
      ElMessage({
        showClose: true,
        message: '保存成功',
        type: 'success'
      })
      emit('confirm')
      const { data } = await getUserDetail(props.uid)
      userDetail.value = data
      showDetail.value = false
    }
    saveLoading.value = false
  }
}
const actionLevel = ref()
const dialogVisible = ref(false)
const putUserLevel = async () => {
  const res = await putGiveLevel({ id: props.uid, level_id: actionLevel.value })
  if (res) {
    ElMessage({
      showClose: true,
      message: '赠送成功',
      type: 'success'
    })
    emit('confirm')
    modelValue.value = false
    dialogVisible.value = false
  }
}
const emit = defineEmits(['confirm'])
const upTypeTitle = ref('')
const upType = ref('')
const showDialogType = ref(false)
const something = ref(1)
const upTypeValue = ref<number>()
const typeMark = ref<string>()
const openTypeDialog = (type, title) => {
  upType.value = type
  showDialogType.value = true
  upTypeTitle.value = title
}
const typeSaveLoding = ref(false)
const updateAccountData = async () => {
  typeSaveLoding.value = true
  const res = await updateAccount(
    {
      money_type: upType.value,
      pm: something.value,
      num: upTypeValue.value || 0,
      mark: typeMark.value || ''
    },
    props.uid
  )
  if (res) {
    ElMessage({
      showClose: true,
      message: something.value == 1 ? '增加成功' : '减少成功',
      type: 'success'
    })
    emit('confirm')
    showDialogType.value = false
    modelValue.value = false
  }
  typeSaveLoding.value = false
}
</script>

<template>
  <div>
    <ElDrawer :show-close="false" v-model="modelValue" size="1000px">
      <template #header>
        <ElRow :gutter="20" v-loading="loading">
          <ElCol :span="12">
            <div class="flex juistify-start items-center">
              <el-avatar :size="50" :src="userDetail?.avatar">
                <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              /></el-avatar>
              <div class="ml-[10px]">{{ userDetail?.nickname }}</div>
            </div>
          </ElCol>
          <ElCol :span="12">
            <div class="flex justify-end items-center h-full">
              <BaseButton v-if="!showDetail" type="primary" @click="showDetail = true">
                编辑
              </BaseButton>
              <BaseButton v-else @click="showDetail = false">取消</BaseButton>
              <BaseButton
                v-if="showDetail"
                type="primary"
                @click="saveDetail"
                :loading="saveLoading"
              >
                完成
              </BaseButton>
              <BaseButton type="success" @click="openTypeDialog('now_money', '余额修改')"
                >余额</BaseButton
              >
              <BaseButton @click="dialogVisible = true">赠送会员</BaseButton>
            </div>
          </ElCol>
        </ElRow>
      </template>
      <DetailFrom
        ref="detailFromRef"
        v-loading="loading"
        v-model="showDetail"
        :userDetail="userDetail"
        :levelList="levelList"
        :groupList="groupList"
      />
    </ElDrawer>
    <ElDialog title="赠送等级" v-model="dialogVisible" width="500">
      <ElSelect v-model="actionLevel">
        <ElOption
          v-for="item in levelList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </ElSelect>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="putUserLevel">确定</el-button>
        </div>
      </template>
    </ElDialog>
    <ElDialog :title="upTypeTitle" v-model="showDialogType" width="500">
      <ElForm>
        <ElFormItem label="类型">
          <ElRadioGroup v-model="something">
            <ElRadio :label="0">减少</ElRadio>
            <ElRadio :label="1">增加</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem label="金额"
          ><ElInput
            v-model="upTypeValue"
            type="number"
            :placeholder="something == 0 ? '请输入要减少的余额' : '请输入要增加的余额'"
        /></ElFormItem>
        <ElFormItem label="备注">
          <ElInput
            class="mt-10px"
            :rows="3"
            v-model="typeMark"
            type="textarea"
            placeholder="备注信息"
          />
        </ElFormItem>
      </ElForm>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialogType = false">取消</el-button>
          <el-button type="primary" :loading="typeSaveLoding" @click="updateAccountData"
            >确定</el-button
          >
        </div>
      </template>
    </ElDialog>
  </div>
</template>
<style lang="less" scoped>
:deep(.el-tabs__content) {
  padding: 0px;
}
</style>
