<script setup lang="ts">
import { getExperimentData, getMembersList, getEventList } from '../api'
import Icon from '@/components/ConnectionIcon.vue'
// import { useMapStore } from '@/stores/map'
const ViewEvent = defineAsyncComponent(() => import('@/components/ViewEvent.vue'))

// 左边展示数据
let leftData = $ref<{
  members: string
  tags: string
  groups: string
  files: string
  itineraries: string
  connections: string
}>()
getExperimentData().then(res => {
  leftData = res.data
})

// 最近活跃客户
let userList = $ref<{ name: string; id: string; isActive: boolean; gender: string }[]>([])
getMembersList().then(res => {
  userList = res.data.map((element: any, index: number) => {
    element.isActive = index === 0
    return element
  })
})

const activeUser = computed(() => {
  return userList.find(item => item.isActive)
})
// 最近活跃客户的事件
let eventData = $ref<{ list: Array<any>; total: number }>({ list: [], total: 0 })
const eventCurrentPage = ref(1)
const getEvent = function (id?: string) {
  id = id || activeUser.value?.id
  if (id) {
    getEventList({ member_id: id, page: eventCurrentPage.value, 'per-page': 10 }).then(res => {
      eventData = res.data
    })
  }
}
watchEffect(() => {
  getEvent()
})

// 切换客户事件
const handleUser = (item: any) => {
  userList?.map(item => (item.isActive = false && item))
  item.isActive = true
  eventCurrentPage.value = 1
}

// 获取上下午
const getDate = function (date: string) {
  return parseInt(date.slice(date.indexOf(' '), date.indexOf(' ') + 3)) > 12 ? '下午' : '上午'
}

// const experimentTypeList = useMapStore().getMapValuesByKey('experiment_connection_type')
// const getIcon = function (id: any) {
//   return experimentTypeList.find((item: any) => item.id === id)?.value as string
// }
const currentUser = computed(() => {
  return userList?.find(item => item.isActive)
})

const viewEventVisible = ref(false)
const currentViewEvent = ref()
function handleViewEvent(item: any) {
  viewEventVisible.value = true
  currentViewEvent.value = item
}
</script>

<template>
  <div class="home">
    <div class="home-left_content">
      <div class="content-card">
        <AppCard class="card" title="我的客户：">
          <p>{{ leftData?.members }}</p>
        </AppCard>
        <AppCard class="card" title="我的标签：">
          <p>{{ leftData?.tags }}</p>
        </AppCard>
        <AppCard class="card" title="我的群组：">
          <p>{{ leftData?.groups }}</p>
        </AppCard>
      </div>
      <div class="content-card">
        <AppCard class="card" title="我的营销资料：">
          <p>{{ leftData?.files }}</p>
        </AppCard>
        <AppCard class="card" title="我的旅程：">
          <p>{{ leftData?.itineraries }}</p>
        </AppCard>
        <AppCard class="card" title="我的链接：">
          <p>{{ leftData?.connections }}</p>
        </AppCard>
      </div>
      <AppCard title="当前用户旅程模板数量："><el-empty :image-size="120" /></AppCard>
      <AppCard title="旅程转化目标分析："><el-empty :image-size="120" /></AppCard>
    </div>
    <div class="home-right_content">
      <AppCard class="card" title="最近活跃用户跟踪">
        <div class="content-user">
          <div :class="item.isActive ? 'content-user_item active' : 'content-user_item'" v-for="item in userList" :key="item.id" @click="handleUser(item)">
            <img
              :src="item.gender === '1' ? 'https://webapp-pub.ezijing.com/pages/assa/dml_boy.png' : 'https://webapp-pub.ezijing.com/pages/assa/dml_girl.png'" />
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
        <template v-if="eventData.total">
          <div class="event-box" v-for="item in eventData.list" :key="item.id">
            <div class="date">{{ item.updated_time?.slice(0, item.updated_time.indexOf(' ')) }}</div>
            <div class="event-content">
              <div class="time">
                {{ item.updated_time?.slice(item.updated_time.indexOf(' '), item.updated_time.length - 3) }}
                {{ getDate(item.updated_time) }}
              </div>
              <!-- <Icon :name="item.connection_type" w="30" h="30"></Icon> -->
              <div class="event">
                <Icon class="icon" :name="item.connection_type" :multiColor="true" w="24" h="24"></Icon>
                在
                <span>"{{ item.connection_name }}"</span> 上
                <span style="cursor: pointer" @click="handleViewEvent(item)">"{{ item.event_name }}"</span>
              </div>
            </div>
          </div>
          <div style="display: flex; align-items: center; justify-content: center; margin-top: 20px">
            <el-pagination layout="prev, pager, next" v-model:current-page="eventCurrentPage" :total="eventData.total" hide-on-single-page />
          </div>
        </template>
        <el-empty description="暂无数据" :image-size="80" v-else />
      </AppCard>
    </div>
  </div>
  <!-- 事件详情 -->
  <ViewEvent v-model="viewEventVisible" :event="currentViewEvent" :user="currentUser" v-if="viewEventVisible && currentViewEvent"></ViewEvent>
</template>

<style lang="scss" scoped>
.home {
  display: flex;
  .home-left_content {
    flex: 1;
    .content-card {
      display: flex;
      margin-bottom: 10px;
      gap: 10px;
      .card {
        flex: 1;
        margin: 0;
        p {
          line-height: 100px;
          text-align: center;
          font-size: 28px;
          color: #aa1941;
        }
      }
    }
  }
  .home-right_content {
    width: 40%;
    margin-left: 10px;
    .card {
      height: 100%;
      .content-user {
        background: #efefef;
        padding: 20px;
        border-radius: 5px;
        display: flex;
        flex-wrap: wrap;
        .content-user_item {
          width: 60px;
          // background-color: #fff;
          padding: 10px;
          border-radius: 10px;
          margin-right: 12px;
          cursor: pointer;
          &.active {
            background-color: #fff;
          }
        }
        img {
          width: 50px;
          height: 50px;
          margin: 0 auto;
          display: block;
        }
        .name {
          text-align: center;
          font-size: 14px;
          margin-top: 10px;
        }
      }
    }
  }
}
.event-box {
  border-bottom: 1px solid #ccc;
  padding: 20px 0 5px;
  .date {
    font-size: 14px;
  }
}
.event-content {
  display: flex;
  font-size: 12px;
  align-items: center;
  // margin-bottom: 20px;
  flex-wrap: wrap;
  .event {
    display: flex;
    align-items: center;
  }
  .time {
    color: #ccc;
  }
  .icon {
    margin: 0 5px;
  }
  span {
    color: #ba143e;
    font-weight: bold;
  }
}
</style>
