<template>
    <view class="con-body">
        <view class="con-bg">
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'走访报告内容录入'" :leftFlag="true" :rightFlag="false"></customHeader>
            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>


            <!-- 日常走访 -->
            <view class="white-bg white-bg-2">
                <view class="w-b-title" @click="handleExpandRC">日常走访
                    <text>
                        {{ expandFlagRC ? '展开' : '收起' }}
                        <i :class="{ iconfont: true, 'icon-up': !expandFlagRC, 'icon-down': expandFlagRC }"></i>
                    </text>
                </view>
                <view v-show="!expandFlagRC" class="form-con">
                    <DailyVisitComponent :cusName="cusName" :cusId="cusId" :visistId="visistId" :status="status"
                        ref="dailyVisitComponentRef"></DailyVisitComponent>
                </view>

            </view>

            <!-- 业务招待 -->
            <view class="white-bg white-bg-2 white-bg-3">
                <view class="w-b-title" @click="handleExpandYW">业务招待
                    <text>
                        {{ expandFlagYW ? '展开' : '收起' }}
                        <i :class="{ iconfont: true, 'icon-up': !expandFlagYW, 'icon-down': expandFlagYW }"></i>
                    </text>
                </view>
                <view v-show="!expandFlagYW" class="form-con">
                    <YwVisistComponent :cusName="cusName" :cusId="cusId" :visistId="visistId" :status="status" ref="ywVisitComponentRef">
                    </YwVisistComponent>
                </view>
            </view>

            <!-- 技术交流 -->
            <view class="white-bg white-bg-2 white-bg-3">
                <view class="w-b-title" @click="handleExpandJS">技术交流
                    <text>
                        {{ expandFlagJS ? '展开' : '收起' }}
                        <i :class="{ iconfont: true, 'icon-up': !expandFlagJS, 'icon-down': expandFlagJS }"></i>
                    </text>
                </view>
                <view v-show="!expandFlagJS" class="form-con">
                    <JsVisistComponent :cusName="cusName" :cusId="cusId" :visistId="visistId" :status="status" ref="jsVisitComponentRef">
                    </JsVisistComponent>
                </view>
            </view>


            <!-- 来厂参观 -->
            <view class="white-bg white-bg-2 white-bg-3">
                <view class="w-b-title" @click="handleExpandLC">来厂参观
                    <text>
                        {{ expandFlagLC ? '展开' : '收起' }}
                        <i :class="{ iconfont: true, 'icon-up': !expandFlagLC, 'icon-down': expandFlagLC }"></i>
                    </text>
                </view>
                <view v-show="!expandFlagLC" class="form-con">
                    <LcVisistComponent :cusName="cusName" :cusId="cusId" :visistId="visistId" :status="status" ref="lcVisitComponentRef">
                    </LcVisistComponent>
                </view>
            </view>


            <!-- 党建活动 -->
            <view class="white-bg white-bg-2 white-bg-3">
                <view class="w-b-title" @click="handleExpandDJ">党建活动
                    <text>
                        {{ expandFlagDJ ? '展开' : '收起' }}
                        <i :class="{ iconfont: true, 'icon-up': !expandFlagDJ, 'icon-down': expandFlagDJ }"></i>
                    </text>
                </view>
                <view v-show="!expandFlagDJ" class="form-con">
                    <DjVisistComponent :cusName="cusName" :cusId="cusId" :visistId="visistId" :status="status" ref="djVisitComponentRef">
                    </DjVisistComponent>
                </view>
            </view>

            <!-- 文体活动 -->
            <view class="white-bg white-bg-2 white-bg-3">
                <view class="w-b-title" @click="handleExpandWT">文体活动
                    <text>
                        {{ expandFlagWT ? '展开' : '收起' }}
                        <i :class="{ iconfont: true, 'icon-up': !expandFlagWT, 'icon-down': expandFlagWT }"></i>
                    </text>
                </view>
                <view v-show="!expandFlagWT" class="form-con">
                    <WTVisistComponent :cusName="cusName" :cusId="cusId" :visistId="visistId" :status="status" ref="wtVisitComponentRef">
                    </WTVisistComponent>
                </view>
            </view>


            <!-- 联谊活动 -->
            <view class="white-bg white-bg-2 white-bg-3">
                <view class="w-b-title" @click="handleExpandLY">联谊活动
                    <text>
                        {{ expandFlagLY ? '展开' : '收起' }}
                        <i :class="{ iconfont: true, 'icon-up': !expandFlagLY, 'icon-down': expandFlagLY }"></i>
                    </text>
                </view>
                <view v-show="!expandFlagLY" class="form-con">
                    <LyVisistComponent :cusName="cusName" :cusId="cusId" :visistId="visistId" :status="status" ref="lyVisitComponentRef">
                    </LyVisistComponent>
                </view>
            </view>

        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onUnmounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import DailyVisitComponent from './components/dailyVisitComponent.vue';
import { onLoad } from '@dcloudio/uni-app';
import cache from '../../../../utils/cache';
import YwVisistComponent from './components/ywVisistComponent.vue';
import JsVisistComponent from './components/jsVisistComponent.vue';
import LcVisistComponent from './components/lcVisistComponent.vue';
import DjVisistComponent from './components/djVisistComponent.vue';
import WTVisistComponent from './components/wtVisistComponent.vue';
import LyVisistComponent from './components/lyVisistComponent.vue';

