<script setup>
import ChartCard from '@/components/ChartCard.vue'
import UserChart from '../components/UserChart.vue'
import UserLabel from '../components/UserLabel.vue'
import { DataLine } from '@element-plus/icons-vue'
import { useUser } from '@/composables/useAllData'
import { useMapStore } from '@/stores/map'
import { getNameByValue } from '@/utils/dictionary'
import * as api from '../api'

const connectionTypeList = useMapStore().getMapValuesByKey('experiment_connection_type')
const statusList = useMapStore().getMapValuesByKey('system_status')

const { userValue, userList } = useUser()
const info = ref()
async function fetchInfo() {
  const res = await api.getExperiment()
  info.value = res.data.detail
}
onMounted(fetchInfo)

watch(userValue, () => {
  handleStart()
})

async function handleStart() {
  fetchGender()
  fetchConnections()
  fetchStatus()
}
const loading = computed(() => {
  return loading1.value || loading2.value || loading3.value
})

// 用户性别分布
const loading1 = ref(false)
const gender = ref([])
const userTotal = ref(0)
async function fetchGender() {
  if (!userValue.value) return
  loading1.value = true
  try {
    const res = await api.getMemberGender({ sso_id: userValue.value })
    gender.value = res.data.items
    userTotal.value = res.data.total
  } finally {
    loading1.value = false
  }
}
const genderOption = computed(() => {
  if (!gender.value.length) return
  const manIcon =
    'path://M21.696 10.368c-0.032-1.888-1.344-3.136-3.2-3.136h-5.12c-1.792 0.032-3.104 1.344-3.104 3.136v6.4c0 0.704 0.48 1.216 1.12 1.248 0.736 0 1.248-0.48 1.248-1.248v-5.6c0-0.16 0.096-0.32 0.16-0.48 0.064 0.16 0.16 0.32 0.16 0.48v17.568c0.032 0.544 0.384 1.024 0.896 1.184 0.992 0.32 1.856-0.32 1.888-1.344v-8.736c0-0.192-0.096-0.512 0.256-0.512 0.32 0 0.224 0.32 0.224 0.512 0 2.88 0 5.728 0.032 8.608 0 0.32 0.064 0.672 0.224 0.928 0.288 0.544 0.96 0.736 1.6 0.544 0.576-0.16 0.96-0.64 0.96-1.312v-17.408c0-0.16 0.096-0.32 0.128-0.48 0.064 0.16 0.16 0.32 0.16 0.48v5.472c0 0.416 0.096 0.8 0.48 1.088 0.384 0.256 0.8 0.32 1.216 0.096 0.512-0.224 0.672-0.672 0.672-1.184 0.015-0.938 0.024-2.044 0.024-3.152s-0.009-2.214-0.026-3.319l0.002 0.167zM15.968 6.912c1.408 0 2.464-1.056 2.464-2.464 0-1.344-1.088-2.432-2.432-2.432s-2.496 1.12-2.464 2.464c0 1.344 1.088 2.4 2.432 2.432z'
  const womanIcon =
    'path://M22.784 16.512c-0.032-0.256-0.096-0.512-0.16-0.768-0.384-2.048-0.832-4.096-1.216-6.144-0.224-1.248-1.44-2.336-2.688-2.336-0.8-0.015-1.743-0.024-2.688-0.024s-1.888 0.009-2.829 0.026l0.141-0.002c-0.16 0-0.352 0-0.512 0.032-1.312 0.384-2.048 1.248-2.304 2.624-0.384 2.176-0.864 4.32-1.28 6.496-0.16 0.736 0.224 1.376 0.864 1.504 0.672 0.128 1.248-0.256 1.408-0.992l1.216-5.92c0.032-0.128 0.096-0.224 0.128-0.352l0.128 0.064c0 0.128 0.032 0.256 0 0.384-0.16 0.8-0.32 1.632-0.48 2.432-0.544 2.624-1.056 5.248-1.6 7.84-0.096 0.48 0.032 0.608 0.512 0.608h1.568v6.56c0 0.896 0.576 1.44 1.44 1.44 0.64 0 1.312-0.576 1.312-1.44-0.032-2.048-0.032-4.096-0.032-6.144v-0.384h0.544v6.592c0 0.736 0.448 1.28 1.12 1.376 0.992 0.128 1.632-0.448 1.632-1.472v-6.528h1.536c0.576 0 0.672-0.096 0.576-0.704l-1.728-8.448c-0.128-0.64-0.256-1.248-0.384-1.888 0-0.064 0.064-0.16 0.096-0.256 0.064 0.064 0.096 0.128 0.16 0.192 0 0.032 0 0.096 0.032 0.16 0.384 1.984 0.8 3.968 1.216 5.952 0.128 0.672 0.736 1.088 1.344 0.96 0.672-0.128 1.056-0.768 0.928-1.44zM16.032 6.912c1.312-0.032 2.4-1.12 2.368-2.464 0-0.010 0-0.022 0-0.033 0-1.332-1.071-2.413-2.399-2.431l-0.002-0c-1.344 0-2.4 1.088-2.4 2.464 0 1.344 1.088 2.464 2.432 2.464z'
  const [man = { total: 0, group_name: '1' }, woman = { total: 0, group_name: '2' }] = gender.value
  return {
    grid: { left: '60', right: '60' },
    tooltip: {
      trigger: 'item'
    },
    yAxis: {
      data: ['男性', '女性'],
      inverse: true,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        formatter: function (value, index) {
          const total = parseInt(man.total) + parseInt(woman.total)
          return value + '\n' + (index === 0 ? ((man.total / total) * 100).toFixed(1) : ((woman.total / total) * 100).toFixed(1)) + '%'
        }
      }
    },
    xAxis: {
      splitLine: { show: false },
      axisLabel: { show: false },
      axisTick: { show: false },
      axisLine: { show: false }
    },
    series: [
      {
        type: 'pictorialBar',
        symbolRepeat: true,
        symbolSize: ['14', '28'],
        symbolOffset: [20, 0],
        symbolMargin: 10,
        data: [
          { value: man.total, symbol: manIcon, itemStyle: { color: '#767aca' } },
          { value: woman.total, symbol: womanIcon, itemStyle: { color: '#d26080' } }
        ]
      }
    ]
  }
})

