<script setup>
import AppList from '@/components/base/AppList.vue'
import { getNameByValue } from '@/utils/dictionary'
import { useMapStore } from '@/stores/map'
import { getGroupMembers } from '@/api/base'
const statusList = useMapStore().getMapValuesByKey('system_status')
const genderList = useMapStore().getMapValuesByKey('system_gender')
const connectionTypeList = useMapStore().getMapValuesByKey('experiment_connection_type')

const props = defineProps(['data'])

// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getGroupMembers,
      params: { group_id: props.data.id }
    },
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '用户ID', prop: 'id' },
      { label: '姓名', prop: 'name' },
      {
        label: '性别',
        prop: 'gender',
        computed({ row }) {
          return getNameByValue(row.gender, genderList)
        }
      },
      { label: '手机号码', prop: 'mobile' },
      {
        label: '来源连接',
        prop: 'experiment_connection_id',
        computed({ row }) {
          return getNameByValue(row.connection.type.toString(), connectionTypeList)
        }
      },
      {
        label: '状态',
        prop: 'status',
        computed({ row }) {
          return getNameByValue(row.status, statusList)
        }
      },
      { label: '更新人', prop: 'updated_operator.real_name' },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x' }
    ]
  }
})
</script>

<template>
  <el-dialog title="群组用户" width="1000px">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-x="{ row }">
        <el-button type="primary" plain>
          <router-link target="_blank" :to="{ path: '/user/image', query: { user_id: row.id, experiment_id: row.experiment_id } }">查看</router-link>
        </el-button>
      </template>
    </AppList>
  </el-dialog>
</template>
