<template>
    <div class="recordsDetails">
        <div>
            <div id="pdfId">
                <div class="recordsTable">
                    <div class="fieldset">
                        <el-row :gutter="30">
                            <el-col :span="8">
                                <label class="label-title"> 采购申请编号</label>
                                <label>
                                    <el-input :value="tableData.applyNumber" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="6">
                                <label class="label-title">申请时间</label>
                                <label>
                                    <el-input :value="tableData.createTime" readonly></el-input>
                                </label>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="title-box">
                        <div style="font-weight: 900;">采购申请种类</div>
                    </div>
                    <div class="fieldset">
                        <el-row :gutter="30">
                            <el-col :span="5" :xs="24">
                                <label class="label-title">药剂编号</label>
                                <label>
                                    <el-input :value="tableData.drugNumber" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="3" :xs="24">
                                <label class="label-title">药剂种类</label>
                                <label>
                                    <el-input :value="tableData.drugKind" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="2" :xs="24">
                                <label class="label-title">药剂名称</label>
                                <label>
                                    <el-input :value="tableData.drugName" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="2" :xs="24">
                                <label class="label-title">药剂形态</label>
                                <label>
                                    <el-input :value="tableData.drugType" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="2" :xs="24">
                                <label class="label-title">规格型号</label>
                                <label>
                                    <el-input :value="tableData.applyPrice" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="2" :xs="24">
                                <label class="label-title">&nbsp;</label>
                                <label>
                                    <el-input :value="tableData.drugUnit" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="4" :xs="24">
                                <label class="label-title">申请数量(袋或瓶)</label>
                                <label>
                                    <el-input :value="tableData.applyCount" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="4" :xs="24">
                                <label class="label-title">申请总量(L或kg)</label>
                                <label>
                                    <el-input :value="tableData.applyAmount" readonly></el-input>
                                </label>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="title-box">
                        <div style="font-weight: 900;">审批信息</div>
                    </div>
                    <table>
                        <tbody>
                            <tr v-if="tableData.applyInfo[0]" class="tr-bg">
                                <td rowspan="3">员工提交</td>
                                <td colspan="1">处理人</td>
                                <td colspan="1">
                                    <el-input :value="tableData.applyInfo[0].applyName" readonly></el-input>
                                </td>
                                <td colspan="1">提交部门</td>
                                <td colspan="4">{{ tableData.applyInfo[0].fromDepartment }}</td>
                            </tr>
                            <tr v-if="tableData.applyInfo[0]">
                                <td rowspan="2">审批意见</td>
                                <td colspan="6" style="border-bottom:0px">{{ tableData.applyInfo[0].content }}</td>
                            </tr>
                            <tr v-if="tableData.applyInfo[0]" class="tr-bg">
                                <td colspan="2" style="border-top: 0px;border-right: 0px;"></td>
                                <td colspan="4" style="color:#666;border-top: 0px;border-left: 0px;">电子签名</td>
                            </tr>
                            <tr v-if="tableData.applyInfo[1]" class="tr-bg">
                                <td rowspan="3">仓储部经理审批</td>
                                <td colspan="1">处理人</td>
                                <td colspan="1"><el-input :value="tableData.applyInfo[1].applyName" readonly></el-input>
                                </td>
                                <td colspan="1">提交部门</td>
                                <td colspan="4">{{ tableData.applyInfo[1].fromDepartment }}</td>
                            </tr>
                            <tr v-if="tableData.applyInfo[1]">
                                <td rowspan="2">审批意见</td>
                                <td colspan="6" style="border-bottom:0px">{{ tableData.applyInfo[1].content }}</td>
                            </tr>
                            <tr v-if="tableData.applyInfo[1]" class="tr-bg">
                                <td colspan="2" style="border-top: 0px;border-right: 0px;"></td>
                                <td colspan="4" style="color:#666;border-top: 0px;border-left: 0px;">电子签名</td>
                            </tr>
                            <tr v-if="tableData.applyInfo[2]" class="tr-bg">
                                <td rowspan="3">库领导审批</td>
                                <td colspan="1">处理人</td>
                                <td colspan="1"><el-input :value="tableData.applyInfo[2].applyName" readonly></el-input>
                                </td>
                                <td colspan="1">提交部门</td>
                                <td colspan="4">{{ tableData.applyInfo[2].fromDepartment }}</td>
                            </tr>
                            <tr v-if="tableData.applyInfo[1]">
                                <td rowspan="2">审批意见</td>
                                <td colspan="6" style="border-bottom:0px">{{ tableData.applyInfo[1].content }}</td>
                            </tr>
                            <tr v-if="tableData.applyInfo[1]" class="tr-bg">
                                <td colspan="2" style="border-top: 0px;border-right: 0px;"></td>
                                <td colspan="4" style="color:#666;border-top: 0px;border-left: 0px;">电子签名</td>
                            </tr>
                            <tr v-if="tableData.applyInfo[3]">
                                <td rowspan="2">审批意见</td>
                                <td colspan="6" style="border-bottom:0px">{{ tableData.applyInfo[2].content }}</td>
                            </tr>
                            <tr v-if="tableData.applyInfo[3]" class="tr-bg">
                                <td colspan="2" style="border-top: 0px;border-right: 0px;"></td>
                                <td colspan="4" style="color:#666;border-top: 0px;border-left: 0px;">电子签名</td>
                            </tr>
                        </tbody>
                    </table>
                    <div style="text-align: center;">
                        <el-button type="primary" @click="returnFun" class="iconfont iconfanhui">返回</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { purchaseRequestDetail } from "@/api/grainReserves/zygl/index"
