<template>
    <div>
        <el-radio-group
            size="small"
            v-model="queryParams.unitId"
            style="margin-bottom: 8px"
            @change="onChangeRadio"
        >
            <el-radio-button
                :key="item.id"
                :label="item.unitId"
                v-for="item in secondList"
            >
                {{ item.name }}
            </el-radio-button>
            <!-- <el-radio-button label="机具二级库">机具二级库</el-radio-button>
            <el-radio-button label="输电二级库">输电二级库</el-radio-button>
            <el-radio-button label="揽电二级库">揽电二级库</el-radio-button> -->
        </el-radio-group>

        <el-form
            ref="queryForm"
            size="small"
            :inline="true"
            :model="queryParams"
        >
            <el-row>
                <el-col :span="4">
                    <el-form-item prop="keyword">
                        <el-input
                            v-model="queryParams.keyword"
                            placeholder="请输入关键字"
                            clearable
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="4">
                    <el-form-item prop="unitId">
                        <el-select
                            v-model="queryParams.unitId"
                            placeholder="请选择单位名称"
                            clearable
                        >
                            <el-option
                                v-for="item in unitList"
                                filterable
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item prop="proId">
                        <el-select
                            v-model="queryParams.proId"
                            placeholder="请选择工程名称"
                            clearable
                        >
                            <el-option
                                v-for="item in proList"
                                filterable
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <el-col :span="4">
                    <el-form-item prop="typeId">
                        <el-select
                            v-model="queryParams.typeId"
                            placeholder="请选择机具名称"
                            clearable
                            filterable
                        >
                            <el-option
                                v-for="typeItem in typeList"
                                :key="typeItem.typeId"
                                :label="typeItem.typeName"
                                :value="typeItem.typeId"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item prop="modelId">
                        <treeselect
                            v-model="queryParams.modelId"
                            default-expand-all
                            :options="equipmentTypeList"
                            placeholder="请选择规格型号"
                            :disable-branch-nodes="true"
                            noChildrenText="没有数据了"
                            noOptionsText="没有数据"
                            noResultsText="没有搜索结果"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <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-col>
            </el-row>
        </el-form>

        <el-row :gutter="8" class="mb8">
            <el-col
                :span="1.5"
                :key="index"
                v-for="(item, index) in handleBtnList"
            >
                <el-button
                    plain
                    size="mini"
                    type="primary"
                    @click="onClickSecond(item.btn_type)"
                >
                    {{ item.btn_title }}
                </el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="deviceList" border>
            <el-table-column
                align="center"
                key="1"
                label="序号"
                type="index"
                :index="
                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
                "
            />

            <el-table-column
                label="机具名称"
                align="center"
                key="4"
                prop="typeName"
                show-overflow-tooltip
            />
            <el-table-column
                label="规格型号"
                align="center"
                key="5"
                prop="modelName"
                show-overflow-tooltip
            />
            <el-table-column
                label="计量单位"
                align="center"
                key="6"
                prop="nuitName"
                show-overflow-tooltip
            />
            <el-table-column
                label="库存总量"
                align="center"
                key="7"
                prop="num"
                show-overflow-tooltip
            />
            <el-table-column
                label="库存剩余量"
                align="center"
                key="8"
                prop="stockNum"
                show-overflow-tooltip
            />
            <el-table-column
                label="已领用数量"
                align="center"
                key="9"
                prop="receiveNum"
                show-overflow-tooltip
            />
        </el-table>

        <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList()"
        />
    </div>
</template>

<script>
import { getUnitData, getProData } from '@/api/claimAndRefund/receive.js'
import { secondaryWarehouseList } from '@/api/claimAndRefund/secondStore'
import { getTypeList } from '@/api/store/warehousing'
import { equipmentTypeTree } from '@/api/store/tools'
import { getConfigListApi } from '@/api/claimAndRefund/config-pages.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    components: { Treeselect },
    data() {
        return {
            total: 0,
            loading: false,
            types: '',
            unitList: [],
            proList: [],
            typeList: [],
            equipmentTypeList: [],
            secondList: [],
            deviceList: [],
            handleBtnList: [
                { btn_title: '班组出库', btn_type: 1 },
                { btn_title: '班组退库', btn_type: 2 },
                { btn_title: '二级库归还', btn_type: 3 },
            ],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyword: '',
                unitId: undefined,
                modelId: undefined,
                typeId: undefined,
            },
        }
    },
    methods: {
        getList() {
            this.loading = true
            secondaryWarehouseList(this.queryParams).then((res) => {
                this.deviceList = res.rows
                this.total = res.total
                this.loading = false
            })
        },
        async getSecondList() {
            const { data: res } = await getConfigListApi({
                pageNum: 1,
                pageSize: 999,
            })
            this.secondList = res.rows
        },
        onChangeRadio() {
            this.getList()
        },
        handleQuery() {},
        resetQuery() {
            this.resetForm('queryForm')
            this.queryParams.unitId = ''
            this.getList()
        },
        //获取单位
        getUnitList() {
            getUnitData().then((res) => {
                this.unitList = res.data
            })
        },
        //获取工程
        getProList() {
            getProData().then((response) => {
                this.proList = response.data
            })
        },
        // 机具类型
        getTypeList() {
            getTypeList({ level: '3' }).then((response) => {
                this.typeList = response.data
            })
        },
        //规格型号
        equipmentType() {
            equipmentTypeTree().then((response) => {
                this.equipmentTypeList = response.data
                this.equipmentTypeList.forEach((item, index) => {
                    if (item.children && item.children.length > 0) {
                        item.children.forEach((item2, index2) => {
                            if (item2.children && item2.children.length > 0) {
                                item2.children.forEach((item3) => {
                                    if (
                                        item3.children &&
                                        item3.children.length > 0
                                    ) {
                                        item3.children.forEach((item4) => {
                                            item4.machineTypeName =
                                                item3.typeName
                                            item4.specificationType =
                                                item4.typeName
                                            this.$set(item4, 'purchasePrice', 0)
                                            this.$set(item4, 'purchaseNum', 1)
                                        })
                                    }
                                })
                            }
                        })
                    }
                })
            })
        },

        // 操作按钮
        onClickSecond(type) {
            if (!this.queryParams.unitId) {
                this.$modal.msgError('请先选择需要操作的二级库！')
                return
            }
            this.$emit('onClickSecond', type)
        },
    },
    created() {
        this.getList()
        this.getSecondList()
        this.getUnitList()
        this.getProList()
        this.getTypeList()
        this.equipmentType()
    },
}
</script>

<style></style>
