<template>
    <div class="app-container" id="secondStore">
        <div class="upper-sec">
            <div :class="[{ clicked: leaseType == 1 }]" @click="toggleBtn(1)">
                长期领用
            </div>
<!--            <div :class="[{ clicked: leaseType == 0 }]" @click="toggleBtn(0)">
                工程领用
            </div>-->
        </div>
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="80px"
        >
            <el-form-item label="关键字" prop="keyword">
                <el-input
                    v-model="queryParams.keyword"
                    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
                >
                    <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"
                    placeholder="请选择工程名称"
                    clearable
                >
                    <el-option
                        v-for="item in proList"
                        filterable
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="机具名称" prop="typeId">
                <el-select
                    v-model="queryParams.typeId"
                    placeholder="请选择机具名称"
                    clearable
                    filterable
                    style="width: 240px"
                >
                    <el-option
                        v-for="typeItem in typeList"
                        :key="typeItem.typeId"
                        :label="typeItem.typeName"
                        :value="typeItem.typeId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="规格型号" prop="modelId">
                <treeselect
                    v-model="queryParams.modelId"
                    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="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"
                    v-if="leaseType != 0"
                    >导出</el-button
                >
            </el-col>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="handleQuery"
                v-if="leaseType == 0"
            ></right-toolbar>
        </el-row>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    style="position: relative; bottom: 36px"
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    v-if="leaseType == 0"
                    >导出</el-button
                >
            </el-col>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="handleQuery"
                v-if="leaseType == 1"
            ></right-toolbar>
        </el-row>
        <el-table
            v-loading="loading"
            :data="deviceList"
            @selection-change="handleSelectionChange"
        >
            <!-- <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) * queryParams.pageSize + scope.$index + 1
                    }}</span>
                </template>
            </el-table-column> -->
            <el-table-column
                align="center"
                key="1"
                label="序号"
                type="index"
                :index="
                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
                "
            />
            <el-table-column
                label="单位名称"
                align="center"
                key="2"
                prop="unitName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="工程名称"
                align="center"
                key="3"
                prop="proName"
                :show-overflow-tooltip="true"
                v-if="leaseType == 0"
            />
            <el-table-column
                label="机具名称"
                align="center"
                key="4"
                prop="typeName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="规格型号"
                align="center"
                key="5"
                prop="modelName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="计量单位"
                align="center"
                key="6"
                prop="nuitName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="总量"
                align="center"
                key="7"
                prop="num"
                :show-overflow-tooltip="true"
                v-if="leaseType == 1"
            />
            <el-table-column
                label="库存数量"
                align="center"
                key="8"
                prop="stockNum"
                :show-overflow-tooltip="true"
                v-if="leaseType == 1"
            />
            <el-table-column
                label="领用数量-----"
                align="center"
                key="9"
                prop="receiveNum"
                :show-overflow-tooltip="true"
                v-if="leaseType == 1"
            >
                <template slot-scope="scope">
                    <span
                        class="clickText"
                        @click="openRecords(scope.row, 5)"
                        >{{ scope.row.receiveNum }}</span
                    >
                </template>
            </el-table-column>
            <el-table-column
                label="在用数量"
                align="center"
                key="10"
                prop="receiveNum"
                :show-overflow-tooltip="true"
                v-if="leaseType == 0"
            />
            <el-table-column
                label="操作"
                align="center"
                key="11"
                width="150"
                v-if="leaseType == 1"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="handleOut(scope.row)"
                        v-if="parseInt(scope.row.stockNum) > 0"
                    >
                        出库
                    </el-button>
                    <el-button
                        size="mini"
                        type="warning"
                        @click="handleIn(scope.row)"
                        v-if="
                            parseInt(scope.row.receiveNum) > 0 &&
                            parseInt(scope.row.stockNum) <
                                parseInt(scope.row.num)
                        "
                    >
                        退库
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

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

        <!-- 出库弹窗 -->
        <el-dialog
            :title="title"
            :visible.sync="openOut"
            width="600px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="120px"
            >
                <el-form-item label="机具名称:" prop="typeName">
                    <el-input
                        v-model="form.typeName"
                        placeholder="请输入机具名称"
                        disabled
                    />
                </el-form-item>
                <el-form-item label="规格型号" prop="modelName">
                    <el-input
                        v-model="form.modelName"
                        placeholder="请输入规格型号"
                        disabled
                    />
                </el-form-item>
                <el-form-item label="在库数量" prop="kcNum">
                    <el-input
                        v-model="form.zkNum"
                        placeholder="请输入在库数量"
                        disabled
                    />
                </el-form-item>

                <el-form-item label="出库数量" prop="outNum">
                    <el-input
                        v-model="form.outNum"
                        placeholder="请输入出库数量"
                        maxlength="20"
                    />
                </el-form-item>
                <el-form-item label="班组名称" prop="teamName">
                    <el-input
                        v-model="form.teamName"
                        placeholder="请输入班组名称"
                        maxlength="50"
                    />
                </el-form-item>
                <el-form-item label="领用人员" prop="leaseMan">
                    <el-input
                        v-model="form.leaseMan"
                        placeholder="请输入领用人员"
                        maxlength="50"
                    />
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input
                        v-model="form.phone"
                        placeholder="请输入联系电话"
                        maxlength="11"
                        onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button type="primary" @click="submitForm(1)"
                    >确 定</el-button
                >
                <el-button @click="openOut = false">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 进库弹窗 -->
        <el-dialog
            :title="title"
            :visible.sync="openIn"
            width="600px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form
                ref="nform"
                :model="nform"
                :rules="nrules"
                label-width="120px"
            >
                <el-form-item label="机具名称:" prop="typeName">
                    <el-input
                        v-model="nform.typeName"
                        placeholder="请输入机具名称"
                        disabled
                    />
                </el-form-item>
                <el-form-item label="规格型号" prop="modelName">
                    <el-input
                        v-model="nform.modelName"
                        placeholder="请输入规格型号"
                        disabled
                    />
                </el-form-item>
                <el-form-item label="领用数量" prop="ckNum">
                    <el-input v-model="nform.ckNum" disabled />
                </el-form-item>
                <!--                <el-form-item label="已出库数量" prop="ckNum">
                    <el-input v-model="nform.ckNum" disabled />
                </el-form-item>-->

                <el-form-item label="退库数量" prop="outNum">
                    <el-input
                        v-model="nform.outNum"
                        placeholder="请输入退库数量"
                        maxlength="50"
                    />
                </el-form-item>
                <el-form-item label="班组名称" prop="teamName">
                    <el-input
                        v-model="nform.teamName"
                        placeholder="请输入班组名称"
                        maxlength="50"
                    />
                </el-form-item>
                <el-form-item label="退库人员" prop="leaseMan">
                    <el-input
                        v-model="nform.leaseMan"
                        placeholder="请输入退库人员"
                        maxlength="50"
                    />
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input
                        v-model="nform.phone"
                        placeholder="请输入联系电话"
                        maxlength="11"
                        onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button type="primary" @click="submitForm(2)"
                    >确 定</el-button
                >
                <el-button @click="openIn = false">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 记录弹窗 -->
        <el-dialog
            :title="title"
            :visible.sync="openRecord"
            v-if="openRecord"
            width="1200px"
            append-to-body
        >
            <!--            <el-form
                :model="dialogQuery"
                ref="dialogQuery"
                size="small"
                :inline="true"
                label-width="80px"
            >