export default {
    name: "purchaseRequestDetail",
    data() {
        return {
            tableData: {},
        }
    },
    methods: {
        //取消
        returnFun() {
            this.$router.go(-1)
        },

        getInfo() {
            let params = {
                id: this.$route.query.id,
            }
            purchaseRequestDetail(params)
                .then(res => {
                    if (res.infoCode && res.infoCode == 200) {
                        this.tableData = res.data
                        this.tableData.createTime = this.$route.query.createTime
                    }
                })
                .catch()
        },
    },
    created() {
        this.getInfo()
    },
}
</script>

<style scoped lang="scss">
.label-title {
    display: inline-block;
    margin-bottom: 6px;
}

.fieldset {
    display: block;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    position: relative;
    padding: 25px 14px 5px;
}

.el-col {
    margin-bottom: 15px;
}

.title-box {
    border-bottom: 1px dashed #00000071;
    padding: 5px 0;

    p {
        display: inline-block;
        font-weight: 800;
    }
}

.tr-bg {
    background: #f9f9f9;
}



.recordsDetails {
    font-size: 14px;
    padding-bottom: 20px;

    #pdfId {
        padding: 20px;
    }

    .littleMsg {
        height: 17px;
    }

    .title {
        font-size: 26px;
        font-weight: 500;
        text-align: center;
    }

    table {
        margin: 10px 0;
        font-size: 14px;
        border-collapse: collapse;
        color: #525357;
    }

    th {
        font-weight: 700;
        font-size: 18px;
    }

    td,
    th {
        padding: 10px;
        text-align: center;
        border: 1px solid #b0b0b0;
    }
}
</style>
<style>
#qyxzbaInfoApply {
    position: relative !important;
}

#qyxzbaInfoApply > div {
    left: 0px !important;
    top: -40px !important;
}

#qyxzbaInfoApplySign {
    left: 0px !important;
    top: -40px !important;
}

#gxxzbaInfoApply {
    position: relative !important;
}

#gxxzbaInfoApply > div {
    left: 0px !important;
    top: -160px !important;
}

#gxxzbaInfoApplySign {
    left: 0px !important;
    top: -160px !important;
}

#xzbaInfoApply {
    position: relative !important;
}

#xzbaInfoApply > div {
    left: 0px !important;
    top: -160px !important;
}

#xzbaInfoApplySign {
    left: 0px !important;
    top: -160px !important;
}
</style>
