<template>
  <a-drawer
    v-model:visible="vdata.isShow"
    :title=" vdata.isAdd ? '新增团队' : '修改团队' "
    placement="right"
    :closable="true"
    width="600"
    :mask-closable="false"
    @ok="handleOkFunc"
    @close="onClose"
  >
    <!-- <a-modal :confirmLoading="confirmLoading"> -->

    <a-form
      ref="infoFormModel"
      :model="vdata.saveObject"
      layout="vertical"
      :rules="rules"
      style="padding-bottom:50px"
    >
      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="团队名:" name="teamName">
            <a-input v-model:value="vdata.saveObject.teamName" />
          </a-form-item>
        </a-col>

        <a-col :span="10">
          <a-form-item label="团队编号：" name="teamNo">
            <a-input v-model:value="vdata.saveObject.teamNo" />
          </a-form-item>
        </a-col>

        <a-col :span="10">
          <a-form-item label="统计周期" name="statRangeType">
            <a-select v-model:value="vdata.saveObject.statRangeType" placeholder="请选择用户类型">
              <a-select-option value="year">年</a-select-option>
              <a-select-option value="quarter">季度</a-select-option>
              <a-select-option value="month">月</a-select-option>
              <a-select-option value="week">周</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      
      <div class="drawer-btn-center">
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          <close-outlined />
          取消
        </a-button>
        <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOkFunc">
          <check-outlined />
          保存
        </a-button>
      </div>
    </a-form>
  </a-drawer>
</template>

<script setup lang="ts">
import { req, API_URL_SYS_USER_TEAM_LIST } from '@/api/manage'
import { reactive,ref } from 'vue'
import { message } from 'ant-design-vue'

  const props = defineProps ({
    callbackFunc: { type: Function, default: () => ({}) }
  })

  const infoFormModel = ref()
  const vdata = reactive ({
    loading: false, // 按钮上的loading
    confirmLoading: false, // 显示确定按钮loading图标
    isAdd: true, // 新增 or 修改页面标识
    isShow: false, // 是否显示弹层/抽屉
    saveObject: {} as any, // 数据对象
    recordId: null, // 更新对象ID
  })
  const rules = reactive({
    teamName: [{ required: true, message: '请输入团队名', trigger: 'blur' }],
    teamNo: [{ required: true, message: '请输入团队编号', trigger: 'blur' }],
    statRangeType: [{ required: true, message: '请选择统计周期', trigger: 'blur' }]
  })

  defineExpose({ show })

  function show (recordId) { // 弹层打开事件
    if (infoFormModel.value !== undefined) {
      infoFormModel.value.resetFields()
    }

    vdata.isAdd = !recordId
    // 数据恢复为默认数据
    // vdata.saveObject = {isAdmin: 1, state: 1, sex: 1, passwordType: 'default', isNotify: 0}
    vdata.confirmLoading = false // 关闭loading

    if (!vdata.isAdd) { // 修改信息 延迟展示弹层
      vdata.recordId = recordId
      req.getById(API_URL_SYS_USER_TEAM_LIST, recordId).then(res => { vdata.saveObject = res })
      vdata.isShow = true
    } else {
      vdata.saveObject.statRangeType = 'year'
      vdata.isShow = true // 立马展示弹层信息
    }
  }
  function handleOkFunc () { // 点击【确认】按钮事件
    infoFormModel.value.validate().then(valid=>{
      vdata.loading = true // 打开按钮上的 loading
        vdata.confirmLoading = true // 显示loading
        if (vdata.isAdd) {
          req.add(API_URL_SYS_USER_TEAM_LIST, vdata.saveObject).then(res => {
            message.success('新增成功')
            vdata.isShow = false
            vdata.loading = false
            props.callbackFunc() // 刷新列表
          }).catch((res) => {
            vdata.confirmLoading = false
          })
        } else {
          req.updateById(API_URL_SYS_USER_TEAM_LIST, vdata.recordId, vdata.saveObject).then(res => {
            message.success('修改成功')
            vdata.isShow = false
            props.callbackFunc() // 刷新列表
            }).catch(res => {
            vdata.confirmLoading = false
          })
        }
    })
  }
  // 关闭抽屉
  function onClose () {
    vdata.isShow = false
  }
</script>
