<!--作者：dingwangjun-->
<!--
 界面描述：弹框封装的操作框
-->
<template>
    <el-dialog width="700px"
               customClass="selfDialog"
               v-model="dialogVisible"
               :append-to-body="true"
               :destroy-on-close="true"
               @close="cancelDialog"
               :close-on-click-modal="false">
        <template #title>
            <div style="height: 30px;line-height: 30px;">
                <div class="div-inline">
                    <img class="img_div_small"
                         src='@/assets/img/icon-blue-line.png'>
                </div>
                <div class="div-inline">
                    <span class="img_div_font">{{dialogName}}</span>
                </div>
            </div>
        </template>
        <!--页面body内容存储仓-->
        <div style="height: 350px;margin-top: 20px">
            <el-form ref="form" :model="formInfo" size="small" label-width="130px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="药品名称">
                            <el-input size="mini"
                                      style="width: 200px"
                                      :disabled="true"
                                      v-model="formInfo.pm">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="药品编码">
                            <el-input size="mini"
                                      style="width: 200px"
                                      :disabled="true"
                                      v-model="formInfo.bm">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
                <span class="dialog-footer">
                    <el-button size="mini" @click="cancelDialog">取 消</el-button>
                    <el-button size="mini" type="primary" @click="saveDialog">确 定</el-button>
                </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
    import { useStore } from "vuex";
    import { reactive,toRefs,defineComponent,computed,onMounted,getCurrentInstance } from 'vue'
    export default defineComponent({
        name: '皮试中',
        setup (props,content) {
            const store = useStore();
            const { proxy } = getCurrentInstance() as any;
            const state:any = reactive({
                dialogVisible: false,
                dialogName: '结束皮试',
                user: computed(() => {
                    return store.getters.user;
                }),
                formInfo: {},//Form表单
            })
            onMounted(()=>{

            })
            const methods = {
                cancelDialog(){
                    state.formInfo = {}
                    state.dialogVisible = false
                },
                saveDialog(){
                    debugger
                }
            }
            return {
                ...toRefs(state),
                ...methods,
                parseTimeTwo,
            }
        }
    })
</script>
<style lang="scss">
    .selfDialog {
        .el-dialog {
            margin: 0 !important;
        }
        .el-dialog__header {
            height: 40px;
            background: #B3d8ff;
            padding: 5px 10px 5px 10px;
            border-bottom: 1px solid #DCDFE6;
        }
        .el-dialog__body {
            padding: 5px;
            overflow-y: auto;
        }
        .el-dialog__headerbtn {
            top: -2px;
            font-size: 35px;
        }
        .el-dialog__headerbtn .el-dialog__close {
            color: #597EF7;
            font-size: 25px;
        }
        .el-dialog__close:hover {
            color: #2D5AFA;
        }
        .img_div_small {
            width: 8px;
            height: 20px;
            margin-left: 5px;
            margin-right: 5px;
            vertical-align: middle;
        }
        .img_div_font {
            font-size: 18px;
            color: #0F1524;
            font-weight: bold;
            margin-right: 4px;
            vertical-align: middle;
        }
    }
</style>