<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title=" true ? '操作员详情' : '' "
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    @close="onClose"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="姓名">
            {{ vdata.detailData.realname }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="手机号">
            {{ vdata.detailData.telphone }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="登录名">
            {{ vdata.detailData.loginUsername }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="编号">
            {{ vdata.detailData.userNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="所属团队">
            {{ vdata.detailData.teamName || '无' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.teamId" :sm="12">
        <a-descriptions>
          <a-descriptions-item label="是否队长">
            {{ vdata.detailData.isTeamLeader === 1 ? '是' : '否' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="拓展员性别">
            {{ vdata.detailData.sex === 1 ? '男' : vdata.detailData.sex === 2 ? '女' : '未知' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="状态">
            <a-tag :color="vdata.detailData['state'] === 1?'green':'volcano'">
              {{ vdata.detailData.state === 0?'禁用':vdata.detailData.state === 1?'启用':'未知' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="创建时间">
            {{ vdata.detailData.createdAt }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <a-divider orientation="left" v-if="vdata.detailData.userType === 3">
      <a-tag color="green">
        数据统计
      </a-tag>
    </a-divider>
    <a-tabs v-model:activeKey="vdata.activeKey" @change="changeDateTime" v-if="vdata.detailData.userType === 3">
      <a-tab-pane key="currMonth" tab="本月"><StatDetail :data="vdata.statData" /></a-tab-pane>
      <a-tab-pane key="prevMonth" tab="上月"><StatDetail :data="vdata.statData" /></a-tab-pane>
      <a-tab-pane key="today" tab="今天"><StatDetail :data="vdata.statData" /></a-tab-pane>
      <a-tab-pane key="yesterday" tab="昨天"><StatDetail :data="vdata.statData" /></a-tab-pane>
      <a-tab-pane key="customDateTime" tab="自定义">
        <a-range-picker v-model:value="vdata.customDateTimeValue" show-time @change="customDateTimeChange" />
        <StatDetail :data="vdata.statData" />
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_SYS_USER_LIST, req, $userChart } from '@/api/manage'
import { defineProps, reactive, toRaw } from 'vue'
import StatDetail from './StatDetail.vue'

    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, // 自定义时间
      statData: {}, // 拓展员统计数据
      userType: 0 //操作员类型 1-超级管理员 2-普通操作员 3-商户拓展员
  })

  function show (recordId) { // 弹层打开事件
    vdata.recordId = recordId

    req.getById(API_URL_SYS_USER_LIST, recordId).then(res => {
      vdata.detailData = res
    })
    vdata.visible = true

    changeDateTime()
  }

  function onClose () {
    vdata.visible = false
  }

  function changeDateTime() {
    if (vdata.activeKey != 'customDateTime') {
      $userChart(vdata.recordId, vdata.activeKey).then(res => {
        vdata.statData = res
      })
    }else {
      customDateTimeChange()
    }
  }

  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')
      $userChart(vdata.recordId, queryDateRange).then(res => {
        vdata.statData = res
      })
    }
  }

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