<template>
	<view>
		<van-sticky>
			<view class="top-bar justify-center bg-white sh">
				<van-icon class="top-left" name="arrow-left" @tap="goBack" />
				<view class="top-center">{{ state.title }}</view>
				<view class="top-right" @tap="goto('/pages/good/issue')">
					<view class="text-m">服务条款</view>
				</view>
			</view>
		</van-sticky>
		<view>
			<view class="justify-middle pd-h-25 mg-t-20 mg-h-20 mail_box" s>
				<van-image class="mail_bg" fit="cover" src="/static/img/brand_bg.png"/>
				<view class="mail_info justify-middle" style="margin-top: 10px;margin-bottom: 10px">
					<view class="mail_logo">
						<van-image fit="cover" width="120rpx" height="120rpx" round
							     :src="state.mail.logoUrl" />
					</view>
					<view class="mg-l-30 text-white text-xl">{{ state.mail.crocsAddress }}</view>
				</view>
			</view>
			<van-cell-group inset class="mail_detail mg-h-20">
				<van-cell class="pd-t-30" :title="state.mail.contactPhone" icon="phone-o">
					<template #value>
						<a v-if="state.mail.contactPhone" class="justify-end justify-middle"
						   :href="'tel:' + state.mail.contactPhone">
							<view class="call_button btn" style="border-radius: 10rpx;padding: 0rpx 15rpx;border: 1rpx solid #FE521F">一键拨打</view>
						</a>
					</template>
				</van-cell>
				<van-cell class="pd-b-30" :title="state.mail.companyAddress" icon="location-o" />
				<van-cell class="pd-b-30" value="查看" is-link @click="state.value='',state.showImg=true">
					<template #title>
						<img src="../../static/img/ico1.png" alt="" style="width: 18px;vertical-align: sub">
						证照信息
					</template>
				</van-cell>
			</van-cell-group>
		</view>
		<van-cell-group class="mg-h-0 mg-t-25" inset>
			<van-cell :border="false">
				<template #title>
					<view class="text-l">客服列表</view>
				</template>
			</van-cell>
			<van-divider class="mg-v-0" />
			<div style="position: relative">
				<van-cell v-for="item in state.service" class="justify-middle">
					<template #title>
						<view class="flex">
							<van-image class="pd-r-20" fit="cover" width="24px" height="24px" round
								     src="/static/img/contactor.png" />
							<view>
								<view class="text-l">{{ item.serviceName }}</view>
								<view class="text-s">
									<view v-if="item.serviceMobile" class="justify-middle">
										电话：{{ item.serviceMobile }}
										<a :href="'tel:' + item.serviceMobile"
										   class="justify-middle pd-l-20">
											<view class="call_button btn" style="border-radius: 10rpx;padding: 0rpx 15rpx;border: 1rpx solid #FE521F">一键拨打</view>
										</a>
									</view>
									<view v-if="item.serviceWechat">微信：{{ item.serviceWechat }}</view>
									<view v-if="item.qq">QQ&nbsp;&nbsp;：{{ item.qq }}</view>
								</view>
							</view>
						</view>
					</template>
					<template #right-icon>
						<van-image v-if="item.wechatQRUrl" fit="cover" height="120rpx" width="120rpx"
							     class="qrcode"
							     :src="item.wechatQRUrl"
							     loading-icon="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/default.png"
							     icon-size="120rpx" @tap="onImagePreview(item.wechatQRUrl)" />
					</template>
				</van-cell>
				<view v-if="state.service.length == 0" class="justify-center" style="height:400px">
					<van-image width="160px" class="mail_bg" fit="cover" src="/static/img/no_contact.png" />
					<view class="text-m text-darkGray pd-50">暂无任何客服信息喔~</view>
					<div style="text-align: center;width: 100%;margin-top: 30px">
						<p><img style="width: 20px;height: 20px;vertical-align: sub;margin-right: 10px" src="../../static/favicon.ico" alt=""><span style="color: #666666">提供技术支持</span></p>
						<p @click="gotoU" style="margin-top: 20px"><span style="color: #666666">资质与规则</span></p>
					</div>
				</view>
				<div v-if="state.service.length >0" style="text-align: center;width: 100%;margin: 30px auto">
					<p><img style="width: 20px;height: 20px;vertical-align: sub;margin-right: 10px" src="../../static/favicon.ico" alt=""><span style="color: #666666">提供技术支持</span></p>
					<p @click="gotoU" style="margin-top: 20px"><span style="color: #666666">资质与规则</span></p>
				</div>
			</div>
		</van-cell-group>
		<van-dialog :show="state.showImg" title="请输入验证码查看证照信息" show-cancel-button @confirm="confirm"
				@cancel="state.showImg=false">
			<div style="text-align: center">
				<div class="ValidCode disabled-select"
				     style="background: #fafafa;margin: 15px auto;width: 200px;height: 34px">
					<span v-for="(item, index) in state.codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
				</div>
				<p style="font-size: 14px;color: #666666;margin: 10px auto" @click="refreshCode">看不清？点击图片刷新</p>
				<van-field v-model="state.value" placeholder="请输入验证码"
					     style="width: 70%;border-bottom: 2px solid #fe9576;margin: 0 auto" />
			</div>
		</van-dialog>
		<to-top />
	</view>
