<template>
    <div class="app-container" id="receiveOut">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="80px"
        >
            <el-form-item label="领料单号" prop="code">
                <el-input
                    v-model="queryParams.code"
                    placeholder="请输入领料单号"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="单位名称" prop="unitId">
                <el-select
                    v-model="queryParams.unitId"
                    placeholder="请选择单位名称"
                    clearable
                    filterable
                >
                    <el-option
                        v-for="item in unitList"
                        filterable
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="工程名称" prop="proId">
                <el-select
                    v-model="queryParams.proId"
                    filterable
                    clearable
                    placeholder="请选择工程名称"
                >
                    <el-option
                        v-for="item in proList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出库状态" prop="taskStatus">
                <el-select
                    v-model="queryParams.taskStatus"
                    placeholder="请选择出库状态"
                    clearable
                    filterable
                >
                    <el-option
                        v-for="item in statusList"
                        filterable
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </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-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    >导出</el-button
                >
            </el-col>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="leaseList">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column
                align="center"
                label="序号"
                type="index"
                :index="
                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
                "
            />
            <el-table-column
                label="领料单号"
                align="center"
                prop="code"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="领料申请单位"
                align="center"
                prop="unitName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="领料申请工程"
                align="center"
                prop="proName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="申请数量"
                align="center"
                prop="preCountNum"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
                label="申请时间"
                align="center"
                prop="createTimes"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
                label="已出库数量"
                align="center"
                prop="alNum"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
                label="出库状态"
                align="center"
                prop="taskName"
                :show-overflow-tooltip="true"
            ></el-table-column>

            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleView(scope.row)"
                        >查看</el-button
                    >
                    <el-button
                        size="mini"
                        type="primary"
                        v-if="scope.row.taskStatus != 35"
                        @click="handleOut(scope.row)"
                        v-hasPermi="['picking:outbound']"
                    >
                        出库
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 出库弹窗 -->
        <el-dialog
            :title="title"
            :visible.sync="openLeaseDevices"
            width="1200px"
            append-to-body
        >
            <el-form
                :model="dialogQuery"
                ref="dialogQuery"
                size="small"
                :inline="true"
                label-width="100px"
            >
                <el-form-item label="设备负责人" prop="userName">
                    <el-input v-model="dialogQuery.userName" maxlength="20" />
                </el-form-item>
                <el-form-item label="机具类型" prop="typeId">
                    <treeselect
                        v-model="dialogQuery.typeId"
                        default-expand-all
                        :options="equipmentTypeList"
                        placeholder="请选择规格型号"
                        :disable-branch-nodes="true"
                        style="width: 240px"
                        noChildrenText="没有数据了"
                        noOptionsText="没有数据"
                        noResultsText="没有搜索结果"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleDialogQuery"
                        >查询</el-button
                    >
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetDialogQuery"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>

            <el-table v-loading="loading" :data="dialogList" height="600">
                <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
                    label="规格型号"
                    align="center"
                    prop="typeModelName"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="待出库数量"
                    align="center"
                    prop="outNum"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="已出库数量"
                    align="center"
                    prop="alNum"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="设备负责人"
                    align="center"
                    prop="userName"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                    v-if="!isView"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="codeOut(scope.row)"
                            v-if="
                                scope.row.manageType == 0 &&
                                scope.row.outNum != 0
                            "
                        >
                            编码出库
                        </el-button>
                        <el-button
                            size="mini"
                            type="primary"
                            v-if="
                                (scope.row.manageType == 1 ||
                                    scope.row.manageType == 2) &&
                                scope.row.outNum != 0
                            "
                            @click="numOut(scope.row)"
                        >
                            数量出库
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="dialogTotal > 0"
                :total="dialogTotal"
                :page.sync="dialogQuery.pageNum"
                :limit.sync="dialogQuery.pageSize"
                @pagination="getDialogList"
            />
        </el-dialog>

        <!-- 编码出库 -->
        <el-dialog
            :title="title"
            :visible.sync="openCode"
            width="1200px"
            append-to-body
        >
            <el-form
                :model="codeOutForm"
                ref="codeOutForm"
                size="small"
                :inline="true"
                label-width="100px"
            >
                <span style="margin-right: 50px">待出库数量：{{ outNum }}</span>
                <el-form-item label="请输入车牌号" prop="carCode">
                    <el-input v-model="codeOutForm.carCode" maxlength="20" />
                </el-form-item>
                <span style="margin-right: 50px; color: red"
                    >部分设备出库时，需进行装车,需记录车牌号码</span
                >
            </el-form>

            <el-form
                :model="outQuery"
                ref="outQuery"
                size="small"
                :inline="true"
                label-width="100px"
            >
                <el-form-item label="设备编码" prop="maCode">
                    <el-input v-model="outQuery.maCode" maxlength="20" />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleOutQuery"
                        >查询</el-button
                    >
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetOutQuery"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" size="mini" @click="saveCodeOut"
                        >出库</el-button
                    >
                </el-col>
            </el-row>
            <el-table
                v-loading="loading"
                :data="outCodeList"
                height="500"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                    :selectable="selectable"
                />
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                >
                    <template slot-scope="scope">
                        <span>{{
                            (outQuery.pageNum - 1) * 10 + scope.$index + 1
                        }}</span>
                    </template>
                </el-table-column>
                <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="maCode"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="设备状态"
                    align="center"
                    prop="maStatus"
                    :show-overflow-tooltip="true"
                />
            </el-table>

            <pagination
                v-show="outTotal > 0"
                :total="outTotal"
                :page.sync="outQuery.pageNum"
                :limit.sync="outQuery.pageSize"
                @pagination="getCodeList"
            />
        </el-dialog>

        <!-- 数量出库 -->
        <el-dialog
            :title="title"
            :visible.sync="openNum"
            width="1200px"
            append-to-body
        >
            <el-form
                :model="numOutForm"
                ref="numOutForm"
                size="small"
                :inline="true"
                label-width="100px"
            >
                <!-- <span style="margin-right: 50px;"> 
            待出库数量：{{outNum}}
        </span>-->
                <el-form-item label="请输入车牌号" prop="carCode">
                    <el-input v-model="numOutForm.carCode" maxlength="20" />
                </el-form-item>
                <span style="margin-right: 50px; color: red"
                    >部分设备出库时，需进行装车,需记录车牌号码</span
                >
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" size="mini" @click="saveNumOut"
                        >出库</el-button
                    >
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="outNumList" height="500">
                <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="num"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="待出库数量"
                    align="center"
                    prop="outNum"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="已出库数量"
                    align="center"
                    prop="alNum"
                    :show-overflow-tooltip="true"
                />
                <el-table-column label="出库数量" align="center">
                    <template slot-scope="scope">
                        <el-input
                            v-model.number="scope.row.inputNum"
                            placeholder="请输入出库数量"
                            type="number"
                            @input="checkNum(scope.row)"
                            clearable
                            style="width: 100%"
                        />
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import {
    getUnitData,
    getProData,
    getLeaseAuditList,
    getLeaseAuditListDetail,
    getDetailsByTypeId,
    submitOut,
    submitNumOut,
} from '@/api/claimAndRefund/receive.js'
import { getTypeList } from '@/api/store/warehousing'
import { equipmentTypeTree } from '@/api/store/tools'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    name: 'receiveOut',
    components: { Treeselect },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            maCodeList: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            leaseList: [],
            // 弹出层标题
            title: '设备出库',
            // 单位数据
            unitList: [],
            proList: [], //工程集合
            statusList: [
                { id: '33', name: '待出库' },
                { id: '34', name: '出库进行中' },
                { id: '35', name: '完成' },
            ], //工程集合
            //搜索下拉数据
            typeList: [],
            equipmentTypeList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                flag: 1,
                code: undefined,
                unitId: undefined,
                proId: undefined,
                taskStatus: undefined,
            },
            // 表单参数 出库
            form: {},
            //弹窗
            openLeaseDevices: false,
            isView: false,
            dialogQuery: {
                pageNum: 1,
                pageSize: 10,
                director: undefined,
                typeId: undefined,
            },
            dialogList: [],
            dialogTotal: 0,
            outObj: {},
            openCode: false, //编码弹窗开关
            openNum: false, //数量弹窗开关
            outNum: 0, //待出库数量
            codeOutForm: {
                //编码表单-车牌号
                carCode: undefined,
            },
            numOutForm: {
                //数量表单-车牌号
                carCode: undefined,
            },
            outQuery: {
                //编码出库-搜索条件
                pageNum: 1,
                pageSize: 20,
                maCode: undefined,
            },
            outTotal: 0, //编码弹窗分页-总数
            outCodeList: [], //编码弹窗表格数据
            outNumList: [], //数量弹窗表格数据
        }
    },
    created() {
        this.getTypeList()
        this.getUnitList()
        this.getProList()
        this.equipmentType()

        this.getList()
    },
    methods: {
        //获取单位
        getUnitList() {
            getUnitData().then((response) => {
                this.unitList = response.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);
                                        })
                                    }
                                })
                            }
                        })
                    }
                })
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 查询列表 */
        getList() {
            this.loading = true
            getLeaseAuditList(this.queryParams).then((response) => {
                this.leaseList = response.data.rows
                this.total = response.data.total
                this.loading = false
            })
        },
        //查看按钮
        handleView(row) {
            this.openLeaseDevices = true
            this.isView = true
            this.dialogQuery.id = row.id
            this.resetDialogQuery()
            // this.getDialogList();
        },
        /** 查询列表 */
        getDialogList() {
            // console.log(this.dialogQuery)
            getLeaseAuditListDetail(this.dialogQuery).then((response) => {
                this.dialogList = response.data.rows
                this.dialogTotal = response.data.total
            })
        },
        handleDialogQuery() {
            this.dialogQuery.pageNum = 1
            this.getDialogList()
        },
        resetDialogQuery() {
            this.resetForm('dialogQuery')
            this.handleDialogQuery()
        },
        /** 出库按钮操作 */
        handleOut(row) {
            this.openLeaseDevices = true
            this.isView = false
            this.dialogQuery.id = row.id
            this.resetDialogQuery()
            // this.getDialogList()
        },

        //编码出库
        codeOut(row) {
            // this.title = '编码出库'
            this.openCode = true
            this.outNum = row.outNum
            this.outQuery.typeId = row.typeId
            this.outObj = row
            this.handleOutQuery()
        },
        //数量出库
        numOut(row) {
            console.log(row, '数量出库当前行数据--')
            // this.title = '数量出库'
            this.openNum = true
            this.resetForm('numOutForm')
            // console.log(row)
            let obj = {}
            this.$set(obj, 'taskId', row.taskId)
            this.$set(obj, 'id', row.id)
            this.$set(obj, 'manageType', 1)
            this.$set(obj, 'parentId', row.parentId)
            this.$set(obj, 'typeName', row.typeName)
            this.$set(obj, 'typeModelName', row.typeModelName)
            this.$set(obj, 'typeId', row.typeId)
            this.$set(obj, 'alNum', row.alNum) //已出库数量
            this.$set(obj, 'outNum', row.outNum) //待出库数量
            this.$set(obj, 'inputNum', 1) //出库数量
            this.$set(obj, 'num', row.num) //库存
            this.outNumList = [obj]
        },
        handleOutQuery() {
            this.outQuery.pageNum = 1
            this.getCodeList()
        },
        resetOutQuery() {
            this.resetForm('outQuery')
            this.handleOutQuery()
        },
        getCodeList() {
            getDetailsByTypeId(this.outQuery).then((response) => {
                this.outCodeList = response.data.rows
                if (response.data.total) {
                    this.outTotal = response.data.total
                }
            })
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.maCodeList = selection.map((item) => item.maId)
        },
        selectable(row) {
            console.log(row)
            if (row.maStatus == '在库') {
                return true
            } else {
                return false
            }
        },
        //编码出库保存
        saveCodeOut() {
            if (this.maCodeList.length <= this.outObj.outNum) {
                let params = this.maCodeList.map((item) => {
                    let obj = {
                        id: this.outObj.id,
                        maId: item,
                        manageType: 0,
                        carCode: this.codeOutForm.carCode,
                        typeId: this.outObj.typeId,
                        parentId: this.outObj.parentId,
                        outNum: 1,
                        taskId: this.outObj.taskId,
                    }
                    return obj
                })
                // console.log(params)
                submitOut(params).then((response) => {
                    this.$modal.msgSuccess('出库成功')
                    this.openCode = false
                    this.handleDialogQuery()
                    this.handleQuery()
                })
            } else {
                this.$modal.msgError('所选机具编码已超出出库数量！')
            }
        },
        //数量出库保存
        saveNumOut() {
            this.outNumList[0].carCode = this.numOutForm.carCode
            let param = this.outNumList
            submitNumOut(param).then((response) => {
                this.$modal.msgSuccess('出库成功')
                this.openNum = false
                this.handleDialogQuery()
                this.handleQuery()
            })
        },

        //输入出库数量
        checkNum(row) {
            let maxNum = row.outNum
            if (row.inputNum <= 1) {
                row.inputNum = 1
            }
            if (row.inputNum > row.outNum && row.num >= maxNum) {
                row.inputNum = maxNum
            }
            if (row.inputNum > row.outNum && row.num < maxNum) {
                row.inputNum = row.num
            }
        },

        /** 导出按钮操作 */
        handleExport() {
            this.downloadJson(
                'base/tm_task/export',
                JSON.stringify(this.queryParams),
                `领料出库_${new Date().getTime()}.xlsx`,
            )
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}
.clickText {
    color: #02a7f0;
    cursor: pointer;
}
</style>
