<template>
    <basic-container>
        <!-- 领料出库 -->
        <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
            @search-change="searchChange" @search-reset="searchReset" :before-open="beforeOpen"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad" @row-save="rowSave">
            <template #menu-left>
                <el-input v-model="input" style="width: 240px;margin-right:24px" placeholder="请扫描条形码" />
                <el-button type="primary" @click="handleOut">出库</el-button>
            </template>
            <template #menu="scope">
                <el-button type="text" @click="editRow(scope.row)">修改</el-button>
                <el-button type="text" @click="completeRow(scope.row)">完成</el-button>
                <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
            </template>
            <!-- <template #mtltmrk="{ row }">{{ row.coGoods.mtltmrk }}</template>
            <template #checkoutCode="{ row }">{{ row.coGoods.checkoutCode }}</template>
            <template #stRealtimeStock="{ row }">{{ row.stRealtimeStock.quantity }}</template>
            <template #userName="{ row }">{{ row.crMan.userName }}</template>
            <template #unitName="{ row }">{{ row.coGoods.unitName }}</template> -->
        </avue-crud>
        <editMaterial v-if="editDialog" :show-dialog="editDialog" :row="checkRow" @closeDialog="closeDialog"></editMaterial>
    </basic-container>
</template>
<script>
import { getList,addIssue,delIssue,completeIssue } from "@/api/storeManagement/materialIssuing"
import editMaterial from "./components/editMaterial.vue" 
export default {
    components:{
        editMaterial
    },
    data() {
        return {
            loading: false,
            editDialog:false,
            tableData:[],
            checkRow:{},
            query:{},
            data: [],
            form: {},
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList: [],
            option: {
                columnSort: true,
                tip: false,
                height: 'auto',
                align: 'center',
                calcHeight: 32,
                simplePage: false,
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex: 3,
                tree: false,
                border: true,
                index: false,
                selection: true,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                editBtnText: '修改',
                addBtn: false,
                labelWidth: 140,
                menu: true,
                menuWidth: 150,
                dialogWidth: 1200,
                dialogClickModal: false,
                searchEnter: true,
                excelBtn: true,
                gridBtn: false,
                searchShowBtn: false,
                showOverflowTooltip: true,
                searchLabelPosition: 'left',
                searchGutter: 24,
                searchSpan: 6,
                menuAlign: 'left',
                gridBtn: false,
                searchMenuPosition: 'right',
                addBtnIcon: ' ',
                viewBtnIcon: ' ',
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                searchShowBtn: false,

                column: [
                    {
                        label: '物料编号',
                        // addDisabled: true,
                        prop: 'goodsCode',
                        span: 8,
                        overflow: true,
                        search: true,
                        // hide: false,
                        // order: 17,
                        width:160,
                        rules: [
                            {
                                required: true,
                                message: '请输入物料编号',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '物料名称',
                        prop: 'goodsName',
                        span: 8,
                        overflow: true,
                        width:150,
                        search: true,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入物料名称',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '型号/牌号',
                        prop: 'materialModel',
                        span: 8,
                        width:100,
                        overflow: true,
                        search: false,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入型号/牌号',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '规格',
                        prop: 'specifications',
                        span: 8,
                        overflow: true,
                        search: false,
                        width:100,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入规格',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '质量编号',
                        prop: 'checkCode',
                        span: 8,
                        overflow: true,
                        width:150,
                        search: false,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入质量编号',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '总库存',
                        prop: 'totalQty',
                        width:100,
                        span: 8,
                        overflow: true,
                        search: false,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入总库存',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '提请数量',
                        width:100,
                        prop: 'quantity',
                        span: 8,
                        overflow: true,
                        search: false,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入提请数量',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '计量单位',
                        prop: 'unitName',
                        width:100,
                        span: 8,
                        overflow: true,
                        search: false,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入单位',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '库房',
                        prop: 'shName',
                        span: 8,
                        overflow: true,
                        search: false,
                        width:100,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入库房',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '出库库位',
                        prop: 'location',
                        span: 8,
                        overflow: true,
                        search: false,
                        width:100,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入出库库位',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '批次号',
                        prop: 'piNo',
                        span: 8,
                        overflow: true,
                        width:100,
                        search: false,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入批次号',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '可出库数量',
                        prop: 'availableQty',
                        span: 8,
                        overflow: true,
                        width:100,
                        search: false,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入出库数量',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '已出库数量',
                        prop: 'outQuantity',
                        span: 8,
                        overflow: true,
                        width:100,
                        search: false,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入出库数量',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '当前出库数量',
                        prop: 'currentOutQty',
                        span: 8,
                        overflow: true,
                        width:120,
                        search: false,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入当前出库数量',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '提请人',
                        prop: 'crManName',
                        span: 8,
                        overflow: true,
                        width:100,
                        search: true,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入提请人',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '提请日期',
                        prop: 'crDate',
                        type: 'date',
                        searchRange: true,
                        startPlaceholder: '开始时间',
                        endPlaceholder: "结束时间",
                        span: 8,
                        overflow: true,
                        search: true,
                        width:180,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入提请日期',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '备注',
                        prop: 'memo',
                        span: 8,
                        overflow: true,
                        search: false,
                        width:130,
                        // hide: false,
                        // order: 17,
                        rules: [
                            {
                                required: true,
                                message: '请输入备注',
                                trigger: 'blur',
                            },
                        ],
                    },

                ]
            }
        }
    },
    mounted() {

    },
    methods: {
        searchChange(params, done){
            this.query = params
            this.page.currentPage = 1
            this.onLoad()
            done()
        },
        searchReset(){
            this.query = {}
            this.onLoad()
        },
        currentChange(currentPage){
            this.page.currentPage = currentPage
        },
        sizeChange(pageSize){
            this.page.pageSize = pageSize
        },
        // 多选
        selectionChange(list) {
            this.selectionList = list;
        },
        // 修改
        editRow(row){
            this.checkRow = row
            this.editDialog = true
        },
        // 完成
        completeRow(row){
            this.$confirm('确定完成此条数据?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                completeIssue({id:row.id}).then(res =>{ 
                    if(res.data.code == 200){
                        this.$message.success('完成成功')
                        this.onLoad()
                    }
                })
            })
        },
        // 删除
        deleteRow(row){
            this.$confirm('确定删除此条数据?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => { 
                delIssue({ids:row.id}).then(res =>{ 
                    if(res.data.code == 200){
                        this.$message.success('删除成功')
                        this.onLoad()
                    }
                })
            }) 
        },
        // 批量出库
        handleOut() {
            if(this.selectionList.length == 0){
                this.$message.error('请至少选择一条数据')
                return
            }
            let tmp = this.selectionList.find(item => item.已出库数量 > item.quantity)
            if(tmp){
                this.$message.error('已出库数量大于提请数量，不能出库')
                return
            }

            this.$confirm('确定对已选择的数据进行出库?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                addIssue(this.selectionList.map(item => item.id)).then(res =>{
                    if(res.data.code == 200){
                        this.$message.success('出库成功')
                        this.onLoad()
                    }
                })
            })
        },
        closeDialog(val){
            this.editDialog = false
            if(val){
                this.onLoad()
            }
        },
        onLoad() {
            this.loading = true
            getList({
                current:this.page.currentPage,
                size:this.page.pageSize,
                ...this.query
            }).then(res =>{
                this.data = res.data.data.records
                this.page.total = res.data.data.total
                this.loading = false
            })
        }
    }
}
</script>