<template>
    <AppLayout title="" :use-scroll-view="false">
        <template #headerleft v-if="isMiniProgram">
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <template #headerright>
            <view class="btn mar_ri10">
                <image
                    src="@/static/icon/collect3.png"
                    v-if="!companyInfo.isCollection"
                    @click="companyCollection"
                ></image>
                <image src="@/static/icon/collect2.png" v-else @click="companyCollection"></image>
            </view>
        </template>
        <view class="content">
            <view class="content-top">
                <view class="companyinfo-left">
                    <image src="@/static/icon/companyIcon.png" mode=""></image>
                </view>
                <view class="companyinfo-right">
                    <view class="row1">{{ dataType === 2 ? companyInfo?.gsmc : companyInfo?.name }}</view>
                    <view class="row2">
                        <dict-tree-Label
                            v-if="companyInfo?.industry"
                            dictType="industry"
                            :value="companyInfo?.industry"
                        ></dict-tree-Label>
                        <span v-if="companyInfo?.industry">&nbsp;</span>
                        <dict-Label dictType="scale" :value="companyInfo?.scale"></dict-Label>
                        <span v-if="dataType === 2">{{ companyInfo.gsxy }}</span>
                    </view>
                </view>
            </view>
            <view class="conetent-info" :class="{ expanded: isExpanded }">
                <view class="info-title">公司介绍</view>
                <view class="info-desirption">{{ dataType === 2 ? companyInfo.qyxz : companyInfo.description }}</view>
            </view>
            <view class="expand" @click="expand">
                <text>{{ isExpanded ? '收起' : '展开' }}</text>
                <image
                    class="expand-img"
                    :class="{ 'expand-img-active': !isExpanded }"
                    src="@/static/icon/downs.png"
                ></image>
            </view>
            <scroll-view scroll-y class="Detailscroll-view" @scrolltolower="getJobsList('add')">
                <view class="views">
                    <view class="Detail-title"><text class="title">在招职位</text></view>
                    <!-- 根据 dataType 使用不同的职位列表组件 -->
                    <renderJobsOutData
                        v-if="dataType === 2 && pageState.list.length"
                        :list="pageState.list"
                        :longitude="longitudeVal"
                        :latitude="latitudeVal"
                    ></renderJobsOutData>
                    <renderJobs
                        v-else-if="dataType !== 2 && pageState.list.length"
                        :list="pageState.list"
                        :longitude="longitudeVal"
                        :latitude="latitudeVal"
                    ></renderJobs>
                    <empty v-else :is-position="true"></empty>
                </view>
            </scroll-view>
        </view>
    </AppLayout>
</template>

<script setup>
import point from '@/static/icon/point.png';
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { storeToRefs } from 'pinia';
const { isMiniProgram } = storeToRefs(useUserStore());
import useUserStore from '@/stores/useUserStore';
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { $api, navTo, vacanciesTo, navBack } = inject('globalFunction');

const isExpanded = ref(false);
const pageState = reactive({
    current: 0,
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
});
const companyInfo = ref({});
const pageOptions = ref({});
const dataType = ref(1); // 1: 原数据, 2: 第三方数据

onLoad((options) => {
    // console.log(options);
    dataType.value = options.dataType ? parseInt(options.dataType) : 1;
    pageOptions.value = options;

    if (dataType.value === 2) {
        // 第三方数据
        getCompanyInfo(options.companyId, options.zphId);
        getJobsList('refresh');
    } else {
        // 原数据
        getCompanyInfo(options.companyId || options.bussinessId);
    }
});

