<template>
    <el-container>
        <el-header style="height:60%; padding: 0">
            <el-container>
                <el-aside style="width: 50%">
                    <el-container>
                        <el-header>
                            <div class="left-panel">
                                <el-date-picker v-model="queryMtask.start_date" type="date" value-format="YYYY-MM-DD"
                                    placeholder="工作日期" @change="handleQueryMtask" />
                            </div>
                        </el-header>
                        <el-main class="nopadding">
                            <scTable ref="table_mtask" :apiObj="apiMtask" row-key="id" stripe :params="paramsMtask"
                                :query="queryMtask" @row-click="mtaskClick">
                                <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="">
                                    <template #default="scope">
                                        <span v-if="scope.row.material_out_">{{
                                            scope.row.material_out_.specification
                                        }}|{{ scope.row.material_out_.model }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="任务编号" prop="number" width="140" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column label="任务量" prop="count"> </el-table-column>
                                <el-table-column label="工作日期" prop="start_date">
                                </el-table-column>
                                <el-table-column label="合格数" prop="count_ok"> </el-table-column>
                                <el-table-column label="状态" prop="state">
                                    <template #default="scope">
                                        <el-tag v-if="scope.row.state !== 40">
                                            {{ state_[scope.row.state] }}
                                        </el-tag>
                                        <el-tag v-else type="success">
                                            {{ state_[scope.row.state] }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="60">
                                    <template #default="scope">
                                        <el-link type="primary" @click="mtask_submit(scope.row)" v-auth="'mtask.submit'"
                                            v-if="scope.row.state != 40">提交
                                        </el-link>
                                    </template>
                                </el-table-column>
                            </scTable>
                        </el-main>
                    </el-container>
                </el-aside>
                <el-main class="nopadding">
                    <el-container>
                        <el-header style="height: 30%; padding: 0">
                            <el-card style="width: 100%; height: 100%">
                                <template #header>
                                    <div class="card-header">
                                        <span>任务信息</span>
                                    </div>
                                </template>
                                <el-descriptions>
                                    <el-descriptions-item label="任务编号">{{ currentMtask.number }}</el-descriptions-item>
                                    <el-descriptions-item label="状态">{{ state_[currentMtask.state] }}</el-descriptions-item>
                                    <el-descriptions-item label="产品名称">
                                        <span v-if="currentMtask.material_out_">{{ currentMtask.material_out_.name
                                        }}</span></el-descriptions-item>
                                    <el-descriptions-item label="规格型号"><span v-if="currentMtask.material_out_">{{
                                        currentMtask.material_out_.specification
                                    }}</span></el-descriptions-item>
                                    <el-descriptions-item label="合格数">{{ currentMtask.count_ok
                                    }}</el-descriptions-item>
                                    <el-descriptions-item label="不合格数">{{ currentMtask.count_notok
                                    }}</el-descriptions-item>
                                </el-descriptions>
                            </el-card>
                        </el-header>
                        <el-main class="nopadding">
                            <el-container>
                                <el-header>
                                    <div class="left-panel">
                                        <el-button type="primary" icon="el-icon-plus" @click="addMlog"
                                            v-if="currentMtask && currentMtask.state == 20"
                                            v-auth="'mlog.create'">新增</el-button>
                                    </div>
                                </el-header>
                                <el-main class="nopadding">
                                    <scTable ref="table_mlog" :data="mlogs" row-key="id" stripe hidePagination hideDo>
                                        <el-table-column label="锅号" prop="equipment_name">
                                        </el-table-column>
                                        <el-table-column label="产品名称" prop="material_out_" min-width="120">
                                            <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="material_out_">
                                            <template #default="scope">
                                                <span v-if="scope.row.material_out_">{{
                                                    scope.row.material_out_.specification
                                                }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="生产量" prop="count_real">
                                        </el-table-column>
                                        <el-table-column label="合格量" prop="count_ok"> </el-table-column>
                                        <el-table-column label="合格率" prop="count">
                                            <template #default="scope">
                                                <span>{{ Math.floor(scope.row.count_ok / scope.row.count_real * 100)
                                                }}%</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="不合格原因及数量" align="center">
                                            <el-table-column label="炸纹" prop="count_n_zw">
                                            </el-table-column>
                                            <el-table-column label="条纹" prop="count_n_tw">
                                            </el-table-column>
                                            <el-table-column label="气泡" prop="count_n_qp">
                                            </el-table-column>
                                            <el-table-column label="弯曲" prop="count_n_wq">
                                            </el-table-column>
                                            <el-table-column label="其他" prop="count_n_qt">
                                            </el-table-column>
                                            <el-table-column label="合计" prop="count_n_qt">
                                            </el-table-column>
                                        </el-table-column>
                                        <el-table-column label="退火炉号" prop="equipment_2_name">
                                        </el-table-column>
                                        <el-table-column label="第几锅" prop="index"> </el-table-column>
                                        <el-table-column label="成型人" prop="handle_user_name">
                                        </el-table-column>
                                        <el-table-column label="切料人" prop="handle_user_2_name">
                                        </el-table-column>
                                        <el-table-column label="操作" fixed="right" width="120" align="center">
                                            <template #default="scope">
                                                <el-button link type="primary" @click="table_edit(scope.row)"
                                                    v-auth="'mlog.update'" v-if="scope.row.submit_time == null">编辑
                                                </el-button>
                                                <el-button link type="danger" @click="table_del(scope.row)"
                                                    v-auth="'mlog.delete'" v-if="scope.row.submit_time == null">删除
                                                </el-button>
                                                <el-button link type="primary" @click="mlog_submit(scope.row)"
                                                    v-auth="'mlog.submit'" v-if="scope.row.submit_time == null"
                                                    :loading="mlogHandleLoading">提交
                                                </el-button>
                                                <el-button link type="danger" @click="mlog_revert(scope.row)"
                                                    v-auth="'mlog.submit'" v-if="scope.row.submit_time != null"
                                                    :loading="mlogHandleLoading">撤回
                                                </el-button>
                                                <el-button link type="success" @click="table_show(scope.row)">
                                                    日志记录
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </scTable>
                                </el-main>
                            </el-container>
                        </el-main>
                    </el-container>

                </el-main>
            </el-container>
        </el-header>
        <el-main class="nopadding">
            <el-container>
                <el-aside style="width: 50%">
                    <el-container>
                        <el-header>
                            <div class="left-panel">
                                <span style="font-size: 14px">交接记录</span>
                            </div>
                        </el-header>
                        <el-main>
                            <scTable ref="table_handover" :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="交送人" 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">
                                    <template #default="scope">
                                        <el-button link type="primary" @click.stop="handover_submit(scope.row)"
                                            v-auth="'handover.submit'" v-if="scope.row.submit_time == null">
                                            确认
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </scTable>
                        </el-main>
                    </el-container>

                </el-aside>
                <el-main class="nopadding">
                    <el-container>
                        <el-header>
                            <div class="left-panel">
                                <span style="font-size: 14px">车间库存</span>
                            </div>
                            <div class="right-panel">
                                <el-button type="primary" @click="tomio" v-auth="'mio.do'">领料</el-button>
                                <el-button type="primary" @click="tomioin" v-auth="'mio.do'">入库</el-button>
                            </div>
                        </el-header>
                        <el-main>
                            <scTable ref="table_wm" :apiObj="apiObjWm" row-key="id" :params="paramsWm" stripe
                                hidePagination>
                                <el-table-column label="物料名" prop="material">
                                    <template #default="scope">{{
                                        scope.row.material_.name
                                    }}</template>
                                </el-table-column>
                                <el-table-column label="规格" prop="material">
                                    <template #default="scope">{{
                                        scope.row.material_.specification
                                    }}</template>
                                </el-table-column>
                                <el-table-column label="型号" prop="material">
                                    <template #default="scope">{{
                                        scope.row.material_.model
                                    }}</template>
                                </el-table-column>
                                <el-table-column label="已到工序" prop="material">
                                    <template #default="scope">{{
                                        scope.row.material_.process_name
                                    }}</template>
                                </el-table-column>
                                <el-table-column label="批次" prop="batch"> </el-table-column>
                                <el-table-column label="数量" prop="count" width="80">
                                </el-table-column>
                            </scTable>
                        </el-main>
                    </el-container>
                </el-main>
            </el-container>
        </el-main>
        <save-dialog v-if="dialogSave" ref="saveDialog" :mtask="currentMtask.id" :mgroup="mgroup"
            :material_out="material_out" :material_in="material_in" :activeType="activeName" @success="handleSaveSuccess"
            @closed="dialogSave = false">
        </save-dialog>
        <showDrawer ref="showDrawer" v-if="visibleDrawer" :mlogId="mlogId" @closed="visibleDrawer = false">
        </showDrawer>
    </el-container>
