<template>
	<el-container>
		<el-side>
            <el-container>
                <el-header style="height: 40px;">
                    <!-- <el-select 
                        v-model="query.material_start__type" 
                        placeholder="请选择"
                        style="width: 90px;"
                    >
                        <el-option label="原料" :value="30"></el-option>
                        <el-option label="半成品" :value="20"></el-option>
                        <el-option label="成品" :value="10"></el-option>
                    </el-select> -->
                    <el-input
                        v-model="query.batch"
                        placeholder="请输入批次号"
                        clearable
                        style="width: 150px;"
                    >
                    </el-input>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-header>
                <el-main style="padding: 0 1px;">
                    <scTable
                        ref="tablets"
                        :apiObj="apiObj"
                        row-key="id"
                        :params="query"
                        :query="query"
                        stripe
                        @row-click="rowClick"
                        hideDo
                        :paginationLayout="'total, sizes, jumper'"
                    >
                <el-table-column prop="batch" label="批次号"></el-table-column>
                <!-- <el-table-column prop="version" label="版本" width="60"></el-table-column> -->
            </scTable>
                </el-main>
            </el-container>
		</el-side>
		<el-main id="elMain">
            <el-container>
                <el-header style="height: 50%;flex-direction: column;align-items: start;overflow: scroll;">
                    <p style="position: fixed;">批次流转图</p>
                    <scDegra
                        style="margin-top: 50px;"
                        v-if="limitedWatch" 
                        ref="degraDialogs" 
                        :nodes="nodes"
                        :edges="edges"
                        :rankdir="'LR'"
                        @nodeClick ="nodeClick"
                        @closeDialog="limitedWatch = false"
                    >
                    </scDegra>
                </el-header>
                <el-main style="height: 50%;background: #fff;"> 
                    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" style="height: 100%;" lazy>
                        <el-tab-pane name="mlog" label="生产日志" style="height: 100%;">
                            <el-container v-if="activeName=='mlog'">
                                <el-main>
                                    <scTable
                                        ref="tableMlog"
                                        :apiObj="apiObj_mlog"
                                        row-key="id"
                                        :params="params_mlog"
                                        :query="params_mlog"
                                    >
                                        <el-table-column label="#" type="index" width="50" fixed></el-table-column>
                                        <el-table-column label="工艺路线" prop="material_out_name" min-width="150" fixed>
                                        <template #default="scope">
                                            <span v-if="scope.row.material_out_name!==null">{{scope.row.material_out_name}}</span>
                                            <span v-else>返工</span>
                                        </template>
                                        </el-table-column>
                                        <el-table-column label="生产物料" min-width="250">
                                            <template #default="scope">
                                                <div v-if="scope.row.mlogb_full!==null">
                                                    <span v-for="item in scope.row.mlogb_full" :key="item.id">
                                                        <span v-if="item.material_in!==null">{{ item.batch }}({{Number(item.count_use)}})、</span>
                                                    </span>
                                                </div>
                                            </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="类型">
                                            <template #default="scope">
                                                <el-tag v-if="scope.row.is_fix" type="warning">返修</el-tag>
                                                <el-tag v-else type="primary">正常</el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="部门/工段">
                                            <template #default="scope">
                                                {{scope.row.belong_dept_name}}/{{scope.row.mgroup_name}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="处理人"
                                            prop="handle_user_name"
                                            width="80"
                                        ></el-table-column>
                                        <el-table-column label="保温剩余时间" v-if="mgroup_name=='黑化'||mgroup_name=='退火'">
                                            <template #default="scope">
                                                {{ getRemaTime(scope.row) }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="操作日期"
                                            prop="handle_date"
                                        ></el-table-column>
                                        <el-table-column label="是否提交" prop="submit_time" width="80">
                                            <template #default="scope">
                                                <span v-if="scope.row.submit_time!==null" style="color: green;">是</span>
                                                <span v-else>否</span>
                                            </template>
                                        </el-table-column>
                                    </scTable>
                                </el-main>
                            </el-container>
                        </el-tab-pane>
                        <el-tab-pane name="handover" label="交接记录" style="height: 100%;">
                            <el-container v-if="activeName=='handover'">
                                <el-main>
                                    <scTable
                                        ref="tableHandover"
                                        :apiObj="apiObj_handover"
                                        row-key="id"
                                        :query="params"
                                        :params="params"
                                    >
                                        <el-table-column
                                            label="#"
                                            type="index"
                                            width="50"
                                        ></el-table-column>
                                        <el-table-column type="expand">
                                            <template #default="props">
                                                <div style="padding-left: 50px">
                                                    <template v-for="item in props.row.handoverb" :key="item.id">
                                                        <el-descriptions :column="3">
                                                            <el-descriptions-item label="批次">
                                                                {{item.batch}}
                                                            </el-descriptions-item>
                                                            <el-descriptions-item label="数量">
                                                                {{item.count}}
                                                            </el-descriptions-item>
                                                            <el-descriptions-item label="不合格标记" v-if="item.defect_name!==null">
                                                                {{item.defect_name}}
                                                            </el-descriptions-item>
                                                        </el-descriptions>
                                                    </template>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="物料"
                                            prop="material_name"
                                            min-width="140"
                                        ></el-table-column>
                                        <el-table-column label="批次" prop="batch" min-width="80">
                                            <template #default="scope">
                                                <el-text v-if="scope.row.handoverb.length>0" type="primary">{{scope.row.handoverb.length}}批</el-text>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="数量" prop="count" min-width="80"></el-table-column>
                                        <el-table-column label="交接类别" prop="type" width="80">
                                            <template #default="scope">
                                                <el-tag v-if="scope.row.type == 10" type="primary">正常</el-tag>
                                                <el-tag v-if="scope.row.type == 20" type="warning">返工</el-tag>
                                                <el-tag v-if="scope.row.type == 40" type="danger" >报废</el-tag>
                                                <el-tag v-if="scope.row.type == 50" type="success" >改版</el-tag>
                                                <el-tag v-if="scope.row.type == 60" type="success" >退料</el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="交接类型" prop="mtype" min-width="80">
                                            <template #default="scope">
                                                <el-text v-if="scope.row.mtype == 10" type="primary">正常</el-text>
                                                <el-text v-if="scope.row.mtype == 20" type="success">分批</el-text>
                                                <el-text v-if="scope.row.mtype == 30" type="success">合批</el-text>
                                            </template>
                                        </el-table-column>
                                         <el-table-column label="交送工段" prop="send_mgroup_name" min-width="80">
                                        </el-table-column>
                                        <el-table-column
                                            label="交送人"
                                            prop="send_user_name"
                                            width="80"
                                        ></el-table-column>
                                         <el-table-column label="接收工段" prop="recive_mgroup_name" min-width="80">
                                        </el-table-column>
                                        <el-table-column
                                            label="接收人"
                                            prop="recive_user_name"
                                            width="80"
                                        ></el-table-column>
                                        <el-table-column
                                            label="交接日期"
                                            prop="send_date"
                                            width="120"
                                        ></el-table-column>
                                    </scTable>
                                </el-main>
                            </el-container>
                        </el-tab-pane>
                        <el-tab-pane name="winm" label="车间库存" style="height: 100%;">
                            <el-container v-if="activeName == 'winm'">
                                <el-main>
                                    <scTable
                                        ref="tableWinm"
                                        :apiObj="apiObj_winm"
                                        row-key="id"
                                        :query="params2"
                                        :params="params2"
                                    >
                                    <el-table-column type="selection"></el-table-column>
                                    <el-table-column label="状态" prop="state">
                                        <template #default="scope">
                                            <el-tag :type="wmState[scope.row.state]?.type">
                                                {{wmState[scope.row.state]?.text}}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="物料名称" min-width="150">
                                            <template #default="scope">
                                                {{ scope.row.material_name }}
                                                <span v-if="scope.row.material_origin != null">（{{ scope.row.material_origin_name }}）</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="批次号" prop="batch" min-width="120"></el-table-column>
                                        <el-table-column label="部门/工段">
                                            <template #default="scope">
                                                {{scope.row.belong_dept_name}}/{{scope.row.mgroup_name}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="数量" prop="count"></el-table-column>
                                        <el-table-column label="生产中" prop="count_working"></el-table-column>
                                        <el-table-column label="不合格标记" prop="defect_name"></el-table-column>
                                        <el-table-column label="创建时间" prop="create_time"  width="150"></el-table-column>
                                    </scTable>
                                </el-main>
                            </el-container>
                        </el-tab-pane>
                        <el-tab-pane name="binm" label="仓库库存" style="height: 100%;">
                             <el-container v-if="activeName == 'binm'">
                                <el-main>
                                    <scTable
                                        ref="tableBinm"
                                        :apiObj="apiObj_binm"
                                        row-key="id"
                                        stripe
                                        :query="params2"
                                        :params="params2"
                                    >
                                        <el-table-column type="index" width="50" />
                                        <el-table-column label="批次" prop="batch">
                                        </el-table-column>
                                        <el-table-column label="物料名称" prop="material_name">
                                        </el-table-column>
                                        <el-table-column label="规格型号">
                                            <template #default="scope">
                                                <span v-if="scope.row.material_">
                                                    {{ scope.row.material_.specification }}
                                                    {{ scope.row.material_.model }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="已完成工序">
                                            <template #default="scope">
                                                <span v-if="scope.row.material_">
                                                    {{ scope.row.material_.process_name }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="仓库" prop="warehouse_name">
                                        </el-table-column>
                                        <el-table-column label="物料存量" prop="count">
                                        </el-table-column>
                                        <el-table-column label="有效期" prop="expiration_date">
                                        </el-table-column>
                                        <el-table-column label="更新时间" prop="update_time">
                                        </el-table-column>
                                    </scTable>
                                </el-main>
                            </el-container>
                        </el-tab-pane>
                        <el-tab-pane name="mio" label="出入库记录" style="height: 100%;">
                            <el-container v-if="activeName=='mio'">
                                <el-main>
                                    <scTable
                                        ref="tableMio"
                                        :apiObj="apiObj_mio"
                                        row-key="id"
                                        :query="params_mio"
                                        :params="params_mio"
                                    >
                                        <el-table-column label="#" type="index" width="40"></el-table-column>
                                        <el-table-column label="记录编号" prop="number" min-width="80"></el-table-column>
                                        <el-table-column label="出入库类型" prop="type">
                                            <template #default="scope">{{ typeDict[scope.row.type] }}</template>
                                        </el-table-column>
                                        <el-table-column label="执行部门" prop="belong_dept_name">
                                        </el-table-column>
                                        <el-table-column label="工段" prop="mgroup_name">
                                        </el-table-column>
                                        <el-table-column label="状态" prop="type" width="80">
                                            <template #default="scope">
                                               {{ stateDict[scope.row.state] }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="部门执行人" prop="do_user_name" ></el-table-column>
                                        <el-table-column label="仓库执行人" prop="mio_user_name"></el-table-column>
                                        <el-table-column label="日期" prop="inout_date"></el-table-column>
                                    </scTable>
                                </el-main>
                            </el-container>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
		</el-main>
	</el-container>
</template>
<script>
import { wmState } from "@/utils/enum.js";
export default {
	name: "batch_statistics",
	data() {
		return {
            wmState,
            apiObj:this.$API.wpm.batchst,
            apiObj_mlog:null,
            apiObj_handover:null,
            apiObj_winm:null,
            apiObj_binm:null,
            apiObj_mio:null,
            nodes: [],
            edges: [],
            stateDict: {
				10: "创建中",
				20: "已提交",
			},
			typeDict: {
				do_out: "生产领料",
				sale_out: "销售发货",
				pur_in: "采购入库",
				do_in: "生产入库",
				other_in: "其他入库",
				other_out: "其他出库",
			},
            //mlog\handover
            params_mlog:{
                cbatch:'',
                ordering:'create_time',
                with_mlogb:'yes',
                query: " { id,material_out_name,mlogb_full,count_real,count_ok,is_fix,belong_dept_name,mgroup_name,handle_user_name,handle_date,reminder_interval_list,mstate_json,work_start_time,work_end_time,oinfo_json,submit_time,submit_user_name}"
            },
            params:{
                cbatch:'',
            },
            params2:{
               batch:'',
            },
            params_mio:{
                item_mio__batch:'',
            },
            query:{
                ordering:'-update_time',
                batch:'',
                // material_start__type:30,
            },
            batch:'',
            activeName:'',
            limitedWatch:false,
		};
	},
	mounted() {
	},
	methods: {
        rowClick(row){
            let that = this;
            that.nodes =[];
            that.edges = [];
            that.limitedWatch = false;
			that.$API.wpm.batchlog.dag.req({batch:row.batch,method:'direct'}).then((res) => {
                res.nodes.forEach(item => {
                    let obj = {};
                    obj.id = item.id;
                    obj.label = item.label;
                    obj.shape = item.shape;
                    obj.version = row.version;
                    that.nodes.push(obj);
                });
				that.edges = res.edges;
				that.limitedWatch = true;
				that.$nextTick(() => {
					that.$refs.degraDialogs.open();
				});
			})
        },
        nodeClick(data){
            let that = this;
            that.params.cbatch = data;
            that.params_mlog.cbatch = data;
            that.params2.batch = data;
            that.params_mio.item_mio__batch=data;
            that.activeName = 'mlog';
            if( that.apiObj_mlog !==null){
                that.activeName='mlog';
                that.$nextTick(() => {
                  that.$refs.tableMlog.queryData(that.params);  
                })
            }else{
                that.apiObj_mlog = that.$API.wpm.mlog.list;
                that.apiObj_handover = that.$API.wpm.handover.list;
                that.apiObj_winm = that.$API.wpm.wmaterial.list;
                that.apiObj_binm = that.$API.inm.warehouse.batch;
                that.apiObj_mio = that.$API.inm.mio.list;
            }
        },
        search(){
            this.$refs.tablets.queryData(this.query)
        },
        handleClick(){ }
	},
};
</script>

<style scoped>

</style>