function companyCollection() {
    if (dataType.value === 2) {
        // 第三方数据收藏逻辑
        const id = companyInfo.value.id;
        const companyId = companyInfo.value.gsID;
        const zphId = companyInfo.value.zphID;
        if (companyInfo.value.isCollection) {
            $api.createRequest(`/app/company/collection/${id}/2`, {}, 'DELETE').then((resData) => {
                getCompanyInfo(companyId, zphId);
                $api.msg('取消收藏成功');
            });
        } else {
            $api.createRequest(`/app/company/collection/${id}/2`, {}, 'POST').then((resData) => {
                getCompanyInfo(companyId, zphId);
                $api.msg('收藏成功');
            });
        }
    } else {
        // 原数据收藏逻辑
        const companyId = companyInfo.value.companyId;
        if (companyInfo.value.isCollection) {
            $api.createRequest(`/app/company/collection/${companyId}/1`, {}, 'DELETE').then((resData) => {
                getCompanyInfo(companyId);
                $api.msg('取消收藏成功');
            });
        } else {
            $api.createRequest(`/app/company/collection/${companyId}/1`, {}, 'POST').then((resData) => {
                getCompanyInfo(companyId);
                $api.msg('收藏成功');
            });
        }
    }
}

function getCompanyInfo(...args) {
    if (dataType.value === 2) {
        // 第三方数据接口
        const [companyId, zphId] = args;
        $api.createRequest(`/app/internal/companyThirdPart/${companyId}/${zphId}`, {}, 'GET', true).then((resData) => {
            companyInfo.value = resData.data;
        });
    } else {
        // 原数据接口
        const [companyId] = args;
        $api.createRequest(`/app/company/${companyId}`, {}, 'GET', true).then((resData) => {
            companyInfo.value = resData.data;
            getJobsList();
        });
    }
}

function getJobsList(type = 'add') {
    if (dataType.value === 2) {
        // 第三方数据职位列表
        getThirdPartyJobsList(type);
    } else {
        // 原数据职位列表
        getOriginalJobsList(type);
    }
}

function getThirdPartyJobsList(type = 'add') {
    const { companyId, companyName, zphId } = pageOptions.value;

    if (type === 'refresh') {
        pageState.current = 1;
        pageState.maxPage = 1;
    }
    if (type === 'add' && pageState.current < pageState.maxPage) {
        pageState.current += 1;
    }

    let params = {
        current: pageState.current,
        pageSize: pageState.pageSize,
    };

    $api.createRequest(
        `/app/internal/jobThirdPart?gsID=${companyId}&gsmc=${companyName}&zphID=${zphId}`,
        params,
        'GET',
        true
    ).then((resData) => {
        const { rows, total } = resData;
        handleJobsListResponse(type, rows, total, 'current');
    });
}

function getOriginalJobsList(type = 'add') {
    if (type === 'refresh') {
        pageState.page = 1;
        pageState.maxPage = 1;
    }
    if (type === 'add' && pageState.page < pageState.maxPage) {
        pageState.page += 1;
    }

    let params = {
        current: pageState.page,
        pageSize: pageState.pageSize,
    };

    $api.createRequest(`/app/company/job/${companyInfo.value.companyId}`, params, 'GET', true).then((resData) => {
        const { rows, total } = resData;
        handleJobsListResponse(type, rows, total, 'page');
    });
}

function handleJobsListResponse(type, rows, total, pageKey) {
    if (type === 'add') {
        const str = pageState.pageSize * (pageState[pageKey] - 1);
        const end = pageState.list.length;
        const reslist = rows;
        pageState.list = [...pageState.list, ...rows];
        // pageState.list.splice(str, end, ...reslist);
    } else {
        pageState.list = rows;
    }
    pageState.total = total;
    pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
}

function expand() {
    isExpanded.value = !isExpanded.value;
}
</script>

