<script setup lang="ts">
// import { UserFilled } from '@element-plus/icons-vue'
import { getMemberImage, getMemberFieldsList, getConnectionList } from '../api'
import type { MemberFieldsProp, ImageProp, ConnectionsProp } from '../types'
import Icon from '@/components/ConnectionIcon.vue'

const ViewEvent = defineAsyncComponent(() => import('@/components/ViewEvent.vue'))
const ViewLabel = defineAsyncComponent(() => import('@/components/ViewLabel.vue'))
const ViewGroup = defineAsyncComponent(() => import('@/components/ViewGroup.vue'))

const route = useRoute()

const userId = computed(() => {
  return route.query.user_id as string
})

// 画像数据
let data = $ref<ImageProp>()
// 属性
let fieldsList = $ref<MemberFieldsProp[]>([])
onMounted(() => {
  // 画像
  getMemberImage({ id: userId.value, 'per-page': 100 }).then(res => {
    data = res.data
    getFields(res.data)
  })
  // 属性
})

const getFields = function (data: { fields: any }) {
  getMemberFieldsList().then(res => {
    fieldsList = res.data.map((item: MemberFieldsProp) => {
      if (data.fields[item.id]) {
        item.value = data.fields[item.id]
        item.isShow = true
      }
      return item
    })
  })
}

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

// 查看事件
const viewEventVisible = ref(false)
const currentViewEvent = ref()
function handleViewEvent(item: any) {
  viewEventVisible.value = true
  currentViewEvent.value = item
}
// 查看标签
const viewLabelVisible = ref(false)
const currentViewLabel = ref()
function handleViewLabel(item: any) {
  viewLabelVisible.value = true
  currentViewLabel.value = item
}

// 查看群组
const viewGroupVisible = ref(false)
const currentViewGroup = ref()
function handleViewGroup(item: any) {
  viewGroupVisible.value = true
  currentViewGroup.value = item
}

// 获取链接
const connectionList = ref<ConnectionsProp[]>([])
const currentConnection = ref('')
async function fetchConnections() {
  const { data } = await getConnectionList()
  connectionList.value = data
  if (data.length) {
    currentConnection.value = data[0]?.id
  }
}
onMounted(() => {
  fetchConnections()
})

const event: any = reactive({ page: 1, total: 0, list: [] })
async function fetchEvent(isReset = false) {
  if (isReset) {
    Object.assign(event, { page: 1, total: 0, list: [] })
  }
  const { data } = await getMemberImage({ id: userId.value, connection_id: currentConnection.value, page: event.page, 'per-page': 20 })
  Object.assign(event, { page: event.page + 1, total: data.events.total, list: [...event.list, ...data.events.list] })
}
watch(currentConnection, () => {
  fetchEvent(true)
})
</script>