</template>
<script>
import saveDialog from "./worktask_form.vue";
import showDrawer from "./mlog_drawer.vue";
export default {
    components: {
        saveDialog, showDrawer
    },
    data() {
        return {
            mlogHandleLoading: false,
            activeName: '7车间',
            currentDept: {},
            currentMtask: {},
            apiMtask: null,
            paramsMtask: {},
            queryMtask: {},
            state_: {
                10: "创建中",
                20: "已下达",
                30: "生产中",
                40: "已提交",
            },
            dialogSave: false,
            visibleDrawer: false,
            apiObjHandover: null,
            paramsHandover: {},
            apiObjWm: null,
            paramsWm: {},
            mlogs: [],
            mlogId: '',
            mgroup: '',
            material_out: ''
        }
    },
    mounted() {
        this.initDept()
    },
    methods: {
        mlog_revert(row) {
            this.mlogHandleLoading = true;
            this.$API.wpm.mlog.revert.req(row.id).then(res => {
                this.$message.success("撤回成功");
                this.mtaskClick(this.currentMtask)
                this.$refs.table_wm.refresh()
                this.mlogHandleLoading = false;
            }).catch(e => {
                this.mlogHandleLoading = false;
            })
        },
        tomio() {
            this.$router.push({ name: "mainso_mio" });
        },
        tomioin() {
            this.$router.push({ name: "halfgood_mio" });
        },
        //添加
        addMlog() {
            let that = this;
            if (that.currentMtask && that.currentMtask.id) {
                that.mgroup = that.currentMtask.mgroup;
                that.material_out = that.currentMtask.material_out;
                that.dialogSave = true;
                that.$nextTick(() => {
                    that.$refs.saveDialog.open("add");
                });
            } else {
                that.$message.warning("请选择任务");
            }
        },
        table_edit(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("edit").setData(row);
            });
        },
        //删除
        table_del(row) {
            let that = this;
            this.$confirm(`确定删除吗？`, "提示", {
                type: "warning",
            }).then(() => {
                that.$API.wpm.mlog.delete.req(row.id).then((res) => {
                    that.$message.success("删除成功");
                    that.getMlogs();
                    return res;
                }).catch((err) => {
                    return err;
                });
            }).catch(() => { });
        },
        initDept() {
            this.$API.system.dept.list.req({ page: 0, name: '7车间' }).then(res => {
                if (res.length == 1) {
                    this.currentDept = res[0]
                    this.paramsMtask.mgroup__belong_dept = this.currentDept.id
                    this.paramsMtask.state__in = '20,40'
                    this.apiMtask = this.$API.pm.mtask.list

                    this.paramsHandover.recive_dept = this.currentDept.id
                    this.apiObjHandover = this.$API.wpm.handover.list

                    this.paramsWm.belong_dept = this.currentDept.id
                    this.paramsWm.count__gte = 1
                    this.apiObjWm = this.$API.wpm.wmaterial.list
                } else {
                    this.$message.error("未找到车间");
                }
            })
        },
        handleQueryMtask() {
            this.$refs.table_mtask.queryData(this.queryMtask)
        },
        handover_submit(row) {
            this.$API.wpm.handover.submit.req(row.id).then(res => {
                this.$refs.table_handover.refresh()
                this.$message.success('操作成功')
            }).catch(e => {

            })
        },
        getMlogs() {
            this.$API.wpm.mlog.list.req({ mtask: this.currentMtask.id, page: 0 }).then(res => {
                this.mlogs = res
            })
        },
        getMtask() {
            this.$API.pm.mtask.item.req(this.currentMtask.id).then(res => {
                this.currentMtask = res
            })
        },
        mtaskClick(row) {
            this.currentMtask = row;
            this.getMtask()
            this.getMlogs()
        },
        mtask_submit(row) {
            this.$API.pm.mtask.submit.req(row.id).then(res => {
                this.$message.success('操作成功')
                this.$refs.table_mtask.refresh()
                this.mtaskClick(this.currentMtask)
            }).catch(err => {
            })
        },
        handleSaveSuccess() {
            this.getMlogs();
        },
        table_show(row) {
            this.mlogId = row.id;
            this.visibleDrawer = true;
            this.$nextTick(() => {
                this.$refs.showDrawer.open();
            });
        },
        mlog_submit(row) {
            this.mlogHandleLoading = true
            this.$API.wpm.mlog.submit.req(row.id).then(res => {
                this.$message.success('操作成功')
                this.mtaskClick(this.currentMtask)
                this.$refs.table_wm.refresh()
                this.mlogHandleLoading = false
            }).catch(err => {
                this.mlogHandleLoading = false
            })
        },
    }
}
</script>