<template>
  <a-spin :spinning="loading">
    <!--    <a-button type="primary" style="margin-bottom: 10px" @click="add">-->
    <!--      <span>添加</span>-->
    <!--    </a-button>-->
    <a-space style="margin-bottom: 15px">
      <SelectStaff :placeholder="`添加可见成员`" @done="addUsers10" />
      <SelectStaff :placeholder="`添加项目联系人`" @done="addUsers20" />
    </a-space>
    <a-table
      size="middle"
      row-key="projectOrderId"
      :pagination="false"
      :data-source="list"
      :columns="columns"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'level'">
          <a-tag color="orange" v-if="record.user && record.user.userLevel">{{ USER_LEVEL_LIST[record.user.userLevel] }}</a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <a-space>
            <a class="ele-text-danger" @click="remove(record, index)">移除</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';
  import type { ColumnsType } from 'ant-design-vue/es/table';
  import { ProjectUser } from '@/api/tower/project/user/model';
  import { removeProjectUser } from '@/api/tower/project/user';
  import { User, USER_LEVEL_LIST } from "@/api/system/user/model";
  import { message } from 'ant-design-vue';

  const props = withDefaults(
    defineProps<{
      value?: ProjectUser[];
      projectId?: number;
      placeholder?: string;
    }>(),
    {
      placeholder: '请选择数据'
    }
  );

  // 已添加成员
  const list = ref<ProjectUser[]>([]);
  // 请求状态
  const loading = ref(false);

  // 列
  const columns = reactive<ColumnsType>([
    {
      key: 'index',
      align: 'center',
      width: 48,
      customRender: ({ index }) => index + 1,
      fixed: 'left'
    },
    {
      title: '类型',
      align: 'center',
      key: 'level'
    },
    {
      title: '所在部门',
      align: 'center',
      dataIndex: 'organizationName'
    },
    {
      title: '姓名',
      align: 'center',
      dataIndex: 'nickname',
      key: 'nickname'
    },
    {
      title: '手机号码',
      align: 'center',
      dataIndex: 'phone',
      key: 'phone'
    },
    {
      title: '加入时间',
      align: 'center',
      dataIndex: 'createTime',
      key: 'createTime'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 100
    }
  ]);

  // 添加可见成员
  const addUsers10 = (data: User) => {
    list.value.push({
      userId: data.userId,
      nickname: data.nickname,
      role: 10,
      phone: data.phone,
      projectId: props.projectId,
      organizationName: data.organizationName
    });
  };
  // 添加项目联系人
  const addUsers20 = (data: User) => {
    list.value.push({
      userId: data.userId,
      nickname: data.nickname,
      role: 20,
      phone: data.phone,
      projectId: props.projectId,
      organizationName: data.organizationName
    });
  };

  /* 删除 */
  const remove = (_row: any, index: number) => {
    removeProjectUser(_row.id).then((msg) => {
      message.success(msg);
    });
    list.value.splice(index, 1);
  };

  watch(
    () => props.value,
    (value) => {
      if (value) {
        list.value = value;
      }
    },
    { immediate: true }
  );
</script>
