<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="table_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%; overflow-y: auto;">
                                <template #header>
                                    <div class="card-header">
                                        <span>任务信息</span>
                                        <span>
                                            <el-button type="primary" link @click="addMtaskInfo"
                                        v-if="currentMtask && (currentMtask.state == 20||currentMtask.state==10)">编辑</el-button>
                                        </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-item label="配粉料数">{{ currentMtask.peifen_kg
                                    }}</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">新增</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="shift_name"> </el-table-column>
                                        <el-table-column label="出管总数" prop="count_real">
                                        </el-table-column>
                                        <el-table-column label="规格" prop="mlogb" width="150">
                                            <template #default="scope">
                                                <div v-for="item in scope.row.mlogb" :key="item" class="cateItem" style="">
                                                    <span>{{ item.material_out_.name }}</span>
                                                    <span>{{ item.count_ok }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="合格总数" prop="count_ok">
                                        </el-table-column>
                                        <el-table-column label="合格率" prop="count">
                                            <template #default="scope">
                                                <span>{{ scope.row.count_ok / scope.row.count_real }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="不合格原因及数量" align="center">
                                            <el-table-column label="椭圆/弯曲" prop="count_n_wq">
                                            </el-table-column>
                                            <el-table-column label="条纹" prop="count_n_tw">
                                            </el-table-column>
                                            <el-table-column label="断裂" prop="count_n_dl">
                                            </el-table-column>
                                            <el-table-column label="偏壁" prop="count_n_pb">
                                            </el-table-column>
                                            <el-table-column label="大小头" prop="count_n_dxt">
                                            </el-table-column>
                                            <el-table-column label="结石气绒" prop="count_n_jsqx">
                                            </el-table-column>
                                            <el-table-column label="合计" prop="count_n_qt">
                                            </el-table-column>
                                        </el-table-column>
                                        <el-table-column label="成型人" prop="handle_user_name">
                                        </el-table-column>
                                        <el-table-column label="带班长" prop="handle_leader_name">
                                        </el-table-column>
                                        <el-table-column label="碎料" prop="count_break"> </el-table-column>
                                        <el-table-column label="操作" fixed="right" width="120" align="center">
                                            <template #default="scope">
                                                <el-link type="primary" @click="table_edit(scope.row)"
                                                    v-auth="'mlog.update'" v-if="scope.row.submit_time == null">编辑
                                                </el-link>
                                                <el-link type="danger" @click="table_del(scope.row)" v-auth="'mlog.delete'"
                                                    v-if="scope.row.submit_time == null">删除
                                                </el-link>
                                                <el-link type="primary" @click="mlog_submit(scope.row)"
                                                    v-auth="'mlog.submit'" v-if="scope.row.submit_time == null">提交
                                                </el-link>
                                                <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="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="mtask" 
            :mgroup="mgroup"
            :material_out="material_out"
            :brothersList="brothersList"
            :activeType="activeName"
            @success="handleSaveSuccess" 
            @closed="dialogSave = false"
        ></save-dialog>
        <showDrawer ref="showDrawer" 
        v-if="visibleDrawer" 
        :mlogId="mlogId"
        @closed="visibleDrawer = false">
        </showDrawer>
        <el-dialog title="编辑任务" v-model="addMtaskInfoVisible">
            <el-form :model="addMtaskInfoForm">
                <el-form-item label="配分料数(kg)" width="100">
            <el-input-number
              v-model="addMtaskInfoForm.peifen_kg"
              controls-position="right"
              :min="0"
              :step="1"
              :step-strictly="true"
              style="width: 100%"
              placeholder="请输入"
            >
            </el-input-number>
          </el-form-item>
            </el-form>
            <el-footer>
      <el-button type="primary" @click="updateMtaskSubmit"
        >确定</el-button
      >
      <el-button @click="addMtaskInfoVisible = false">取消</el-button>
    </el-footer>
        </el-dialog>
    </el-container>
</template>
<script>
import saveDialog from "./worktask_form.vue";
import showDrawer from "./mlog_drawer.vue";
export default {
    components: {
        saveDialog,showDrawer
    },
    data() {
        return {
            addMtaskInfoForm: {},
            addMtaskInfoVisible: false,
            activeName:'10车间',
            mlogs:[],
            currentDept: {},
            currentMtask: {},
            apiMtask: null,
            paramsMtask: {},
            queryMtask: {},
            state_: {
                10: "创建中",
                20: "已下达",
                30: "生产中",
                40: "已提交",
            },
            brothersList:[],
            brothersListorigin:[],
            apiObjHandover: null,
            apiObjWm: null,
            visibleDrawer:false,
            dialogSave:false,
            paramsHandover: {},
            paramsWm: {},
            mtask:'',
            mgroup:'',
            mlogId:'',
            material_out:''
        }
    },
    mounted() {
        this.initDept()
    },
    methods: {
        addMtaskInfo() {
            this.addMtaskInfoForm.peifen_kg = this.currentMtask.peifen_kg
            this.addMtaskInfoVisible = true
        },
        updateMtaskSubmit() {
            this.$API.pm.mtask.addInfo.req(this.currentMtask.id, this.addMtaskInfoForm).then(res=>{
                this.currentMtask.peifen_kg = this.addMtaskInfoForm.peifen_kg
                this.addMtaskInfoVisible = false
                this.$message.success('操作成功')
            })
        },
        tomio() {
            this.$router.push({ name: "mainso_mio" });
        },
        tomioin(){
            this.$router.push({ name: "halfgood_mio" });
        },
        initDept() {
            this.$API.system.dept.list.req({ page: 0, name: '10车间' }).then(res => {
                if (res.length == 1) {
                    this.currentDept = res[0]
                    this.paramsMtask.mgroup__belong_dept = this.currentDept.id
                    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.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.mtask, page: 0 }).then(res => {
                this.mlogs = res
            })
        },
        mtaskClick(row) {
            this.currentMtask = row;
            this.mtask = row.id;
            this.brothersListorigin=[];
            this.brothersListorigin = this.currentMtask.material_out_.brothers;
            this.getMlogs()
        },
        addMlog(){
            let that = this;
            if (that.currentMtask && that.currentMtask.id) {
                that.mgroup = that.currentMtask.mgroup;
                that.material_out = that.currentMtask.material_out;
                let arr = [];
                this.brothersList =[];
                this.brothersListorigin.forEach(item=>{
                    let obj = {};
                    obj.count_ok = null;
                    obj.material_out = item;
                    arr.push(obj)
                })
                this.brothersList = arr;
                that.dialogSave = true;
                that.$nextTick(() => {
                    that.$refs.saveDialog.open("add");
                });
            } else {
                that.$message.warning("请选择任务");
            }
        },
        table_submit(row) {
            this.$API.pm.mtask.submit.req(row.id).then(res => {
                this.$message.success('操作成功')
                if (row.id == this.currentMtask.id) {
                    this.mtaskClick(row)
                }
                this.$refs.table_mtask.refresh()
            }).catch(err => {

            })
        },
        table_show(row) {
            this.mlogId = row.id;
            this.visibleDrawer = true;
            this.$nextTick(() => {
                this.$refs.showDrawer.open();
            });
        },
        table_edit(row){
            let arr = [];
            let mlogb = row.mlogb;
            this.brothersListorigin.forEach(item=>{
                let obj = {};
                obj.count_ok = null;
                obj.material_out = item;
                for(let i=0;i<mlogb.length;i++){
                    if(mlogb[i].material_out==item){
                        obj.count_ok = mlogb[i].count_ok;
                    }
                }
                arr.push(obj)
            })
            this.brothersList = arr;
            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(() => { });
        },
        handleSaveSuccess(){
            this.getMlogs();
        },
        mlog_submit(row){
            this.$API.wpm.mlog.submit.req(row.id).then(res => {
                this.$message.success('操作成功')
                this.$refs.table_mlog.refresh()
            }).catch(err => {})
        },
    }
}
</script>