<template>
    <div id="submit-report-layout-target" class="hc-page-box">
        <HcCard>
            <template #header>
                <el-button hc-btn @click="toBackClick">
                    <HcIcon name="arrow-go-back"/>
                    <span>返回</span>
                </el-button>
            </template>
            <template #extra>
                <el-button hc-btn @click="onSubmitReportClick">
                    <HcIcon name="history"/>
                    <span>验收报告</span>
                </el-button>
                <el-button hc-btn type="primary" @click="onReportModalShow">
                    <HcIcon name="check"/>
                    <span>确认提交结论</span>
                </el-button>
            </template>

            <el-container class="hc-table-layout">
                <el-aside id="hc_table_aside" class="hc-table-aside">
                    <HcCardItem title="抽检统计：">
                        <TableStats :contractId="contractId" :projectId="projectId"/>
                    </HcCardItem>
                </el-aside>
                <el-container id="hc_table_container" class="hc-table-container">

                    <HcCardItem id="hc_table_data" title="抽检意见汇总：">
                        <TableOpinion :contractId="contractId" :projectId="projectId"/>
                    </HcCardItem>

                    <HcCardItem id="hc_table_score" title="专家验收评分表：">
                        <template #header>
                            <span>专家验收评分表：</span>
                            <el-checkbox v-model="searchFormScore.score" class="size-xl">生成打分表</el-checkbox>
                        </template>
                        <template #extra>
                            <div class="w-40">
                                <el-select v-model="searchFormScore.type" placeholder="参建方类型表">
                                    <el-option label="业主建设单位" value="1"/>
                                    <el-option label="监理单位" value="2"/>
                                    <el-option label="施工单位" value="3"/>
                                </el-select>
                            </div>
                        </template>
                        <TableScore :contractId="contractId" :projectId="projectId" :type="searchFormScore.type"/>
                    </HcCardItem>

                </el-container>
            </el-container>
        </HcCard>

        <!--确认提交结论-->
        <HcDialog :cancelClose="false" :show="isReportModal" append-to-body cancelText="保存暂不提交"
                  saveText="保存并提交报告" title="提交验收报告" widths="30rem"
                  @cancel="onReportModalCancel" @close="onReportModalClose" @save="onReportModalSave">
            <el-form ref="formReportRef" :model="formReportModel" :rules="formReportRules" label-position="top"
                     label-width="auto" size="large">
                <el-form-item label="是否通过验收" prop="radio">
                    <div class="form-item-div bg-white">
                        <el-radio-group v-model="formReportModel.radio" size="large">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="项目概况">
                    <el-input v-model="formReportModel.content" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入项目概况"
                              type="textarea"/>
                </el-form-item>
                <el-form-item label="验收结论">
                    <el-input v-model="formReportModel.conclusion" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入验收结论"
                              type="textarea"/>
                </el-form-item>
            </el-form>
        </HcDialog>

        <!--历史报告-->
        <HcDrawer :show="isSubmitReportDrawer" to-id="submit-report-layout-target" uis="hc-submit-report-target"
                  @close="onSubmitReportDrawerClose">
            <template #header>
                <div class="hc-select-view w-52">
                    <el-select v-model="pdfDate" placeholder="选择日期">
                        <el-option label="2022年12月24日" value="2022年12月24日"/>
                        <el-option label="2022年12月25日" value="2022年12月25日"/>
                        <el-option label="2022年12月26日" value="2022年12月26日"/>
                        <el-option label="2022年12月27日" value="2022年12月27日"/>
                    </el-select>
                </div>
                <div class="hc-title-view">试验资料（含工地试验室资质证书、仪器标定证书等）</div>
                <div class="hc-icon-view text-hover" @click="onSubmitReportDrawerClose">
                    <HcIcon name="close"/>
                </div>
            </template>
            <HcPdf
                src="https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20221212/ce9799c7d18efc03efefd6f242439f2e.pdf"/>
        </HcDrawer>

        <!--短信认证-->
        <HcSmsAuth :loading="SMSAuthLoading" :show="SMSAuthShow" @cancel="SMSAuthCancel" @confirm="SMSAuthConfirm"/>

    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useAppStore} from "~src/store";
import {useRouter} from "vue-router";
import TableStats from "./components/submit-report/table-stats.vue"
import TableOpinion from "./components/submit-report/table-opinion.vue"
import TableScore from "./components/submit-report/table-score.vue"

//变量
const router = useRouter()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);

//渲染完成
onMounted(() => {
    setSplitRef()
})

//初始化设置拖动分割线
const setSplitRef = () => {
    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
    setTimeout(() => {
        window.$split(['#hc_table_aside', '#hc_table_container'], {
            sizes: [20, 80],
            snapOffset: 0,
            minSize: [300, 600],
        });
        window.$split(['#hc_table_data', '#hc_table_score'], {
            direction: 'vertical',
            snapOffset: 0,
            minSize: 200,
        });
    }, 800)
}

const searchFormScore = ref({
    type: '', score: true
})


//提交验收报告
const isReportModal = ref(false)
const formReportRef = ref(null)
const formReportModel = ref({
    radio: 1, content: '', conclusion: ''
})
const formReportRules = {}

//显示提交验收报告弹窗
const onReportModalShow = () => {
    formReportModel.value = {
        radio: 1, content: '', conclusion: ''
    }
    isReportModal.value = true
}

//保存暂不提交
const onReportModalCancel = () => {
    isReportModal.value = false
}

//保存并提交报告
const onReportModalSave = () => {
    isReportModal.value = false
    SMSAuthShow.value = true
}

//关闭
const onReportModalClose = () => {
    isReportModal.value = false
}


//短信验证
const SMSAuthLoading = ref(false)
const SMSAuthShow = ref(false)
const SMSAuthConfirm = () => {
    SMSAuthShow.value = false
}
const SMSAuthCancel = () => {
    SMSAuthShow.value = false
}


//历史报告
const isSubmitReportDrawer = ref(false)
const onSubmitReportClick = () => {
    isSubmitReportDrawer.value = true
}
const pdfDate = ref(null)

//历史报告
const onSubmitReportDrawerClose = () => {
    isSubmitReportDrawer.value = false
}

//返回
const toBackClick = () => {
    router.push({
        name: 'transfer-initial-expert'
    })
}
</script>

<style lang="scss" scoped>
@import '~style/transfer/scoped/submit-report.scss';
</style>

<style lang="scss">
@import '~style/transfer/submit-report.scss';
</style>
