<template>
    <div class="hc-page-box">
        <HcCard>
            <div class="hc-steps-view">
                <el-steps :active="stepsKey" align-center>
                    <el-step title="验收通过" @click="stepClick(0)"/>
                    <el-step title="四性检测通过" @click="stepClick(1)"/>
                    <el-step title="申请移交登记" @click="stepClick(2)"/>
                    <el-step title="档案馆接收" @click="stepClick(3)"/>
                </el-steps>
            </div>

            <div class="hc-body-center-box" v-if="stepsKey === 0">
                <div class="hc-content-box">
                    <div class="text-gray mb-5">当前项目档案未通过验收，未达到移交条件</div>
                    <el-button type="primary" hc-btn @click="toTransferInitial">去申请验收</el-button>
                </div>
            </div>

            <div class="hc-body-center-box" v-if="stepsKey === 1">
                <div class="hc-content-box">
                    <div class="text-gray mb-5">当前项目档案未通过四性检测，未达到移交条件</div>
                    <el-button type="primary" hc-btn>重新检测</el-button>
                </div>
            </div>

            <div class="hc-body-center-box is-action" v-if="stepsKey === 2 && stepsKeys === 1 ">
                <div class="hc-content-box form-apply">
                    <el-form ref="formApplyRef" :model="formApplyModel" :rules="formApplyRules" label-width="auto" size="large">
                        <el-form-item label="项目名称">
                            <el-input v-model="formApplyModel.name" placeholder="请输入项目名称"/>
                        </el-form-item>
                        <el-form-item label="档案形成时间">
                            <el-date-picker v-model="formApplyModel.date" class="block" type="datetime" format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss"/>
                        </el-form-item>
                        <el-form-item label="电子档案目录">
                            <el-input v-model="formApplyModel.num" placeholder="请填写份数"/>
                        </el-form-item>
                        <el-form-item label="档案移交时间">
                            <el-date-picker v-model="formApplyModel.date1" class="block" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                        </el-form-item>
                        <el-form-item label="档案卷数">
                            <el-input v-model="formApplyModel.num1" placeholder="请填写档案卷数"/>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="hc-action-box">
                    <el-button type="primary" hc-btn @click="stepsKeysClick(2)">下一步</el-button>
                    <el-button hc-btn>取消</el-button>
                </div>
            </div>

            <div class="hc-body-box is-action is-header" v-if="stepsKey === 2 && stepsKeys === 2">
                <div class="hc-header-box">
                    <div class="header">
                        <el-checkbox v-model="checked2" label="全部移交" class="size-xl"/>
                    </div>
                    <div class="extra">
                        <HcNewSwitch :datas="tabData" :keys="tabKey" @change="tabChange" :round="false"/>
                    </div>
                </div>
                <div class="hc-content-box hc-table-content-box">
                    <el-scrollbar>
                        <div class="hc-table-header text-lg font-bold">建设单位归档资料（1200卷）</div>
                        <div class="hc-table-title text-lg font-bold">一、立项审批（238卷）</div>
                        <div class="hc-table-ref-box">
                            <el-table ref="tableRef" hc :data="tableData" stripe row-key="id" :border="false" @selection-change="tableSelectionChange" style="width: 100%;">
                                <el-table-column type="selection" width="50"/>
                                <el-table-column type="index" prop="num" label="序号" width="80"/>
                                <el-table-column prop="key1" label="档号" width="180"/>
                                <el-table-column prop="key2" label="案卷题名"/>
                                <el-table-column prop="key3" label="总页数" width="120"/>
                                <el-table-column prop="key4" label="保管期限" width="120"/>
                                <el-table-column prop="key5" label="备注"/>
                            </el-table>
                        </div>
                        <div class="hc-table-title text-lg font-bold">二、勘察设计文件（95卷）</div>
                        <div class="hc-table-ref-box">
                            <el-table ref="tableRef" hc :data="tableData" stripe row-key="id" :border="false" @selection-change="tableSelectionChange" style="width: 100%;">
                                <el-table-column type="selection" width="50"/>
                                <el-table-column type="index" prop="num" label="序号" width="80"/>
                                <el-table-column prop="key1" label="档号" width="180"/>
                                <el-table-column prop="key2" label="案卷题名"/>
                                <el-table-column prop="key3" label="总页数" width="120"/>
                                <el-table-column prop="key4" label="保管期限" width="120"/>
                                <el-table-column prop="key5" label="备注"/>
                            </el-table>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="hc-action-box">
                    <el-button type="primary" hc-btn @click="stepsKeysClick(3)">下一步</el-button>
                    <el-button hc-btn>取消</el-button>
                </div>
            </div>

            <div class="hc-body-box is-action" v-if="stepsKey === 2 && stepsKeys === 3">
                <div class="hc-content-box">
                    <div class="is-xml-data flex">
                        <div class="flex-1 mr-6">
                            <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"/>
                        </div>
                        <el-button type="primary" round>封装XML信息包</el-button>
                    </div>
                    <div class="mt-5 text-dark-5 text-center">系统封装信息中........</div>
                </div>
                <div class="hc-action-box">
                    <el-button type="primary" hc-btn @click="stepClick(3)">下一步</el-button>
                    <el-button hc-btn>取消</el-button>
                </div>
            </div>

            <div class="hc-body-center-box" v-if="stepsKey === 3">
                <div class="hc-content-box">
                    <div class="text-3xl">档案馆接收状态：  未接收</div>
                </div>
            </div>

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

