<template>
    <div>
        <ele-modal :visible.sync="visible" append-to-body title="领料" width="1200px" :maxable="true">
            <div v-for="(item, i) in List" :key="i">
                <el-form ref="form" label-width="100px" class="create-form">

                    <el-row :gutter="15">

                        <el-col :span="12">
                            <el-form-item label="工单编码:" prop="workOrderCode">
                                <el-input v-model="item.code" disabled />
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item prop="workOrderCode">
                                <el-button type="primary" @click="openPicking(item)">添加物料</el-button>
                            </el-form-item>
                        </el-col>


                    </el-row>

                </el-form>


                <ele-pro-table :columns="columns" :datasource="item.bomList" cache-key="tgDetails"
                    height="calc(100vh - 350px)" :need-page="false" :cache-key="`produceOrderTable`"
                    :selection.sync="selection">


                    <template v-slot:demandQuantity="{ row }">
                        {{ row.demandQuantity }} {{ row.unit }}
                    </template>

                    
               

                    


                    <template v-slot:packingCount="{ row }">
                        <el-select v-model="row.packingCount">
                            <el-option v-for="item of row.warehouseList" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </template>


                    <template v-slot:cz="{ row, $index }">
                        <el-link type="primary" :underline="false" @click="goDetail(item, $index)">
                            删除
                        </el-link>
                    </template>



                </ele-pro-table>

            </div>
            <el-button type="primary" @click="save()">提交</el-button>

        </ele-modal>

        <pickingList isType="pick" ref="pickingListRef" @allSelection="allSelection"></pickingList>
    </div>
</template>

<script>

import { workorderList } from '@/api/workOrderList'
import pickingList from './pickingList.vue';
export default {
    components: {pickingList},


    computed: {
        clientEnvironmentId() {
            return this.$store.state.user.info.clientEnvironmentId;
        },
    },
    data() {
        return {
            visible: false,
            List: [],
            selection: [],
            row: {},
        };
    },
    created() {

    },
    computed: {

        clientEnvironmentId() {
            return this.$store.state.user.info.clientEnvironmentId;
        },
        columns() {
            return [
                {
                    width: 45,
                    type: 'selection',
                    columnKey: 'selection',
                    align: 'center',
                    fixed: 'left'
                },
                {
                    label: '序号',
                    type: 'index',
                    width: 55,
                    align: 'center'
                },

                {
                    label: '物料编码',
                    prop: 'categoryCode'
                },
                {
                    label: '名称',
                    prop: 'categoryName'
                },

                {
                    label: '牌号',
                    prop: 'brandNum'
                },

                {
                    label: '数量',
                    prop: 'demandQuantity',
                    slot: 'demandQuantity',
                },

                {
                    label: '领料仓库',
                    prop: 'packingCount',
                    slot: 'packingCount',
                },

                {
                    label: '库存可用量',
                    prop: 'packingUnit',
                    show: this.clientEnvironmentId == 21
                },
                {
                    label: '操作',
                    slot: 'cz',
                },
            ]
        },

    },
    methods: {
        // 添加物料
        openPicking(item) {
            console.log(item, 'item');
            this.$refs.pickingListRef.open(item.createUserId, item);
        },

        // 选择回显
        allSelection(id, list) {
            console.log(id, list, '55555555555');
            this.List.forEach((e) => {
                if (id == e.createUserId) {
                    e.bomList.push(list);
                    this.$forceUpdate();
                }
            });
        },


        // 删除列表
        goDetail(row, index) {
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let index = this.List.findIndex(m => m.id == row.id);

                if (index > -1) {
                    this.List[index].bomList.splice(index, 1)
                }
            })
        },

        save() {


            let _arr = []

            if (this.clientEnvironmentId !== 21) {

                _arr = this.List.map(m => {
                    console.log(m, 'm');
                    if (m.bomList.length > 0) {
                        let bomList = m.bomList.filter(f => f.checked)
                        m['bomDetailDTOSList'] = [...bomList, ...m.modelList, ...m.palletList]
                    }
                    m.instanceList = [...m.instanceList2, ...m.modelList2, ...m.palletList2, ...m.packingList2, ...
                        m.semiProductList2, ...m.productList2, ...m.junkProductList2
                    ]
                    m.isOutsource = this.isOutsource
                    return {
                        ...m
                    }
                })
            }


            if (this.clientEnvironmentId == 21) {

                findVoucherList({ workOrderId: this.idsList[0] }).then(res => {
                    this.visible = false;
                    this.$emit('update:visible', false);
                    this.$message.success(res.msg);
                })

            } else {
                batchSave(_arr).then(res => {

                    this.visible = false;

                })
            }



        },

        // 获取领料列表

        workorderList() {

            workorderList(this.row).then((res) => {
                this.List = res.map(m => {
                    m.workOrderId = m.id
                    let modelList = []
                    let palletList = []
                    let bomList = []

                    m.bomDetailDTOS.forEach((f, i) => {

                        if (f.rootCategoryLevelId == 5) {
                            f.automatic = 2
                            modelList = modelList.concat(f)
                        }

                        if (f.rootCategoryLevelId == 8) {
                            f.automatic = 2
                            palletList = palletList.concat(f)
                        }
                        if (f.rootCategoryLevelId != 5 && f.rootCategoryLevelId != 8) {
                            f.automatic = 2
                            bomList = bomList.concat(f)
                        }

                    })

                    m['modelList'] = modelList
                    m['palletList'] = palletList
                    m['bomList'] = bomList
                    m['modelList2'] = []
                    m['instanceList2'] = []
                    m['palletList2'] = []
                    m['packingList2'] = []
                    m['semiProductList2'] = []
                    m['productList2'] = []
                    m['junkProductList2'] = []
                    delete m.id
                    return {
                        ...m
                    }
                })

                console.log(this.List,'this.List');
            });
        },


        open(row) {

            this.row = row;

            this.workorderList();

            this.visible = true;
        }
    }
};
</script>