<style lang="stylus" scoped>
.btnback{
    width: 64rpx;
    height: 64rpx;
}
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 52rpx;
    height: 52rpx;
}
image {
    height: 100%;
    width: 100%;
}
.content{
    height: 100%
    display: flex;
    flex-direction: column
    .content-top{
        padding: 28rpx
        padding-top: 50rpx
        display: flex
        flex-direction: row
        flex-wrap: nowrap
        .companyinfo-left{
            width: 96rpx;
            height: 96rpx;
            margin-right: 24rpx
        }
        .companyinfo-right{
            .row1{
                font-weight: 500;
                font-size: 32rpx;
                color: #333333;
            }
            .row2{
                font-weight: 400;
                font-size: 28rpx;
                color: #6C7282;
                line-height: 45rpx;
            }
        }
    }
    .conetent-info{
        padding: 0 28rpx
        overflow: hidden;
        max-height: 0rpx;
        transition: max-height 0.3s ease;
        .info-title{
            font-weight: 600;
            font-size: 28rpx;
            color: #000000;
        }
        .info-desirption{
            margin-top: 12rpx
            font-weight: 400;
            font-size: 28rpx;
            color: #495265;
            text-align: justified;
        }
        .title2{
            margin-top: 48rpx
        }
    }
    .expanded {
        max-height: 1000rpx;
    }
    .expand{
        display: flex
        flex-wrap: nowrap
        white-space: nowrap
        justify-content: center
        margin-top: 20rpx
        margin-bottom: 28rpx
        font-weight: 400;
        font-size: 28rpx;
        color: #256BFA;
        .expand-img{
            width: 40rpx;
            height: 40rpx;
        }
        .expand-img-active{
            transform: rotate(180deg)
        }
    }
}
.Detailscroll-view{
    flex: 1;
    overflow: hidden;
    background: #F4F4F4;
    .views{
        padding: 28rpx
        min-height: calc(100% - 56rpx)
        position: relative
        .Detail-title{
            font-weight: 600;
            font-size: 32rpx;
            color: #000000;
            position: relative;
            display: flex
            justify-content: space-between
            .title{
                position: relative;
                z-index: 2;
            }
        }
        .Detail-title::before{
            position: absolute
            content:  '';
            left: -14rpx
            bottom: 0
            height: 16rpx;
            width: 108rpx;
            background: linear-gradient(to right, #CBDEFF, #FFFFFF);
            border-radius: 8rpx;
            z-index: 1;
        }
        .cards{
            padding: 32rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            margin-top: 22rpx;
            .card-company{
                display: flex
                justify-content: space-between
                align-items: flex-start
                .company{
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #333333;
                }
                .salary{
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #4C6EFB;
                    white-space: nowrap
                    line-height: 48rpx
                }
            }
            .card-companyName{
                font-weight: 400;
                    font-size: 28rpx;
                color: #6C7282;
            }
            .card-tags{
                display: flex
                flex-wrap: wrap
                .tag{
                    width: fit-content;
                    height: 30rpx;
                    background: #F4F4F4;
                    border-radius: 4rpx;
                    padding: 6rpx 20rpx;
                    line-height: 30rpx;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #6C7282;
                    text-align: center;
                    margin-top: 14rpx;
                    white-space: nowrap
                    margin-right: 20rpx
                }
            }
            .card-bottom{
                margin-top: 32rpx
                display: flex
                justify-content: space-between
                font-size: 28rpx;
                color: #6C7282;
            }
        }
    }
}
</style>

<style lang="scss" scoped>
@media(min-width: 800px){
    .content{
        .content-top{
            .companyinfo-left{
                width: 140rpx;
                height: 140rpx;
            }
            .companyinfo-right{
                .row1{
                    margin-top: 10rpx;
                    font-size: 40rpx;
                }
                .row2{
                    margin-top: 10rpx;
                    font-size: 34rpx;
                }
            }
        }
    }
        .content{
        .locations{
            height: 120rpx;
             .location-info{
                 .info{
                    .info-title{
                        font-size: 36rpx;
                    }
                 }
             }
        }
        .expand{
            font-size: 36rpx;
            .expand-img{
                width: 50rpx;
                height: 50rpx;
            }
        }
        .conetent-info{
            .info-title{
               font-size: 36rpx;
               margin-top: 20rpx;
            }
            .info-desirption{
               font-size: 32rpx;
            }
            .card-times{
                    padding: 30rpx 90rpx;
                    .left-date{
                        font-size: 55rpx;
                    }
                    .left-dateDay{
                        font-size: 34rpx;
                    }
                    .line{
                       margin-top: 0;
                       width: 80rpx;
                       border-width: 4rpx;
                    }
                    .time-center{
                        .center-date{
                            font-size: 42rpx;
                        }
                        .center-dateDay{
                            width: fit-content;
                            font-size: 36rpx;
                        }
                    }
                }
        }
    }
    .Detailscroll-view{
        .views{
            .Detail-title{
                font-size: 40rpx;
            }
        }
    }
}
</style>
