<template>
    <div class="recordsDetails">
        <div>
            <div id="pdfId">
                <div class="recordsTable">

                    <fieldset>
                        <el-row :gutter="30">
                            <el-col :span="8" :xs="24">
                                <label class="label-title">销毁类型</label>
                                <label>
                                    <el-input v-if="tableData.destroyType == '1'" value="药剂销毁" readonly></el-input>
                                    <el-input v-if="tableData.destroyType == '2'" value="空瓶/袋销毁" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="8" :xs="24">
                                <label class="label-title">药剂编号</label>
                                <label>
                                    <el-input :value="tableData.drugNumber" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="8" :xs="24">
                                <label class="label-title">药剂种类</label>
                                <label>
                                    <el-input :value="tableData.drugKind" readonly></el-input>
                                </label>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="8" :xs="24">
                                <label class="label-title">药剂名称</label>
                                <label>
                                    <el-input :value="tableData.drugName" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="8" :xs="24">
                                <label class="label-title">药剂形态</label>
                                <label>
                                    <el-input :value="tableData.drugType" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="8" :xs="24">
                                <label class="label-title">药剂包装</label>
                                <label>
                                    <el-input :value="tableData.drugPacking" readonly></el-input>
                                </label>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="4" :xs="24">
                                <label class="label-title">规格型号</label>
                                <label>
                                    <el-input :value="tableData.drugSpecification" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="4" :xs="24">
                                <label class="label-title">&nbsp;</label>
                                <label>
                                    <el-input :value="tableData.drugUnit" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="8" :xs="24">
                                <label class="label-title">生产厂家</label>
                                <label>
                                    <el-input :value="tableData.manufacturer" readonly></el-input>
                                </label>
                            </el-col>
                            <el-col :span="8" :xs="24">
                                <label class="label-title">销毁数量(袋或瓶)</label>
                                <label>
                                    <el-input :value="tableData.destroyAmount" readonly></el-input>
                                </label>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="8" :xs="24">
                                <label class="label-title">销毁总量(L或kg)</label>
                                <label>
                                    <el-input :value="tableData.destroyTotalNumber" readonly></el-input>
                                </label>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <fieldset>
                                <el-col :span="24" :xs="24">
                                    <label class="label-title">销毁地点</label>
                                    <label>
                                        <el-input :value="tableData.destroyPlace" readonly></el-input>
                                    </label>
                                </el-col>
                                <el-col :span="24" :xs="24">
                                    <label class="label-title">销毁原因</label>
                                    <label>
                                        <el-input :value="tableData.destroyReason" readonly></el-input>
                                    </label>
                                </el-col>
                                <el-col :span="24" :xs="24">
                                    <label class="label-title">处理内容</label>
                                    <label>
                                        <el-input :value="tableData.handleContent" readonly></el-input>
                                    </label>
                                </el-col>
                                <el-col :span="24" :xs="24">
                                    <label class="label-title">处理措施</label>
                                    <label>
                                        <el-input :value="tableData.handleMeasure" readonly></el-input>
                                    </label>
                                </el-col>
                            </fieldset>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="8" :xs="24">
                                <label class="label-title">销毁日期</label>
                                <label><el-input :value="tableData.destroyDate" readonly></el-input></label>
                            </el-col>
                            <el-col :span="8" :xs="24">
                                <label class="label-title">销毁人</label>
                                <label><el-input :value="tableData.destroyPerson" readonly></el-input></label>
                            </el-col>
                            <el-col :span="8" :xs="24">
                                <label class="label-title">见证人</label>
                                <label><el-input :value="tableData.witness" readonly></el-input></label>
                            </el-col>
                        </el-row>
                    </fieldset>
                    <div style="text-align: center">
                        <el-button type="primary" @click="returnFun" class="iconfont iconfanhui">返回</el-button>
                    </div>
                    <!-- <table>
                        <tbody>
                            <tr>
                                <td>销毁类型</td>
                                <td>药剂种类</td>
                                <td>药剂名称</td>
                                <td>药剂形态</td>
                                <td>药剂单位</td>
                                <td>生产厂家</td>
                                <td>销毁数量</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>{{ tableData.drugKind }}</td>
                                <td>{{ tableData.drugName }}</td>
                                <td>{{ tableData.drugType }}</td>
                                <td>{{ tableData.drugUnit }}</td>
                                <td>{{ tableData.manufacturer }}</td>
                                <td>{{ tableData.destroyAmount }}</td>
                            </tr>
                            <tr style="height:80px;">
                                <td>销毁地点</td>
                                <td colspan="6">{{ tableData.destroyPlace }}</td>
                            </tr>
                            <tr style="height:80px;">
                                <td>销毁原因</td>
                                <td colspan="6">{{ tableData.destroyReason }}</td>
                            </tr>
                            <tr style="height:80px;">
                                <td>处理内容</td>
                                <td colspan="6">{{ tableData.handleContent }}</td>
                            </tr>
                            <tr style="height:80px;">
                                <td>处理措施</td>
                                <td colspan="6">{{ tableData.handleMeasure }}</td>
                            </tr>
                            <tr>
                                <td>销毁日期</td>
                                <td colspan="2">{{ tableData.destroyDate }}</td>
                                <td>销毁人</td>
                                <td>{{ tableData.destroyPerson }}</td>
                                <td>见证人</td>
                                <td>{{ tableData.witness }}</td>
                            </tr>
                        </tbody>
                    </table> -->
                </div>
            </div>

        </div>
    </div>
</template>

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

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

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

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

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

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

    h2 {
        font-size: 19px;
    }

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

.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>