&lt;!&ndash;                <el-form-item label="记录时间" prop="startTime">
                    <el-date-picker
                        v-model="dialogQuery.startTime"
                        style="width: 240px"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="记录时间"
                    ></el-date-picker>
                </el-form-item>&ndash;&gt;
                <el-form-item label="类型名称" prop="typeName">
                    <el-input v-model="dialogQuery.typeName" disabled />
                </el-form-item>
                <el-form-item label="规格型号" prop="modelName">
                    <el-input v-model="dialogQuery.modelName" disabled />
                </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">
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                    :index="
                        indexContinuation(
                            dialogQuery.pageNum,
                            dialogQuery.pageSize,
                        )
                    "
                >
                    <!-- <template slot-scope="scope">
                        <span>{{
                            (dialogQuery.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="modelName"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="出库数量"
                    align="center"
                    prop="outNum"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="领料人员"
                    align="center"
                    prop="pickName"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="出库人员"
                    align="center"
                    prop="outName"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="出库时间"
                    align="center"
                    prop="outTime"
                    :show-overflow-tooltip="true"
                />
            </el-table>

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

<script>
import {
    secondaryWarehouseList,
    operate,
    getRecords,
} from '@/api/claimAndRefund/secondStore'
import { getUnitData, getProData } 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: 'SecondStore',
    dicts: ['sys_normal_disable'],
    components: { Treeselect },
    data() {
        return {
            // 上方按钮状态
            leaseType: 1,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            deviceList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            openOut: false,
            openIn: false,
            // 日期范围
            dateRange: [],
            // 单位数据
            unitList: [],
            proList: [],
            //搜索下拉数据
            typeList: [],
            equipmentTypeList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyword: '',
                unitId: undefined,
                modelId: undefined,
                typeId: undefined,
            },
            // 表单参数 出库
            form: {},
            // 表单校验
            rules: {
                outNum: [
                    {
                        required: true,
                        message: '出库数量不能为空',
                        trigger: 'blur',
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value && !/^[1-9]\d*$/.test(value)) {
                                callback(new Error('请输入正整数'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur',
                    },
                ],
                teamName: [
                    {
                        required: true,
                        message: '班组名称不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            // 表单参数 退库
            nform: {},
            nrules: {
                outNum: [
                    {
                        required: true,
                        message: '退库数量不能为空',
                        trigger: 'blur',
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value && !/^[1-9]\d*$/.test(value)) {
                                callback(new Error('请输入正整数'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur',
                    },
                ],
                teamName: [
                    {
                        required: true,
                        message: '班组名称不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            //记录弹窗
            openRecord: false,
            dialogQuery: {
                pageNum: 1,
                pageSize: 10,
                startTime: undefined,
                unitId: undefined,
                modelId: undefined,
                typeId: undefined,
            },
            newQueryParams: {
                pageNum: 1,
                pageSize: 10,
                modelId: '',
            },
            dialogList: [],
            queryType: 1,
            dialogTotal: 0,
        }
    },
    created() {
        this.getTypeList()
        this.getUnitList()
        this.getProList()
        this.equipmentType()
        this.getList(this.leaseType)
    },
    methods: {
        // 按钮状态改变
        toggleBtn(count) {
            this.leaseType = count
            this.getList(this.leaseType)
        },
        //获取单位
        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)
                                        })
                                    }
                                })
                            }
                        })
                    }
                })
            })
        },
        /** 查询列表 */
        getList(leaseType) {
            this.loading = true
            this.queryParams.leaseType = leaseType
            secondaryWarehouseList(this.queryParams).then((response) => {
                this.deviceList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        // 取消按钮
        cancel() {
            this.openOut = false
            this.openIn = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {}
            this.resetForm('form')
            this.nform = {}
            this.resetForm('nform')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            // this.queryParams.pageNum = 1
            this.getList(this.leaseType)
        },
        handleDialogQuery() {
            this.dialogQuery.pageNum = 1
            this.getDialogList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        resetDialogQuery() {
            // this.resetForm('dialogQuery')
            this.dialogQuery.startTime = ''
            this.handleDialogQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.dictId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        /** 按钮操作 */
        handleOut(row) {
            //1
            this.reset()
            // this.form = row;
            console.log(row)
            this.$set(this.form, 'id', row.id)
            this.$set(this.form, 'agreementId', row.agreementId)
            this.$set(this.form, 'unitId', row.unitId)
            this.$set(this.form, 'typeId', row.typeId)
            this.$set(this.form, 'unitName', row.unitName)
            this.$set(this.form, 'typeName', row.typeName)
            this.$set(this.form, 'modelName', row.modelName)
            this.$set(this.form, 'zkNum', row.stockNum)
            this.$set(this.form, 'kcNum', row.num)
            // console.log(this.form)
            this.openOut = true
            this.title = '出库'
        },
        handleIn(row) {
            //2
            this.reset()
            console.log(row)
            // this.nform = row;
            this.$set(this.nform, 'id', row.id)
            this.$set(this.nform, 'agreementId', row.agreementId)
            this.$set(this.nform, 'unitId', row.unitId)
            this.$set(this.nform, 'typeId', row.typeId)
            this.$set(this.nform, 'unitName', row.unitName)
            this.$set(this.nform, 'typeName', row.typeName)
            this.$set(this.nform, 'modelName', row.modelName)

            this.$set(this.nform, 'ckNum', row.receiveNum)
            this.openIn = true
            this.title = '退库'
        },
        /** 提交按钮 */
        submitForm: function (type) {
            if (type == 1) {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (
                            parseInt(this.form.outNum) >
                            parseInt(this.form.zkNum)
                        ) {
                            this.$message.error('出库数量不可大于在库数量')
                            return
                        }
                        let param = {}
                        param = this.form
                        param.type = 1
                        console.log(param)
                        operate(param).then((response) => {
                            this.$modal.msgSuccess('操作成功')
                            this.openOut = false
                            this.getList(this.leaseType)
                        })
                    }
                })
            }
            if (type == 2) {
                this.$refs['nform'].validate((valid) => {
                    if (valid) {
                        if (
                            parseInt(this.nform.outNum) >
                            parseInt(this.nform.ckNum)
                        ) {
                            this.$message.error('退库数量不可大于领用数量')
                            return
                        }
                        let param = {}
                        param = this.nform
                        param.type = 2
                        operate(param).then((response) => {
                            this.$modal.msgSuccess('操作成功')
                            this.openIn = false
                            this.getList(this.leaseType)
                        })
                    }
                })
            }
        },

        //查看记录
        openRecords(row, type) {
            this.title = '领用记录'
            this.openRecord = true
            /*this.queryType = type
            this.dialogQuery.typeName = row.typeName
            this.dialogQuery.agreementId = row.agreementId
            this.dialogQuery.modelName = row.modelName
            this.dialogQuery.unitId = row.unitId
            this.dialogQuery.typeId = row.typeId*/

            // console.log('row---', row)

            this.newQueryParams.modelId = row.typeId

            this.getDialogList()
        },
        /** 查询列表 */
        getDialogList() {
            this.dialogQuery.queryType = this.queryType
            getRecords(this.newQueryParams).then((response) => {
                this.dialogList = response.rows
                this.dialogTotal = response.total
            })
        },
        /** 导出按钮操作 */
        handleExport() {
            this.downloadJson(
                'material/secondaryWarehouse/exportList',
                JSON.stringify(this.queryParams),
                `二级库_${new Date().getTime()}.xlsx`,
            )
        },
    },
    watch: {
        openRecord: {
            handler(newValue) {
                if (!newValue) {
                    this.newQueryParams.pageNum = 1
                    this.newQueryParams.pageSize = 10
                }
            },
            deep: true,
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}
.upper-sec {
    display: flex;
    margin-bottom: 15px;
    div {
        box-sizing: border-box;
        padding: 10px 30px;
        background-color: #fff;
        color: #999999;
        font-size: 14px;
        cursor: pointer;
    }
    div:first-child {
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }
    div:last-child {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }
    .clicked {
        background-color: #409eff;
        color: #fff;
    }
}
.clickText {
    color: #02a7f0;
    cursor: pointer;
}
</style>
