<template>
    <el-dialog :title="titleMap[form.type]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
        <el-form ref="dialogForm" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="物料">
                <el-select v-model="selectMaterial" value-key="id" clearable style="width: 100%;"
                    @change="selectMaterialChange">
                    <el-option v-for="item in materialOptions" :key="item.id" :label="item.number" :value="item">
                        <span style="float: left">{{ item.number }}</span>
                        <span style=" float: right; color: var(--el-text-color-secondary);font-size: 13px;">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="批次号">
                <!-- <el-input v-model="form.batch" placeholder="手动输入批次号" :disabled="inputBatchDisable" /> -->
                <el-select v-model="form.batch" value-key="id" filterable allow-create clearable style="width: 100%;" :disabled="inputBatchDisable">
                    <el-option 
                    v-for="item in wbatchOptions" 
                    :key="item" 
                    :label="item" 
                    :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="仓库已有批次">
                <el-select v-model="selectBatch" value-key="id" clearable style="width: 100%;" @change="selectBatchChange"
                    @clear="selectBatchClear" :disabled="selectBatchDisable">
                    <el-option v-for="item in batchOptions" :key="item.id" :label="item.batch" :value="item">
                        <span style="float: left">{{ item.batch }}</span>
                        <span style="
                        float: right;
                        color: var(--el-text-color-secondary);
                        font-size: 13px;
                        ">{{ item.count }} -- {{ item.warehouse_name }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="仓库">
                <el-select v-model="form.warehouse" clearable style="width: 100%;" :disabled="warehouseDisable">
                    <el-option v-for="item in warehouseOptions" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="数量">
                <el-input-number v-model="form.count" :min="1" style="width: 100%;" />
            </el-form-item>
            <div v-if="assembShow">
                <el-row v-for="item in components" v-bind:key="item" style="margin-bottom:8px">
                    <el-col :span="12">
                        {{ item.number }} - {{ item.name }}
                    </el-col>
                    <el-col :span="12">
                        <el-select v-model="item.batch" clearable style="width: 100%;">
                            <el-option v-for="itemx in item.batchOptions" :key="itemx.id" :label="itemx.batch"
                                :value="itemx.batch">
                                <span style="float: left">{{ itemx.batch }}</span>
                                <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">{{ itemx.count }}</span>
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </div>
        </el-form>
        <template #footer>
            <el-button type="primary" :loading="isSaveing" @click="submit">
                保存
            </el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </template>
    </el-dialog>
