<template>
    <div class="page">
        <div class="ele-body">
            <a-card :bordered="false" :body-style="{ padding: '16px' }">
                <ele-pro-table
                    ref="tableRef"
                    row-key="accessoryId"
                    :columns="columns"
                    :datasource="datasource"
                    v-model:selection="selection"
                    :customRow="customRow"
                    tool-class="ele-toolbar-form"
                    :scroll="{ x: 3000 }"
                    class="sys-org-table"
                >
                    <template #toolbar>
                        <search
                            @search="reload"
                            :selection="selection"
                            @add="openEdit"
                            @remove="removeBatch"
                            @batchMove="openMove"
                        />
                    </template>
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'accessoryName'">
                            <a-avatar
                                :size="30"
                                :src="`${record.accessoryAvatar}`"
                                style="margin-right: 4px"
                                :srcset="`https://file.wsdns.cn/${record.accessoryAvatar}`"
                            >
                                <template #icon>
                                    <UserOutlined />
                                </template>
                            </a-avatar>
                            <a-tooltip title="查看详情">
                                <a href="#" @click="openInfo(record)">{{
                                        record.accessoryName
                                    }}</a>
                            </a-tooltip>
                        </template>
                        <template v-if="column.key === 'progress'">
                            <div v-for="(d, i) in progressDict" :key="i">
                                <span v-if="d.value === record.progress">{{ d.label }}</span>
                            </div>
                        </template>
                        <template v-if="column.key === 'accessoryType'">
                            <div v-for="(d, i) in JSON.parse(accessoryType)" :key="i">
                <span v-if="d.value === record.accessoryType">{{
                        d.value
                    }}</span>
                            </div>
                        </template>
                        <template v-if="column.key === 'status'">
                            <a-tag v-if="record.status === 0" color="green">正常</a-tag>
                            <a-tag v-if="record.status === 1" color="red">待审核</a-tag>
                            <a-tag v-if="record.status === 2" color="purple">已驳回</a-tag>
                        </template>
                        <template v-if="column.key === 'nickname'">
                            <a-tooltip :title="`${record.nickname}`">
                                <a-avatar :src="record.userAvatar" size="small" />
                            </a-tooltip>
                        </template>
                        <template v-if="column.key === 'createTime'">
                            <a-tooltip :title="`${toDateString(record.createTime)}`">
                                {{ timeAgo(record.createTime) }}
                            </a-tooltip>
                        </template>
                        <template v-if="column.key === 'action'">
                            <a-space>
                                <a @click="openEdit(record)">修改</a>
                                <!--                <a-divider type="vertical" />-->
                                <!--                <a>库存分布</a>-->
                                <a-divider type="vertical" />
                                <a-popconfirm
                                    title="确定要删除此记录吗？"
                                    @confirm="remove(record)"
                                >
                                    <a class="ele-text-danger">删除</a>
                                </a-popconfirm>
                            </a-space>
                        </template>
                    </template>
                </ele-pro-table>
            </a-card>

            <!-- 编辑弹窗 -->
            <AccessoryEdit
                v-model:visible="showEdit"
                :data="current"
                :category-list="data"
                :model-tree="data2"
                :model-list="data2List"
                @done="reload"
            />
            <!-- 批量转移弹窗 -->
            <!--    <AccessoryMove v-model:visible="showMove" :data="selection" @done="batchMove" />-->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, createVNode, ref } from "vue";
import { message, Modal } from "ant-design-vue";
import {
    ExclamationCircleOutlined,
    UserOutlined
} from "@ant-design/icons-vue";
import type { EleProTable } from "ele-admin-pro";
import type {
    DatasourceFunction,
    ColumnItem
} from "ele-admin-pro/es/ele-pro-table/types";
import { toDateString, toTreeData } from "ele-admin-pro";
import Search from "./components/search.vue";
import AccessoryEdit from "./components/accessory-edit.vue";
import {
    pageAccessory,
    removeAccessory,
    removeBatchAccessory
} from "@/api/tower/accessory";
import { timeAgo } from "ele-admin-pro";
import type { Accessory, AccessoryParam } from "@/api/tower/accessory/model";
import { useUserStore } from "@/store/modules/user";
import { Category } from "@/api/goods/category/model";
import { listCategory } from "@/api/goods/category";
import { listTowerModel } from "@/api/tower/model";
import { TowerModel } from "@/api/tower/model/model";

const userStore = useUserStore();
// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
const accessoryType = localStorage.getItem("accessoryType");

// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

// 表格选中数据
const selection = ref<Accessory[]>([]);
// 当前编辑数据
const current = ref<Accessory | null>(null);
// 树形数据
const data = ref<Category[]>([]);
const data2 = ref<TowerModel[]>([]);
const data2List = ref<TowerModel[]>([]);

// 是否显示资产详情
const showInfo = ref(false);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示批量移动弹窗
const showMove = ref(false);
// 加载状态
const loading = ref(true);
// 树展开的key
const expandedRowKeys = ref<number[]>([]);
// 树选中的key
const selectedRowKeys = ref<number[]>([]);