<script setup>
import {ref, onMounted} from "vue";
import {useRouter} from "vue-router";
import {useAppStore} from "~src/store";

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

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

})

//步骤条
const stepsKey = ref(0)
const stepClick = (index) => {
    stepsKey.value = index
    stepsKeys.value = 1
}

const stepsKeys = ref(1)
const stepsKeysClick = (val) => {
    stepsKeys.value = val
}


//去申请验收
const toTransferInitial = () => {
    router.push({
        name: 'transfer-initial'
    })
}

//提交验收报告
const formApplyRef = ref(null)
const formApplyModel = ref({})
const formApplyRules = {}

const checked2 = ref(false)
//tab数据和相关处理
const tabKey = ref('tab1')
const tabData = ref([
    {key:'tab1', name: '建设单位归档资料'},
    {key:'tab2', name: '监理单位归档资料'},
    {key:'tab3', name: '施工单位归档资料'},
    {key:'tab4', name: '科研、新技术资料'},
]);
const tabChange = (item) => {
    tabKey.value = item?.key;
}

const tableData = ref([
    {
        id: 1,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    }
])

//多选
const tableSelectionChange = (rows) => {
    let tableRows = rows.filter((item) => {
        return (item??'') !== '';
    })
    console.log(tableRows)
}



</script>

<style lang="scss" scoped>
.hc-steps-view {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e9e9e9;
}
.hc-body-center-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 105px);
    .hc-content-box {
        position: relative;
        text-align: center;
    }
    .form-apply {
        width: 500px;
    }
    .hc-action-box {
        position: absolute;
        bottom: -90px;
        width: 100%;
        padding-top: 24px;
        margin-top: 24px;
        text-align: right;
        border-top: 1px solid #e9e9e9;
    }
    &.is-action {
        height: calc(100% - 190px);
    }
}

.hc-body-box {
    position: relative;
    height: calc(100% - 105px);
    .hc-header-box {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        height: 40px;
        .header {
            position: relative;
            flex: 1;
        }
        .extra {
            position: relative;
        }
    }
    .hc-content-box {
        height: calc(100% - 105px);
        &.hc-table-content-box {
            .hc-table-header {
                background: #4C5BCF;
                color: white;
                text-align: center;
                padding: 10px 0;
            }
            .hc-table-title {
                background: #C9CDF1;
                color: white;
                padding: 10px;
            }
        }
    }
    .hc-action-box {
        position: relative;
        width: 100%;
        padding-top: 24px;
        margin-top: 24px;
        text-align: right;
        border-top: 1px solid #e9e9e9;
    }
}
.hc-body-box.is-action .hc-content-box {
    height: calc(100% - 90px);
}
.hc-body-box.is-header.is-action .hc-content-box {
    height: calc(100% - 150px);
}
</style>

<style lang="scss">
.hc-steps-view .el-steps {
    .el-step.is-horizontal .el-step__line {
        height: 4px;
        top: 14px;
    }
    .el-step__line-inner {
        border-width: 2px !important;
    }
    .el-step__icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .el-step__icon.is-text {
        border: 3px solid;
    }
    .el-step__head.is-finish {
        color: #1ECC95;
        border-color: #1ECC95;
    }
    .el-step__title.is-finish {
        color: #1ECC95;
    }
}
.is-xml-data {
    position: relative;
    padding-top: 140px;
    .el-progress-bar__outer {
        height: 45px !important;
        --el-border-color-lighter: #d9d9d9;
    }
    .el-progress-bar__inner {
        text-align: center;
        border-radius: 0;
    }
    .el-progress-bar__innerText {
        font-size: 16px;
    }
    .el-button {
        height: 45px;
    }
    .el-button.is-round {
        padding: 8px 25px;
        border-radius: 50px;
    }
}
</style>
