<template>
    <ele-modal :visible.sync="visible" title="查看序列号" width="1200px" :maxable="true">
        <el-form ref="form" label-width="100px" class="create-form">
            <headerTitle title="基本信息" style="margin-top: 15px"></headerTitle>

            <el-row :gutter="15">


                <el-col :span="8">
                    <el-form-item label="生产工单号:" prop="code">
                        <el-input v-model="row.code" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="计划编号:" prop="productionPlanCode">
                        <el-input v-model="row.productionPlanCode" disabled />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="编码:" prop="productCode">
                        <el-input v-model="row.productCode" style="width: 100%" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="名称:" prop="productName">
                        <el-input v-model="row.productName" style="width: 100%" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间:" prop="createTime">
                        <el-input v-model="row.createTime" style="width: 100%" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>



            </el-row>

        </el-form>


        <ele-pro-table  :columns="columns" :datasource="tableList" cache-key="tgDetails"
            height="calc(100vh - 350px)" :need-page="false">




            <template v-slot:useStatus="{ row }">
                {{ row.useStatus==0?'未使用':'已使用' }} 
            </template>





        </ele-pro-table>


  


    </ele-modal>
</template>

<script>
import { workorderproductsequencePage } from '@/api/produceOrder/index.js';
export default {


    computed: {
        clientEnvironmentId() {
            return this.$store.state.user.info.clientEnvironmentId;
        },
    },
    data() {
        return {
            visible: false,
            tableList: [],
            row: {},
            columns: [
                {
                    label: '序号',
                    type: 'index',
                    width: 120,
                    align: 'center'
                },
                {
                    label: '序列码',
                    prop: 'productSequence'
                },
                {
                    label: '工单编码',
                    prop: 'workOrderCode'
                },
                {
                    slot: 'useStatus',
                    label: '是否使用',
                    prop: 'useStatus'
                },
                
                {
                    label: '创建时间',
                    prop: 'createTime'
                },


            ],

        };
    },
    created() {

    },
    methods: {
         initLoad() {
            workorderproductsequencePage({workOrderId:this.row.id,pageNum:1,size:-1}).then((res) => {
                console.log(res);
                if (res.list.length) {
                    this.tableList = res.list;
                }
            });
        },

        open(row) {
            this.row = row;
            this.initLoad();
            this.visible = true;
        }
    }
};
</script>