<template>
    <div>
        <span class="ant-input-wrapper ant-input-group">
            <!-- <input placeholder="请选择资产" type="text" readonly="true" unselectable="on" class="ant-input"> -->
                <a-button type="primary" preIcon="ant-design:plus-outlined" @click="showModal()">选择</a-button>
        </span>
        <!-- table区域-begin -->
        <a-modal title="请选择资产" closable :visible="visible" :width="1000" @cancel="onCancel" @ok="onOk" @close="onClose">
            <div style="margin: -10px;background-color: rgb(236, 236, 236);padding: 10px;">
                <div style="margin-bottom: 10px;">
                    <a-auto-complete v-model="queryParam.recipient" :dataSource="UserdataSource" placeholder="请选择领用人"
                        @select="onSelect" @search="onSearch" @change="onChange" />
                    <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px">查询</a-button>
                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                </div>
                <div class="ant-alert ant-alert-info" style="margin-bottom: 10px;">
                    <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
                        selectedRowKeys.length }}</a>项
                    <a style="margin-left: 24px" @click="onClearSelected">清空</a>
                </div>

                <div style="background-color: #fff;">
                    <a-table style="padding: 10px;" ref="table" size="large" :scroll="{ x: true }" bordered rowKey="id"
                        :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
                        :rowSelection="{ sselectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                        class="j-table-force-nowrap" @change="handleTableChange">
                    </a-table>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { getAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
    mixins: [JeecgListMixin, mixinDevice],

    data() {
        return {
            visible: false,
            value: '',
            dataSource: [],
            UserdataSource: [],
            // 表头
            columns: [
                {
                    title: '仪器编号',
                    align: "center",
                    dataIndex: 'instrumentNumber',
                    width: 120
                },
                {
                    title: '仪器名称',
                    align: "center",
                    dataIndex: 'instrumentName',
                    width: 120
                },
                {
                    title: '领用单位号',
                    align: "center",
                    dataIndex: 'collectingUnitNumber_dictText',
                    width: 200
                },

                {
                    title: '分类号',
                    align: "center",
                    dataIndex: 'categoryId',
                    width: 120
                },
                {
                    title: '型号',
                    align: "center",
                    dataIndex: 'model',
                    width: 120

                },
                {
                    title: '规格',
                    align: "center",
                    dataIndex: 'specifications',
                    width: 120
                },
                {
                    title: '单价',
                    align: "center",
                    dataIndex: 'unitPrice',
                    width: 120
                },
                {
                    title: '厂家',
                    align: "center",
                    dataIndex: 'manufactuer',
                    width: 200
                },
                {
                    title: '购置日期',
                    align: "center",
                    dataIndex: 'purchaseDate',
                    customRender: function (text) {
                        return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
                    },
                    width: 120
                },
                {
                    title: '领用人',
                    align: "center",
                    dataIndex: 'recipient_dictText',
                    width: 80
                },
                {
                    title: '入库时间',
                    align: "center",
                    dataIndex: 'entryDate',
                    customRender: function (text) {
                        return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
                    },
                    width: 80
                },
                {
                    title: '单据号',
                    align: "center",
                    dataIndex: 'documentNumber'
                },
                {
                    title: '存放地址',
                    align: "center",
                    dataIndex: 'locationName',
                    width: 120
                },
                {
                    title: '备注',
                    align: "center",
                    dataIndex: 'note',
                    width: 120
                },
                {
                    title: '审核状态',
                    align: "center",
                    dataIndex: 'approvalStatus_dictText',
                    width: 120
                },
                {
                    title: '初审状态',
                    align: "center",
                    dataIndex: 'initialAudit_dictText',
                    width: 120
                },
            ],
            url: {
                list: "/rms/rmsInstrument/list",
                delete: "/rms/rmsInstrument/delete",
                deleteBatch: "/rms/rmsInstrument/deleteBatch",
                exportXlsUrl: "/rms/rmsInstrument/exportXls",
                importExcelUrl: "rms/rmsInstrument/importExcel",
                userUrl: "/sys/user/queryUserComponentData?column=createTime&order=desc&field=id,,username,realname,sex,phone,orgCodeTxt&pageNo=1&pageSize=100",
            },
            UserList: {},
        }
    },
    created() {
        this.getUserInfo();
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
    },
    methods: {
        showModal() {
            this.visible = true;
        },
        //获取用户信息
        getUserInfo() {
            getAction(this.url.userUrl).then(res => {
                this.UserList = res.result.records;
            })
        },
        onSearch(query) {
            this.UserdataSource = this.UserList.filter(user =>
                user.username.includes(query) || user.realname.includes(query)
            ).map(user => ({
                value: user.username,
                text: user.realname
            }));
        },
        onCancel() {
            // 处理取消按钮的点击事件
            this.visible = false;

            // 可以在这里关闭模态框或执行其他操作
        },
        onOk() {
            // 处理确定按钮的点击事件
            // 可以在这里执行提交操作或其他操作
        },
        onClose() {
            // 处理右上角叉号的点击事件
            // 可以在这里关闭模态框或执行其他操作
            this.visible = false;
        }
    }

}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>