</template>
<script>
const defaultForm = {
    "state": 10,
    "type": "do_in"
}
export default {
    emits: ["success", "closed"],
    props: {
        mioId: { type: String, default: '' },
        belongDeptName:{type: String, default: ''},
        belongDeptId: { type: String, default: null },
        mioObj: { type: Object }
    },
    data() {
        return {
            type: 'do_in',
            loading: false,
            mode: "add",
            titleMap: {
                'do_out': '生产领料',
                'sale_out': '销售发货',
                'pur_in': '采购入库',
                'do_in': '生产入库',
                'other_in': '其他入库',
                'other_out': '其他出库',
            },
            form: {},
            rules: {
                material: [{ required: true, message: "请选择所需产品", trigger: "blur" }],
            },
            visible: false,
            isSaveing: false,
            materialOptions: [],
            batchOptions: [],
            setFiltersVisible: false,
            warehouseOptions: [],
            warehouseDisable: false,
            selectBatchDisable: false,
            assembShow: false,
            selectMaterial: null,
            selectBatch: null,
            components: [],
            wbatchOptions:[],
        };
    },
    mounted() {
        this.getBatchs();
    },
    methods: {
        init() {
            this.getMaterialOptions()
            this.getWarehouseOptions()
        },
        getWarehouseOptions() {
            this.$API.inm.warehouse.list.req({ page: 0 }).then(res => {
                this.warehouseOptions = res
            })
        },
        //获取车间物料批次号
        getBatchs(){
            let that = this;
            this.$API.wpm.wmaterial.batchs.req({belong_dept_name:this.belongDeptName}).then(res=>{
                that.wbatchOptions = res;
            });
        },
        getMaterialOptions() {
            var type = this.form.type
            var query
            if (type == 'do_out') {
                query = { page: 0, type__in: '10, 20, 30', is_hidden: false, is_assemb: false }
                this.inputBatchDisable = true
            }
            else if (type == 'do_in') {
                query = { page: 0, type__in: '10, 20', is_hidden: false }
                this.inputBatchDisable = false
            }
            else if (type == 'pur_in') {
                query = { page: 0, type__in: 30, is_hidden: false, pu_orderitem_material__pu_order: this.mioObj.pu_order }
                this.inputBatchDisable = false
            }
            else if (type == 'sale_out') {
                query = { page: 0, type__in: 10, is_hidden: false, orderitem_material__order: this.mioObj.order }
                this.inputBatchDisable = true
            }
            else {
                query = { page: 0 }
            }
            this.$API.mtm.material.list.req(query).then(res => {
                this.materialOptions = res
            })
        },
        async initAssemb(item) {
            this.selectBatchDisable = true
            this.assembShow = true
            this.components = []
            var id__in = Object.keys(item.components).join(',')
            if (id__in.length > 0) {
                var res = await this.$API.mtm.material.list.req({ page: 0, id__in: id__in })
                this.components = res
                for (var i = 0; i < this.components.length; i++) {
                    var res2 = await this.$API.wpm.wmaterial.list.req({ page: 0, material: this.components[i].id, belong_dept: this.belongDeptId, count__gte: 1 })
                    this.components[i].batchOptions = res2
                }
            }
        },
        getBatchOptions() {
            this.$API.inm.warehouse.batch.req({ page: 0, material: this.form.material, count__gte: 1 }).then(res => {
                this.batchOptions = res
                if (res.length == 0) {
                    this.selectBatchDisable = true
                } else {
                    this.selectBatchDisable = false
                }
            })
        },
        selectMaterialChange(item) {
            var that = this
            var type = this.form.type
            var material = item.id
            that.form.material = material

            if (type == 'do_in') {
                if (item.is_assemb) {
                    this.initAssemb(item)
                } else {
                    this.selectBatchDisable = false
                    this.components = []
                    this.assembShow = false
                    this.getBatchOptions()
                }

            }
            else {
                this.getBatchOptions()
            }


        },
        getItem(options, id) {
            for (var i = 0; i < options.length; i++) {
                if (options[i].id == id) {
                    return options[i]
                }
            }
        },
        selectBatchChange(item) {
            // var item = this.getItem(this.batchOptions, id)
            this.form.batch = item.batch
            this.form.warehouse = item.warehouse
            this.warehouseDisable = true
            this.inputBatchDisable = true
        },
        selectBatchClear() {
            this.form.batch = ''
            this.form.warehouse = ''
            this.warehouseDisable = false
            this.inputBatchDisable = false
        },
        //显示
        open(mode = "add", type = "") {
            this.mode = mode;
            this.form.type = type;
            if (mode == 'add') {
                this.init()
            }
            this.visible = true;
            return this;
        },
        //提交
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    this.form.mio = this.mioId;
                    if (this.components.length > 0) {
                        this.form.assemb = []
                        for (var i = 0; i < this.components.length; i++) {
                            this.form.assemb.push({ 'material': this.components[i].id, 'batch': this.components[i].batch })
                        }
                    }
                    try {
                        var res;
                        if (this.mode == "add") {
                            res = await this.$API.inm.mioitem.create.req(this.form);
                        } else if (this.mode == "edit") {
                            res = await this.$API.inm.mioitem.update.req(this.form.id, this.form);
                        }
                        this.isSaveing = false;
                        this.$emit("success", this.form, this.mode);
                        this.visible = false;
                        this.$message.success("操作成功");
                    } catch (err) {
                        console.log(err)
                        //可以处理校验错误
                        this.isSaveing = false;
                        return err;
                    }
                }
            });
        },
        //表单注入数据
        setData(data) {
            Object.assign(this.form, data);
        },
        //设置过滤项
        setFilters(filters) {
            this.selectionFilters = filters;
            this.setFiltersVisible = true;
        },
    },
};
</script>
<style></style>
  