<template>
    <view :style="themeColor">
        <view class="about w100">
            <view class="bg border-top"></view>
            <view class="list_cotact padding-top">
                <view class="container">
                    <!-- 专属客服 + 在线留言 -->
                    <!-- #ifdef H5 -->
                    <view class="view_ul view_ul_one clearfix">
                        <view @click="tapMessage" class="view_li w50_li  text-center"
                            style="background: #1daa39;width: 100%;border-radius: 10rpx;">
                            <view class="bl bor" style="box-sizing: border-box;">
                                <image mode="heightFix" :src="$util.img('public/static/img/liuyan.png')"></image>
                                <view class="name bl line1" style="margin-top: 6rpx;">{{ $lang('onlineMessage') }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <view class="view_ul view_ul_one clearfix">
                        <view class="view_li w50_li  text-center">
                            <button class="bl bor" hoverClass="none" openType="contact" sessionFrom="weapp"
                                showMessageCard="true" style="margin: 0;">
                                <image mode="heightFix" :src="$util.img('public/static/img/kefu.png')"></image>
                                <view class="name bl line1">{{ $lang('exclusiveCustomerService') }}</view>
                            </button>
                        </view>
                        <view @click="tapMessage" class="view_li w50_li  text-center">
                            <view class="bl bor" style="box-sizing: border-box;">
                                <image mode="heightFix" :src="$util.img('public/static/img/liuyan.png')"></image>
                                <view class="name bl line1" style="margin-top: 6rpx;">{{ $lang('onlineMessage') }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- #endif -->

                    <!-- 人员信息/名片 -->
                    <view class="view_ul_100" v-for="(item, index) in dataList" :key="index"
                        style="margin-bottom: 20rpx;">

                        <view class="bl clearfix bor bg-white"
                            :style="{ backgroundImage: ' url(' + $util.img(personnel_bg) + ')', backgroundSize: '100% 100%' }">
                            <view class="fr">

                                <view class="text" style="font-size: 40rpx;font-weight: 600;color:#333">
                                    {{ item.realname }}</view>
                                <view class="text">{{ item.position }}</view>
                                <!--   <view class="text">{{item.mobile_text}}：{{item.mobile}}</view> -->
                                <view class="text" style="padding-bottom:20rpx;color:#0054a5">{{ item.address }}</view>
                                <view class="contact_name" v-if="item.mobile"
                                    style="padding-top:30rpx;padding-bottom:0rpx;border-top: solid 1px #eee;font-size:28rpx;display: flex;">
                                    <image mode="widthFix" :src="$util.img('public/static/img/boda.png')"
                                        style="margin-top: 8rpx;margin-right: 10rpx;"></image>
                                    <view style="flex: 1;">{{ item.mobile }}</view>
                                    <view class="btn-container" @click="Tel(item.mobile)"><span class="contact-btn" style="background: #0054a5;">{{ $lang('call') }}</span>
                                    </view>
                                </view>
                                <view class="contact_name" v-if="item.email"
                                    style="padding-top:20rpx;padding-bottom:20rpx;font-size:28rpx;display: flex;">
                                    <image mode="widthFix" :src="$util.img('public/static/img/emall.png')"
                                        style="margin-top: 8rpx;margin-right: 10rpx;"></image>
                                    <view style="flex: 1;">{{ item.email }}</view>
                                    <view class="btn-container" @click="copy(item.email)"><span class="contact-btn" style="background: #0054a5;">{{ $lang('copy') }}</span>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 企业文件 -->
                    <view class="view_files_container" v-if="showFileListDiy && fileList.length > 0">
                        <view class="section-title">企业文件</view>
                        <view class="files-list">
                            <view v-for="(file, index) in fileList" :key="index" class="file-item">
                                <image mode="aspectFill" :src="$util.img('public/static/img/pdf-icon.png')" class="file-icon"></image>
                                <view class="file-info">
                                    <view class="file-name">{{ file.name }}</view>
                                    <view class="file-actions">
                                        <button class="file-btn share-btn" @click="shareFile(file)">{{ $lang('share') }}</button>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 企业视频 -->
                    <view class="view_videos_container" v-if="showVideoListDiy && videoList.length > 0">
                        <view class="section-title">企业视频</view>
                        <view class="videos-list">
                            <view v-for="(video, index) in videoList" :key="index" class="video-item" @click="playVideo(video)">
                                <image mode="aspectFill" :src="video.coverUrl" class="video-cover"></image>
                                <view class="video-play-btn">
                                    <image mode="aspectFill" :src="$util.img('public/static/img/play-icon.png')" class="play-icon"></image>
                                </view>
                                <view class="video-title">{{ video.title }}</view>
                            </view>
                        </view>
                    </view>                     

                    <!-- 视频号视频列表 -->
                    <view class="view_channel_container" v-if="showChannelListDiy && channelList.length > 0">
                        <diy-channel-list :value="{
                            showStyle: 'fixed',
                            rowCount: 1,
                            list: channelList,
                        }" @channel-video-click-play="onChannelVideoClickPlay"/>
                    </view>

                    <!-- 地图 -->
                    <map v-if="shop.longitude > 0 && shop.latitude > 0 && ismessage == 0" id="map"
                        style="width: 100%; height:400rpx" scale="12" :markers="markers" bindupdated="bindupdated"
                        :longitude="shop.longitude" :latitude="shop.latitude" show-location>
                        <cover-view
                            style="position:absolute;right:10px;bottom:30rpx;z-index:9;background:#4d83ff;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;"
                            @click="tomap"><cover-view style="font-size:24rpx">{{ $lang('oneClickNavigation') }}</cover-view>
                        </cover-view>
                    </map>
                </view>

            </view>
		</view>
        <!--留言弹窗-->
        <view class="goods-sku">
            <uni-popup ref="informationPopup" type="bottom" @change="change">
                <view class="liuyan-popup-layer popup-layer">
                    <view class="head-wrap" @click="closeinformationPopup()">
                        <text>{{ $lang('onlineMessage') }}</text>
                        <text class="iconfont icon-close"></text>
                    </view>
                    <scroll-view scroll-y class="liuyan-body">
                        <view style="padding: 0 30rpx;">
                            <view class="fui-cell-group">
                                <view class="fui-cell  ">
                                    <view class="fui-cell-label ">{{ $lang('name') }}</view>
                                    <view class="fui-cell-info">
                                       <input 
                                         id="input-realname"
                                         :value="Form.realname"
                                         @input="e => Form.realname = e.detail.value"
                                         class="fui-input" 
                                         :placeholder="$lang('pleaseEnterName')"
                                         :key="formKey"
                                       />
                                    </view>
                                </view>
                                <view class="fui-cell ">
                                    <view class="fui-cell-label">{{ $lang('contactInfo') }}</view>
                                    <view class="fui-cell-info">
                                        <input 
                                          id="input-mobile"
                                          :value="Form.mobile"
                                          @input="e => Form.mobile = e.detail.value"
                                          class="fui-input" 
                                          maxlength="11" 
                                          :placeholder="$lang('pleaseEnterMobile')" 
                                          type="number"
                                          :key="formKey"
                                        />
                                    </view>
                                </view>
                                <view class="fui-cell ">
                                    <view class="fui-cell-label" style="position: absolute;top:10px">{{ $lang('messageContent') }}</view>
                                    <view class="fui-cell-info" style="margin-left: 160rpx;border: solid 2rpx #eee;">
                                    <!-- <input v-model="Form.mailbox"  class="fui-input" placeholder="请输入您的邮箱" type="text" ></input> -->
                                       <textarea 
                                         id="textarea-remark"
                                         :value="Form.remark"
                                         @input="e => Form.remark = e.detail.value"
                                         class="textarea" 
                                         :placeholder="$lang('pleaseEnterMessage')" 
                                         style="font-size: 28rpx;padding: 10rpx;"
                                         :key="formKey"
                                       ></textarea>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                    <view class="button-box"><button type="primary" @click="save()">{{ $lang('submit') }}</button></view>
                </view>
            </uni-popup>
        </view>
        <to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
        <hover-nav></hover-nav>
        <diy-bottom-nav></diy-bottom-nav>

        <!-- 视频播放弹窗 -->
        <ns-video-player-popup 
            ref="videoPlayerPopup" 
            :current-video="currentVideo"
            @popup-change="onVideoPopupChange"
        ></ns-video-player-popup>
    </view>
</template>

<script>
import scroll from '@/common/js/scroll-view.js';
import shareUtil from '@/common/js/share.js';

export default {
    mixins: [scroll],
    data() {
        return {
            minScrollTop: 100,

            showKefuDiy: true,          // 是否显示客服及留言
            showContactListDiy: true,   // 是否显示联系人列表
            showMapDiy: false,          // 是否显示地图
            showVideoListDiy: false,    // 是否显示企业视频
            showFileListDiy: false,     // 是否显示企业文件
            showChannelListDiy: false,  // 是否显示视频号

            dataList: [], // 电子名片信息
            fileList: [], // 企业文件
            videoList: [], // 企业视频
            channelList: [], // 视频号
            ismessage: 0,
            currentVideo: null, // 当前播放的视频
            Form: {
                realname: '',
                mobile: '',
                remark: ''
            },
            formKey: Date.now(),
            markers: [
                {
                    id: 1,
                   /*	width:20, //宽度
						height:20, //高度*/
					//	iconPath: '../../static/goal_weizhi.png', //目标位置图标路径
					//这里的经纬度是 目的地 的经纬度
                    latitude: 0,
                    longitude: 0,
                    callout: {
						/* 	title:123,
							content:'123' */
					}
                }
            ],
            landline: 0,
            shop: {
                latitude: 0,
                longitude: 0,
            },
            personnel_bg: ''
        };
    },
    onLoad(option) {
        this.$langConfig.refresh();
        this.$api.sendRequest({
            url: '/api/member/personnel',
            success: res => {
                if (res.code == 0) {
                    this.dataList = res.data; // 电子名片信息
                    this.fileList = res.file_list; // 企业文件
                    this.videoList = res.video_list; // 企业视频
                    this.channelList = res.channel_list.map(item => this.$util.snakeToCamelForObj(item)).map(item => {
                        if (item.coverImageType === 'upload') {
                            item.coverUrl = this.$util.img(item.coverUrl);
                        }
                        if (item.avatarImageType === 'upload') {
                            item.avatarUrl = this.$util.img(item.avatarUrl);
                        }
                        // #ifdef MP-WEIXIN
                        // item.embedMode = Boolean(item.feedToken);
                        item.finderUserName = item.channelName;
                        // #endif
                        return item;
                    }); // 视频号

                    this.shop = res.shop;
                    this.personnel_bg = res.set.personnel_bg ? res.set.personnel_bg : 'public/static/img/diy_view/member_info_bg.png';
                    this.markers = [{
                        id: 1,
                        latitude: this.shop.latitude,
                        longitude: this.shop.longitude
                    }];

                    // 设置是否展示各模块
                    this.showKefuDiy = res.diy.is_kefu == 1;
                    this.showContactListDiy = res.diy.is_contact == 1;
                    this.showMapDiy = res.diy.is_map == 1;
                    this.showVideoListDiy = res.diy.is_video == 1;
                    this.showFileListDiy = res.diy.is_file == 1;
                    this.showChannelListDiy = res.diy.is_channel == 1; 
                }
            },
            fail: res => {}
        });
    },
    methods: {
        // 分享文件
        shareFile(file) {
            shareUtil.shareFile(file);
        },

        onChannelVideoClickPlay(item) {
            this.$api.sendRequest({
                url: '/api/member/incrementChannelViewCount',
                data: {
                    channel_id: item.channelId
                },
                success: res => {
            
                },
                fail: res => {
                }
            });
        },

        // 播放视频
        playVideo(video) {
            // 实现视频播放逻辑
            if (video.videoUrl) {
                this.currentVideo = video;
                this.$refs.videoPlayerPopup.open();
            } else {
                uni.showToast({ title: '视频地址不存在', icon: 'none' });
            }
        },

        // 关闭视频弹窗
        closeVideoPopup() {
            this.$refs.videoPlayerPopup.close();
        },

        // 视频弹窗状态变化
        onVideoPopupChange(e) {
            if (!e.show) {
                // 弹窗关闭时重置当前视频
                this.currentVideo = null;
            }
        },            
        save() {
            if (!this.Form.realname.trim()) {
                uni.showToast({ title: '请填写姓名', icon: 'none' });
                return;
            }
            if (!this.Form.mobile || !/^1[3-9]\d{9}$/.test(this.Form.mobile)) {
                uni.showToast({ title: '手机号格式不正确', icon: 'none' });
                return;
            }
            if (!this.Form.remark.trim()) {
                uni.showToast({ title: '请填写留言内容', icon: 'none' });
                return;
            }
            this.$api.sendRequest({
                url: '/api/member/message',
                data: this.Form,
                success: res => {
                    uni.showToast({ title: res.message || '提交成功', icon: 'success' });


                    // 重置表单数据
                    this.Form = { realname: '', mobile: '', remark: '' };
                    this.formKey = Date.now();

                    // 关闭弹窗
                    this.$refs.informationPopup.close();

                    // 微信小程序：延迟清空原生输入框（确保 DOM 已更新）
                    // #ifdef MP-WEIXIN
                    setTimeout(() => {
                        this.clearInputValues();
                    }, 100);
                    // #endif
                },
                fail: () => {
                    uni.showToast({ title: '提交失败，请重试', icon: 'none' });
                }
            });
        },

        change(e) {
            this.ismessage = e.show ? 1 : 0;
        },

        tapMessage() {
            // 重置数据
            this.Form = { realname: '', mobile: '', remark: '' };
            this.formKey = Date.now();
            this.ismessage = 1;
            this.$refs.informationPopup.open();

            // 微信小程序：打开后清空原生输入框
            // #ifdef MP-WEIXIN
            setTimeout(() => {
                this.clearInputValues();
            }, 300); // 确保弹窗已渲染
            // #endif
        },

        closeinformationPopup() {
            this.ismessage = 0;
            this.$refs.informationPopup.close();

            // 微信小程序：关闭后也清空（防止下次打开残留）
            // #ifdef MP-WEIXIN
            setTimeout(() => {
                this.clearInputValues();
            }, 100);
            // #endif
        },

        // 专门用于微信小程序清空原生 input/textarea
        clearInputValues() {
            // #ifdef MP-WEIXIN
            const query = uni.createSelectorQuery().in(this);

            // 分别清空每个输入框
            ['input-realname', 'input-mobile', 'textarea-remark'].forEach(id => {
                query.select('#' + id).fields({ node: true }, (res) => {
                    if (res && res.node) {
                        res.node.value = '';
                    }
                }).exec();
            });
            // #endif
        },

        Tel(m) {
            uni.makePhoneCall({
                phoneNumber: m + '',
                success(e) {
                    console.log(e);
                }
            });
        },

        copy(text) {
            uni.setClipboardData({
                data: text,
                success: () => {
                    uni.showToast({
                        title: this.$lang('copySuccess'),
                        icon: 'success',
                        duration: 2000
                    });
                },
                fail: (err) => {
                    uni.showToast({
                        title: err.message || err.errMsg || this.$lang('copyFailed'),
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        },

        tomap() {
            uni.openLocation({
                latitude: parseFloat(this.shop.latitude),
                longitude: parseFloat(this.shop.longitude),
                name: this.$lang('oneClickNavigation'),
            });
        }
    }
};
</script>

<style lang="scss">
// 留言
.liuyan-popup-layer {
    height: 660rpx;

    .free-tip {
        min-width: 72rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        border: none;
        padding: 8rpx 8rpx;
        border-radius: $border-radius;
        margin-right: 20rpx;
        font-size: $font-size-activity-tag;
        display: inline-block;
        font-weight: bold;
        color: var(--main-color);
        background-color: var(--main-color-shallow);
    }

    .liuyan-body {
        position: absolute;
        left: 0;
        right: 0;
        height: 60%;

        .item {
            padding: $padding 0;
            margin: 0 30rpx;
            border-bottom: 1px solid $color-line;

            .value {
                margin-left: 20rpx;
            }

            &:last-child {
                border-bottom: 0;
            }
        }
    }
}

.popup-layer {
    background: #fff;

    .head-wrap {
        font-size: $font-size-toolbar;
        line-height: 100rpx;
        height: 100rpx;
        display: block;
        text-align: center;

        .iconfont {
            position: absolute;
            float: right;
            right: 44rpx;
            font-size: $font-size-toolbar;
        }
    }

    .button-box {
        width: 100%;
        position: absolute;
        bottom: 0;
        z-index: 1;
        margin-bottom: 30rpx;

        button {
            height: 80rpx;
            background-color: var(--goods-btn-color);
        }
    }
}

button,
image,
input,
label,
navigator,
scroll-view,
swiper,
textarea,
view {
    box-sizing: border-box;
}

.w100 {
    width: 100%;
    padding-bottom: 60rpx;
}

.bg {
    /* background: #5dc2d0;*/
}

.border-top {
    border-top: 1px solid rgba(78, 78, 78, .1);
}

.padding-top {
    padding-top: 30rpx;
}

.container {
    align-items: center;
    box-sizing: border-box;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding: 0 30rpx;
    width: 100% !important;
}

.clearfix {
    zoom: 1;
    overflow: hidden;
}

.text-center {
    text-align: center;
}

.w50_li {
    float: left;
    margin-bottom: 20rpx;
    width: 50%;
}

.w50_li:nth-child(odd) {
    padding-right: 20rpx;
}

.bl {
    display: block;
}

.bor {
    border-radius: 10rpx;
}

image {
    display: inline-block;
    max-width: 100%;
    position: relative;
    z-index: 0;
}
image {
	max-width: 100%;
}

.bl {
	display: block;
}

.line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*--当前页面css--*/

.list_cotact .view_ul_one .bor {
    padding: 40rpx;
}

.list_cotact .bor image {
    height: 60rpx;
}

.list_cotact .bor .name,
.view_ul_100 .name {
    font-size: 32rpx;
    line-height: 44rpx;
    margin-top: 20rpx;
    color: #fff
}

.list_cotact .view_ul_one .view_li:nth-child(1)>button {
    background: #0054a5;
    height: 200rpx;
    line-height: 20rpx;
}

.list_cotact .view_ul_one .view_li:nth-child(2) {
    background: #1daa39;
    height: 200rpx;
    line-height: 20rpx;
    border-radius: 10rpx;
}
.view_ul_100 .fl {
	width: 10%;
}

.view_ul_100 .fr {
/*  padding-left: 30rpx;*/
    width: 100%;
}

.view_ul_100>view {
    background: #fff;
    // box-shadow: 5rpx 5rpx 10rpx #dcdcdc;
}

.view_ul_100 .text {
    color: rgba(71, 71, 71, .79);
    font-size: 24rpx;
    margin-top: 10rpx;
}

.list_cotact .view_ul_100 .name {
    margin-top: 0;
}

.list_cotact .view_ul_100>view {
    padding: 20rpx 30rpx 0rpx 30rpx;
}
.list_cotact .view_ul_two .view_li>view {
	background-color: #fff;
	padding: 20rpx 30rpx 0rpx 30rpx;
}

.list_cotact .view_ul_two .view_li>view .address {
	background-color: #5dc2d0;
	color: #fff;
	display: inline-block;
	font-size: 28rpx;
	line-height: 48rpx;
	margin-bottom: 30rpx;
	padding: 0 30rpx;
	width: auto;
}

.view_ul_two {
	margin-top: 20rpx;
}
.contact_name {
    color: rgba(71, 71, 71, .79);
    font-size: 24rpx;
    line-height: 36rpx;
    padding-left: 0rpx;
}

.btn-container {
    white-space: nowrap;
    min-width: 140rpx;
    width: max-content;
    margin-top: 0rpx;
    margin-left: 10rpx;
    font-size: 26rpx;
    text-align: center;
}

.contact-btn {
    color: #fff;
    font-size: 24rpx;
    border-radius: 50rpx;
    width: 160rpx;
    display: inline-block;
    text-align: center;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15), 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
}

.contact_name image {
    opacity: .79;
    width: 30rpx;
}

.message {
    border-radius: 50%;
    bottom: 50%;
    height: 90rpx;
    line-height: 74rpx;
    position: fixed;
    right: 30rpx;
    text-align: center;
    width: 90rpx;
    z-index: 9999;
}
</style>

<style lang="scss" scoped>
/* 企业文件样式 */
.view_files_container {
    margin-top: 30rpx;
    padding: 0 30rpx;

    .section-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 20rpx;
    }

    .files-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
    }

    .file-item {
        width: calc(50% - 10rpx);
        background-color: #fff;
        border-radius: 10rpx;
        padding: 20rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
    }

    .file-icon {
        width: 60rpx;
        height: 80rpx;
        margin-right: 20rpx;
    }

    .file-info {
        flex: 1;
    }

    .file-name {
        font-size: 24rpx;
        color: #333;
        margin-bottom: 10rpx;
        line-height: 1.3;
    }

    .file-actions {
        display: flex;
        gap: 10rpx;
    }

    .file-btn {
        font-size: 20rpx;
        padding: 6rpx 12rpx;
        border-radius: 4rpx;
        border: none;
    }

    .share-btn {
        background-color: #f0f0f0;
        color: #666;
    }


}

/* 企业视频样式 */
.view_videos_container {
    margin-top: 30rpx;
    padding: 0 30rpx;

    .section-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 20rpx;
    }

    .videos-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
    }

    .video-item {
        width: calc(33.333% - 14rpx);
        position: relative;
    }

    .video-cover {
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 8rpx;
    }

    .video-play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60rpx;
        height: 60rpx;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .play-icon {
        width: 24rpx;
        height: 24rpx;
    }

    .video-title {
        font-size: 22rpx;
        color: #333;
        margin-top: 10rpx;
        text-align: center;
        line-height: 1.3;
    }
}



/deep/ .mescroll-totop {
    right: 27rpx !important;
    /* #ifdef H5 */
    bottom: 120rpx !important;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    bottom: 180rpx !important;
    /* #endif */
}

</style>