<template>
    <el-container>
        <el-header style="height: 50%;padding: 0">
            <el-container>
                <el-header>
                    <div class="left-panel">
                        <el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'mlog.create'">新增</el-button>
                    </div>
                </el-header>
                <el-main class="nopadding">
                    <scTable ref="table" :apiObj="apiObj" row-key="id" stripe :params="params">
                        <el-table-column type="index" width="50"/>
                        <el-table-column label="配料日期" prop="handle_date">
                        </el-table-column>
                        <el-table-column label="产物" prop="material" show-overflow-tooltip>
                            <template #default="scope"><span v-if="scope.row.material_out_">{{
                                scope.row.material_out_.name
                            }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="批次" prop="batch"> </el-table-column>
                        <el-table-column label="数量/桶数" prop="count_real">
                        </el-table-column>
                        <el-table-column label="每桶重量/kg" prop="count_real_eweight">
                        </el-table-column>
                        <el-table-column label="配料人" prop="handle_user_name">
                            <template #default="scope">
                                <span v-for="item in scope.row.handle_users_" v-bind:key="item.id">
                                    {{ item.name }}/
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" align="center" width="180">
                            <template #default="scope">
                                <el-button link type="primary" @click="table_edit(scope.row)" v-auth="'mlog.update'">
                                    编辑
                                </el-button>
                                <el-button link type="primary" @click="addHandover(scope.row)" v-auth="'handover.create'">
                                    转交接单
                                </el-button>
                                <el-button link type="danger" @click="table_del(scope.row)" v-auth="'mlog.delete'">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </scTable>
                </el-main>
            </el-container>

        </el-header>
        <el-main class="nopadding">
            <el-container>
                <el-header>
                    <div class="left-panel">
                        <span style="font-size: 14px">交接记录</span>
                    </div>
                </el-header>
                <el-main>
                    <scTable ref="table2" :apiObj="apiObjHandover" row-key="id" stripe :params="paramsHandover">
                        <el-table-column type="index" width="50" />
                        <el-table-column label="送料日期" prop="send_date">
                        </el-table-column>
                        <el-table-column label="产物" prop="material" show-overflow-tooltip>
                            <template #default="scope"><span v-if="scope.row.material_">{{
                                scope.row.material_.name
                            }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="批次" prop="batch"> </el-table-column>
                        <el-table-column label="数量/桶数" prop="count">
                        </el-table-column>
                        <el-table-column label="每桶重量/kg" prop="count_eweight">
                        </el-table-column>
                        <el-table-column label="交送人" prop="send_user_name">
                        </el-table-column>
                        <el-table-column label="接收人" prop="recive_user_name">
                        </el-table-column>
                        <el-table-column label="是否确认" prop="submit_time">
                            <template #default="scope">
                                <span v-if="scope.row.submit_time">是</span>
                                <span v-else>否</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" align="left" width="100">
                            <template #default="scope">
                                <el-button link type="primary" @click="handover_edit(scope.row)" v-auth="'handover.update'"
                                    v-if="scope.row.submit_time == null">
                                    编辑
                                </el-button>
                                <el-button link type="danger" @click="handover_delete(scope.row)" v-auth="'handover.delete'"
                                    v-if="scope.row.submit_time == null">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </scTable>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
    <el-dialog title="交接单" ref="handoverDialog" v-model="handoverVisible" :size="1000" destroy-on-close
        @closed="handoverVisible = false">
        <el-form ref="dialogForm" :model="handoverForm" :rules="rules" label-width="120px">
            <el-row>
                <el-col :md="12" :sm="24">
                    <el-form-item label="送料日期" prop="send_date">
                        <el-date-picker v-model="handoverForm.send_date" type="date" value-format="YYYY-MM-DD"
                            style="width: 100%" />
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="24">
                    <el-form-item label="接收部门" prop="recive_dept">
                        <el-select v-model="handoverForm.recive_dept" placeholder="接收部门" clearable style="width: 100%"
                            @change="getUserList2">
                            <el-option v-for="item in deptOptions" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="24">
                    <el-form-item label="接收人" prop="recive_user">
                        <el-select v-model="handoverForm.recive_user" placeholder="接收人" clearable style="width: 100%">
                            <el-option v-for="item in userList2" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="24">
                    <el-form-item label="交送人" prop="send_user">
                        <el-select v-model="handoverForm.send_user" placeholder="交送人" clearable style="width: 100%">
                            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="24">
                    <el-form-item label="桶数" prop="count">
                        <el-input-number v-model="handoverForm.count" controls-position="right" :min="0" step="1"
                            :step-strictly="true" style="width:100%" placeholder="桶数">
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="24">
                    <el-form-item label="每桶kg" prop="count_eweight">
                        <el-input-number v-model="handoverForm.count_eweight" controls-position="right" :min="0" step="1"
                            :step-strictly="true" style="width:100%" placeholder="每桶kg">
                        </el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-footer>
            <el-button @click="handoverVisible = false">取消</el-button>
            <el-button type="primary" @click="submitHandover">提交</el-button>
        </el-footer>
    </el-dialog>
    <save-dialog v-if="dialogSave" 
        ref="saveDialog"
        :mgroup="currentMgroup.id"
        :mgroupShiftRule = "currentMgroup.shift_rule"
        :activeType="activeName"
        @success="handleSaveSuccess" 
        @closed="dialogSave = false">
    </save-dialog>
