<template>
    <div class="sign_commit">
        <el-dialog
            title="签署疫情承诺书"
            :visible.sync="appointModal"
            width="900px"
            class="appoint-modal"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="cancel"
        >
            <div class="appoint-mains">
                <!-- v-if="commitItem.reportStatus == 0" -->
                <el-form
                    v-if="commitItem.reportStatus == 0"
                    class="appointment-content"
                    ref="form"
                    :model="ruleForm"
                    label-width="100px"
                >
                    <el-form-item label="考试疫情防控承诺书：" label-width="165px">
                        <div class="commitment">
                            本人参加“住房和城乡建设领域施工现场专业人员岗位”考试，愿意遵守疫情防控各项管理的相关要求，秉承对自己、对他人负责的原则，承担疫情防控社会责任，郑重作出以下承诺：<br/>
                            一、充分理解并遵守考试期间考点各项防疫安全的要求。<br/>
                            二、在考试前14天内，没有到过国内疫情中风险、高风险地区，未出境，不存在自境外回国情形。<br/>
                            三、在考试前14天内，每日自觉监测体温，体温均未出现高于37.3度的情形，无发热和呼吸道门诊就诊史。<br/>
                            四、在考试前14天内，未和新冠肺炎病例或疑似病例密切接触或间接接触，没有发烧、干咳、乏力、咳痰、气短、肌肉痛或关节痛、咽喉痛、头痛、寒颤、恶心或呕吐、鼻塞、腹泻、咳血、结膜充血等疑似新冠肺炎症状。<br/>
                            五、如出现与前述第二、三、四项任何一项不符的情形之一的，本人将及时在考前向相关管理机构报告，自觉配合采取隔离或其他防疫措施，并根据情况，自愿放弃参加考试。<br/>
                            六、考试当日自行做好防护工作，佩戴防护口罩。提前抵达考点，配合查验健康码、测量体温等。<br/>
                            七、考试期间，将严格遵守应考人员考场守则及疫情防控相关管理要求，完成考试后立即离场，不扎堆，不聚集。<br/>
                            八、本人承诺遵守《应考人员安全承诺书》中所有承诺内容，若因有瞒报、谎报造成新冠肺炎疫情传播的，一经查实，由本人承担相应的法律和经济责任。
                        </div>
                    </el-form-item>
                    <el-form-item label="签名板：">
                        <div class="dis_stys">
                            <span style="color: #999999">请在下方签名区进行签名</span>
                            <el-button
                                type="primary"
                                size="mini"
                                @click="retDraw"
                                mode=""
                                >清空</el-button
                            >
                        </div>
                        <div class="handCenter">
                            <vue-esign
                                ref="esign"
                                :width="700"
                                :height="300"
                                :isCrop="false"
                                :lineWidth="5"
                                :lineColor="'#333'"
                            />
                        </div>
                    </el-form-item>
                    <div class="centers">
                        <div v-loading="isUploading" class="finish_btn" @click="submits()">
                            完成签署
                        </div>
                    </div>
                </el-form>

                <div v-if="commitItem.reportStatus == 1" class="show_img">
                    <img
                        style="width: 100%; height: 100%; display: block;"
                        :src="$tools.splitImgHost(commitItem.reportFile)"
                        mode=""
                    />
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'sign_commit',
    props: {
        appointModal: {
            type: Boolean,
            default: false,
        },
        commitItem: {
            type: Object,
            default: () => {}
        },
    },
    data() {
        return {
            commitment_electr_signature: '',
            ruleForm: {},
            isUploading: false,
        }
    },
    methods: {
        cancel() {
            this.$emit('update:appointModal', false)
        },
        retDraw() {
            this.commitment_electr_signature = ''
            // this.$set(this.infoForm, "commitment_electr_signature", "");
            this.$nextTick(() => {
                this.$refs.esign.reset()
            })
        },
        subCanvas() {
            return new Promise((resolve, reject) => {
                if (this.commitment_electr_signature) {
                resolve();
                return;
                }
                console.log('this.$refs', this.$refs)
                this.$refs.esign
                .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
                .then(async (res) => {
                    
                    console.log('base64:', res)
                    this.commitment_electr_signature = res
                    resolve();
                })
                .catch((err) => {
                    console.log(err, "err");
                    // 画布没有签字时会执行这里提示一下
                    this.uploading = false
                    // this.$message({
                    //   type: "warning",
                    //   message: "请签名后再生成签字图片",
                    // });
                    resolve();
                });
            });
        },
        async submits() {
            if (this.isUploading) {
                return
            }
            this.isUploading = true

            await this.subCanvas()
            if (!this.commitment_electr_signature) {
                this.$message.warning('请签名')
                this.isUploading = false
                return
            } else {
                this.$axios({
                    url: '/apply/signReport',
                    method: 'post',
                    data: {
                        signImageStr: this.commitment_electr_signature,
                        subscribeId: this.commitItem.subscribeId,
                    }
                }).then((res) => {
                    console.log('res', res)
                    if (res.code == 200) {
                        this.$message.success('签署成功')
                        this.$emit('update:appointModal', false)
                        this.$emit('successSign')
                    } else {
                        this.$message.warning(res.data.msg)
                    }
                    this.isUploading = false
                }).catch((err) => {
                    this.$message.warning('签署失败，请重新签署')
                    this.isUploading = false
                })
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.appoint-modal {
    height: 700px;
    .commitment {
        height: 300px;
        overflow-y: auto;
    }
    .handCenter {
        width: 700px;
        height: 300px;
        background-color: #DCDFE6;
        border: 1px solid #DCDFE6;
    }
    .centers {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .finish_btn {
        width: 200px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background-color: #1890ff;
        color: #fff;
        font-size: 16px;
        border-radius: 6px;
        margin: 20px 24px;
        cursor: pointer;
    }
    .show_img {

    }
}
</style>