<template>
    <div class="app-container" id="ledgerQuery">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="80px"
        >
            <el-form-item label="物品类型" prop="status">
                <el-cascader
                    placeholder="请输入物品类型"
                    :options="deviceTypeTree"
                    :props="deviceTypeTreeProps"
                    :show-all-levels="false"
                    v-model="queryParams.typeId"
                    :emitPath="true"
                    @change="deviceTypeChange"
                    ref="deviceTypeCascader"
                    filterable
                    style="width: 240px"
                ></el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="leaseAuditList">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <!-- <el-table-column
                label="序号"
                align="center"
                width="80"
                type="index"
            >
                <template scope="scope">
                    <span>{{
                        (queryParams.pageNum - 1) * 10 + scope.$index + 1
                    }}</span>
                </template>
            </el-table-column> -->
            <el-table-column
                align="center"
                label="序号"
                type="index"
                :index="
                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
                "
            />
            <el-table-column
                label="机具名称"
                align="center"
                prop="typeName"
                :show-overflow-tooltip="true"
            />
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <div class="nested-table-container">
                        <el-table
                            :data="scope.row.wholeSetDetails"
                            style="width: 100%"
                        >
                            <!-- 子表格的列 -->
                            <el-table-column
                                label="序号"
                                align="center"
                                type="index"
                            />
                            <el-table-column
                                label="机具名称"
                                align="center"
                                prop="typeName"
                                :show-overflow-tooltip="true"
                            />
                            <el-table-column
                                label="规格型号"
                                align="center"
                                prop="typeModelName"
                                :show-overflow-tooltip="true"
                            />
                            <el-table-column
                                label="生产厂家"
                                align="center"
                                prop="supplier"
                                :show-overflow-tooltip="true"
                            />

                            <el-table-column
                                label="单位"
                                align="center"
                                prop="unitName"
                                :show-overflow-tooltip="true"
                            />
                            <el-table-column
                                label="总保有量(付)"
                                align="center"
                                prop="allNum"
                                :show-overflow-tooltip="true"
                            />
                            <el-table-column
                                label="在用数(付)"
                                align="center"
                                prop="usNum"
                                :show-overflow-tooltip="true"
                            />
                            <el-table-column
                                label="在库数(付)"
                                align="center"
                                prop="num"
                                :show-overflow-tooltip="true"
                            />
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="规格型号"
                align="center"
                prop="typeModelName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="总保有量(付)"
                align="center"
                prop="allNum"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="在用数(付)"
                align="center"
                prop="usNum"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="在库数(付)"
                align="center"
                prop="num"
                :show-overflow-tooltip="true"
            />
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            :page-sizes="[5, 10, 15, 20, 30]"
            @pagination="getList"
        />
    </div>
</template>
<script>
import { getHoldingLedger } from '@/api/stquery/ledgerQuery'
import { getDeviceTypeTree } from '@/api/claimAndRefund/receive'
export default {
    name: 'ledgerQuery',
    data() {
        return {
            // 选中的设备类型
            deviceTypeTree: [], // 设备 树结构数据
            // 设备 树显示 配置
            deviceTypeTreeProps: {
                multiple: false,
                value: 'id',
            },
            // 遮罩层
            loading: false,
            typeList: [
                { id: 1, type: '物资' },
                { id: 2, type: '设备' },
            ],
            leaseAuditList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                typeId: undefined,
            },
            // 总条数
            total: 0,
        }
    },
    created() {
        this.getList()
        this.GetDeviceTypeTree()
    },
    methods: {
        async getList() {
            const res = await getHoldingLedger(this.queryParams)
            console.log(res, 'sss')
            this.leaseAuditList = res.data.rows
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.queryParams.typeId = null
            this.handleQuery()
        },
        // 获取 设备树结构数据
        async GetDeviceTypeTree() {
            const params = {
                level: 4,
            }
            const res = await getDeviceTypeTree(params)
            this.deviceTypeTree = res.data
        },
        /////// 设备类型树  切换
        deviceTypeChange(val) {
            this.queryParams.typeId = val[val.length - 1]
            this.getList()
        },
    },
}
</script>