</template>

<script setup lang="ts">
    import api from '@/api';
    import {onBeforeMount, reactive,} from 'vue';
    import toTop from '@/components/tool/toTop.vue';
    import {PageUtils} from '@/utils/utils';
    import {ImagePreview, Toast } from 'vant';
    import {onPageScroll} from '@dcloudio/uni-app'

    onPageScroll(e => {
    }) // uniapp的Bug，这句话不要去掉，否则to-top不生效
    const state = reactive({
        value: '',
        codeList: [],
        showImg: false,
        title: PageUtils.getTitle(),
        service: [] as any,
        mail: {} as any
    })
    onBeforeMount(() => {
        traDeManage()
        createdCode()
    })

    function gotoU() {
        uni.redirectTo({
            url: "/pages/my/technicalSupport?name=contact",
        });
    }
    function confirm() {
        let str = ''
        if(state.codeList.length>0){
            state.codeList.forEach(item=>{
                str+=item.code
            })
        }
        if(str.toLowerCase()==state.value.toLowerCase()){
            uni.navigateTo({
                url: "/pages/my/certificate",
            });
        }else {
            Toast.fail('请输入正确的验证码');
        }
    }

    function refreshCode() {
        createdCode()
    }

    function createdCode() {
        const len = 4
        const codeList = []
        const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
        const charsLen = chars.length
        // 生成
        for (let i = 0; i < len; i++) {
            const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
            codeList.push({
                code: chars.charAt(Math.floor(Math.random() * charsLen)),
                color: `rgb(${rgb})`,
                fontSize: `2${[Math.floor(Math.random() * 10)]}px`,
                padding: `${[Math.floor(Math.random() * 10)]}px`,
                transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
            })
        }
        // 指向
        state.codeList = codeList
    }

    function getStyle(data) {
        return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`

    }

    function traDeManage() {
        api.traDeManage({domain: uni.getStorageSync('subdomain')})
            .then((data: any) => {
                state.service = data.serviceList
                state.mail = data.brandMessage
            })
    }

    function onImagePreview(url: string) {
        ImagePreview({images: [url], closeable: true})
    }

    function goBack() {
        uni.navigateTo({
            url: "/pages/index",
        });
    }

    function goto(url: any) {
        url && uni.navigateTo({url})
    }
</script>

<style lang="scss" scoped>
	/*.ValidCode {*/
		/*display: flex;*/
		/*justify-content: center;*/
		/*align-items: center;*/
		/*cursor: pointer;*/
		/*span {*/
			/*display: inline-block;*/
		/*}*/
	/*}*/

	.mail_box {
		position: relative;
		height: 185 rpx;
		width: 100%;

		.mail_bg {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			width: calc(100vw - 40rpx);
			height: 260 rpx;
		}

		.mail_info {
			z-index: 1;

			.mail_logo {
				width: 118 rpx;
				height: 118 rpx;
				border: 4 rpx solid #fff;
				position: relative;
				border-radius: 50%;

				&::before {
					content: "";
					position: absolute;
					border-radius: 50%;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(180deg, #ffe5cd 0%, #ffb399 100%);
				}
			}
		}

		.mail_detail {
			width: 100%;
		}
	}

	.call_button {
		border-radius: 10 rpx;
		padding: 0 rpx 15 rpx;
		border: 1 rpx solid #FE521F;
		color: #FE521F;
		font-size: 12px;
		line-height: 20px;
	}

	.qrcode {
		border: 1 rpx solid #DDDDDD;
		border-radius: 10 rpx;
		padding: 10 rpx;
	}
</style>
