<template>
    <div class="app-container">
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" @submit.native.prevent label-width="78px">
            <el-form-item label="仪器名称">
                <el-input v-model="queryForm.instrumentName" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="仪器分类">
                <treeselect v-model="queryForm.instrumentTypeId" :options="equiList" :normalizer="normalizer"
                    placeholder="选择分类编码" clearable style="width: 192px" />
            </el-form-item>
            <el-form-item label="变更日期">
                <el-date-picker v-model="queryForm.startTime" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-date-picker v-model="queryForm.endTime" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>


        <!-- 表格 -->
        <el-table stripe :data="tableData" border style="width: 98%">
            <el-table-column align="center" type="index" label="序号" width="55" />
            <el-table-column align="center" prop="instrumentName" label="仪器名称" />
            <el-table-column align="center" prop="instrumentTypeName" label="仪器分类" />
            <el-table-column align="center" prop="variationType" label="仪器型号" />
            <el-table-column align="center" prop="variationType" label="变动类型" />
            <el-table-column align="center" prop="variationNum" label="变动数量" />
            <el-table-column align="center" prop="oldStockNum" label="旧库存数量" />
            <el-table-column align="center" prop="newStockNum" label="新库存数量" />
            <el-table-column align="center" prop="variationTime" label="变更时间" />
            <el-table-column align="center" prop="remark" label="备注" />
        </el-table>

        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
            @pagination="getList" />
    </div>
</template>

<script>
import {
    getListrk,
} from '@/api/smartSchool/InstrumentDrugAdministration/instrumentManagement';
import {
    getList,//查看列表
} from '@/api/smartSchool/InstrumentDrugAdministration/instrumentClassification';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: 'instrumentDetails',
    components: { Treeselect },
    data() {
        return {
            queryForm: {
                pageNum: 1,
                pageSize: 10,
                instrumentName: "",
                instrumentTypeId: null,
                daterange: "",
                startTime: "",
                endTime: "",
            },
            //表格数据
            tableData: [

            ],
            equiList: [],
            // 总计
            total: 0
        }
    },
    created() {
        this.getList();
        this.getListequ();
    },
    methods: {
        // 搜索
        getList() {
            getListrk({ ...this.queryForm }).then(res => {
                if (res.code == 200) {
                    this.total = res.total;
                    this.tableData = res.rows;
                    console.log(this.tableData);
                    this.loading = false
                }
            })
        },
        getListequ() {
            this.loading = true;
            getList(this.queryForm).then(response => {
                this.equiList = this.handleTree(response.rows, "id", 'parentId', 'children');
                console.log('this.tableData', this.tableData);
                this.loading = false;
            })
        },
        /** 转换分类编码数据结构 */
        normalizer(node) {
            console.log('queryForm.instrumentTypeId', this.queryForm.instrumentTypeId);
            console.log('node', node);
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.instrumentTypeName,
                children: node.children
            };
        },
        // 重置
        resetQuery() {
            this.queryForm = {
                pageNum: 1,
                pageSize: 10,
                instrumentName: "",
                instrumentTypeId: null,
                startTime: "",
                endTime: "",
            },
                this.getList();
        }
    }
}
</script>

<style scoped></style>