<template>
    <div class="hc-page-layout-box">
        <div :class="isCard?'':'is-action'" class="hc-layout-left-box" style="width: 400px;">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="book-read"/>
                </div>
                <div class="ml-2 project-name-box">
                    <span class="text-xl text-cut project-alias">调卷抽检范围配置</span>
                    <div class="text-xs text-cut project-name text-orange">请勾选您所擅长或侧重想要查看的验收类别</div>
                </div>
            </div>
            <div class="hc-type-choose-content">
                <el-scrollbar>
                    <el-checkbox-group v-model="checkList" size="large" :disabled="!isNull">
                        <div v-for="item in checkData" :key="item.key" class="hc-type-choose-checkbox">
                            <el-checkbox :label="item.key">{{ item.name }}</el-checkbox>
                        </div>
                    </el-checkbox-group>
                </el-scrollbar>
            </div>
            <div class="hc-type-choose-tip text-orange">
                <div>提示：</div>
                <div class="text-2">1、勾选抽检侧重偏好，系统会自动根据您的偏好及案卷数量分配抽检范围</div>
                <div class="text-3">
                    2、若您勾选的侧重偏好与其他专家一致，系统会根据登录的先后顺序，优先分配；若系统检测您设置的偏好范围，未有可抽检的案卷，则系统会随机给您分配其他未抽检的案卷范围
                </div>
            </div>
            <div class="hc-type-choose-action">
                <el-button :disabled="checkList.length<=0" hc-btn @click="emptyTypeClick">
                    <HcIcon name="close"/>
                    <span>清空重置</span>
                </el-button>
                <el-button :disabled="checkList.length<=0" hc-btn type="primary" @click="confirmAllocationClick">
                    <HcIcon name="check"/>
                    <span>确认分配</span>
                </el-button>
            </div>
        </div>
        <div class="hc-page-content-box">
            <div class="arrow-right-icon-box" v-if="isCard">
                <HcIcon class="icon" name="arrow-right-circle"/>
            </div>

            <div v-if="isNull" class="hc-type-choose-null">
                <div class="null-flex-view">
                    <HcIcon class="icon" fill name="spam-2"/>
                    <div class="mt-4">请在左侧勾选您验收侧重范围</div>
                </div>
            </div>

            <HcCard v-if="isCard" scrollbar>
                <template #header>
                    <div class="title text-lg hc-card-header-title">
                        <HcIcon name="book-2"/>
                        <span class="ml-2">抽检目录范围</span>
                    </div>
                </template>
                <template #extra>
                    <span class="text-orange text-sm">为您分配抽检范围，若有异动，可手动勾选想要验收的部分</span>
                </template>

                <HcTree/>

                <template #action>
                    <div class="hc-card-action-diy">
                        <el-button hc-btn @click="clearResetClick">
                            <HcIcon name="refresh"/>
                            <span>清空重置</span>
                        </el-button>
                        <el-button hc-btn type="primary" @click="ToInspection">
                            <HcIcon name="check"/>
                            <span>确认并进入抽检</span>
                        </el-button>
                    </div>
                </template>
            </HcCard>
        </div>

        <HcLoading v-if="isLoading" num="76"></HcLoading>
    </div>
</template>

<script setup>
import {ref} from "vue";
import {useAppStore} from "~src/store";
import {useRouter} from "vue-router";
import HcTree from "./components/entry-sampling/hc-tree.vue";

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

//角色组
const checkList = ref([])
const checkData = ref([
    {name: '业主', key: '1'}, {name: '监理', key: '2'}, {name: '施工', key: '3'},
    {name: '影像', key: '4'}, {name: '竣工图', key: '5'},
])

//清空重置
const emptyTypeClick = () => {
    checkList.value = []
}

//是否显示
const isNull = ref(true)
const isCard = ref(false)
const isLoading = ref(false)

//确认分配
const confirmAllocationClick = () => {
    isNull.value = false
    isLoading.value = true
    setTimeout(() => {
        isCard.value = true
        isLoading.value = false
    }, 3000)
}

//确认并进入抽检
const ToInspection = () => {
    router.push({
        name: 'transfer-preliminary-examination'
    })
}

//清空重置
const clearResetClick = () => {
    isNull.value = true
    isLoading.value = false
    isCard.value = false
}
</script>

<style lang="scss" scoped>
@import '~style/transfer/scoped/entry-sampling.scss';
.hc-page-content-box {
    padding-left: 34px;
    .arrow-right-icon-box {
        position: absolute;
        left: -10px;
        z-index: 9;
        font-size: 30px;
        top: 10px;
        .icon {
            color: #e99d42;
        }
    }
}
</style>

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