// 用户数据来源分布
const loading2 = ref(false)
const connection = ref([])
async function fetchConnections() {
  if (!userValue.value) return
  loading2.value = true
  try {
    const res = await api.getMemberConnections({ sso_id: userValue.value })
    connection.value = res.data.items.map(item => {
      return { ...item, group_name: getNameByValue(item.group_name, connectionTypeList) }
    })
  } finally {
    loading2.value = false
  }
}
const connectionOption = computed(() => {
  if (!connection.value.length) return
  return {
    grid: { left: '5%', top: '10%', right: '5%', bottom: '5%', containLabel: true },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      axisLabel: { interval: 0 },
      data: connection.value.map(item => item.group_name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '数据',
        type: 'bar',
        label: { show: true, position: 'top' },
        data: connection.value.map(item => item.total)
      }
    ]
  }
})

// 用户数据来源分布
const loading3 = ref(false)
const status = ref([])
async function fetchStatus() {
  if (!userValue.value) return
  loading3.value = true
  try {
    const res = await api.getMemberStatus({ sso_id: userValue.value })
    status.value = res.data.items.map(item => {
      return { name: getNameByValue(item.group_name, statusList), value: item.total }
    })
  } finally {
    loading3.value = false
  }
}
const statusOption = computed(() => {
  if (!status.value.length) return
  return {
    grid: { left: '5%', top: '10%', right: '5%', bottom: '5%', containLabel: true },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}<br />{d}%'
    },
    series: [
      {
        type: 'pie',
        label: { formatter: '{b}\n{d}%' },
        itemStyle: { borderRadius: 6 },
        radius: [0, '70%'],
        data: status.value
      }
    ]
  }
})
</script>

<template>
  <AppCard title="用户分析">
    <el-form inline label-suffix="：">
      <el-form-item label="实验名称">{{ info?.name }}</el-form-item>
      <el-form-item label="请选择学生/老师">
        <el-select v-model="userValue" filterable>
          <el-option v-for="item in userList" :label="item.name" :value="item.sso_id" :key="item.sso_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="DataLine" :loading="loading" @click="handleStart">分析</el-button>
      </el-form-item>
      <el-divider style="margin: 10px 0" />
      <el-form-item label="用户总数">
        <b class="total">{{ userTotal }}</b>
      </el-form-item>
    </el-form>
    <UserLabel :ssoId="userValue"></UserLabel>
    <div class="row">
      <ChartCard title="用户性别分布" :options="genderOption" :loading="loading1"></ChartCard>
      <ChartCard title="用户数据来源分布" :options="connectionOption" :loading="loading2"></ChartCard>
      <ChartCard title="用户状态分布" :options="statusOption" :loading="loading3"></ChartCard>
    </div>
    <div class="row">
      <UserChart :ssoId="userValue" />
      <UserChart :ssoId="userValue" />
      <UserChart :ssoId="userValue" />
    </div>
  </AppCard>
</template>

<style lang="scss" scoped>
.total {
  font-size: 16px;
  font-weight: bold;
  color: var(--main-color);
}
.row {
  display: flex;
  gap: 20px;
  & + .row {
    margin-top: 20px;
  }
}
</style>
