<template>
    <div class="page">
        <headNav title="消防监督记录"></headNav>

        <div class="content">
            <div id="file" class="file" v-if="formData">
                <div class="one">
                    <div class="one-title">消防监督检查记录</div>
                    <div class="one-subTitle">（其他形式消防监督检查适用）</div>
                    <div class="job_no">
                        <span>编号：{{ pdfNumberRes }}</span>
                    </div>
                    <van-row>
                        <van-col span="12">被检查单位名称: <span class="showLine unit">{{formData.enforce_obj_name}}</span> </van-col>
                        <van-col span="12">检查时间:{{formData.startDate}}</van-col>
                    </van-row>
                </div>

                <table class="table" border="1" width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td colspan="2">
                            <van-row>
                                <van-col span="5">检查类型：</van-col>
                                <van-col span="19" class="custom">
                                    <van-radio-group v-model="checkBox">
                                        <template v-for="(item, index) in checkList">
                                            <van-radio :key="index" icon-size="12px" shape="square" :name="item.k">{{item.v}}</van-radio>
                                        </template>
                                    </van-radio-group>
                                </van-col>
                            </van-row>
                        </td>
                    </tr>
                    <tr>
                        <td class="center" width="30">发现的违法行为及火灾隐患</td>
                        <td><div class="result_content">{{ formData.job_result_content }}</div></td>
                    </tr>
                    <tr>
                        <td class="center" width="30">处理情况</td>
                        <td>
                            <template v-if="showNextBtn">
                                <van-field
                                    v-model="content"
                                    rows="3"
                                    autosize
                                    type="textarea"
                                />
                            </template>
                            <template v-else>
                                <div class="result_content">{{ content }}</div>
                            </template>
                        </td>
                    </tr>
                    <tr>
                        <td width="30">备注</td>
                        <td>
                            <div class="result_content">{{ formData.job_result_remark }}</div>
                        </td>
                    </tr>
                </table>
                <van-row class="sign">
                    <van-col span="24">消防监督检查员：{{ formData.executor_names }}</van-col>
                </van-row>
                <van-row class="sign">
                    <van-col span="24">被检查单位主管人员（签字）：<span class="showLine FontColorWhite">单位主管签字</span> </van-col>
                </van-row>
                <div class="tips sj">一式两份，一份交被检查单位，一份存档。对大型群众性活动举办前进行消防安全检查的，另制作一份与消防安全检查意见书一并交本级公安机关治安部门。</div>
                <div class="tips trans">（备注：1.此记录表应由支队、大队确定的主责参谋分号段编号，并按顺序装订归档）</div>
            </div>

            <div class="btn" v-if="showNextBtn">
                <van-button type="info" @click="commitRecord">下一步</van-button>
            </div>
        </div>

        <v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
    </div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import mask_overLay from '@/components/overLay_xy.vue';
import { get, put } from "@/utils/http.js";
import { dateFormat, isEmpty } from '@/utils/tool';
import recordSign from '@/mixins/recordSign';
import { getOnePdf } from "@/utils/htmlToPDF.js";
import pdfNumber from '@/mixins/pdfNumber';

export default {
    components: {
        headNav,
        'v-mask': mask_overLay,
    },
    mixins: [recordSign, pdfNumber],
    data () {
        return {
            showOverLay: false,
            isLoading: false,
            formData: null,
            showNextBtn: true,
            checkBox: '',
            content: '',
            checkList: [
                {k: '0', v: '对举报投诉的检查'},
                {k: '1', v: '大型群众性活动举办前的检查'},
                {k: '2', v: '建设工程施工现场检查'},
                {k: '3', v: '责令限期改正复查'},
                {k: '4', v: '申请恢复施工、使用、生产、经营的检查'},
                {k: '5', v: '申请解除临时查封的检查'},
                {k: '6', v: '其他检查'},
            ],
            tipMsg: '加载中',
        }
    },
	computed: {
		jobId() {
			return this.$route.params.ID
		},
	},
    mounted () {
        if (this.jobId) {
            this.loadJobData();
        }
    },
    methods: {
        async loadJobData() {
            if (this.isLoading) {
                return
            }
            this.isLoading = true;
            this.showOverLay = true;
            this.loadPdfNumber('record');
			const obj = await get(`/v2/api/enforce-job/${this.jobId}`);
            if (obj) {
                obj.startDate = dateFormat('YYYY年mm月dd日HH时', new Date(obj.start_time));
            }
            this.formData = obj;
            this.showOverLay = false;
            setTimeout(() => {
                this.isLoading = false;
            }, 2000);
        },
        commitRecord() {
            if (isEmpty(this.checkBox)) {
                this.$toast.fail('请选择检查类型');
                return;
            }

            // this.$router.push(`/simpleCheckResult/${this.jobId}`);
            this.tipMsg = "上传pdf中";
            this.showOverLay = true;
            this.showNextBtn = false;
            setTimeout(async() => {
                const subData = await getOnePdf(
                    document.getElementById("file"),
                    "消防监督检查记录"
                );
                this.sealOffset = {
                    x: '240',
                    y: '50',
                }
                this.startToSign(subData, 190, 100, '被检查单位主管人员签字', 80, 34);
            }, 1000);
        },
        updateTaskRecordFile() {
            this.showOverLay = true;
            const res = this.setupStaticNoticeResult(this.formData, 'record', this.checkBox, this.content);
            put(`/v2/api/enforce-job/${this.jobId}`, {
                id: this.jobId,
                result_file_id: this.formData.result_file_id,
                static_notice_result: res,
            }).then((res) => {
                this.$router.replace(`/simpleCheckResult/${this.jobId}`);
                this.showOverLay = false;
            }).catch(() => {
                this.$toast.fail("上传失败");
            });
        },
    }
}
</script>

<style lang="scss">
.file {
    .van-radio__label--disabled {
        color: #585858;
    }
    .van-radio__icon--disabled.van-radio__icon--checked {
        color: #585858;
        border: none;
        margin-right: -4px;
    }
    .van-radio__icon--disabled .van-icon {
        background-color: inherit;
        border-color: #585858;
    }
}
.custom {
    .van-cell {
        font-size: 10px;
        padding: 0;
    }
    .van-radio__icon--checked .van-icon {
        background-color: transparent;
        border-color: #FFFFFF;
        color: #323233;
    }
}
</style>

<style lang="scss" scoped>
.file {
    background-color: #FFFFFF;
    font-family: arial;
    color: #585858;
    font-size: 10px;
    .one {
        padding: 10px 20px;
        .one-title {
            margin-top: 8px;
            font-size: 16px;
            color: #343435;
            text-align: center;
        }
        .one-subTitle {
            font-size: 12px;
            text-align: center;
        }
        .job_no {
            margin-top: 8px;
            display: flex;
            justify-content: flex-end;
        }
        .unit {
            color: #323233;
            font-weight: bold;
        }
    }
    .table {
        padding: 0 20px;
        border: none;
        .center {
            text-align: center;
        }
        tr>td:last-child {
            border-right: 1px solid #585858;
        }
        &>tr:last-child {
            border-bottom: 1px solid #585858;
        }
    }
    .sign {
        padding: 5px 20px;
    }
    .tips {
        padding: 2px 20px;
    }
    .tips:last-child {
        padding-bottom: 10px;
    }
    .sj {
        text-indent: 2em;
    }
}

.btn {
    margin: 15px 0;
    display: flex;
    justify-content: space-around;

    button {
        flex: 1;
        margin: 5px 25px;
        height: 40px;
    }
}
.result_content {
    display: block;
    word-break: break-all;
}
</style>