<template>
  <AppCard class="card" style="margin-bottom: 10px">
    <div class="info-box" v-if="data">
      <div class="info-name" style="min-width: 300px">
        <div class="tx">
          <img
            :src="data.gender === '1' ? 'https://webapp-pub.ezijing.com/pages/assa/dml_boy.png' : 'https://webapp-pub.ezijing.com/pages/assa/dml_girl.png'" />
          <!-- https://webapp-pub.ezijing.com/pages/assa/dml_boy.png -->
          <!-- <el-icon :size="50" color="#fff"><UserFilled /></el-icon> -->
        </div>
        <h1>{{ data.name }}</h1>
        <div class="line"></div>
      </div>
      <div style="display: flex; justify-content: space-around; width: 100%">
        <el-form label-suffix="：" label-width="auto">
          <el-form-item label="来源链接">{{ data.connection_name }} </el-form-item>
          <el-form-item label="创建时间">{{ data.created_time }} </el-form-item>
          <!-- <el-form-item label="用户ID">{{ data.id }}            </el-form-item
          > -->
        </el-form>
        <el-form label-suffix="：" label-width="110px">
          <el-form-item label="用户ID">{{ data.id }} </el-form-item>
          <el-form-item label="状态">
            <span :style="`color: ${data.status === '1' ? 'rgba(0,172,39,1)' : '#ba143e'}`">{{ data.status_name }}</span>
          </el-form-item>
        </el-form>
        <el-form label-suffix="：" label-width="110px">
          <el-form-item label="最近活跃时间">{{ data.updated_time }} </el-form-item>
          <el-form-item label="最近活跃时间" style="opacity: 0">{{ data.updated_time }} </el-form-item>
        </el-form>
      </div>
    </div>
  </AppCard>
  <div class="card-box">
    <AppCard class="card" style="overflow-y: scroll" title="用户属性">
      <div style="display: flex; justify-content: center" v-if="data">
        <el-form label-suffix="：" label-width="auto">
          <el-form-item label="链接来源">{{ data.connection_name }}</el-form-item>
          <el-form-item label="姓名">{{ data.name }}</el-form-item>
          <el-form-item label="状态">{{ data.status_name }}</el-form-item>
          <el-form-item label="性别">{{ data.gender_name }}</el-form-item>
          <el-form-item label="电话">{{ data.mobile }}</el-form-item>
          <template v-for="item in fieldsList" :key="item.id">
            <el-form-item :label="item.name" v-if="item.isShow">
              <span>{{ item.value }}</span>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </AppCard>
    <AppCard class="card" title="用户标签">
      <el-tabs class="demo-tabs">
        <el-tab-pane label="当前标签">
          <div class="scroll" v-if="data?.tags && data.tags.length">
            <el-tag class="ml-2" type="success" v-for="(item, index) in data.tag_list" :key="index" @click="handleViewLabel(item)">{{ item.name }}</el-tag>
          </div>
          <el-empty description="暂无数据" :image-size="80" v-else />
        </el-tab-pane>
      </el-tabs>
      <el-tabs class="demo-tabs">
        <el-tab-pane label="历史标签">
          <div class="scroll" v-if="data?.history_tags && data.history_tags.length">
            <el-tag class="ml-2" type="success" v-for="(item, index) in data.history_tags" :key="index">{{ item }}</el-tag>
          </div>
          <el-empty description="暂无数据" :image-size="80" v-else />
        </el-tab-pane>
      </el-tabs>
    </AppCard>
    <AppCard class="card" title="用户分群">
      <el-tabs class="demo-tabs">
        <el-tab-pane label="静态群组">
          <div class="scroll" v-if="data?.static_groups && data.static_groups.length">
            <el-tag class="ml-2" type="success" v-for="(item, index) in data.static_group_list" :key="index" @click="handleViewGroup(item)">{{
              item.name
            }}</el-tag>
          </div>
          <el-empty description="暂无数据" :image-size="80" v-else />
        </el-tab-pane>
      </el-tabs>
      <el-tabs class="demo-tabs">
        <el-tab-pane label="动态群组">
          <div class="scroll" v-if="data?.dynamic_groups && data.dynamic_groups.length">
            <el-tag class="ml-2" type="success" v-for="(item, index) in data.dynamic_group_list" :key="index" @click="handleViewGroup(item)">{{
              item.name
            }}</el-tag>
          </div>
          <el-empty description="暂无数据" :image-size="80" v-else />
        </el-tab-pane>
      </el-tabs>
    </AppCard>
    <AppCard class="card" title="用户行为轨迹">
      <div style="text-align: center">
        <el-radio-group v-model="currentConnection">
          <el-radio-button :value="item.id" v-for="item in connectionList" :key="item.id">{{ item.type_name }}</el-radio-button>
        </el-radio-group>
      </div>
      <template v-if="event.list.length">
        <div class="event-box" v-for="(item, index) in event.list" :key="index">
          <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 class="icon" :multiColor="true" :name="item.connection_type" w="20" h="20"></Icon>
            <div class="event">
              在<span>"{{ item.connection_name }}"</span> 上
              <span style="cursor: pointer" @click="handleViewEvent(item)">"{{ item.event_name }}"</span>
            </div>
            <el-button @click="handleViewEvent(item)">详情</el-button>
          </div>
        </div>
        <el-row justify="center" style="margin: 20px">
          <el-button @click="fetchEvent()" v-if="event.total > event.list.length">更多行为</el-button>
        </el-row>
      </template>
      <el-empty description="暂无数据" :image-size="80" v-else />
    </AppCard>
  </div>
  <!-- 事件详情 -->
  <ViewEvent v-model="viewEventVisible" :event="currentViewEvent" :user="data" v-if="viewEventVisible && currentViewEvent"></ViewEvent>
  <!-- 查看标签 -->
  <ViewLabel v-model="viewLabelVisible" :data="currentViewLabel" v-if="viewLabelVisible && currentViewLabel"></ViewLabel>
  <!-- 查看群组 -->
  <ViewGroup v-model="viewGroupVisible" :data="currentViewGroup" v-if="viewGroupVisible && currentViewGroup"></ViewGroup>
</template>
<style lang="scss">
.info-box {
  display: flex;
  align-items: center;
  .info-name {
    display: flex;
    align-items: center;
    .tx {
      width: 80px;
      height: 80px;
      background: #000;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  h1 {
    font-size: 30px;
    margin-left: 20px;
  }
  .line {
    width: 1px;
    height: 100px;
    background: #ccc;
    margin: 0 50px;
  }
}
.ml-2 {
  margin-right: 10px;
}
.card-box {
  display: flex;
  column-gap: 10px;
  .card {
    flex: 1;
    margin-top: 0;
    height: 80vh;
    .demo-tabs {
      height: 26vh;
    }
  }
}
.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;
  .time {
    color: #ccc;
  }
  .icon {
    margin: 0 5px;
  }
  span {
    color: #ba143e;
    font-weight: bold;
  }
  .event {
    flex: 1;
  }
}
</style>