// 表格数据源
const datasource: DatasourceFunction = ({
                                            page,
                                            limit,
                                            where,
                                            orders,
                                            filters
                                        }) => {
    if (filters) {
        where.progress = filters.progress;
        where.accessorySource = filters.accessorySource;
        where.accessoryType = filters.accessoryType;
        where.status = filters.status;
    }
    return pageAccessory({
        ...where,
        ...orders,
        page,
        limit
    });
};

// 表格列配置
const columns = ref<ColumnItem[]>([
    {
        key: "index",
        width: 48,
        align: "center",
        fixed: "left",
        hideInSetting: true,
        customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
    },
    {
        title: "配件编号",
        dataIndex: "accessoryNo"
    },
    {
        title: "生成厂家",
        dataIndex: "accessoryName"
    },
    {
        title: "配件分类",
        dataIndex: "accessoryCategory"
    },
    {
        title: "适用设备型号",
        dataIndex: "accessoryModel"
    },
    {
        title: "配件规格",
        dataIndex: "accessorySpecs"
    },
    {
        title: "单价",
        dataIndex: "accessoryPrice"
    },
    {
        title: "购买数量",
        dataIndex: "accessoryNum"
    },
    {
        title: "配件单位",
        dataIndex: "accessoryUnit"
    },
    {
        title: "产权单位名称",
        dataIndex: "companyName"
    },
    {
        title: "制造厂商",
        dataIndex: "manufactor"
    },
    {
        title: "制造厂商编号",
        dataIndex: "manufactorNo"
    },
    {
        title: "使用年限",
        dataIndex: "lifeYear"
    },
    {
        title: "出厂日期",
        dataIndex: "factoryDate",
        customRender: ({ text }) => toDateString(text, "yyyy-MM-dd")
    },
    {
        title: "报废日期",
        dataIndex: "scrapDate",
        customRender: ({ text }) => toDateString(text, "yyyy-MM-dd")
    },
    {
        title: "操作",
        key: "action",
        width: 200,
        fixed: "right",
        align: "center",
        hideInSetting: true
    }
]);

/* 搜索 */
const reload = (where?: AccessoryParam) => {
    console.log(where);
    selection.value = [];
    tableRef?.value?.reload({ where: where });
};

/* 打开编辑弹窗 */
const openEdit = (row?: Accessory) => {
    current.value = row ?? null;
    showEdit.value = true;
};

/* 打开批量移动弹窗 */
const openMove = () => {
    showMove.value = true;
};

/* 打开用户详情弹窗 */
const openInfo = (row?: Accessory) => {
    current.value = row ?? null;
    showInfo.value = true;
};

/* 删除单个 */
const remove = (row: Accessory) => {
    const hide = message.loading("请求中..", 0);
    removeAccessory(row.accessoryId)
        .then((msg) => {
            hide();
            message.success(msg);
            reload();
        })
        .catch((e) => {
            hide();
            message.error(e.message);
        });
};

/* 批量转移 */
const batchMove = (userId) => {
    console.log(userId, "批量转移0000");
    console.log(selection.value);
};

/* 批量删除 */
const removeBatch = () => {
    if (!selection.value.length) {
        message.error("请至少选择一条数据");
        return;
    }
    Modal.confirm({
        title: "提示",
        content: "确定要删除选中的记录吗?",
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        onOk: () => {
            const hide = message.loading("请求中..", 0);
            removeBatchAccessory(
                selection.value.map((d) => {
                    if (loginUser.value.userId === d.userId) {
                        return d.accessoryId;
                    }
                })
            )
                .then((msg) => {
                    hide();
                    message.success(msg);
                    reload();
                })
                .catch((e) => {
                    hide();
                    message.error(e.message);
                });
        }
    });
};

/* 查询 */
const query = () => {
    loading.value = true;
    listCategory()
        .then((list) => {
            loading.value = false;
            const eks: number[] = [];
            list.forEach((d) => {
                d.key = d.categoryId;
                d.value = d.categoryId;
                if (typeof d.categoryId === "number") {
                    eks.push(d.categoryId);
                }
            });
            expandedRowKeys.value = eks;
            data.value = toTreeData({
                data: list,
                idField: "categoryId",
                parentIdField: "parentId"
            });
            if (list.length) {
                if (typeof list[0].categoryId === "number") {
                    selectedRowKeys.value = [list[0].categoryId];
                }
            } else {
                selectedRowKeys.value = [];
            }
        })
        .catch((e) => {
            loading.value = false;
            message.error(e.message);
        });
};

/* 自定义行属性 */
const customRow = (record: Accessory) => {
    return {
        // 行点击事件
        onClick: () => {
            // console.log(record);
        },
        // 行双击事件
        onDblclick: () => {
            openEdit(record);
        }
    };
};

query();
</script>

<script lang="ts">
export default {
    name: "Accessory"
};
</script>

<style lang="less" scoped>
.sys-org-table :deep(.ant-table-body) {
    overflow: auto !important;
    overflow: overlay !important;
}

.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
    padding: 0 4px;
    margin-bottom: 0;
}
</style>
