<template>
  <a-table :columns="columns" :data="data">
    <template #name="{ record }">
      {{ record.owner ? record.name + '(我)' : record.name }}
    </template>
    <template #operate="{ record }">
      <a-button type="text" v-if="record.owner" @click="handleClick(2)">{{ $t('management.table.transfer') }}</a-button>
      <a-button type="text" v-if="!record.owner && record.status_code == 1" @click="handleClick(0)">{{
        $t('management.table.forbidden')
      }}</a-button>
      <a-button type="text" status="danger" v-if="!record.owner && record.status_code == 2" @click="handleClick(1)">{{
        $t('management.table.delete')
      }}</a-button>
    </template>
  </a-table>
  <ToolsModal v-if="show_modal" :show_modal="show_modal" :type="target_type" @close="closeToolsModal"></ToolsModal>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import ToolsModal from './ToolsModal.vue';
import { getStatus, getPermission } from './use_table_config';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const columns = computed(() => {
  return [
    {
      title: t('management.table.name'),
      dataIndex: 'name',
      slotName: 'name'
    },
    {
      title: t('management.table.add_time'),
      dataIndex: 'time',
      slotName: 'time'
    },
    {
      title: t('management.table.status'),
      dataIndex: 'status',
      slotName: 'status'
    },
    {
      title: t('management.table.permission'),
      dataIndex: 'permission',
      slotName: 'permission'
    },
    {
      title: t('management.table.operate'),
      dataIndex: 'operate',
      slotName: 'operate'
    }
  ];
});
const data = reactive([
  {
    key: '1',
    name: '张三',
    time: '2025-02.12',
    status_code: 1,
    status: getStatus(1),
    permission: getPermission(1),
    owner: 1
  },
  {
    key: '1',
    name: '张三',
    time: '2025-02.12',
    status_code: 2,
    status: getStatus(2),
    permission: getPermission(2)
  },
  {
    key: '1',
    name: '张三',
    time: '2025-02.12',
    status_code: 1,
    status: getStatus(1),
    permission: getPermission(1)
  }
]);

const show_modal = ref(false);
const target_type = ref(0);
const handleClick = (type) => {
  target_type.value = type;
  show_modal.value = true;
};
const closeToolsModal = () => {
  show_modal.value = false;
};
</script>
<style scoped></style>