const cusName = ref()
const cusId = ref()
const visistId = ref()
const status = ref()
onLoad(options => {
    cusName.value = options.cusName
    cusId.value = options.cusId
    visistId.value = options.visistId
    status.value = options.status
})

// 日常走访
const dailyVisitComponentRef = ref(null)
let expandFlagRC = ref(true);
let handleExpandRC = () => {
    expandFlagRC.value = !expandFlagRC.value;
    if (expandFlagRC.value) {
        //收缩的时候，删除内容
        dailyVisitComponentRef.value.handleDelete()
    } else {
        //展开的时候，查询内容
        if (dailyVisitComponentRef.value) {
            dailyVisitComponentRef.value.getRCVisitReportDetailContent()
        }
    }
}

// 业务招待
const ywVisitComponentRef = ref(null)
let expandFlagYW = ref(true);
let handleExpandYW = () => {
    expandFlagYW.value = !expandFlagYW.value;
    if (expandFlagYW.value) {
        //收缩的时候，删除内容
        ywVisitComponentRef.value.handleDelete()
    } else {
        //展开的时候，查询内容
        if (ywVisitComponentRef.value) {
            ywVisitComponentRef.value.getYWVisitReportDetailContent()
        }
    }
}

// 技术交流
const jsVisitComponentRef = ref(null)
let expandFlagJS = ref(true);
let handleExpandJS = () => {
    expandFlagJS.value = !expandFlagJS.value;
    if (expandFlagJS.value) {
        //收缩的时候，删除内容
        jsVisitComponentRef.value.handleDelete()
    } else {
        //展开的时候，查询内容
        if (jsVisitComponentRef.value) {
            jsVisitComponentRef.value.getJSVisitReportDetailContent()
        }
    }
}

// 来厂参观
const lcVisitComponentRef = ref(null)
let expandFlagLC = ref(true);
let handleExpandLC = () => {
    expandFlagLC.value = !expandFlagLC.value;
    if (expandFlagLC.value) {
        //收缩的时候，删除内容
        lcVisitComponentRef.value.handleDelete()
    } else {
        //展开的时候，查询内容
        if (lcVisitComponentRef.value) {
            lcVisitComponentRef.value.getLCVisitReportDetailContent()
        }
    }
}

// 党建活动
const djVisitComponentRef = ref(null)
let expandFlagDJ = ref(true);
let handleExpandDJ = () => {
    expandFlagDJ.value = !expandFlagDJ.value;
    if (expandFlagDJ.value) {
        //收缩的时候，删除内容
        djVisitComponentRef.value.handleDelete()
    } else {
        //展开的时候，查询内容
        if (djVisitComponentRef.value) {
            djVisitComponentRef.value.getDJVisitReportDetailContent()
        }
    }
}

// 文体活动
const wtVisitComponentRef = ref(null)
let expandFlagWT = ref(true);
let handleExpandWT = () => {
    expandFlagWT.value = !expandFlagWT.value;
    if (expandFlagWT.value) {
        //收缩的时候，删除内容
        wtVisitComponentRef.value.handleDelete()
    } else {
        //展开的时候，查询内容
        if (wtVisitComponentRef.value) {
            wtVisitComponentRef.value.getWTVisitReportDetailContent()
        }
    }
}

// 联谊活动
const lyVisitComponentRef = ref(null)
let expandFlagLY = ref(true);
let handleExpandLY = () => {
    expandFlagLY.value = !expandFlagLY.value;
    if (expandFlagLY.value) {
        //收缩的时候，删除内容
        lyVisitComponentRef.value.handleDelete()
    } else {
        //展开的时候，查询内容
        if (lyVisitComponentRef.value) {
            lyVisitComponentRef.value.getLYVisitReportDetailContent()
        }
    }
}

//离开页面时，删除local缓存
onUnmounted(() => {
    removeRCCache();
    removeYWCache();
    removeJSCache();
    removeLCCache();
    removeDJCache();
    removeWTCache();
    removeLYCache();
})

//删除日常缓存
function removeRCCache() {
    cache.remove('checkedRCClientList');
    cache.remove('checkedRCMyUserList');
    cache.remove('checkedRCActivityTypeList')
}

//删除业务缓存
function removeYWCache() {
    cache.remove('checkedYWClientList');
    cache.remove('checkedYWMyUserList');
}

//删除技术缓存
function removeJSCache() {
    cache.remove('checkedJSClientList');
    cache.remove('checkedJSMyUserList');
}

//删除来厂缓存
function removeLCCache() {
    cache.remove('checkedLCClientList');
    cache.remove('checkedLCMyUserList');
}

//删除党建缓存
function removeDJCache() {
    cache.remove('checkedDJClientList');
    cache.remove('checkedDJMyUserList');
}

//删除文体缓存
function removeWTCache() {
    cache.remove('checkedWTClientList');
    cache.remove('checkedWTMyUserList');
}

//删除联谊缓存
function removeLYCache() {
    cache.remove('checkedLYClientList');
    cache.remove('checkedLYMyUserList');
}




</script>

<style scoped>
.white-bg {
    width: 690rpx;
    margin: 0;
    border-radius: 8px 8px 0 0;
}

.white-bg.white-bg-2 {
    margin-bottom: 20rpx;
}

.white-bg.white-bg-3 {
    border-radius: 0
}

.white-bg .w-b-title {
    color: #3384DF;
    font-size: 38rpx;
}

.form-con {
    padding: 30rpx 0 0;
}

:deep(.form-con .uni-forms-item) {
    margin-bottom: 22px !important;
}
</style>