<script setup lang="ts">
import type { Group, GroupMember } from '../types'
import { ElMessage } from 'element-plus'
import AppList from '@/components/base/AppList.vue'
import { getNameByValue, groupTypeList } from '@/utils/dictionary'
import { useMapStore } from '@/stores/map'
import { searchGroupMembers, addGroupMembers } from '../api'

const props = defineProps<{
  data: Group
}>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

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

const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: searchGroupMembers,
      params: { group_id: props.data.id }
    },
    columns: [
      { type: 'selection' },
      { label: '序号', type: 'index', width: 60 },
      { label: '用户ID', prop: 'id' },
      { label: '姓名', prop: 'name' },
      { label: '性别', prop: 'gender' },
      { label: '手机号码', prop: 'mobile' },
      { label: '来源连接', prop: 'experiment_connection_id' },
      { label: '状态', prop: 'status' },
      { label: '更新人', prop: 'updated_operator.real_name' },
      { label: '更新时间', prop: 'updated_time' }
    ]
  }
})

let multipleSelection = $ref<GroupMember[]>([])
function handleSelectionChange(selection: GroupMember[]) {
  multipleSelection = selection
}
// 添加
function handleAdd() {
  const ids = multipleSelection.map(item => item.id)
  addGroupMembers({ group_id: props.data.id, user_ids: ids }).then(() => {
    ElMessage({ message: '添加成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
</script>

<template>
  <el-dialog title="添加群组用户" width="980px" append-to-body @closed="$emit('update:modelValue', false)">
    <el-form label-suffix="：" label-width="82px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="群组名称">{{ data.name }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="群组类型">{{ getNameByValue(data.type, groupTypeList) }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态">
            <el-tag :type="data.status === '1' ? 'success' : 'danger'">
              {{ getNameByValue(data.status, statusList) }}
            </el-tag>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <AppList v-bind="listOptions" ref="appList" @selection-change="handleSelectionChange">
      <template #table-status="{ row }: { row: Group }">
        <el-tag :type="row.status === '1' ? 'success' : 'danger'">
          {{ getNameByValue(row.status, statusList) }}
        </el-tag>
      </template>
    </AppList>

    <template #footer>
      <el-row justify="center">
        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" plain auto-insert-space @click="handleAdd" :disabled="!multipleSelection.length"
          >添加</el-button
        >
      </el-row>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.group-box {
  display: flex;
  justify-content: space-between;
  dt {
    margin-bottom: 10px;
    text-align: center;
  }
  dd {
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      padding: 0 5px;
    }
  }
}
.group-box__count {
  font-weight: bold;
  color: var(--main-color);
}
</style>
