<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title=" true ? '团队详情' : '' "
    :body-style="{ paddingBottom: '80px' }"
    width="70%"
    @close="onClose"
  >
    <a-tabs v-model:activeKey="vdata.activeKey" @change="changeDateTime()">
      <a-tab-pane key="currMonth" tab="本月" />
      <a-tab-pane key="prevMonth" tab="上月" />
      <a-tab-pane key="today" tab="今天" />
      <a-tab-pane key="yesterday" tab="昨天" />
      <a-tab-pane key="customDateTime" tab="自定义">
        <a-range-picker v-model:value="vdata.customDateTimeValue" show-time @change="customDateTimeChange" />
      </a-tab-pane>
    </a-tabs>
    <JeepayTable
      ref="infoTable"
      :init-data="true"
      :req-table-data-func="reqTableDataFunc"
      :table-columns="tableColumns"
      :scrollX="900"
      row-key="teamId"
      @btnLoadClose="vdata.btnLoading=false"
    >
      <template #bodyCell="{column,record}">
        <template v-if="column.key === 'isTeamLeader'">
          <JeepayTableColState :state="record.isTeamLeader" :show-switch-type="$access('ENT_UR_USER_EDIT')" :on-change="(state) => { return updateTeamLeader(record, state)}" />
        </template>
        <template v-if="column.key === 'orderAmount'">￥{{ (record.orderAmount/100).toFixed(2) }}</template>
      </template>
    </JeepayTable>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_SYS_USER_LIST, reqLoad, $getTeamUserList } from '@/api/manage'
import { defineProps, reactive, toRaw, ref, getCurrentInstance, nextTick } from 'vue'
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties
const tableColumns = reactive([
  {key:'sysUserId', title: '成员ID', dataIndex: 'sysUserId'},
  {key:'realname', title: '成员姓名', dataIndex: 'realname' },
  {key:'telphone', title: '成员手机号', dataIndex: 'telphone' },
  {key:'isTeamLeader', title: '是否队长', dataIndex: 'isTeamLeader' },
  {key:'mchCount', title: '拓展商户数', dataIndex: 'mchCount' },
  {key:'orderAmount', title: '商户交易额', dataIndex: 'orderAmount' },
  {key: 'createAt', title: '创建时间' , dataIndex: 'createAt' } 
])
const infoTable = ref()
const props = defineProps({
    callbackFunc: { type: Function,default:null }
})

  const vdata = reactive({
      btnLoading: false,
      detailData: {} as any, // 数据对象
      recordId: null, // 更新对象ID
      visible: false, // 是否显示弹层/抽屉
      activeKey: 'currMonth',
      customDateTimeValue: [] as any // 自定义时间
  })

  // 请求table接口数据
 function reqTableDataFunc(params){
      return $getTeamUserList(vdata.recordId, Object.assign(params, {queryDateRange: vdata.activeKey}))
    }

  function show (recordId) { // 弹层打开事件
    vdata.recordId = recordId
    vdata.visible = true
    infoTable.value.refTable(true)
  }

  function onClose () {
    vdata.visible = false
  }

  function changeDateTime() {
    if (vdata.activeKey != 'customDateTime') {
      infoTable.value.refTable(true)
    }else {
      customDateTimeChange()
    }
  }

  function  updateTeamLeader (record, state) { // 【更新状态】
      const title = state === 1 ? '确定[任命]此成员为队长？' : '确定[取消]此成员队长职务？'
      const content = state === 1 ? '任命队长后此成员可管理其他成员' : '取消队长职务后将不在可以管理其他成员'

      return new Promise<void>((resolve, reject) => {
        $infoBox.confirmDanger(title, content, () => {
          return reqLoad.updateById(API_URL_SYS_USER_LIST, record.sysUserId, { isTeamLeader: state, userType: record.userType, teamId: record.teamId }).then(res => {
            infoTable.value.refTable(true)
            resolve()
          }).catch(err => reject(err))
        },
          () => {
          reject(new Error())
        })
      })
    }

  function customDateTimeChange() {
    if (vdata.customDateTimeValue) {
      const queryDateRange = 'customDateTime_' + vdata.customDateTimeValue[0].format('YYYY-MM-DD HH:mm:ss') + '_' + vdata.customDateTimeValue[1].format('YYYY-MM-DD HH:mm:ss')
      vdata.activeKey = queryDateRange
      infoTable.value.refTable(true)
    }
  }

defineExpose({
  show //抛出show函数给父组件
})
</script>