</template>
<script>
import saveDialog from "./worktask_form.vue";
export default {
    components: {
        saveDialog,
    },
    data() {
        return {
            activeName:'8车间',
            currentMgroup: {},
            apiObj: null,
            params: {},
            apiObjHandover: null,
            paramsHandover: {},
            handoverForm: {},
            handoverVisible: false,
            dialogSave:false,
            deptOptions: [],
            userList: [],
            userList2: []
        }
    },
    mounted() {
        this.initMgroup()
        this.getDepts()
    },
    methods: {
        add() {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("add");
            });
        },
        //编辑
        table_edit(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("edit").setData(row);
            });
        },
        async table_del(row) {
            this.$confirm(`确定删除吗？`, "提示", {
                type: "warning",
            }).then(() => {
                this.$API.wpm.mlog.delete.req(row.id).then((res) => {
                    this.$message.success("删除成功");
                    this.$refs.table.refresh();
                    return res;
                }).catch((err) => {
                    return err;
                });
            }).catch(() => { });
        },
        handleSaveSuccess(){
            this.$refs.table.refresh();
        },
        getDepts() {
            this.$API.system.dept.list.req({ page: 0, name__in: '7车间,8车间,10车间' }).then(res => {
                this.deptOptions = res;
            })
        },
        getUserList2(val) {
            this.$API.system.user.list.req({ belong_dept: val, page: 0 }).then(res => {
                this.userList2 = res
            })
        },
        initMgroup() {
            this.$API.mtm.mgroup.list.req({ page: 0, name: '混料' }).then(res => {
                if (res.length == 1) {
                    this.currentMgroup = res[0]
                    this.params.mgroup = this.currentMgroup.id
                    this.apiObj = this.$API.wpm.mlog.list

                    this.paramsHandover.send_mgroup = this.currentMgroup.id
                    this.apiObjHandover = this.$API.wpm.handover.list
                    this.$API.system.user.list.req({ page: 0, belong_dept: this.currentMgroup.belong_dept }).then(res => {
                        this.userList = res
                    })
                } else {
                    this.$message.error("未找到工段");
                }
            })
        },
        //从生产日志生成交接记录
        addHandover(row) {
            this.handoverForm.send_date = "";
            this.handoverForm.mlog = row.id;
            this.handoverForm.batch = row.batch;
            this.handoverForm.count = row.count_real;
            this.handoverForm.material = row.material_out;
            this.handoverForm.count_eweight = row.count_real_eweight;
            this.handoverForm.send_dept = row.belong_dept;
            this.handoverForm.recive_dept = "";
            this.handoverForm.send_user = "";
            this.handoverForm.recive_user = "";
            this.handoverVisible = true;
        },
        submitHandover() {
            this.$API.wpm.handover.create.req(this.handoverForm).then((res) => {
                this.$message.success("创建成功");
                this.handoverVisible = false;
                this.$refs.table2.refresh();
            });
        },
        handover_edit(row) {
            Object.assign(this.handoverForm, row);
            this.getUserList2(row.recive_dept)
            this.handoverVisible = true;
        },
        handover_delete(row) {
            this.$confirm(`确定删除吗？`, "提示", {
                type: "warning",
            }).then(() => {
                this.$API.wpm.handover.delete
                    .req(row.id)
                    .then((res) => {
                        this.$message.success("删除成功");
                        this.$refs.table2.refresh();
                        return res;
                    })
                    .catch((err) => {
                        return err;
                    });
            })
            .catch(() => { });
        },
    }
}
</script>